JQ插件封装(jq_ui风格)

r囧r小猫 2022-06-02 23:27 205阅读 0赞

源码：

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