1

jQuerymobileのヘッダーバーの上にアラートバーをスライドさせようとしています。これまでのところ、スライドを下に置いていますが、CSSに問題があります。私はもともと、最も外側のdivをposition：absoluteで作成しようとしました。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>
4

1 に答える 1

3

私はついにこの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-barクラスは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;

}

写真の例：

アラートバーの例

于 2012-05-03T09:39:09.853 に答える