web-dev-qa-db-ja.com

カスタムアイコンを標準のjQuery UIテーマに追加するにはどうすればよいですか？

標準のアイコンセットから利用できるアイコンの1つを使用するのは簡単です。

$("#myButton").button({icons: {primary: "ui-icon-locked"}});

しかし、フレームワークアイコンセットの一部ではない独自のアイコンの1つを追加したい場合はどうすればよいですか？

背景画像を使用して独自のCSSクラスを指定するのと同じくらい簡単だと思いましたが、うまくいきません。

.fw-button-edit {
    background-image: url(edit.png);
}

助言がありますか？

jquery-uibuttonicons
43
Brett

私もお勧めします：

.ui-button .ui-icon.your-own-custom-class {
    background-image: url(your-path-to-normal-image-file.png);
    width: your-icon-width;
    height: your-icon-height; 
}

.ui-button.ui-state-hover .ui-icon.your-own-custom-class {
    background-image: url(your-path-to-highlighted-image-file.png);
    width: your-icon-width;
    height: your-icon-height; 
}

次に、JSコードを入力します。

        jQuery('selector-to-your-button').button({
        text: false,
        icons: {
            primary: "you-own-cusom-class"   // Custom icon
        }});

私にとってはうまくいきましたし、あなたにとってもうまくいくことを願っています！

62
Panayiotis

彼が動作しない理由は、アイコンのbackground-imageプロパティがjQuery UIのデフォルトのSpriteアイコンの背景画像によってオーバーライドされているためだと思います。問題のスタイルは次のとおりです。

.ui-state-default .ui-icon {
    background-image: url("images/ui-icons_888888_256x240.png");
}

これは.fw-button-editセレクターよりも高い特異性を持っているため、背景画像の性質をオーバーライドします。スプライトを使用するため、.ui-icon-lockedルールセットには、スプライト画像の位置を取得するために必要なbackground-positionのみが含まれます。私はこれを使用するとうまくいくと信じています：

.ui-button .ui-icon.fw-button-edit {
    background-image: url(edit.png);
}

または、十分な特異性を持つ他の何か。 CSSの詳細については、こちらをご覧ください： http://reference.sitepoint.com/css/specificity

14
Yi Jiang

これは、上記のYi JiangとPanayiotisによって提供された情報、および jquery uiボタンのサンプルコード に基づいています。

ボタンごとに画像を含むツールバーを備えた以前のJSPアプリケーションを移行していたので、ツールバーボタンごとに個別のクラスを作成するのではなく、ボタン宣言自体に画像を入れたいと思っていました。

<div id="toolbarDocs" class="tableCaptionBox">
    <strong>Checked Item Actions: </strong>

    <button id="btnOpenDocs" data-img="<s:url value="/images/multi.png"/>">Open Documents</button>
    <button id="btnEmailDocs" data-img="<s:url value="/images/email.png"/>">Attach to Email</button>
</div>

もちろん、上記の2つよりも多くのボタンがありました。上記のsタグはstruts2タグですが、任意のURLに置き換えることができます

        <button id="btnOpenDocs" data-img="/images/multi.png">Open Documents</button>

以下のスクリプトは、ボタンタグから属性data-imgを探し、それをボタンの背景画像として設定します。

Ui-icon-bullet（任意の既存のスタイル）を一時的に設定し、後で変更します。

このクラスは一時的なスタイルを定義します（これを使用する予定がある場合は、特定のツールバーにセレクターを追加して、ページの残りの部分が影響を受けないようにします）。実際の画像は、以下のJavascriptに置き換えられます。

button.ui-button .ui-icon {
    background-image: url(blank.png);
    width: 0;
    height: 0; 
}

および次のJavascript：

 $(document).ready(function () {
    $("#toolbarDocs button").each(
          function() { 
            $(this).button(
              { text: $(this).attr('data-img').length === 0? true: false, // display label for no image
               icons: { primary: "ui-icon-bullet"  }
              }).css('background-image', "url(" + $(this).attr('data-img') +")")
               .css('background-repeat', 'no-repeat');
            });
  });
3
msanjay

このリンクのソリューションは私にとってはうまくいきました： http://www.jquerybyexample.net/2012/09/how-to-assign-custom-image-to-jquery-ui-button.html

