zoukankan      html  css  js  c++  java
  • 自己动手写easyui的checkbox

    最近项目中用到了easyui这个框架,找了一圈也没有找到checkbox list控件,被迫只能自己实现了,为了便于复用,自己封装了下,有需要的,直接拿去用吧。有意见或建议的,欢迎指教啊。

    调用示例

    <html>
    <head>
        <title></title>
        <meta charset='utf8'>
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript" src="jquery.checkbox.js"></script>
    </head>
    <body>
        <div class='easyui-checkbox' id='test'>
        </div>    
        <div id='showValues'></div>
        <div>
            <input type='button' id='btnGetValue' value='获取选中值'>
        </div>
        
        <script type="text/javascript">    
        $().ready(function function_name (argument) {
            //初始化传值
            /*$('#test').checkbox({data:[
                {text:'星期天',value:'1'},
                {text:'星期一',value:'2'},
                {text:'星期二',value:'3'}
            ]});*/    
            //初始化
            $('#test').checkbox();
            //setValue设置checkbox项
            $('#test').checkbox('setValue',[
                {text:'星期天',value:'1'},
                {text:'星期一',value:'2'},
                {text:'星期二',value:'3'}
            ]);
            //checked设置默认选中项
            $('#test').checkbox('checked',['2']);
    
            $('#btnGetValue').on('click',function(){            
                //getValue获取已选择的checkbox项的值
                var checked=$('#test').checkbox('getValue');    
    
                $('#showValues').html('');
                $('#showValues').html(checked.join(','));
            });        
        });
        </script>
    </body>
    </html>

    实现源码 jquery.checkbox.js

     1 (function ($) {
     2     function createBox(me, options) {
     3         me.html('');
     4 
     5         if(options.data){
     6             $.each(options.data,function(index,item){
     7                 me.append('<input type="checkbox" value="'+item.value+'"/>'+item.text);
     8             });
     9             registerEvent(me);
    10         }    
    11     }
    12 
    13     function registerEvent(me){
    14         $(me).children().on('click',function(){
    15             if($(this).attr('checked')){
    16                 $(this).removeAttr('checked');
    17             }else{
    18                 $(this).attr('checked','checked');
    19             }            
    20         });
    21     }
    22 
    23     $.fn.checkbox = function(options, param){
    24         if (typeof options == 'string'){
    25             var method = $.fn.checkbox.methods[options];
    26 
    27             if (method){
    28                 return method(this, param);
    29             } else {
    30                 return this.combo(options, param);
    31             }
    32         }
    33         
    34         options = options || {};
    35         createBox(this,options);        
    36     };
    37     
    38     $.fn.checkbox.methods={        
    39         setValue:function(me,para){
    40             me.html('');
    41 
    42             createBox(me,{data:para});
    43         },
    44         getValue:function(me,para){
    45             var values=new Array();
    46 
    47             $(me).children().each(function(index,item){                
    48                 if($(item).attr('checked')=='checked'){                    
    49                     values.push($(item).attr('value'));
    50                 }
    51             });    
    52 
    53             return values;    
    54         },
    55         checked:function(me,para){                     
    56             $(me).children().each(function(index,item){                
    57                 if (para.indexOf($(item).attr('value')) > -1) {
    58                     if ($(item).attr('checked') != 'checked') {
    59                         $(item).click();
    60                     }
    61                 } else {
    62                     $(item).removeAttr('checked');
    63                 }
    64             });
    65         }
    66     };
    67 })(jQuery);
  • 相关阅读:
    jdk与jre安装之后的名字
    手机用笔记本上网
    Django简易安装
    python 结巴分词
    Elasticsearch shield权限管理详解
    nginx配置初步
    linux 使用 rz 和 sz 命令
    eclipse 鲜为人知的调试技巧,你用过多少
    HDOJ 题目3555 Bomb(数位DP)
    Ubuntu1204 vim中文乱码解决方法
  • 原文地址:https://www.cnblogs.com/huanghaihua/p/5035596.html
Copyright © 2011-2022 走看看