EasyUI系列學習(七)-Linkbutton(按鈕)

一、加載組件

1.使用class加載

<a href="#" class="easyui-linkbutton">按鈕</a>

2.使用js加載

<a href="#" id="btn"></a>
<script>
    $(function () {
        $("#btn").linkbutton({
            text: "按鈕"
        });
    })
</script>

二、屬性

1.id，disabled，text，iconCls，iconAlign，plain

<a href="#" id="btn"></a>
<script>
    $(function () {
        $("#btn").linkbutton({
            //默認為null
          id: "pox",
            //為true時禁用按鈕
            disabled: true,
            //按鈕文字
            text: "按鈕",
            //按鈕圖標，css類的id
           iconCls: "icon-add",
            //圖標在文字的右側（left,right）
            iconAlign: "right",
            //為true時，顯示簡潔效果
            plain: true
        });
    })
</script>

生成的html

<a id="pox" class="l-btn l-btn-small l-btn-plain l-btn-disabled l-btn-plain-disabled" href="javascript:void(0)" group="">
    <span class="l-btn-left l-btn-icon-right">
        <span class="l-btn-text">按鈕</span>
        <span class="l-btn-icon icon-add"> </span>
    </span>
</a>

2.toggle：設置true則運行用戶切換氣狀態是否被選中，可實現checkbox復選功能效果，默認為false

<a href="#" id="btn1">C#</a>
<a href="#" id="btn2">Java</a>
<script>
    $(function () {
        $("#btn1").linkbutton({
            toggle: true
        });
        $("#btn2").linkbutton({
            toggle: true
        });
    })
</script>

3.group：指定相同組名的按鈕同屬於一個組，可實現radio單選效果

<a href="#" id="btn1">男</a>
<a href="#" id="btn2">女</a>
<script>
    $(function () {
        $("#btn1").linkbutton({
            toggle: true,
            group: "sex"
        });
        $("#btn2").linkbutton({
            toggle: true,
            group: "sex"
        });
    })
</script>

4.selected：定義按鈕的選中狀態

三、方法

1.options：

<a href="#" id="btn"></a>
<script>
    $(function () {
        $("#btn").linkbutton({
           
        });
        console.log($("#btn").linkbutton("options"));
    })
</script>

輸出的內容如下

2.disable

3.enable

四、設置默認值

$.fn.linkbutton.defaults.plain = true;