jquery - 使用 javascript 应用 jQuery "highlight"主题样式？

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();