$(document).ready(function() {
    $("#btnClose")
    .text("")
    .append("<img height="100" src="logo.png" width="100" />")
    .button();
});​
2
Amber

Msanjayの回答に基づいて、jquery uiボタンとラジオボタンの両方のカスタムアイコンでも機能するようにこれを拡張しました。

<div id="toolbar">
    <button id="btn1" data-img="/images/bla1.png">X</button>
    <span id="radioBtns">
      <input type="radio" id="radio1" name="radName" data-mode="scroll" data-img="Images/bla2.png"><label for="radio1">S</label>
      <input type="radio" id="radio2" name="radName" data-mode="pan" data-img="Images/bla3.png"><label for="radio2">P</label>
    </span>
</div>    

$('#btn1').button();
$('#radioBtns').buttonset();

loadIconsOnButtons('toolbar');

function loadIconsOnButtons(divName) {
    $("#" + divName + " input,#" + divName + "  button").each(function() {
      var iconUrl = $(this).attr('data-img');
      if (iconUrl) {
        $(this).button({
          text: false,
          icons: {
            primary: "ui-icon-blank"
          }
        });
        var imageElem, htmlType = $(this).prop('tagName');
        if (htmlType==='BUTTON') imageElem=$(this);
        if (htmlType==='INPUT') imageElem=$("#" + divName + " [for='" + $(this).attr('id') + "']");
        if (imageElem) imageElem.css('background-image', "url(" + iconUrl + ")").css('background-repeat', 'no-repeat');
      }
    });
}
0
kofifus

cSSで

.ui-button .ui-icon.custom-class {
    background-image: url(your-path-to-normal-image-file.png);
    width: your-icon-width;
    height: your-icon-height; 
}

.ui-state-active .ui-icon.custom-class, .ui-button:active .ui-icon.custom-class {
    background-image: url(your-path-to-highlighted-image-file.png);
    width: your-icon-width;
    height: your-icon-height; 
}

hTMLで

<button type="button" class="ui-button ui-widget ui-corner-all">
    <span class="custom-class"></span> CAPTION TEXT
</button>

javaScriptで

$("selector").button({
    icons: { primary: "custom-class" }
});
0
Wagne Medrado
// HTML

<div id="radioSet" style="margin-top:4px; margin-left:130px;" class="radio">
      <input type="radio" id="Apple" name="radioSet"  value="1"><label for="Apple">Apple</label>
      <input type="radio" id="mango" name="radioSet" value="2"><label for="mango">Mango</label>
</div>


// JQUERY

// Function to remove the old default Jquery UI Span and add our custom image tag

    function AddIconToJQueryUIButton(controlForId)
    {
        $("label[for='"+ controlForId + "'] > span:first").remove();
        $("label[for='"+ controlForId + "']")
        .prepend("<img position='fixed' class='ui-button-icon-primary ui-icon' src='/assets/images/" + controlForId + ".png' style=' height: 16px; width: 16px;' />");

    }

// We have to call the custom setting to happen after document loads so that Jquery UI controls will be there in place

   // Set icons on buttons. pass ids of radio buttons
   $(document).ready(function () {
                 AddIconToJQueryUIButton('Apple');   
                 AddIconToJQueryUIButton('mango');   
    });

   // call Jquery UI api to set the default icon and later you can change it        
    $( "#Apple" ).button({ icons: { primary: "ui-icon-gear", secondary: null } });
    $( "#mango" ).button({ icons: { primary: "ui-icon-gear", secondary: null } });
0
Vinayaka Amaresh

カスタムアイコンをJQuery UIに追加する私のソリューション（スプライトを使用）：

CSS：

.icon-example {
    background-position: 0 0;
}

.ui-state-default .ui-icon.custom {
    background-image: url(icons.png);
}

.icon-exampleは、カスタムアイコンファイル内のアイコンの位置を定義します。 .ui-icon.customは、カスタムアイコンでファイルを定義します。

注：他のJQuery UIクラスを定義する必要がある場合があります（.ui-state-hover） 同様に。

JavaScript：

$("selector").button({
    icons: { primary: "custom icon-example" }
});
0
Hubo