jquery打造自定義控件（原創）

本人第一次發表文章，不足之出請大家多多包涵

 

 

 

 

下面是一個combox的代碼  

 

/// <reference path="../Js/jquery-1.7.2.min.js" />

$.extend({

    //下拉列表框

    qyjcombox: function (select) {

        //這里是初始化

        var htmlstr = "<div class=\"boxwrap\"><a class=\"select-tit\" href=\"javascript:;\"><span></span><i></i></a><div class=\"select-items\" style=\"z-index: 1; display: none;\"><ul><li>　├ 房產動態</li></ul></div><i class=\"arrow\" style=\"z-index: 1; display: none;\"></i></div>";

        var cbjq = $(select);

        //在用戶定義的節點中填充我們的combox

        cbjq.html(htmlstr);

        //並附上class

        cbjq.addClass("rule-single-select single-select");

        //要復制多次的節點 

        var copeItem = $("li", select);

        //要添加到的父節點

        var itemParant = copeItem.parent();

        //要復制的節點獲取到父節點后馬上刪除

        copeItem.remove();

        //下拉選中后顯示值的節點

        var showText=cbjq.find("span").first();

 

        //這里是列表框的業務邏輯

        

        //記錄選項的數組

        var list = [];

        var isShow = true;

        //注冊文本框單擊事件

        $(".select-tit", select).click(HideOrShow);

 

        //顯示或者隱藏

        function HideOrShow() {

                if (isShow) {

                    ShowList();

                } else {

                    hideList();

                }

        }

 

        // title 和id 后面的是自定義屬性

        this.addItem = function (title, id, itemObj) {

            //復制節點

            var newItem = copeItem.clone();

            //給節點附名字

            newItem.html(title);

            newItem.bind("click", clickEvent);

            itemParant.append(newItem);

            list.push({

                title: title,

                id: id,

                itemObj: itemObj,

                dom: newItem

            });

 

        }

        //顯示下拉列表

        function ShowList() {

            isShow = false;

            $(".select-items", select).css("display", "block");

            $(".arrow", select).css("display", "block");

        }

        //隱藏列表

        function hideList() {

            isShow = true;

            $(".select-items", select).css("display", "none");

            $(".arrow", select).css("display", "none");

        }

        function clickEvent() {

            var node = $(this);

            showText.html(node.html());

            hideList();

        }

 

        //注冊選項改變事件

        this.itemChangeEvent = function (changFunc) {

            for (var i = 0; i < list.length; i++) {

                //利用函數變量的作用域和this關鍵字改變來用戶調用方便

                (function (item) {

                    //現在這個item被這個匿名函數 獨享了 隨便你怎么玩

                    item.dom.bind("click",function (e) {

                        //觸發外部的函數

                        changFunc.apply(this, [{ title: item.title, id: item.id, itemObj: item.itemObj }, e]);

                    });

                })(list[i]);

                //下面是我之前 ie9留下的壞習慣 ie8 只能上面這種寫法

                //var item = list[i];

                //item.dom.bind("click",function(){changFunc.apply(this,{title:item.title,id:item.id}) });

            }

        }

 

 

    }

 

});

　　

 

接下來就是 取css的環節了

 

 

 

 

 

 

下面是css代碼

/* CSS Document */

*{ margin:0; padding:0; list-style:none;font-family: "Microsoft YaHei";}

table{ border-collapse:collapse; border-spacing:0; }

a{ color:#686f7f; text-decoration:none; }

a:link, a:visited{ color:#2A72C5; text-decoration:none; }

a:active, a:hover{ color:#0065D9; text-decoration:underline; }

.clearer{ clear:both;}

 

/* single-select */

.single-select{ position:relative; display:inline-block; margin-right:5px; vertical-align:middle; cursor:pointer; *float:left; }

.single-select .boxwrap{ display:inline-block; vertical-align:middle; }

.single-select .select-tit{ position:relative; display:block; padding:5px 38px 5px 10px; min-width:40px; line-height:20px; height:20px; border:solid 1px #eee; text-decoration:none; background:#fff; white-space:nowrap; word-break:break-all; }

.single-select .select-tit span{ display:inline-block; color:#333; font-size:12px; vertical-align:middle; }

.single-select .select-tit i{ position:absolute; right:0; top:0; display:block; width:28px; height:100%; border-left:1px solid #eee; background:url(images/skin_icons.png) 7px -189px no-repeat #fafafa; }

.single-select .select-items{ display:none; position:absolute; left:0; top:45px; /*overflow:hidden;*/ }

.single-select .select-items ul{ position:relative; padding:5px; min-width:120px; max-height:280px; border:1px solid #eee; background:#fff; overflow-y:auto; overflow-x:hidden; }

.single-select .select-items ul li{ display:block; padding:4px 10px; line-height:20px; font-size:12px; color:#666; white-space:nowrap; cursor:pointer; }

.single-select .select-items ul li:hover{ color:#fff; text-decoration:none; background:#16a0d3; }

.single-select .select-items ul li.selected{ color:#fff; background:#16a0d3; }

.single-select .arrow{ display:none; position:absolute; left:15px; top:35px; width:21px; height:11px; text-indent:-9999px; background:url(images/skin_icons.png) 0 -290px no-repeat; }

.single-select.up .select-items{ top:auto; bottom:45px; }

.single-select.up .arrow{ top:-13px; background:url(../images/skin_icons.png) 0 -300px no-repeat; }

 

 

后來發現里面有圖片 

 

background:url(images/skin_icons.png) 改成當前路徑就ok了 

 

 

 

 

完工就可以測試了

 

測試html

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <link href="combox/combox.css" rel="stylesheet" />

    <script src="Js/jquery-1.7.2.min.js"></script>

    <script src="combox/combox.js"></script>

    <script>

        $(window).ready(function () {

            var com = new $.qyjcombox("#cm");

            com.addItem("測試1", 1);

            com.addItem("測試2", 2);

            com.addItem("測試3", 3);

            com.itemChangeEvent(function (data) {

                alert("你單擊了："+data.title+" id："+data.id);

            });

        });

 

 

    </script>

</head>

<body>

    <div id="cm"></div>

</body>

</html>

　　

 

效果圖 環境 360瀏覽器 內核 ie7

 

 

控件下載地址 ：http://pan.baidu.com/s/1c0cxQ28

工具下載地址：http://pan.baidu.com/s/1qWC7lRu