JQ插件封装(jq_ui风格)

最新推荐文章于 2022-10-19 15:16:31 发布

spfLinux

最新推荐文章于 2022-10-19 15:16:31 发布

阅读量420

点赞数

分类专栏： jQuery 文章标签： JQ 插件封装

jQuery 专栏收录该内容

21 篇文章

订阅专栏

源码：

<!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