zoukankan      html  css  js  c++  java
  • 自制checkbox下拉框插件(JQuery版)

    option_check.js代码 :

    /*****************************************

        调用方法为:
        Jselect($("#inputid"),{
                                bindid:'bindid',  
                                hoverclass:'hoverclass',
                                optionsbind:function(){return hqhtml();}
                                });  
          inputid为下拉框要绑定的文本框id
          bindid为点击弹出/收回下拉框的控件id
          hoverclass为鼠标移到选项时的样式
          hqhtml为绑定的数据
        ******************************************/
        
        (function($){
            $.showselect = {
                init : function(o,options){
                    var defaults = {
                        bindid : null,           //事件绑定在bindid上
                        hoverclass:null,         //鼠标移到选项时样式名称
                        optionsbind:function(){}          //下拉框绑定函数
                    }
                    
                    var options = $.extend(defaults,options);
                    if(options.optionsbind!=null){//如果绑定函数不为空
                        this._setbind(o,options);
                    }
                    if(options.bindid!=null){
                        this._showcontrol(o,options);
                    }
                },
                _showcontrol:function(o,options){//控制下拉框显示
                    $("#"+options.bindid).toggle(function(){
                        $(o).next().slideDown();
                    },function(){
                        $(o).next().slideUp();
                    })
                },
                _setbind:function(o,options){//绑定数据
                    var optionshtml="<div style=\"z-index: 999; position: absolute;\">"
                                        +options.optionsbind()+"</div>";
                        $(o).after(optionshtml);
                        var offset= $(o).offset();
                        var w=$(o).width();
                        $(o).next().css({top:offset.top+$(o).height()+7,left:offset.left,w});  
                        if(options.hoverclass!=null){
                            $(o).next().find("tr").hover(function(){$(this).addClass(options.hoverclass);},
                            function(){$(this).removeClass(options.hoverclass);});
                        }
                        
                        $(o).next().find("input[type=checkbox]").filter("[lang=checked]").each(function(){$(this).attr("checked","checked");});
                        
                        $(o).next().find("input[type=checkbox]").click(function(){
                                var $ckoption=$(this).attr("checked");
                                if($ckoption){
                                    $(this).attr("checked","");
                                }else{
                                    $(this).attr("checked","checked");
                                }
                            });
                        
                        $(o).next().find("tr").click(function(){
                            var $ckflag=$(this).find("input[type=checkbox]");
                            if($ckflag.attr("checked")){
                                $ckflag.attr("checked","");
                                $ckflag.attr("lang","");
                            }
                            else{
                                $ckflag.attr("checked","checked");
                                $ckflag.attr("lang","checked");
                            }
                            var selarray=new Array();
                            $(o).next().find("input[type=checkbox]").each(function(){
                                if($(this).attr("checked"))
                                    selarray.push($(this).parent().next().text());
                            });
                            $(o).val(selarray.join(','));
                        });
                        $(o).next().hide();
                }
            }
            Jselect = function(o,json){
                $.showselect.init(o,json);
            };

        })(jQuery);

    html代码:

     <script type="text/javascript" src="jquery-1.4.2.min.js"></script>

        <script type="text/javascript" src="option_check.js"></script>

        <style type="text/css">
            .hover
            {
                background-color: Blue;
                color: White;
            }
        </style> 

     <script type="text/javascript">
        $(function(){
        
        Jselect($("#txt_wbk"),{
                                bindid:'txt_wbk',   //可绑定到按钮上,此处为点击文本框显示下拉框
                                hoverclass:'hover',
                                optionsbind:function(){return hqhtml();}
                                });    
        })
        
        function hqhtml(){//此处可在数据库中取值后拼接html,注意:预选项加上 lang='checked'属性
         var optionshtml="<table style='100%; background-color: Red' cellpadding=\"0\" cellspacing=\"0\" >“
              +”<tr><td style='20px'><input type=\"checkbox\" value='1' /></td><td>第一项</td></tr>"

                           +"<tr><td><input type=\"checkbox\" value='2' lang='checked'/></td><td>第二项</td></tr>" 

                             +"<tr><td><input type=\"checkbox\" value='3' /></td><td>第三项</td></tr>" 

                                 +"<tr><td><input type=\"checkbox\" value='4' /></td><td>第四项</td></tr></table>";  

                      return optionshtml;  

         }   

        </script> 

     <div>
            <input id="txt_wbk" type="text" style=" 200px;" />下拉框测试
        </div> 

  • 相关阅读:
    每日总结2021.9.14
    jar包下载mvn
    每日总结EL表达语言 JSTL标签
    每日学习总结之数据中台概述
    Server Tomcat v9.0 Server at localhost failed to start
    Server Tomcat v9.0 Server at localhost failed to start(2)
    链表 java
    MVC 中用JS跳转窗体Window.Location.href
    Oracle 关键字
    MVC 配置路由 反复走控制其中的action (int?)
  • 原文地址:https://www.cnblogs.com/zxh0208/p/1764901.html
Copyright © 2011-2022 走看看