jQuery EasyUI Menu and Button -Create a Link Button

Normally, you use the <button> element to create buttons, while a Link Button is created using the <a> element. So in fact, a Link Button is an <a> element that appears as a button.

To create a Link Button, all you need to do is add a class attribute named 'easyui-linkbutton' to the <a> element:

    <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>

As you can see, the iconCls property is a CSS class style for an icon, which displays an icon image on the button.

Sometimes you need to disable a Link Button or enable it. The following code demonstrates how to disable a Link Button:

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