第一百九十七節，jQuery EasyUI，LinkButton(按鈕)組件

jQuery EasyUI，LinkButton(按鈕)組件

 

學習要點：

　　1.加載方式

　　2.屬性列表

　　3.方法列表

 

本節課重點了解 EasyUI 中 LinkButton(按鈕)組件的使用方法，這個組件不依賴於其 他組件。

 

一．加載方式

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

 

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

 

 

二．屬性列表

 

id  string 組件的 ID 屬性。默認為 null，給按鈕重新設置id

$(function () {
    $('#box').linkbutton({
        id:'pox'                //給按鈕重新設置id
    });
});

 

disabled  boolean 設置 true 則禁止按鈕。默認為 false

/**
<a id="box" href="#">按鈕</a>
 **/

$(function () {
    $('#box').linkbutton({
        disabled:true           //設置 true 則禁止按鈕。默認為 false
    });
});

 

toggle  boolean 設置 true 則允許用戶切換其狀態是否被選中，可實現 checkbox 復選效果。默認為 false，模擬多選框效果

/**
<a id="box" href="#">按鈕1</a>
<a id="pox" href="#">按鈕2</a>
 **/

$(function () {
    $('#box').linkbutton({
        toggle:true           //模擬多選框效果
    });
    $('#pox').linkbutton({
        toggle:true           //模擬多選框效果
    });
});

 

selected  boolean 定義按鈕初始的選擇狀態，true 是被選中，false為未選中。默認為 false

/**
<a id="box" href="#">按鈕1</a>
<a id="pox" href="#">按鈕2</a>
 **/

$(function () {
    $('#box').linkbutton({
        toggle:true,           //模擬多選框效果
        selected:true           //定義按鈕初始的選擇狀態，true 是被選中，false為未選中。默認為 false
    });
    $('#pox').linkbutton({
        toggle:true           //模擬多選框效果
    });
});

 

group  string 指定相同組名的按鈕同屬於一個組，可實現 radio單選效果。默認為 null，模擬單選框效果

/**
<a id="box" href="#">按鈕1</a>
<a id="pox" href="#">按鈕2</a>
 **/

$(function () {
    $('#box').linkbutton({
        toggle:true,
        group:'xb'           //模擬單選框效果

    });
    $('#pox').linkbutton({
        toggle:true,
        group:'xb'           //模擬單選框效果
    });
});

 

plain  boolean 設置 true 時顯示簡潔效果。默認為 false

/**
<a id="box" href="#">按鈕1</a>
 **/

$(function () {
    $('#box').linkbutton({
        plain:true              //設置 true 時顯示簡潔效果。默認為 false
    });
});

 

text  string 按鈕文字。默認為空字符串

$(function () {
    $('#box').linkbutton({
        text:'發送'             //按鈕文字
    });
});

 

iconCls  string 顯示在按鈕文字左側的圖標（16x16）的 CSS 類 ID。默認為 null，設置按鈕文字左側的圖標，設置的jQueryEasyUI/themes/icon.css里的名稱

/**
<a id="box" href="#">按鈕1</a>
 **/

$(function () {
    $('#box').linkbutton({
        text:'發送',             //按鈕文字
        iconCls:'icon-ok'        //設置按鈕文字左側的圖標，設置的jQueryEasyUI/themes/icon.css里的名稱
    });
});

 

iconAlign  string 按鈕圖標位置。默認為 left，還有 right，按鈕圖標位置

$(function () {
    $('#box').linkbutton({
        text:'發送',             //按鈕文字
        iconCls:'icon-ok',        //設置按鈕文字左側的圖標，設置的jQueryEasyUI/themes/icon.css里的名稱
        iconAlign:'right'         //按鈕圖標位置
    });
});

 

 

三．方法列表

 

options  none 返回屬性對象

/**
<a id="box" href="#">按鈕1</a>
 **/

$(function () {
    $('#box').linkbutton({
        text:'發送',             //按鈕文字
        iconCls:'icon-ok',        //設置按鈕文字左側的圖標，設置的jQueryEasyUI/themes/icon.css里的名稱
        iconAlign:'right'         //按鈕圖標位置
    });
    alert($('#box').linkbutton('options'));    //返回屬性對象
});

 

disable  none 禁止按鈕

/**
<a id="box" href="#">按鈕1</a>
 **/

$(function () {
    $('#box').linkbutton({
        text:'發送',             //按鈕文字
        iconCls:'icon-ok',        //設置按鈕文字左側的圖標，設置的jQueryEasyUI/themes/icon.css里的名稱
        iconAlign:'right'         //按鈕圖標位置
    });
    $('#box').linkbutton('disable');    //禁止按鈕
});

 

enable  none 啟用按鈕

/**
<a id="box" href="#">按鈕1</a>
 **/

$(function () {
    $('#box').linkbutton({
        text:'發送',             //按鈕文字
        iconCls:'icon-ok',        //設置按鈕文字左側的圖標，設置的jQueryEasyUI/themes/icon.css里的名稱
        iconAlign:'right'         //按鈕圖標位置
    });
    $('#box').linkbutton('disable');    //禁止按鈕
    $('#box').linkbutton('enable');    //啟用按鈕
});

 

select  none 選擇按鈕

/**
<a id="box" href="#">按鈕1</a>
 **/

$(function () {
    $('#box').linkbutton({
        text:'發送',             //按鈕文字
        iconCls:'icon-ok',        //設置按鈕文字左側的圖標，設置的jQueryEasyUI/themes/icon.css里的名稱
        iconAlign:'right'         //按鈕圖標位置
    });
    $('#box').linkbutton('select');    //選擇按鈕
    $('#box').linkbutton('unselect');    //取消選擇按鈕
});

 

unselect  none 取消選擇按鈕

/**
<a id="box" href="#">按鈕1</a>
 **/

$(function () {
    $('#box').linkbutton({
        text:'發送',             //按鈕文字
        iconCls:'icon-ok',        //設置按鈕文字左側的圖標，設置的jQueryEasyUI/themes/icon.css里的名稱
        iconAlign:'right'         //按鈕圖標位置
    });
    $('#box').linkbutton('select');    //選擇按鈕
    $('#box').linkbutton('unselect');    //取消選擇按鈕
});

 

 

$.fn.linkbutton.defaults 重寫默認值對象。

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