第二百一十節，jQuery EasyUI，SearchBox(搜索框)組件

jQuery EasyUI，SearchBox(搜索框)組件

 

學習要點：

　　1.加載方式

　　2.屬性列表

　　3.方法列表

 

本節課重點了解 EasyUI 中 SearchBox(搜索框)組件的使用方法，這個組件依賴於 MenuButton(按鈕)組件。

 

一．加載方式

class 加載方式

<!--搜索框-->
<input id="ss" class="easyui-searchbox" style="width:300px" data-options="menu:'#box'"></input>
<!--頻道按鈕-->
<div id="box" style="width:120px">
    <div data-options="name:'all',iconCls:'icon-ok'">體育</div>
    <div data-options="name:'sports'">建材</div>
</div>

 

searchbox()將符合規則的元素執行搜索框方法

 

js加載

/**
<!--搜索框-->
<input id="ss">
<!--頻道按鈕-->
<div id="box">
    //設置圖標和name
    <div data-options="name:'all',iconCls:'icon-ok'">體育</div>
    //設置圖標和name
    <div data-options="name:'al2',iconCls:'icon-ok'">建材</div>
</div>
 **/

$(function () {
    $('#ss').searchbox({
        searcher: function (value, name) {
            alert(value + ',' + name);
        },
        menu: '#box',
        prompt: '請輸入內容',
    });
});

 

 

二．屬性列表

 

width   number 組件寬度。默認為 auto。

/**
<!--搜索框-->
<input id="ss">
<!--頻道按鈕-->
<div id="box">
    //設置圖標和name
    <div data-options="name:'all',iconCls:'icon-ok'">體育</div>
    //設置圖標和name
    <div data-options="name:'al2',iconCls:'icon-ok'">建材</div>
</div>
 **/

$(function () {
    $('#ss').searchbox({
        width:800,
        height:40,
        menu: '#box',
        prompt: '請輸入內容'
    });
});

 

height  number 組件高度。默認為22。

/**
<!--搜索框-->
<input id="ss">
<!--頻道按鈕-->
<div id="box">
    //設置圖標和name
    <div data-options="name:'all',iconCls:'icon-ok'">體育</div>
    //設置圖標和name
    <div data-options="name:'al2',iconCls:'icon-ok'">建材</div>
</div>
 **/

$(function () {
    $('#ss').searchbox({
        width:800,
        height:40,
        menu: '#box',
        prompt: '請輸入內容'
    });
});

 

prompt   string 在輸入框中顯示提示消息。

/**
<!--搜索框-->
<input id="ss">
<!--頻道按鈕-->
<div id="box">
    //設置圖標和name
    <div data-options="name:'all',iconCls:'icon-ok'">體育</div>
    //設置圖標和name
    <div data-options="name:'al2',iconCls:'icon-ok'">建材</div>
</div>
 **/

$(function () {
    $('#ss').searchbox({
        width:800,
        height:40,
        menu: '#box',
        prompt: '請輸入內容'
    });
});

 

value   string 輸入的值。默認value值

/**
<!--搜索框-->
<input id="ss">
<!--頻道按鈕-->
<div id="box">
    //設置圖標和name
    <div data-options="name:'all',iconCls:'icon-ok'">體育</div>
    //設置圖標和name
    <div data-options="name:'al2',iconCls:'icon-ok'">建材</div>
</div>
 **/

$(function () {
    $('#ss').searchbox({
        width:800,
        height:40,
        menu: '#box',
        // prompt: '請輸入內容',
        value:55555
    });
});

 

menu   selector搜索類型菜單。每個菜單項都具備一下屬性：綁定頻道id

　　name：搜索類型名稱。

　　selected：自定義默認選中的搜索類型

　　名稱。 默認值為 null。

/**
<!--搜索框-->
<input id="ss">
<!--頻道按鈕-->
<div id="box">
    //設置圖標和name
    <div data-options="name:'all',iconCls:'icon-ok'">體育</div>
    //設置圖標和name
    <div data-options="name:'al2',iconCls:'icon-ok'">建材</div>
</div>
 **/

$(function () {
    $('#ss').searchbox({
        width:800,
        height:40,
        menu: '#box',   //綁定頻道id
        prompt: '請輸入內容',
    });
});

 

searcher   Function(value,name)在用戶按下搜索按鈕或回車鍵的時候調用 searcher 函數。默認值為 null。

