Question

我正试图在jQuery mobile的标题栏上滑动警报栏。到目前为止，我已将幻灯片放下，但我遇到了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-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;

}

示例图片：

Alert Bar Example

jQuery Mobile - 在标题中滑动警报栏CSS

1 个答案: