jQuery Mobile - 在标题栏上滑动 CSS答案

【问题标题】：jQuery Mobile - Slide In Alert Bar CSS over HeaderjQuery Mobile - 在标题栏上滑动 CSS
【发布时间】：2012-05-03 17:39:09
【问题描述】：

我正在尝试在 jQuery mobile 的标题栏上滑入一个警告栏。到目前为止，我已经把幻灯片放了下来，但我在使用 CSS 时遇到了问题。我最初尝试使用 position: absolute; 制作最外层的 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>

【问题讨论】：

标签： jquery-mobile alert

【解决方案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-bar 类是一个 jQuery 移动类，您需要添加它，这样您就不必弄乱一些宽度和大小调整的东西）。

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

这是我用 jQuery 制作的一个自定义插件来执行此警报栏。

功能 + 用例

特点：优雅地淡入/淡出，可以注入自定义 HTML 错误消息，可以呈现消息列表，滑过标题，有一个关闭 X 按钮用于错误消息，适用于我迄今为止测试过的所有浏览器（IE , iOS, Firefox)，错误消息出现在您在文档中滚动到的位置。无需再向上滚动即可查看错误:)

表单验证错误。您可以传入一个错误消息数组，它会将其解析为一个列表。

    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
        });
    }

成功或操作消息：

    $(".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;

}

示例图片：

【讨论】：