第 7 章 LinkButton(按钮)组件

学习要点:

1. 加载方式

2. 属性列表

3. 方法列表

本节课重点了解 EasyUI 中 LinkButton(按钮)组件的使用方法，这个组件不依赖于其他组件。

一.加载方式 

//class 加载方式
<a href="###" class="easyui-linkbutton">按钮</a>

//JS 加载调用 
$('#box').linkbutton({
text : '提交', });

二.属性列表

LinkButton 属性

属性名	值	说明
id	string	组件的 ID 属性。默认为 null
disabled	boolean	设置 true 则禁止按钮。默认为 false
toggle	boolean	设置 true 则允许用户切换其状态是否被选中，可实 现 checkbox 复选效果。默认为 false
selected	boolean	定义按钮初始的选择状态，true 是被选中，false 为未选中。默认为 false
group	string	指定相同组名的按钮同属于一个组，可实现 radio 单选效果。默认为 null
plain	boolean	设置 true 时显示简洁效果。默认为 false
text	string	按钮文字。默认为空字符串
iconCls	string	显示在按钮文字左侧的图标(16x16)的 CSS 类 ID。 默认为 null
iconAlign	string	按钮图标位置。默认为 left，还有 right

//属性设置
$('#box').linkbutton({
    id: 'pox',
    disabled: true,
    toggle: true,
    selected: true,
    group: 'sex',
    plain: true,
    text: '文字',
    iconCls: 'icon-add',
    iconAlign: 'right',
});

三.方法列表

LinkButton 方法

方法名	传参	说明
options	none	返回属性对象
disable	none	禁止按钮
enable	none	启用按钮
select	none	选择按钮
unselect	none	取消选择按钮

//返回属性对象 
console.log($('#box').linkbutton('options'));
//禁用按钮 
$('#box').linkbutton('disable');
//启用按钮 
$('#box').linkbutton('enable');
//选择按钮 
$('#box').linkbutton('select');
//取消选择按钮 
$('#box').linkbutton('unselect');
//返回 tip 元素对象
 onShow : function () {
console.log($('#box').tooltip('tip'));
},

 
//PS:我们可以使用$.fn.linkbutton.defaults 重写默认值对象。
 

$.fn.linkbutton.defaults.iconCls = 'icon-add';

李炎恢 jQuery EasyUI 视频教程_哔哩哔哩_bilibili