使用javascript应用jQuery“突出显示”主题样式？

Question

我在我的某个网络应用程序中使用jQuery UI Themes。

如果我想应用按钮样式，我添加以下jquery代码：

$(".button").button();

.button是按钮上的一个类，我想用jquery主题设置样式。

---

如何将主题样式应用于我想要设置为“高亮”样式的元素？

我尝试.highlight();，但这没效果。

注意：我知道我可以手动将CSS类添加到我的元素中，但我希望将它应用于jQuery，因为这样可以节省我添加span元素显示图标。

因此，我希望能够拥有以下HTML代码：

<div class="highlight">
   <strong>Warning!</strong> Lorem Ipsum
</div>

然后使用jQuery将其转换为：

<div class="highlight ui-state-highlight ui-corner-all" style="margin-bottom:20px">
   <p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
   <strong>Warning!</strong> Lorem Ipsum</p>
</div>

---

或者，我是否误解了主题滚轮页面上“突出显示”示例的用途？我认为这是一个警告框，考虑它旁边的错误示例。

Answer 1

http://jsfiddle.net/mTu2R/3/

$.fn.highlight = function() {
    return this.each(function() {

        var elem = $(this), p = $("<p>", {
            html: '<span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>' + 
                  elem.html()
        });

        elem.empty().addClass("ui-state-highlight ui-corner-all").append(p);

    });
};

$(".highlight").highlight();

Answer 2

插件保留现有ID和类

(function($){
$.fn.highlight=function(){
     return this.each(function(){                              
            var text=$(this).text();
            var id=this.id;
            var thisClass=$(this).attr('class');
            var $el=$('<div class="highlight ui-state-highlight ui-corner-all" style="margin-bottom:20px">\
                   <p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>\
                   <strong>'+text+'</strong> Lorem Ipsum</p>\
                </div>').attr(id, id).addClass( thisClass);

             $(this).replaceWith($el);
        });

};
})(jQuery);

$(anyElement).highlight();

Answer 3

我觉得我可能会忽略这一点，但你说你想用“jQuery”来做这件事，所以：

$(".highlight").each(function() {
    var elm, p;

    elm = $(this);
    // Create the new paragraph and span
    p = $('<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span></p>');
    // Add the classes to the element
    elm.addClass("ui-state-highlight ui-corner-all");
    // Move the element's children into the paragraph
    p.append(elm.contents());
    // Append the paragraph
    elm.append(p);
});

Live example | source