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