jQuery EasyUI メニューとボタン -リンクボタン（Link Button）を作成

通常、<button> 要素を使用してボタンを作成しますが、リンクボタン（Link Button）は <a> 要素を使用して作成します。つまり、実際にはリンクボタン（Link Button）はボタンスタイルで表示される <a> 要素です。

リンクボタン（Link Button）を作成するには、'easyui-linkbutton' という名前の class 属性を <a> 要素に追加するだけです：

    <div style="padding:5px;background:#FAFAFA;width:500px;border:1px solid #ccc">
        <a href="../index.html" class="easyui-linkbutton" iconCls="icon-cancel">Cancel</a>
        <a href="../index.html" class="easyui-linkbutton" iconCls="icon-reload">Refresh</a>
        <a href="../index.html" class="easyui-linkbutton" iconCls="icon-search">Query</a>
        <a href="../index.html" class="easyui-linkbutton">text button</a>
        <a href="../index.html" class="easyui-linkbutton" iconCls="icon-print">Print</a>
    </div>
     
    <div style="padding:5px;background:#FAFAFA;width:500px;border:1px solid #ccc">
        <a href="../index.html" class="easyui-linkbutton" plain="true" iconCls="icon-cancel">Cancel</a>
        <a href="../index.html" class="easyui-linkbutton" plain="true" iconCls="icon-reload">Refresh</a>
        <a href="../index.html" class="easyui-linkbutton" plain="true" iconCls="icon-search">Query</a>
        <a href="../index.html" class="easyui-linkbutton" plain="true">text button</a>
        <a href="../index.html" class="easyui-linkbutton" plain="true" iconCls="icon-print">Print</a>
        <a href="../index.html" class="easyui-linkbutton" plain="true" iconCls="icon-help"></a>
        <a href="../index.html" class="easyui-linkbutton" plain="true" iconCls="icon-save"></a>
        <a href="../index.html" class="easyui-linkbutton" plain="true" iconCls="icon-back"></a>
    </div>

ご覧のように、iconCls プロパティはアイコンのCSSクラススタイルで、ボタンにアイコン画像を表示します。

リンクボタン（Link Button）を無効にしたり有効にしたりする必要がある場合があります。次のコードはリンクボタン（Link Button）を無効にする方法を示しています：

    $(selector).linkbutton('disable');    // call the 'disable' method