jquery.ui.widget詳解

時間 2019-11-17
標籤 jquery.ui.widget jquery widget 詳解欄目 JQuery 简体版
原文原文鏈接
案例詳解javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/start/jquery-ui.css">
<style type="text/css">
.ui-autocomplete-category {
    font-weight: bold;
    padding: .2em .4em;
    margin: .8em 0 .2em;
    line-height: 1.5;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
    //擴展autocomplete組件，重寫autocomplete的_renderMenu方法，將提示條目分類別顯示
    //$.widget接受三個參數，第一個參數是新的組件的名稱，必須以custom.開頭，.後面的纔是新組件的名稱，調用或者初始化方式與autocomplete相同
    //第二個參數是擴展或者重寫的組件，這裏是$.ui.autocomplete，自動完成組件
    //第三個參數是對象，包含了重寫的屬性或者方法，這裏重寫了_renderMenu方法
    $.widget("custom.catcomplete", $.ui.autocomplete, {
        //該方法在渲染下拉列表以前被調用，能夠經過修改此方法達到將選項分類的目的
        //傳入的ul參數是選項的父容器，能夠將選項增長到容器中
        //傳入的items參數是即將顯示的數據列表
        _renderMenu : function(ul, items) {
            var that = this;
            currentCategory = "";
            //遍歷items對象數組，將他們分類，下面的這種方法必須保證同類別的數據放在一塊兒才能夠。
            $.each(items, function(index, item) {
                if (item.category != currentCategory) {
                    ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
                    currentCategory = item.category;
                }
                that._renderItemData(ul, item);
            });
        }
    });
    //擴展combobox組件，使其能夠支持自動完成功能,重要！！！
    $.widget("custom.combobox", {
        //本人猜想這個方法應該是建立該組件時調用的，實踐證實也是的，即$("#combobox").combobox();這句話
        _create : function() {
            console.log("call _create");
            this.wrapper = "";
        }
    });
</script>
<script type="text/javascript">
    $(function() {
        var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL",
                "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP",
                "Python", "Ruby", "Scala", "Scheme" ];
        var objects = [ {
            label : "America",
            value : "美國"
        }, {
            label : "China",
            value : "中國"
        }, {
            label : "Japan",
            value : "日本"
        } ];
        var categories = [ {
            label : "anders",
            category : ""
        }, {
            label : "andreas",
            category : ""
        }, {
            label : "antal",
            category : ""
        }, {
            label : "annhhx10",
            category : "Products"
        }, {
            label : "annk K12",
            category : "Products"
        }, {
            label : "annttop C13",
            category : "Products"
        }, {
            label : "anders andersson",
            category : "People"
        }, {
            label : "andreas andersson",
            category : "People"
        }, {
            label : "andreas johnson",
            category : "People"
        } ];
        var autocomplete = $("#tags").autocomplete({
            //設置自動完成輸入框的數據源，能夠是字符串數組，能夠使對象數組，也能夠是url字符串(返回一個json數據)
            //若是是對象數組，每一個對象能夠有兩個屬性，label和value，label表明顯示的值，value表明選中後填入輸入框的值，數據過濾是過濾label的
            //source : availableTags,//爲何設置成url後就不能根據用戶輸入過濾數據了呢，並且文件中是對象數組沒法自動提示啊
            //自動提示框會根據用戶輸入的字符自動篩選符合條件的字符串，默認篩選規則是整個字符串內容包含用戶輸入的字符即符合條件，能夠修改這個默認行爲
            //source若是設置成function函數，函數有兩個參數，第一個參數能夠獲取用戶輸入的字符，第二個參數是一個函數，調用這個函數而且傳入一個數組便可，數組即前面所說的數組，可是不能是url了，由於調用response函數已經不會幫咱們再次去請求了
            source : function(request, response) {
                console.log($.ui.autocomplete.escapeRegex(request.term));
                //建立一個正則表達式，$.ui.autocomplete.escapeRegex方法說是能夠將字符串中的特殊字符做爲普通字符處理，即若是傳入的是"[]"，處理後返回"\[\]"，其實就是加了轉義字符而已
                //第二個參數"i"表示該正則表達式忽略大小寫比較
                var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(request.term), "i");
                //$.grep方法能夠看作是一個過濾數組元素的方法，將數組中不符合條件的元素剔除
                //第一個參數是源數組，第二個參數是一個回調函數，參數是數組的每一項，若是方法返回true，該元素會被加到目的數組中，不然被過濾
                response($.grep(availableTags, function(item) {
                    return matcher.test(item);
                }));
            },
            //這個配置項不知道是幹嗎的。。。
            appendTo : "body",
            //能夠設置成true或者false
            //若是設置成true，當下拉列表顯示時，自動聚焦到列表第一項
            //若是設置成false，當下拉列表顯示時，將不會自動聚焦，默認爲false
            autoFocus : true,
            //設置下拉列表顯示的延遲時間，單位毫秒，默認值是300
            delay : 100,
            //設置自動完成框的禁用狀態，true表示禁用，false表示啓用
            disabled : false,
            //設置搜索的最小字符數，即輸入至少minLength個字符，纔會去匹配提示，
            //數據比較少的狀況下能夠設置成0，可是若是數據太多，有幾千條，就須要用這個限制來過濾數據了
            minLength : 1,
            //設置下拉列表相對於自動完成輸入框的位置
            position : {
                //設定下拉列表的定位點，即at屬性會以這個點爲參照物，設定下拉列表相對於輸入框的位置
                //第一個值是水平方向，可選left,right,center
                //第二個值是豎直方向，可選left,right,center
                my : "left top",
                //設定相對位置
                at : "left bottom"
            },
            //擴展點，不知道幹嗎的，沒看見被調用，應該不是這麼使用
            _renderItem : function(ul, item) {
                alert("_renderItem");
                return $("<li>").attr("data-value", item.value).append($("<a>").text(item.label)).appendTo(ul);
            },
            //擴展點，不知道幹嗎的，沒看見被調用，應該不是這麼使用
            _renderMenu : function(ul, items) {
                var that = this;
                $.each(items, function(index, item) {
                    that._renderItemData(ul, item);
                });
                $(ul).find("li:odd").addClass("odd");
            },
            //擴展點，不知道幹嗎的，沒看見被調用，應該不是這麼使用
            _resizeMenu : function() {
                this.menu.element.outerWidth(500);
            },
            //當文本框內容修改後失去焦點時觸發該事件，也能夠使用綁定的方式將該事件綁定到提示框上
            //autocomplete.on("autocompletechange",function(event,ui){});    
            //ui.item表明你選中的那一項的對象，包含label和value屬性，若是沒選中ui.item爲null
            change : function(event, ui) {
                if (ui.item == null) {
                    console.log("No Choose");
                } else {
                    console.log("Choose" + ui.item.value);
                }
            },
            //當智能提示框關閉後會觸發此事件,ui是空對象
            close : function(event, ui) {
                console.log("close");
            },
            //當自動完成組件建立時回調此方法,ui是空對象
            create : function(event, ui) {
                console.log("create");
            },
            //當提示列表中的某一項獲取焦點時觸發此事件,其中ui.item就是得到焦點的那一項
            //只有使用鍵盤選擇某一項時，纔會更新文本框中的值，使用鼠標不更新文本框的值，可是都會觸發此事件
            focus : function(event, ui) {
                console.log("focus:" + ui.item.value);
            },
            //當提示列表打開後觸發此事件,ui是空的對象
            open : function(event, ui) {
                console.log("open");
            },
            //在search事件觸發以後，列表顯示以前會觸發此事件，其中ui.content是即將顯示在列表中的內容，已經標準化過了，是包含label和value的對象數組
            response : function(event, ui) {
                console.log("content length:" + ui.content.length);
                //在每一個對象的label屬性中增長一個索引，使用$.each()方法遍歷對象數組，第一個參數是數組，第二個參數是回調方法，每遍歷一個對象會回調一次該方法，該方法第一個參數是索引，第二個參數是對象，若是該方法返回false，表示跳出遍歷，若是返回true，繼續下一個對象遍歷。
                $.each(ui.content, function(i, obj) {
                    obj.label += i;
                    if (i == 5) {
                        return false;
                    }
                });
            },
            //在minLength知足後，delay以後會首先觸發該事件，具體做用不詳，傳進來的ui是一個空的對象
            search : function(event, ui) {
                console.log("search");
            },
            //當列表中的某一個像被選中後觸發此事件，參數和focus是同樣的
            select : function(event, ui) {
                console.log("select:" + ui.item.value);
                //event.preventDefault();使用這個函數能夠阻止事件的默認行爲，好比選擇某一項的默認行爲就是更新文本框的值，若是調用該方法，則不會更新文本框的值。可是不能阻止列表關閉。
            }
        });
        $("#close").button().click(function() {
            autocomplete.autocomplete("close");//關閉智能提示框
        });
        $("#destroy").button().click(function() {
            autocomplete.autocomplete("destroy");//銷燬智能提示框，輸入框將再也不具備提示功能
        });
        $("#disable").button().click(function() {
            autocomplete.autocomplete("disable");//禁用智能提示框，輸入框將再也不具備提示功能
        });
        $("#enable").button().click(function() {
            autocomplete.autocomplete("enable");//啓用智能提示框，輸入框將再也不具備提示功能
        });
        $("#isDisabled").button().click(function() {
            var isDisabled = autocomplete.autocomplete("option", "disabled");//獲取智能提示是否禁用的狀態
            console.log("isDisabled:" + isDisabled);
        });
        $("#option").button().click(function() {
            var option = autocomplete.autocomplete("option");//獲取智能提示框全部配置信息
            var optionStr = "";
            //遍歷配置信息
            for ( var p in option) {
                optionStr += p + ":" + option[p] + "\n";
            }
            console.log("Option:\n" + optionStr);
        });
        $("#setDelay").button().click(function() {
            autocomplete.autocomplete("option", "delay", 2000);//設置下拉列表延遲時間爲2s
        });
        $("#search").button().click(function() {
            //調用以後會觸發search事件，能夠設置回調方法，實踐證實，不能觸發search事件的回調方法，funk，那這個方法做用是啥啊？
            autocomplete.autocomplete("search", "");
        });
        //建立catcomplete組件
        $("#catcomplete").catcomplete({
            source : categories
        });
        //建立combobox組件
        var combobox = $("#combobox").combobox();
        //遍歷一下combobox對象的屬性和方法
        var optionStr = "";
        for ( var p in combobox) {
            optionStr += p + "\n";
        }
        console.log(optionStr);
    });
