按钮组件使用超链接按钮创建。它使用一个普通的<a>标签进行展示。它可以同时显示一个图标和文本,或只有图标或文字。按钮的宽度可以动态和折叠/展开以适应它的文本标签。
属性
| 属性名 |
类型 |
含义 |
默认值 |
| id |
string |
组件ID属性 |
null |
| dsiabled |
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 |
按钮文字左侧的图标 |
null |
| iconAlign |
string |
按钮图标位置'left','right'，'top','bottom' |
left |
| size |
string |
按钮大小 small/large |
small |
事件
| 事件名 |
参数 |
含义 |
| onClick |
none |
点击按钮时触发 |
方法
| 方法名 |
参数 |
描述 |
| options |
none |
返回属性对象 |
| resize |
param |
重置按钮$('#btn').linkbutton('resize', {width: '100%', height: 32}); |
| disable |
none |
禁用按钮 |
| enable |
none |
启用按钮 |
| select |
none |
选择按钮 |
| unselect |
none |
取消选择按钮 |
我的demo
图片如下
image
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>linkbutton- jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){
$('#btn').linkbutton({
iconCls: 'icon-search'
});
$('#btn1').linkbutton({
id: 1,
selected: true,
plain:true,
group: "性别",//group名字一样，可实现radio单选效果
text: "男",
iconCls: 'icon-add',
toggle:true
});
$('#btn2').linkbutton({
id: 2,
group: "性别",
text: "女",
toggle : true,
iconCls: 'icon-cut'
});
$('#btn3').linkbutton({
id: 3,
selected: true,
text: "www",
iconCls: 'icon-edit'
});
$('#btn4').linkbutton({
size: 'large',
iconAlign: 'right',
iconCls: 'icon-save'
});
})
</script>
</head>
<body>
<div style="margin-top:20px; margin-bottom:10px;">正常</div>
<a id="btn" href="#">easyui</a>
<div style="margin-top:20px; margin-bottom:10px;">radio单选效果</div>
<a id="btn1" href="#">easyui1</a>
<a id="btn2" href="#">easyui2</a>
<div style="margin-top:20px; margin-bottom:10px;">选中效果</div>
<a id="btn3" href="#">easyui3</a>
<div style="margin-top:20px; margin-bottom:10px;">变大,图标居右效果</div>
<a id="btn4" href="#">easyui4</a>
</body>
</html>
网友评论