JQ插件封装(jq_ui风格)

来源：互联网发布：td什么意思网络用语编辑：程序博客网时间：2024/05/22 08:04

源码：

<!DOCTYPE HTML><html><head><title>读取并修改元素的属性</title><meta charset="utf-8" /><style>.tabs{ list-style:none; padding:0;}.tabs a{  text-decoration:none;color:#000;padding:6px 12px;display:inline-block;  width:96px;  text-align:center;}.tabs>li{  float:left;  border-bottom:1px solid #000;}.tabs>.active{  border:1px solid #000;  border-bottom:0;}.container{position: relative;}.container>div{width: 300px;height: 100px;padding:30px;  background:#fff;  border:1px solid #000;  border-top:0;position: absolute;top: 34px;left: 0;}.container>.active{  z-index:10;}</style></head><body><h2>实现多标签页效果</h2>  <div id="my-tabs">    <ul class="tabs">      <li class="active"><a data-toggle="tab" href="#content1">10元套餐</a></li>      <li><a data-toggle="tab" href="#content2">30元套餐</a></li>      <li><a data-toggle="tab" href="#content3">50元包月</a></li>    </ul>    <div class="container">      <div id="content1" class="active">        10元套餐详情：<br /> 每月套餐内拨打100分钟，超出部分2毛/分钟      </div>      <div id="content2">        30元套餐详情：<br /> 每月套餐内拨打300分钟，超出部分1.5毛/分钟      </div>      <div id="content3">        50元包月详情：<br /> 每月无限量随心打      </div>    </div>  </div>  <script src="js/jquery-1.11.3.js"></script>  <script>  $(".tabs:has([data-toggle=tab])")      .on("click","[data-toggle=tab]",e=>{      var $tar=$(e.target);      if(!$tar.parent().is(".active")){        $tar.parent().addClass("active")          .siblings().removeClass("active");        var id=$tar.attr("href");        $(id).addClass("active")          .siblings().removeClass("active");      }    })  </script></body></html>

----------------------------------------

封装成：html、css、js+jquery.js

html：

<!DOCTYPE HTML><html><head><title>读取并修改元素的属性</title><meta charset="utf-8" /><link rel="stylesheet" href="diy_ui/style.css"></head><body><h2>实现多标签页效果</h2>  <div id="my-tabs">    <ul>      <li><a href="#content1">10元套餐</a></li>      <li><a href="#content2">30元套餐</a></li>      <li><a href="#content3">50元包月</a></li>    </ul>    <div>      <div id="content1">        10元套餐详情：<br /> 每月套餐内拨打100分钟，超出部分2毛/分钟      </div>      <div id="content2">        30元套餐详情：<br /> 每月套餐内拨打300分钟，超出部分1.5毛/分钟      </div>      <div id="content3">        50元包月详情：<br /> 每月无限量随心打      </div>    </div>  </div>  <script src="diy_ui/jquery-3.2.1.js"></script>  <script src="diy_ui/style.js"></script>  <script>  $("#my-tabs").tabs();  </script></body></html>

style.css

/***************tabs*******************/.tabs{ list-style:none; padding:0;}.tabs a{  text-decoration:none;color:#000;padding:6px 12px;display:inline-block;  width:96px;  text-align:center;}.tabs>li{  float:left;  border-bottom:1px solid #000;}.tabs>.active{  border:1px solid #000;  border-bottom:0;}.tabs+.container{position: relative;}.tabs+.container>div{width: 300px;height: 100px;padding:30px;  background:#fff;  border:1px solid #000;  border-top:0;position: absolute;top: 34px;left: 0;}.tabs+.container>.active{  z-index:10;}

注意：在.contain前加.tab+，防止与其它css文件冲突

style.js：

/*  jquery_ui风格插件 */if(typeof jQuery !== "function"){  throw new Error("diy_ui依赖于jQuery,必须先引入jquery.js");}else{  jQuery.fn.tabs=function(){    //this->将来要调用tabs函数的.前的jQuery对象    //侵入class和自定义扩展属性    var $ul=this.children().first();    $ul.addClass("tabs")//ul       .children().first()//第一个li       .addClass("active");    $ul.find("li>a").attr("data-toggle","tab");    var $container=this.children().last();    $container.addClass("container")              .children().first().addClass("active");    //事件绑定    $(".tabs:has([data-toggle=tab])")      .on("click","[data-toggle=tab]",e=>{      e.preventDefault();//使地址栏不变      var $tar=$(e.target);      if(!$tar.parent().is(".active")){        $tar.parent().addClass("active")          .siblings().removeClass("active");        var id=$tar.attr("href");        $(id).addClass("active")          .siblings().removeClass("active");      }    })  }}

记得引入jq就ok

阅读全文

0 0