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;