/**
<!--搜索框-->
<input id="ss">
<!--頻道按鈕-->
<div id="box">
    //設置圖標和name
    <div data-options="name:'all',iconCls:'icon-ok'">體育</div>
    //設置圖標和name
    <div data-options="name:'al2',iconCls:'icon-ok'">建材</div>
</div>
 **/

$(function () {
    $('#ss').searchbox({
        width:800,
        height:40,
        menu: '#box',   //綁定頻道id
        prompt: '請輸入內容',
        searcher:function (value,name) {
            alert('用戶按下搜索按鈕或回車鍵的時候觸發');
            alert('接收當前值：' + value + '|' + '接收當前頻道：' + name); }
    });
});

 

disabled   boolean 是否禁用搜索框。默認為 false。

 

/**
<!--搜索框-->
<input id="ss">
<!--頻道按鈕-->
<div id="box">
    //設置圖標和name
    <div data-options="name:'all',iconCls:'icon-ok'">體育</div>
    //設置圖標和name
    <div data-options="name:'al2',iconCls:'icon-ok'">建材</div>
</div>
 **/

$(function () {
    $('#ss').searchbox({
        width:800,
        height:40,
        menu: '#box',   //綁定頻道id
        prompt: '請輸入內容',
        disabled:true,
        searcher:function (value,name) {
            alert('用戶按下搜索按鈕或回車鍵的時候觸發');
            alert('接收當前值：' + value + '|' + '接收當前頻道：' + name);
        }
    });
});

 

 

三．方法列表

 

options   none 返回屬性對象。

/**
<!--搜索框-->
<input id="ss">
<!--頻道按鈕-->
<div id="box">
    //設置圖標和name
    <div data-options="name:'all',iconCls:'icon-ok'">體育</div>
    //設置圖標和name
    <div data-options="name:'al2',iconCls:'icon-ok'">建材</div>
</div>
 **/

$(function () {
    $('#ss').searchbox({
        width:800,
        height:40,
        menu: '#box',   //綁定頻道id
        prompt: '請輸入內容',
        disabled:true,
        searcher:function (value,name) {
            alert('用戶按下搜索按鈕或回車鍵的時候觸發');
            alert('接收當前值：' + value + '|' + '接收當前頻道：' + name);
        }
    });
    alert($('#ss').searchbox('options'));   //返回屬性對象
});

 

menu   none 返回搜索類型菜單對象。

$(function () {
    $('#ss').searchbox({
        width:800,
        height:40,
        menu: '#box',   //綁定頻道id
        prompt: '請輸入內容',
        disabled:true,
        searcher:function (value,name) {
            alert('用戶按下搜索按鈕或回車鍵的時候觸發');
            alert('接收當前值：' + value + '|' + '接收當前頻道：' + name);
        }
    });
    alert($('#ss').searchbox('menu'));   //返回屬性對象
});

設置頻道圖標

 

$(function () {
    $('#ss').searchbox({
        width:800,
        height:40,
        menu: '#box',   //綁定頻道id
        prompt: '請輸入內容',
        searcher:function (value,name) {
            alert('用戶按下搜索按鈕或回車鍵的時候觸發');
            alert('接收當前值：' + value + '|' + '接收當前頻道：' + name);
        }
    });
    var m = $('#ss').searchbox('menu');
    m.menu('setIcon', {
        target : m.menu('findItem', '建材').target,
        iconCls : 'icon-save' });
});

 

 

 

 

textbox   none 返回文本框對象。

$(function () {
    $('#ss').searchbox({
        width:800,
        height:40,
        menu: '#box',   //綁定頻道id
        prompt: '請輸入內容',
        disabled:true,
        searcher:function (value,name) {
            alert('用戶按下搜索按鈕或回車鍵的時候觸發');
            alert('接收當前值：' + value + '|' + '接收當前頻道：' + name);
        }
    });
    alert($('#ss').searchbox('textbox'));   //返回文本框對象
});

 

getValue   none 返回當前搜索值。

$(function () {
    $('#ss').searchbox({
        width:800,
        height:40,
        menu: '#box',   //綁定頻道id
        prompt: '請輸入內容',
        searcher:function (value,name) {
            alert('用戶按下搜索按鈕或回車鍵的時候觸發');
            alert('接收當前值：' + value + '|' + '接收當前頻道：' + name);
        }
    });
    alert($('#ss').searchbox('getValue'));   //返回當前搜索值
});

 

setValue   value 設置一個新的搜索值。

