jQueryモバイル - アラートバーのスライドCSS overヘッダー

Question

jQueryモバイルのヘッダーバーにアラートバーのスライドを作成しようとしています。これまでのところ、私はスライドを持ってきましたが、私はCSSに問題があります。私はもともと、位置の最も外側のdivを作ってみました：絶対; top 0px：これは上からヘッダー上をスライドしますが、iPhoneのSafari内では、閉じるボタンが途切れ、右にスクロールする必要があります。どうすれば修正できますか？ここで

アラートバーのHTMLコードです：

 <div class="ui-bar ui-bar-b error" style="position: absolute; top: 0px;"> 
       <h3> 
        Form Validation Errors 
       </h3> 
       <div style="display:inline-block; width:8%; margin-top:0px; float: right;"> 
        <a href="#" data-role="button" data-icon="delete" data-iconpos="notext" class="dismiss_error">Dismiss</a> 
       </div> 
       <ul class="validation_errors_list"></ul> 
     </div> 

Answer 1

私はこのCSSを使用し、最後になってしまいました。アラートバーはヘッダーの上を直接スライドします。ここで

//you only really need this just to get it to slide over the header nicely and make sure you use top:0 if you always want it to be at the top. The plugin I made shows in/out the error message at position you are scrolled to in the document 
.alert{ 
    position: absolute; 
    z-index: 9998; 
    width: 100%; 
    height: 30px; 
    display: none; 
    color: #ffffff; 
    text-shadow: none; 
    font-family: Helvetica,Arial,sans-serif; 
} 

//This CSS is only used if you have an X button to close the alert. See the plugin below. 
.alert-button-container{ 
    display:inline-block; 
    margin-top:-10px; 
    margin-right: 15px; 
    float: right; 
    } 

は私のHTMLコード（UI-バークラスを使用するので、あなたは、幅とサイズのもののいくつかの周りに混乱する必要はありません追加する必要がjQueryのモバイルクラスであることに注意）です。

<div class="ui-bar alert"> 
    <div class="alert-message"></div> 
</div> 

このアラートバーを作成するためにjQueryから作成したカスタムプラグインです。

特長+は、ケースに

機能を使用してください：すべての上で動作し、イン/アウトが優雅に、カスタムHTMLエラーメッセージを注入することができるメッセージのリストをレンダリングすることができ、ヘッダーの上にスライドし、エラーメッセージの近くにXボタンを持ってフェードこれまでにテストしたブラウザ（IE、iOS、Firefox）では、ドキュメント内でスクロールした位置にエラーメッセージが表示されます。スクロールしてエラーを表示する必要はありません。

1. フォーム検証エラー。エラーメッセージの配列を渡すことができ、それをリストに解析します。

   var messages = new Array(); 
       messages[0] = 'My Message'; 
   
       //prevent from showing accidentally 
       if(messages.length > 0) 
       { 
        $(".alert").alertBar('error', "<h2>Form Validation Errors</h2>", { 
         'errorMessages': messages 
        }); 
       } 
   

2. 成功またはアクションメッセージ：

   $(".alert").alertBar('success', 'Removed From Your Itinerary'); 
   

////////////プラグインコード

 (
    function($) { 
       $.fn.alertBar = function(alertType, alertMessage, userOptions) { //Add the function 
      var options = $.extend({}, $.fn.alertBar.defaultOptions, userOptions); 
      var $this = $(this); 
    $this.addClass(options.cssClass) 
    .empty() 
    .html(alertMessage) 
    .css('top', $(document).scrollTop()); 

    if(alertType == 'success') 
    { 
     $this 
     .fadeIn() 
     .addClass('alert-success') 
     .delay(options.animationDelay) 
     .fadeOut(); 
    } 

    if(alertType == 'error') 
    { 
     var button = $('<div>') 
     .addClass('alert-button-container') 
     .append(
      $('<a>').attr({ 
       'href': '#', 
       'data-role': 'button', 
       'data-icon': 'delete', 
       'data-iconpos': 'notext', 
       'class': 'dismiss-error' 
      }) 
      .append('Dismiss') 
      ); 

     //build error container 
     $this 
     .addClass('alert-error') 
     .append(button); 

     //add optional items to error container 
     if(options.errorMessages) 
     { 

      var $messageList = $('<ul>').addClass('error-message-list'); 
      for (var i=0, len=options.errorMessages.length; i<len; ++i){ 
       $messageList.append(
            $('<li>') 
            .append(options.errorMessages[i]) 
            ); 
      } 

      $this.append($messageList); 

     } 

     //show alert bar 
     $this 
     .trigger('create') 
     .fadeIn(); 

     $(".dismiss-error").live('click', function(){ 
      $this.fadeOut(); 
     }); 
    } 

    if(alertType == 'informational') 
    { 
     $this 
     .addClass('alert-informational') 
     .fadeIn() 
     .delay(options.animationDelay) 
     .fadeOut(); 
    } 

    return $this; 
}; 

$.fn.alertBar.defaultOptions = { 
    cssClass : 'alert', 
    alertBarType: '', 
    animationDelay: 1500 
}; 
})(jQuery); 

追加のCSSクラスあなたが使用している場合この。これは、バーの色を変更するだけです。

.alert-success{ 
background-color: #8cc63f; 

}

.alert-error{ 
background-color: #ed1c24; 
height: auto; 

}

.alert-informational{ 
background-color: #0071bc; 

}

例ピクチャ：