LinkButton 的說明文件參見 :
# LinkButton Document
# LinkButton Demo
# 菜單與按鈕
連結按鈕可以使用三種 HTML 元素來做, 只要給予 easyui-linkbutton 這個樣式類別即可 :
- 超連結元素 A
- 表單元素 INPUT
- 表單元素 BUTTON
如下列範例 1 所示 :
測試範例 1 : http://tony1966.xyz/test/easyuitest/easyui-linkbutton-1.htm [看原始碼]
<a href="#" id="btn1" class="easyui-linkbutton">A 連結按鈕</a>
<input type="button" id="btn2" class="easyui-linkbutton" value="INPUT 連結按鈕">
<button id="btn3" class="easyui-linkbutton">BUTTON 連結按鈕</button>
此處我們用 jQuery 的 bind() 方法為每一個按鈕綁定了 click 按鈕的動作事件處理函式. 可見用 input 元素的話, 按鈕外框與文字間隙太小, 需另外設定樣式, 比較麻煩. 建議都使用 A 元素來做連結按鈕, 注意其 href 屬性必須設為 # 以取消連結動作.
事實上 EasyUI 提供了許多常用的附圖按鈕, 只要在 HTML5 的 data-options 屬性中指定特定之 iconCls 參數即可, 例如新增按鈕 :
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">新增</a>
這些按鈕上的圖檔可在 EasyUI 解壓縮目錄 jquery-easyui-1.4\themes\icons 下找到, 其樣式類別名稱如下 :
- icon-add : 新增
- icon-back : 返回
- icon-cancel : 取消
- icon-clear : 清除
- icon-cut : 剪下
- icon-edit : 編輯
- icon-filter : 過濾
- icon-help : 協助
- icon-lock : 密碼, 鎖定
- icon-no : 否
- icon-ok : 是
- icon-print : 列印
- icon-redo : 重做
- icon-reload : 重新載入
- icon-remove : 刪除
- icon-save : 儲存
- icon-search : 搜尋
下面範例 2 即展示了這 17 個常用的圖示按鈕 :
測試範例 2 : http://tony1966.xyz/test/easyuitest/easyui-linkbutton-2.htm [看原始碼]
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">Add</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-back'">Back</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">Cancel</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-clear'">Clear</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cut'">Cut</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">Edit</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-filter'">Filter</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help'">Help</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-lock'">Lock</a><br><br>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-no'">No</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">Ok</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-print'">Print</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-redo'">Redo</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'">Reload</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">Remove</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-save'">Save</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">Search</a>
除了使用 HTML5 的 data-options 屬性外, 還可以用 Javascript 來初始化連結按鈕, 只要呼叫 linkbutton() 方法, 並將參數以物件實體傳入即可, 這時 data-options 就不須設定了, 只要給個 id 以便 Javascript 操作即可, 如下列範例 3 所示 :
測試範例 3 : http://tony1966.xyz/test/easyuitest/easyui-linkbutton-3.htm [看原始碼]
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">Add</a>
<a href="#" id="BtnBack">Back</a>
<script language="javascript">
$(document).ready(function(){
$("#BtnBack").linkbutton({
iconCls:"icon-back"
});
});
</script>
連結按鈕中的圖像預設是在左方, 這可以利用 iconAlign 屬性來指定其值為 top/bottom/left/right, 如下範例 4 所示 :
測試範例 4 : http://tony1966.xyz/test/easyuitest/easyui-linkbutton-4.htm [看原始碼]
<a href="#" id="btn-bottom">bottom</a>
<a href="#" id="btn-left">left</a>
<a href="#" id="btn-right">right</a>
<script language="javascript">
$(document).ready(function(){
$("#btn-top").linkbutton({
iconCls:"icon-add",
toggle:true,
iconAlign:"top"
});
$("#btn-bottom").linkbutton({
iconCls:"icon-add",
toggle:true,
iconAlign:"bottom"
});
$("#btn-left").linkbutton({
iconCls:"icon-add",
toggle:true,
iconAlign:"left"
});
$("#btn-right").linkbutton({
iconCls:"icon-add",
toggle:true,
iconAlign:"right"
});
});
</script>
此例展示了四個方位的圖像, 同時也測試了 toggle 屬性, 當其設為 true 時 (預設 false), 按一下其底色會變暗, 表示被選擇 (selected), 再按一下又會恢復, 如此交替變化.
如果不需要顯示按鈕外框的話, 可以將 plain 屬性設為 true, 如下面範例 5 所示 :
測試範例 5 : http://tony1966.xyz/test/easyuitest/easyui-linkbutton-5.htm [看原始碼]
$("#btn-top").linkbutton({
iconCls:"icon-add",
plain:true,
toggle:true,
iconAlign:"top"
});
雖說沒了外框, 但當滑鼠移到按鈕上面時, 還是會出現外框的. 接著來測試兩個狀態屬性 selected (被按下去) 與 disabled (禁止狀態無法被按).
測試範例 6 : http://tony1966.xyz/test/easyuitest/easyui-linkbutton-6.htm [看原始碼]
<a href="#" id="btn-top">top</a>
<a href="#" id="btn-bottom">bottom</a>
<a href="#" id="btn-left">left</a>
<a href="#" id="btn-right">right</a>
<script language="javascript">
$(document).ready(function(){
$("#btn-top").linkbutton({
iconCls:"icon-add",
disabled:true,
toggle:true,
iconAlign:"top"
});
$("#btn-bottom").linkbutton({
iconCls:"icon-add",
disabled:true,
toggle:true,
iconAlign:"bottom"
});
$("#btn-left").linkbutton({
iconCls:"icon-add",
toggle:true,
iconAlign:"left"
});
$("#btn-right").linkbutton({
iconCls:"icon-add",
selected:true,
toggle:true,
iconAlign:"right"
});
});
</script>
可見前兩個按鈕因為 disabled 設為 true, 所以不能按, 而最後一個按鈕的 selected 設為 true, 所以預設是被按下的狀態.
禁止狀態也可以動態控制, 只要在 linkbutton() 方法中傳入 "disable" 即可, 反之, 若要讓被禁止的按鈕致能, 就傳入 "enable". 在下列範例 7 中, 我們為按鈕 btn-save 綁定 click 單擊事件使自己失能, 綁定 dblclick 雙擊事件使自己致能 :
測試範例 7 : http://tony1966.xyz/test/easyuitest/easyui-linkbutton-7.htm [看原始碼]
<a href="#" id="btn-save">Save</a>
<script language="javascript">
$(document).ready(function(){
$("#btn-save").linkbutton({
iconCls:"icon-save"
});
$("#btn-save").bind("click",function(){
$("#btn-save").linkbutton("disable");
});
$("#btn-save").bind("dblclick",function(){
$("#btn-save").linkbutton("enable");
});
});
</script>
同樣地, 按下 (select) 與彈起 (unselect) 兩種狀態也是可以分別傳入 "select" 與 "unselect" 加以控制的, 如下列範例 8 所示 :
測試範例 8 : http://tony1966.xyz/test/easyuitest/easyui-linkbutton-8.htm [看原始碼]
<a href="#" id="btn-save">Save</a>
<script language="javascript">
$(document).ready(function(){
$("#btn-save").linkbutton({
iconCls:"icon-save"
});
$("#btn-save").bind("click",function(){
$("#btn-save").linkbutton("select");
});
$("#btn-save").bind("dblclick",function(){
$("#btn-save").linkbutton("unselect");
});
});
</script>
可見, 按一下按鈕底色變深色, 即被選擇狀態; 雙擊就恢復為未選擇狀態. 注意, 雙擊 dblclick 雖然在文件中沒有提到, 但是還是可以用的.
連結按鈕可以用 text, width, 與 height 設定其文字與尺寸, 也可以動態地加以改變, 如下列範例 9 所示 :
測試範例 9 : http://tony1966.xyz/test/easyuitest/easyui-linkbutton-9.htm [看原始碼]
<a href="#" id="btn">Save</a>
<script language="javascript">
$(document).ready(function(){
var count=0;
$("#btn").linkbutton({
text:"<span style='font-weight:bold'>請按我</span>",
width:180,
height:80
});
$("#btn").bind("click",function(){
var text="<span style='font-size:22px'>你已按了 " +
++count + " 下</span>";
$("#btn").linkbutton({text:text,width:250,height:100});
});
});
</script>
上例中我們為按鈕綁定 click 事件, 並在處理函式中更改按鈕文字與大小. 要注意的是, width 與 height 基本上都是數值 (單位 px), 但也可以是字串, 例如附上單位 px, 例如 width:"250px", 或者用全頁面的百分比, 例如 width:"100%", 這些都是可以的, 只是必須改為字串.
接下來要測試 options 這個方法, 它會傳回儲存 linkbutton 所有成員的物件, 所以可以用 for in 迴圈來掃描, 如下列範例 10 所示 :
測試範例 10 : http://tony1966.xyz/test/easyuitest/easyui-linkbutton-10.htm [看原始碼]
<a href="#" id="btn-save">Save</a>
<script language="javascript">
$(document).ready(function(){
$("#btn-save").linkbutton({
iconCls:"icon-save"
});
$("#btn-save").bind("click",function(){
var opt=$("#btn-save").linkbutton("options");
var msg="";
for (var key in opt) {
msg += key + ":" + opt[key] + "\r\n";
}
alert(msg);
});
});
</script>
可見 linkbutton 真的只有一個 click 事件而已. 連結按鈕還有一個跟尺寸有關的屬性 size, 其值為字串 "large" 與 "small", 如下列範例 11 所示 :
測試範例 11 : http://tony1966.xyz/test/easyuitest/easyui-linkbutton-11.htm [看原始碼]
<a href="#" id="btn-save">變大</a>
<script language="javascript">
$(document).ready(function(){
var count=0;
$("#btn-save").linkbutton({iconCls:"icon-save"});
$("#btn-save").bind("click",function(){
var opt=$("#btn-save").linkbutton("options");
if (opt.text=="變大"){
$("#btn-save").linkbutton({text:"變小",size:"large"});
}
else {
$("#btn-save").linkbutton({text:"變大",size:"small"});
}
});
});
</script>
此例中我們用到上面範例 10 的 options 方法, 以便讀取按鈕目前的狀態, 即其 text 屬性值是變大或變小來決定現在要採取的動作.
最後來測試也是跟按鈕尺寸有關的方法 resize, 其參數是 width 與 height 構成的物件, 我們將上例稍加修改為下面的範例 12 :
測試範例 12 : http://tony1966.xyz/test/easyuitest/easyui-linkbutton-12.htm [看原始碼]
<a href="#" id="btn-save">變大</a>
<script language="javascript">
$(document).ready(function(){
var count=0;
$("#btn-save").linkbutton({iconCls:"icon-save"});
$("#btn-save").bind("click",function(){
var opt=$("#btn-save").linkbutton("options");
if (opt.text=="變大"){
$("#btn-save").linkbutton({text:"變小"});
$("#btn-save").linkbutton("resize",{width:"80%",height:300});
}
else {
$("#btn-save").linkbutton({text:"變大"});
$("#btn-save").linkbutton("resize",{width:"30%",height:100});
}
});
});
</script>
OK, 連結按鈕測試完成.
沒有留言 :
張貼留言