$(function () {
    $('#ss').searchbox({
        width:800,
        height:40,
        menu: '#box',   //綁定頻道id
        prompt: '請輸入內容',
        searcher:function (value,name) {
            alert('用戶按下搜索按鈕或回車鍵的時候觸發');
            alert('接收當前值：' + value + '|' + '接收當前頻道：' + name);
        }
    });
    alert($('#ss').searchbox('setValue','88888'));   //設置一個新的搜索值。
});

 

getName   none 返回當前搜索類型名。

$(function () {
    $('#ss').searchbox({
        width:800,
        height:40,
        menu: '#box',   //綁定頻道id
        prompt: '請輸入內容',
        searcher:function (value,name) {
            alert('用戶按下搜索按鈕或回車鍵的時候觸發');
            alert('接收當前值：' + value + '|' + '接收當前頻道：' + name);
        }
    });
    alert($('#ss').searchbox('getName'));   //返回當前搜索類型名。
});

 

selectName   name 選擇當前搜索類型名。指定搜素類型，值為name

/**
<!--搜索框-->
<input id="ss">
<!--頻道按鈕-->
<div id="box">
    <div name="all" data-options="iconCls:'icon-ok'">體育</div>
    <div name="ghj" data-options="iconCls:'icon-ok'">建材</div>
</div>
 **/

$(function () {
    $('#ss').searchbox({
        width:800,
        height:40,
        menu: '#box',   //綁定頻道id
        prompt: '請輸入內容',
        searcher:function (value,name) {
            alert('用戶按下搜索按鈕或回車鍵的時候觸發');
            alert('接收當前值：' + value + '|' + '接收當前頻道：' + name);
        }
    });
    $('#ss').searchbox('selectName','ghj');     //指定搜素類型，值為name
});

 

destroy   none 銷毀該控件。

$(function () {
    $('#ss').searchbox({
        width:800,
        height:40,
        menu: '#box',   //綁定頻道id
        prompt: '請輸入內容',
        searcher:function (value,name) {
            alert('用戶按下搜索按鈕或回車鍵的時候觸發');
            alert('接收當前值：' + value + '|' + '接收當前頻道：' + name);
        }
    });
    $('#ss').searchbox('destroy');     //銷毀該控件
});

 

resize   width 重置組件寬度。

$(function () {
    $('#ss').searchbox({
        width:800,
        height:40,
        menu: '#box',   //綁定頻道id
        prompt: '請輸入內容',
        searcher:function (value,name) {
            alert('用戶按下搜索按鈕或回車鍵的時候觸發');
            alert('接收當前值：' + value + '|' + '接收當前頻道：' + name);
        }
    });
    $('#ss').searchbox('resize',200);     //重置組件寬度
});

 

disable   none 禁用組件。

$(function () {
    $('#ss').searchbox({
        width:800,
        height:40,
        menu: '#box',   //綁定頻道id
        prompt: '請輸入內容',
        searcher:function (value,name) {
            alert('用戶按下搜索按鈕或回車鍵的時候觸發');
            alert('接收當前值：' + value + '|' + '接收當前頻道：' + name);
        }
    });
    $('#ss').searchbox('disable');     //禁用組件
});

 

enable   none 啟用組件。

$(function () {
    $('#ss').searchbox({
        width:800,
        height:40,
        menu: '#box',   //綁定頻道id
        prompt: '請輸入內容',
        searcher:function (value,name) {
            alert('用戶按下搜索按鈕或回車鍵的時候觸發');
            alert('接收當前值：' + value + '|' + '接收當前頻道：' + name);
        }
    });
    $('#ss').searchbox('enable');     //啟用組件
});

 

clear   none 清理搜索框內容。

$(function () {
    $('#ss').searchbox({
        width:800,
        height:40,
        menu: '#box',   //綁定頻道id
        prompt: '請輸入內容',
        searcher:function (value,name) {
            alert('用戶按下搜索按鈕或回車鍵的時候觸發');
            alert('接收當前值：' + value + '|' + '接收當前頻道：' + name);
        }
    });
    $('#ss').searchbox('clear');     //清理搜索框內容
});

 

reset   none 重置搜索框內容。

 

$(function () {
    $('#ss').searchbox({
        width:800,
        height:40,
        menu: '#box',   //綁定頻道id
        prompt: '請輸入內容',
        searcher:function (value,name) {
            alert('用戶按下搜索按鈕或回車鍵的時候觸發');
            alert('接收當前值：' + value + '|' + '接收當前頻道：' + name);
        }
    });
    $('#ss').searchbox('reset');     //重置搜索框內容
});

 

 

 

我們可以使用$.fn.searchbox.defaults 重寫默認值對象。見前面章節