自己写的jquery 多选上拉列表框插件

自己写的jquery 多选下拉列表框插件。

自己写的插件，头一回发贴，大家尽管拍砖！

/**
 * linkbutton 1.0 - jQuery Plug-in
 * 
 * Copyright 2011 mahsky [ mahsky@qq.com ] 
 * 
 */
(function(){

    $.fn.extend({
        checks_select: function(options){
        
            //鼠标进入事件
            $(this).click(function(){
                jq_check = $(this);
                jq_check.attr("class", "");
                div_children = jq_check.children();
                
                //判断是否是初始化过,初始化过直接显示就可以了。
                if (div_children.length <= 0) {
                    jq_checks_name = $("<div class ='checks_div_name'></div>").appendTo(jq_check);
                    x = jq_checks_name.offset().top;
                    y = jq_checks_name.offset().left;
					h = jq_checks_name.height();
					w = jq_checks_name.width();
                    jq_checks_select = $("<div class='checks_div_select'></div>").appendTo(jq_check);
                    jq_checks_select.css("left", y + "px");
                    jq_checks_select.css("top", x+ h + "px");
				    jq_checks_select.css("width", w + "px");
                    $.each(options, function(i, n){
                        $("<div><input onclick='' type='checkbox'value='" + i + "'><span>" + n + "</span></div>").appendTo(jq_checks_select);
                    });
                }
                else {
                    jq_checks_name = div_children[0];
                    jq_checks_select = div_children[1];
					x = $(jq_checks_name).offset().top;
                    y = $(jq_checks_name).offset().left;
					h = $(jq_checks_name).height();
					w = $(jq_checks_name).width();
					$(jq_checks_select).css("left", y + "px");
                    $(jq_checks_select).css("top", x+ h + "px");
				    $(jq_checks_select).css("width", w + "px");
                    $(jq_checks_select).show();
                    
                    //进行数据赋值
                    div_input = $(jq_checks_select).children();
                    v_input = " ";
                    n_span = "";
                    $.each(div_input, function(i, n){
                        o_input = $(div_input[i]).children()[0];
                        o_span = $(div_input[i]).children()[1];
                        if ($(o_input).attr("checked") == true) {
                            n_span += $(o_span).text() + " | ";
                        }
                    });
                    $(jq_checks_name).html(n_span);
                }
            });
            
            //鼠标移出事件
            $(this).mouseleave(function(){
                jq_check = $(this);
                div_children = jq_check.children();
                if (div_children.length > 0) {
                    jq_checks_select = div_children[1];
                    $(jq_checks_select).hide();
                }
            });
            
        },
        get_checks_value: function(){
            jq_check = $(this);
            div_children = jq_check.children();
            jq_checks_select = div_children[1];
            
            //进行数据赋值
            div_input = $(jq_checks_select).children();
            v_input = " ";
            $.each(div_input, function(i, n){
                o_input = $(div_input[i]).children()[0];
                if ($(o_input).attr("checked") == true) {
                    v_input += $(o_input).val() + ",";
                }
            });
            
            return v_input;
        }
    })
    
    
})(jQuery);

<html>
    <head>
    	<link rel="stylesheet" type="text/css" href="css/ui-checks-select.css">
        <script type="text/javascript" src="js/jquery-1.3.2.js">
        </script>
        <script type="text/javascript" src="js/jquery-mah-UI.js">
        </script>
        <script language="javascript">
            $(document).ready(function(){
                var options = {
                    1: "第一个选择项",
                    2: "第二个选择项",
                    3: "第三个选择项",
                    4: "第四个选择项",
                    5: "第五个选择项",
                    6: "第六个选择项"
                };
				 var options1 = {
                    1: "第1个选择项",
                    2: "第2个选择项",
                    3: "第3个选择项",
                    4: "第4个选择项",
                    5: "第5个选择项",
                    6: "第6个选择项"
                };
				var options2 = {
                    1: "第a个选择项",
                    2: "第b个选择项",
                    3: "第c个选择项",
                    4: "第d个选择项",
                    5: "第e个选择项",
                    6: "第f个选择项"
                };
                $("#test_div").checks_select(options);
				$("#test_div1").checks_select(options1);
				$("#test_div2").checks_select(options2);
            });
			
			function demo1(id){
				str = $("#"+id).get_checks_value();
				alert(str);
			}
        </script>
    </head>
    <body>
        <span>多选下拉列表框</span>
        <div>
            <div id="test_div" class="checks_div"></div>
			<input type='button' onclick="demo1('test_div');" value='得到值'/>
			<br/><br/><br/>
			
			<div id="test_div1" class="checks_div"></div>
			<input type='button' onclick="demo1('test_div1');" value='得到值'/>
			<br/><br/><br/>
			
			<div id="test_div2" class="checks_div"></div>
			<input type='button' onclick="demo1('test_div2');" value='得到值'/>
			<br/><br/><br/>
        </div>
		
		<div id="info">
			
			
		</div>
    </body>
</html>

1 楼 mahsky 2011-03-04

兄弟们来个砖头好不好。

2 楼 binlaniua 2011-03-05

楼主肯定少加了2px的边框的宽度波, 做成通用的话就用
**************************
if(window.getComputedStyle) {
} else{
xxx.currentStyle
}
******************************
获取外联样式

3 楼 vb0067 2011-03-07

<p>LZ 如果能把 options 里的内容做成动态会比较好一点,这个纯粹是个人感觉 </p>
<p> </p>

4 楼 kenchen0805 2011-03-07

楼主，我建议做成这样的

自己写的jquery 多选上拉列表框插件

5 楼 mahsky 2011-03-07

嗯。学习了。非常感谢

自己写的jquery 多选上拉列表框插件

相关推荐