2

Webアプリケーションの1つでjQueryUIテーマを使用しています。

ボタンのスタイルを適用する場合は、次のjqueryコードを追加します。

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

.buttonjqueryテーマでスタイルを設定したいボタンのクラスはどこにありますか。

ここに画像の説明を入力してください

「ハイライト」としてスタイリングしたい要素にテーマスタイルを適用するために、同様のことをどのように行うことができますか？

ここに画像の説明を入力してください

試し.highlight();ましたが、うまくいきませんでした。

注：span CSSクラスを要素に手動で追加できることは承知していますが、アイコンを表示する要素を追加する手間が省けるため、jQueryでこれを適用したいと思います。

したがって、次の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>

または、テーマローラーページの「ハイライト」の例の使用法を誤解しましたか？エラーの例の隣を考慮して、これは警告ボックスであると想定しました。

4

3 に答える 3

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();
于 2012-06-25T16:40:16.560 に答える
0

私はここで要点を見逃しているように感じますが、あなたはこれを「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);
});

実例| ソース

于 2012-06-25T16:44:15.973 に答える
0

プラグインは既存の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();
于 2012-06-25T16:27:20.300 に答える