你的位置:首页 > 软件开发 > Java > 中秋来一发

中秋来一发

发布时间:2016-09-16 00:00:09
大家中秋节快乐!!!!不知道插件是不是这么简单的东西。。。。。。。。我看别人的插件都是两个字“复杂”;checkbox插件: <!DOCTYPE html><html lang="en">&l ...

中秋来一发

大家中秋节快乐!!!!

不知道插件是不是这么简单的东西。。。。。。。。

我看别人的插件都是两个字“复杂”;

checkbox插件: 

中秋来一发

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>checkbox插件</title>  <script type="text/javascript" src='/images/loading.gif' data-original=""></script>  <script type="text/javascript">    window.onload=function(){      checkedBox("#cb01");      checkedBox("#cb02",{check_all:false});      checkedBox("#cb03",{click_pos:false});      checkedBox("#cb04",{check_all:false,click_pos:false});      /*单选按钮*/      radioBox("#rb01");      radioBox("#rb02");    }/******************************************************//*复选框*//*addClass()、toggleClass()、equalClass()、removeClass()封装的,关于class添加、切换、是否存在这个class、移出class*/    function checkedBox(id,param){      /*默认参数,是否有全选复选框,是否点击文字可选中      *默认都是true      */      var setting={        check_all:true,        click_pos:true      };      /*传的json格式参数,覆盖默认参数*/      extend(param,setting);      /*获取元素*/      var oCheckbox=document.querySelector(id);      var oP=oCheckbox.getElementsByTagName("p");      /*有全选复选框*/      if(setting.check_all){        oP[0].style.display="block";        /*全选复选框点击文字选中*/        if(setting.click_pos){            addClass(oP[0],"hand");          oP[0].onclick=function(){            var spanAll=this.getElementsByTagName("span")[0];            toggleClass(spanAll,"checked");            if(equalClass(spanAll,"checked")){              for(var i=1;i<oP.length;i++){                var oSpan=oP[i].getElementsByTagName("span")[0];                  addClass(oSpan,"checked");              }            }else{              for(var i=1;i<oP.length;i++){                var oSpan=oP[i].getElementsByTagName("span")[0];                  removeClass(oSpan,"checked");              }            }          }        /*全选复选框不能点击文字选中*/        }else{        var spanAll=oP[0].getElementsByTagName("span")[0];          spanAll.onclick=function(){            toggleClass(this,"checked");            if(equalClass(this,"checked")){              for(var i=1;i<oP.length;i++){                var oSpan=oP[i].getElementsByTagName("span")[0];                  addClass(oSpan,"checked");              }            }else{              for(var i=1;i<oP.length;i++){                var oSpan=oP[i].getElementsByTagName("span")[0];                  removeClass(oSpan,"checked");              }            }          }        }      }      /*可以点击文字选中*/      if(setting.click_pos){        for(var i=1;i<oP.length;i++){          addClass(oP[i],"hand");          oP[i].onclick=function(){            toggleClass(this.getElementsByTagName("span")[0],"checked");            for(var i=1;i<oP.length;i++){              if(!equalClass(oP[i].getElementsByTagName("span")[0],"checked")){                removeClass(oP[0].getElementsByTagName("span")[0],"checked");                return;              }else{                addClass(oP[0].getElementsByTagName("span")[0],"checked");              }            }          }        }      /*不可以点击文字选中*/      }else{        for(var i=1;i<oP.length;i++){          var oSpan=oP[i].getElementsByTagName("span")[0];          oSpan.onclick=function(){            toggleClass(this,"checked");            for(var i=1;i<oP.length;i++){              if(!equalClass(oP[i].getElementsByTagName("span")[0],"checked")){                removeClass(oP[0].getElementsByTagName("span")[0],"checked");                return;              }else{                addClass(oP[0].getElementsByTagName("span")[0],"checked");              }            }          }        }      }    }/**********************************************************//*重复使用*/    function extend(obj1,obj2){      for(var attr in obj1){        obj2[attr]=obj1[attr];      }    }    /*判断对象元素是否有这个class,**第一个参数是传元素对象,这个对象不能是数组**第二个参数是要检查的class*存在返回true,不存在返回false**/function equalClass(obj,classname){  var arr=obj.className.split(" ");  for(var i=0;i<arr.length;i++){    if(arr[i]==classname){      return true;    }  }  return false;}/*添加class,**第一个参数是传元素对象,这个对象不能是数组**第二个参数是要添加的class*/function addClass(obj,classname){  if(equalClass(obj,classname)){    return;  }else{    if(obj.className.trim().length==0){      obj.className=classname;    }else{    obj.className+=" "+classname;    }  }}/*移除class**第一个参数是传元素对象,这个对象不能是数组**第二个参数是要添加的class*如果不存在class会有返回值-1*/function removeClass(obj,classname){  if(equalClass(obj,classname)){    var arr=obj.className.split(" ");    for(var i=0;i<arr.length;i++){      if(arr[i]==classname){        arr.splice(i,1);      }    }      obj.className=arr.join(" ");  }else{    return -1;  }}/*切换class,**第一个参数是传元素对象,这个对象不能是数组**第二个参数是要切换class*/function toggleClass(obj,classname){  if(equalClass(obj,classname)){    removeClass(obj,classname);  }else{    addClass(obj,classname);    }}/*****************************************************//*单选按钮*//*单选按钮过于简单不注释*/function radioBox(id){  var oRadioBox=document.querySelector(id);  var oRadio=oRadioBox.getElementsByTagName("p");  if(equalClass(oRadio[0],"hand")){    for(var i=0;i<oRadio.length;i++){      oRadio[i].onclick=function(){        for(var i=0;i<oRadio.length;i++){          var os=oRadio[i].getElementsByTagName("span")[0];          removeClass(os,"active");        }        addClass(this.getElementsByTagName("span")[0],"active");      }    }  }else{    for(var i=0;i<oRadio.length;i++){      oRadio[i].getElementsByTagName("span")[0].onclick=function(){        for(var i=0;i<oRadio.length;i++){          var os=oRadio[i].getElementsByTagName("span")[0];          removeClass(os,"active");        }        addClass(this,"active");      }    }  }}  </script>  <style>    body{      background: #00374B;    }    .h3{      color: #fff;      font-size: 15px;    }    .checkbox p{      line-height: 14px;      cursor:default;    }    .checkbox p.hand{      cursor: pointer;    }    .checkbox{      font-family: "微软雅黑";      color: #fff;      background: #00374B;      width: 300px;      float: left;    }    .checkbox input[type="checkbox"]{      opacity: 0;      margin: 0;      cursor: pointer;    }    .checkbox .checkspan{      display: inline-block;      width: 14px;      height: 14px;      margin-right: 5px;      border: 1px solid #35a48e;      vertical-align: top;      cursor: pointer;    }    .checkbox span.checked{      background: url(icon_sprites.png);      border: 1px solid #fff;    }    #check_all{      display: none;    }    /* 单选按钮  */    h2{      color: #fff;    }    h3{      color: #fff;    }    .radioBox{      width: 100px;    }    .radioBox input[type="radio"]{      opacity: 0;      margin: 0;      cursor: pointer;    }    .radioBox p{      color: #fff;      line-height: 15px;    }    .radioBox p.hand{      cursor: pointer;    }    .radioBox span{      background: url(icon_sprites.png) -14px 0;      display: inline-block;      vertical-align: top;      width: 15px;      height: 15px;      margin-right: 5px;      cursor: pointer;    }    .radioBox span.active{      background: url(icon_sprites.png) -29px 0;    }  </style></head><body>  <h2>复选框</h2>  <p class="h3">1、点击文字可选中和全选,2、点击文字,没有全选,3、要点击复选框才能选中,全选,4、要点击复选框,没有全选</p>  <!-- 1、点击文字可选中和全选 -->  <div class="checkbox" id="cb01">    <p id="check_all"><span class="checkspan"><input type="checkbox" name="cb"></span>全选</p>    <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项一</p>    <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项二</p>    <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项三</p>    <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项三</p>    <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项四</p>  </div>  <!-- 2、点击文字,没有全选 -->  <div class="checkbox" id="cb02">    <p id="check_all"><span class="checkspan"><input type="checkbox" name="cb"></span>全选</p>    <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项一</p>    <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项二</p>    <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项三</p>    <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项三</p>    <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项四</p>  </div>  <!-- 3、要点击复选框才能选中,全选 -->  <div class="checkbox" id="cb03">    <p id="check_all"><span class="checkspan"><input type="checkbox" name="cb"></span>全选</p>    <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项一</p>    <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项二</p>    <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项三</p>    <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项三</p>    <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项四</p>  </div>  <!-- 4、要点击复选框,没有全选 -->  <div class="checkbox" id="cb04">    <p id="check_all"><span class="checkspan"><input type="checkbox" name="cb"></span>全选</p>    <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项一</p>    <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项二</p>    <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项三</p>    <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项三</p>    <p><span class="checkspan"><input type="checkbox" name="cb"></span>选项四</p>  </div>  <br clear="both">  <hr size="5">  <!-- 单选按钮 -->  <h2>单选按钮</h2>  <!-- 1 -->  <h3>点击文字可选中</h3>  <div class="radioBox" id="rb01">    <p class="hand"><span class="radio_span active"><input type="radio" name="sex"></span>是</p>    <p class="hand"><span class="radio_span"><input type="radio" name="sex"></span>否</p>  </div>  <h3>只能选中单选框</h3>  <!-- 2 -->  <div class="radioBox" id="rb02">    <p><span class="radio_span active"><input type="radio" name="sex"></span>是</p>    <p><span class="radio_span"><input type="radio" name="sex"></span>否</p>  </div></body></html>

原标题:中秋来一发

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录