</script>
</head>
<body>
    <div class="ui-widget">
        <label for="tags">autocomplete: </label> <input id="tags" />
    </div>
    <!-- 
    <button id="close">關閉智能提示框</button>
    <button id="destroy">銷燬智能提示框</button>
    <button id="disable">禁用智能提示</button>
    <button id="enable">啓用智能提示</button>
    <button id="isDisabled">獲取智能提示是否禁用狀態</button>
    <button id="option">獲取智能提示框全部配置信息</button>
    <button id="setDelay">設置列表延遲時間</button>
    <button id="search">觸發search事件</button>
     -->
    <div class="ui-widget">
        <label for="catcomplete">catcomplete: </label><input id="catcomplete" />
    </div>
    <div class="ui-widget">
        <label>Your preferred programming language: </label> <select id="combobox">
            <option value="">Select one...</option>
            <option value="ActionScript">ActionScript</option>
            <option value="AppleScript">AppleScript</option>
            <option value="Asp">Asp</option>
            <option value="BASIC">BASIC</option>
            <option value="C">C</option>
            <option value="C++">C++</option>
            <option value="Clojure">Clojure</option>
            <option value="COBOL">COBOL</option>
            <option value="ColdFusion">ColdFusion</option>
            <option value="Erlang">Erlang</option>
            <option value="Fortran">Fortran</option>
            <option value="Groovy">Groovy</option>
            <option value="Haskell">Haskell</option>
            <option value="Java">Java</option>
            <option value="JavaScript">JavaScript</option>
            <option value="Lisp">Lisp</option>
            <option value="Perl">Perl</option>
            <option value="PHP">PHP</option>
            <option value="Python">Python</option>
            <option value="Ruby">Ruby</option>
            <option value="Scala">Scala</option>
            <option value="Scheme">Scheme</option>
        </select>
    </div>
    <button id="toggle">Show underlying select</button>
</body>
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。