我最终最终使用了这个 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;
}
示例图片:
![警报栏示例](https://i.stack.imgur.com/XlroD.png)