按鈕組件使用超鏈接按鈕創(chuàng)建。它使用一個(gè)普通的<a>標(biāo)簽進(jìn)行展示。它可以同時(shí)顯示一個(gè)圖標(biāo)和文本,或只有圖標(biāo)或文字。按鈕的寬度可以動(dòng)態(tài)和折疊/展開(kāi)以適應(yīng)它的文本標(biāo)簽。
屬性
| 屬性名 | 類(lèi)型 | 含義 | 默認(rèn)值 |
|---|---|---|---|
| id | string | 組件ID屬性 | null |
| dsiabled | boolean | 為true禁用按鈕 | false |
| toggle | boolean | 為true時(shí)允許用戶切換其狀態(tài)是被選中還是未選擇，可實(shí)現(xiàn)checkbox復(fù)選效果。 | false |
| selected | boolean | 定義按鈕初始的選擇狀態(tài)，true為被選中，false為未選中 | false |
| group | string | 指定相同組名稱的按鈕同屬于一個(gè)組，可實(shí)現(xiàn)radio單選效果 | null |
| plain | boolean | 為true時(shí)顯示簡(jiǎn)潔效果。 | false |
| text | string | 按鈕文字 | '' |
| iconCls | string | 按鈕文字左側(cè)的圖標(biāo) | null |
| iconAlign | string | 按鈕圖標(biāo)位置'left','right'，'top','bottom' | left |
| size | string | 按鈕大小 small/large | small |
事件
| 事件名 | 參數(shù) | 含義 |
|---|---|---|
| onClick | none | 點(diǎn)擊按鈕時(shí)觸發(fā) |
方法
| 方法名 | 參數(shù) | 描述 |
|---|---|---|
| options | none | 返回屬性對(duì)象 |
| 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" >
<link rel="stylesheet" type="text/css" >
<link rel="stylesheet" type="text/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名字一樣，可實(shí)現(xiàn)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;">變大,圖標(biāo)居右效果</div>
<a id="btn4" href="#">easyui4</a>
</body>
</html>
