blocks|key|993999|text|它们只是CSS样式。您可以在后端应用它们，也可以使用.addClass()应用它们。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|994000|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>They are just CSS styles.  You can apply them on the backend, or apply them using .addClass().  </p>


blocks|key|994085|text|我修改了一个简短的jQuery函数，将一组给定的div(包含文本)转换为错误/突出显示元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|994086|你可以在this+jsFiddle上看到它的实际效果。|offset|length|994087|下面是javascript：|994088|//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-'+%2B+type+%2B+'+ui-corner-all"+style="padding:0+.7em;">';
++++++++alertHtml+%2B=+'<p>';
++++++++alertHtml+%2B=+'<span+class="ui-icon+'+%2B+icon+%2B+'"+style="float:left;margin-right:+.3em;"></span>';
++++++++alertHtml+%2B=+$(this).text();
++++++++alertHtml+%2B=+'</p>';
++++++++alertHtml+%2B=+'</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);|code-block|syntax|javascript|994089|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/774wH/^0|0|4|D|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@$D|W|E|X|1|Y]]|A|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>I have adapted a short jQuery function to convert a given set of divs (containing text) into error/highlight elements.</p>

<p>You can see it in action on <a href="http://jsfiddle.net/774wH/" rel="nofollow">this jsFiddle</a>.</p>

<p>Here is the javascript:</p>

<pre><code>//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 = '&lt;div class="ui-state-' + type + ' ui-corner-all" style="padding:0 .7em;"&gt;';
        alertHtml += '&lt;p&gt;';
        alertHtml += '&lt;span class="ui-icon ' + icon + '" style="float:left;margin-right: .3em;"&gt;&lt;/span&gt;';
        alertHtml += $(this).text();
        alertHtml += '&lt;/p&gt;';
        alertHtml += '&lt;/div&gt;';

        $(this).html(alertHtml);
    });
}

//error dialog
(function($) {
    $.fn.error = function() {
        errorHighlight(this, 'error');
    };
})(jQuery);

//highlight (alert) dialog
(function($) {
    $.fn.highlight = function() {
        errorHighlight(this, 'highlight');
    };
})(jQuery);
</code></pre>


blocks|key|994118|text|我想再分享一个解决方案。它基于自定义窗口小部件，允许添加标题和可定制图标。尝试Fiddle或查看以下内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|994119|$.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-'+%2B+icon)
++++++++.css({
++++++++'float':+'left',
++++++++'margin-right':+'.3em'
++++}));
++++var+title+=+this.element.attr('title');
++++if+(title)+note.prepend($('<strong>').text(title+%2B+'+'));
++++this.element.addClass('ui-widget')
++++++++.replaceWith($('<div>')
++++++++.addClass('ui-state-'+%2B+this.options.state+%2B+'+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'
+});|code-block|syntax|javascript|994120|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/w7CHB/^0|13|6|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>I'd like to share one more solution. It's based on custom widgets and allows to add a title and customizable icon. Try <a href="http://jsfiddle.net/w7CHB/" rel="nofollow">Fiddle</a> or look below:</p>

<pre><code>$.widget('custom.noteBox', {
options: {
    icon: true,
    state: 'highlight'
},
_create: function () {
    var icon, note = $('&lt;p&gt;').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($('&lt;span&gt;')
        .addClass('ui-icon ui-icon-' + icon)
        .css({
        'float': 'left',
        'margin-right': '.3em'
    }));
    var title = this.element.attr('title');
    if (title) note.prepend($('&lt;strong&gt;').text(title + ' '));
    this.element.addClass('ui-widget')
        .replaceWith($('&lt;div&gt;')
        .addClass('ui-state-' + this.options.state + ' ui-corner-all')
        .css({
        'margin-top': '20px',
        'padding': '0 .7em'
    })
        .append(note));
   }
});


$('.error').noteBox({
    state: 'error'
 });
$('.info').noteBox();
$('&lt;div title="Note! "&gt;I`m dynamically added #1&lt;/div&gt;')
    .appendTo('body').noteBox({
    icon: 'folder-open'
 });
 $('&lt;div title="Note! "&gt;I`m dynamically added #2&lt;/div&gt;')
    .appendTo('body').noteBox({
    state: 'error'
 });
 $('&lt;div title="Note! "&gt;I`m dynamically added #3&lt;/div&gt;')
    .appendTo('body').noteBox({
    state: 'error',
    icon: 'trash'
 });
</code></pre>


<p><a href="http://jqueryui.com/" rel="noreferrer">jQuery UI</a> has some nice convenient CSS styles for alerting and highlighting. I can see it at <a href="http://jqueryui.com/themeroller/" rel="noreferrer">the themeroller site</a> -- look on the right hand side. Is there a Javascript interface to these styles? Do we use hard-coded CSS? Where is this documented?</p>

<p>Is there method list, a cheatsheat, or anything other than the interactive docs on jQuery UI?</p>


How do I use jQuery UI's Highlight and Error widgets?

jQuery

有一些很好的，方便的CSS样式，用于提醒和突出显示。我可以在上看到--看看右手边。这些样式有没有Javascript接口？我们使用硬编码的CSS吗？这些文档记录在哪里？除了jQuery UI上的交互式文档之外，还有方法列表、作弊工具或其他东西吗？

问如何使用jQuery UI的突出显示和错误小部件？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jQuery UI的突出显示和错误小部件？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用jQuery UI的突出显示和错误小部件？
EN