jQuery UI有一些很好的,方便的CSS样式,用于提醒和突出显示。我可以在the themeroller site上看到--看看右手边。这些样式有没有Javascript接口?我们使用硬编码的CSS吗?这些文档记录在哪里?
除了jQuery UI上的交互式文档之外,还有方法列表、作弊工具或其他东西吗?
发布于 2012-11-12 22:20:39
我修改了一个简短的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);
发布于 2010-07-03 03:38:28
它们只是CSS样式。您可以在后端应用它们,也可以使用.addClass()应用它们。
发布于 2014-06-26 05:33:21
我想再分享一个解决方案。它基于自定义窗口小部件,允许添加标题和可定制图标。尝试Fiddle或查看以下内容:
$.widget('custom.noteBox', {
options: {
icon: true,
state: 'highlight'
},
_create: function () {
var icon, note = $('<p>').html(this.element.html());
if (this.options.icon === true) {
switch (this.options.state) {
case 'highlight':
icon = 'info';
break;
case 'error':
icon = 'alert';
break;
default:
icon = false;
}
} else {
icon = this.options.icon;
}
if (icon) note.prepend($('<span>')
.addClass('ui-icon ui-icon-' + icon)
.css({
'float': 'left',
'margin-right': '.3em'
}));
var title = this.element.attr('title');
if (title) note.prepend($('<strong>').text(title + ' '));
this.element.addClass('ui-widget')
.replaceWith($('<div>')
.addClass('ui-state-' + this.options.state + ' ui-corner-all')
.css({
'margin-top': '20px',
'padding': '0 .7em'
})
.append(note));
}
});
$('.error').noteBox({
state: 'error'
});
$('.info').noteBox();
$('<div title="Note! ">I`m dynamically added #1</div>')
.appendTo('body').noteBox({
icon: 'folder-open'
});
$('<div title="Note! ">I`m dynamically added #2</div>')
.appendTo('body').noteBox({
state: 'error'
});
$('<div title="Note! ">I`m dynamically added #3</div>')
.appendTo('body').noteBox({
state: 'error',
icon: 'trash'
});
https://stackoverflow.com/questions/3168569
复制相似问题