14
A
回答
14
使用Chrome开发人员工具,我检查了错误消息的HTML。您可以为另一个做同样的事情,或者您可以查看jQuery UI CSS Framework。
HTML
CSS
body {
font-family: Verdana,Arial,sans-serif;
font-size: 10px;
}
p {
margin: 1em 0;
}
strong {
font-weight: 900;
}
可以使用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();
});
请参阅fiddle。
0
复制jQuery UI生成的类和HTML结构,并确保包含jQuery UI主题。
1
只需使用萤火虫检查该元素的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>
1
使用Jquery Messages Plugin。它整洁,轻巧,使用简单。
1
我已经修改了一个简短的jQuery函数来将给定的一组div(包含文本)转换为错误/高亮元素。
你可以在this jsFiddle上看到它的行动。
这里是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);
相关问题
- 1. 用JQuery和C显示消息#
- 2. 基于JQuery UI的显示消息Autosuggest响应
- 3. 在jQuery-UI对话框上显示错误消息
- 4. 在jQuery UI模式消息中显示ASP.NET验证摘要
- 5. 显示消息
- 6. 显示消息
- 7. 显示消息
- 8. 显示消息以显示用户
- 9. 结合使用jQuery UI模式消息
- 10. 在jQuery BlockUI消息中显示iframe?
- 11. jquery显示消息,而php处理
- 12. PHP-Jquery-AJAX,显示弹出消息
- 13. jQuery隐藏/显示复选框消息
- 14. jquery聊天 - 显示新消息
- 15. 使用JSF显示消息
- 16. 使用JavaScript显示消息
- 17. MFC - 显示消息
- 18. JQuery UI对话框显示等待消息,直到处理ajax调用
- 19. JOptionPane显示消息
- 20. vb消息显示
- 21. angularJS显示消息
- 22. 显示Django消息框架消息
- 23. 使用jQuery显示错误消息并使其消失
- 24. 使用Popup在React-Semantic-UI中显示输入错误消息
- 25. Django消息框架不显示消息?
- 26. H:消息不显示JSF消息
- 27. 回声消息但显示消息
- 28. 如何使用jQuery工具提示显示错误消息?
- 29. 提示消息不显示在jquery移动应用程序中
- 30. PHPmailer如何显示消息