jQuery EasyUI 中文API Button使用实例

Button简介

Button是jQuery EasyUI中的一个用户界面组件，用于创建简单的按钮。它支持各种有趣的按钮样式，包括图标和自定义文本等。

Button的创建

可以通过如下代码创建Button：

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">保存</a>

其中，class="easyui-linkbutton"表示使用Button组件，data-options="iconCls:'icon-save'"表示按钮带有图标，'icon-save'是内置的保存图标。

Button的属性

Button组件有很多可配置的属性，包括文本、图标、样式、事件等。

<a href="#" class="easyui-linkbutton" data-options="
    iconCls:'icon-save',
    plain:true,
    size:'large',
    onClick:function(){
        alert('保存成功！');
    }">保存</a>

• plain属性可以使按钮无边框；
• size属性可以设置按钮大小，可选值：small、large；
• onClick事件是点击按钮时执行的函数。

Button的方法

Button还有一些可用的JavaScript方法，包括：

// 获取一个Button对象
$("#btn").linkbutton();

// 禁用一个Button
$("#btn").linkbutton('disable');

// 启用一个Button
$("#btn").linkbutton('enable');

// 判断一个Button是否启用
$("#btn").linkbutton('options').disabled;

// 设置按钮为选中状态
$("#btn").linkbutton('select');

// 设置按钮为未选中状态
$("#btn").linkbutton('unselect');

示例1

通过以下代码可以创建一个拥有图标、无边框的Button，点击时弹框显示文本。

<a href="#" id="myButton" class="easyui-linkbutton" data-options="
    iconCls:'icon-info',
    plain:true,
    onClick:function(){
        alert('你点击了我！');
    }">点我</a>

示例2

通过JavaScript代码创建一个初始状态为选中的Button，点击时改变选中状态。

<a href="#" id="myButton2" class="easyui-linkbutton" data-options="
    selected:true,
    onClick:function(){
        var btn = $('#myButton2').linkbutton('options');
        if(btn.selected){
            $('#myButton2').linkbutton('unselect');
        } else {
            $('#myButton2').linkbutton('select');
        }
    }">点我</a>

以上便是Button的使用实例，相信通过上述实例可以轻松上手Button组件。