jQuery EasyUIでカスタムアイコンを追加する

  • jQuery EasyUIのCSSを編集する

  • アイコン関連CSSファイルの配置場所:(root dir)/themes/icon.css
    追加したいアイコンに適宜名前(以下では「icon-myupload」)をつけて、次の行を追加する。

    .icon-myfileupload{
       background:url('icons/myupload.png') no-repeat center center;
    }
    
  • カスタムアイコン本体を追加する

  • アイコンの配置場所:(root dir)/themes/icons

  • カスタムアイコンを利用する

  • HTMLで指定する場合は以下のとおり。オプション iconCls でアイコン名を指定する。

    <a id="btnUpload" class="easyui-linkbutton" data-options="iconCls:'icon-myfileupload'">upload</a>
    <a id="btnDownload" class="easyui-linkbutton" data-options="iconCls:'icon-myfiledownload'">download</a>
    

    または、以下のように個別に指定してもOK。

    <a class="easyui-linkbutton" iconCls="icon-myfileupload">upload</a>
    

    JavaScriptで設定する場合は以下のとおり。

    $('#btnUpload').linkbutton({
        iconCls:'icon-myfileupload'
    });
    

    実行結果:
    gpsview06_file4

カテゴリー: Tips タグ: , パーマリンク