使用 jQuery UI 显示消息
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5267569/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display Messages with jQuery UI
提问by Tom Tucker
I saw these on jQuery UI's themes page, and thought they were neat.
我在 jQuery UI 的主题页面上看到了这些，并认为它们很整洁。
I wonder how to display messages with these styles both in a static way and with JavaScript.
我想知道如何以静态方式和 JavaScript 显示具有这些样式的消息。
Thanks in advance.
提前致谢。
回答by melhosseiny
Using Chrome Developer Tools, I inspected the HTML of the error message. You can do the same for the other one or you can check out the jQuery UI CSS Framework.
使用 Chrome 开发人员工具，我检查了错误消息的 HTML。您可以对另一个执行相同的操作，也可以查看jQuery UI CSS 框架。
HTML
HTML
<div class="ui-widget">
<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
<p>
<span class="ui-icon ui-icon-alert"
style="float: left; margin-right: .3em;"></span>
<strong>Alert:</strong> Sample ui-state-error style.
</p>
</div>
</div>
CSS
CSS
body {
font-family: Verdana,Arial,sans-serif;
font-size: 10px;
}
p {
margin: 1em 0;
}
strong {
font-weight: 900;
}
You can use the addClassmethod to add these classes programmatically using JS. Also see the showand hidemethods which you can use to show/hide these messages.
您可以使用该addClass方法使用 JS 以编程方式添加这些类。也看到了show和hide你可以用它来显示方法/隐藏这些消息。
<button id="show">Show</button>
<button id="hide">Hide</button>
$("#show").click(function() {
$(".ui-widget").show();
});
$("#hide").click(function() {
$(".ui-widget").hide();
});
See fiddle.
见小提琴。
回答by jofitz
I have adapted a short jQuery function to convert a given set of divs (containing text) into error/highlight elements.
我已经修改了一个简短的 jQuery 函数来将给定的一组 div（包含文本）转换为错误/突出显示元素。
You can see it in action on this jsFiddle.
你可以在这个 jsFiddle上看到它的作用。
Here is the javascript:
这是javascript：
//function to create error and alert dialogs
function errorHighlight(e, type, icon) {
if (!icon) {
if (type === 'highlight') {
icon = 'ui-icon-info';
} else {
icon = 'ui-icon-alert';
}
}
return e.each(function() {
$(this).addClass('ui-widget');
var alertHtml = '<div class="ui-state-' + type + ' ui-corner-all" style="padding:0 .7em;">';
alertHtml += '<p>';
alertHtml += '<span class="ui-icon ' + icon + '" style="float:left;margin-right: .3em;"></span>';
alertHtml += $(this).text();
alertHtml += '</p>';
alertHtml += '</div>';
$(this).html(alertHtml);
});
}
//error dialog
(function($) {
$.fn.error = function() {
errorHighlight(this, 'error');
};
})(jQuery);
//highlight (alert) dialog
(function($) {
$.fn.highlight = function() {
errorHighlight(this, 'highlight');
};
})(jQuery);
回答by Melv
Just use firebug to inspect the HTML of that element. Looks like they're using <div style="margin-top: 20px; padding: 0pt 0.7em;" class="ui-state-highlight ui-corner-all">
<p><span style="float: left; margin-right: 0.3em;" class="ui-icon ui-icon-info"></span>
<strong>Hey!</strong> Sample ui-state-highlight style.</p>
</div>
只需使用 firebug 来检查该元素的 HTML。看起来他们正在使用<div style="margin-top: 20px; padding: 0pt 0.7em;" class="ui-state-highlight ui-corner-all">
<p><span style="float: left; margin-right: 0.3em;" class="ui-icon ui-icon-info"></span>
<strong>Hey!</strong> Sample ui-state-highlight style.</p>
</div>
回答by Tom Rider
Use Jquery Messages Plugin.It is neat, lightweight and simple to use.
使用Jquery Messages Plugin。它简洁、轻巧且易于使用。
回答by alex
Copy the classes and HTML structure that jQuery UI produces, and make sure you have included a jQuery UI theme.
复制 jQuery UI 生成的类和 HTML 结构，并确保您已包含 jQuery UI 主题。
