插件封装2(boot风格)

青旅半醒 2022-06-02 23:41 138阅读 0赞

html1：

<!DOCTYPE html>
    <html>
     <head>
      <meta charset="utf-8"/>
      <title>...</title>
      <link rel="stylesheet" href="boot_ui/style.css">
     </head>
     <body>
      <h1>下拉菜单</h1>
      <div class="dropdown">
        <a data-trigger="dropdown" href="#">Dropdown</a>
        <ul class="dropdown-menu fade">
    	    <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
    	    <li><hr></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div>
    
    	<script src="boot_ui/jquery-3.2.1.js"></script>
      <script src="boot_ui/style.js"></script>
     </body>
    </html>

html2：

<!DOCTYPE html>
    <html>
     <head>
      <title> new document </title>
      <meta charset="utf-8">
      <link rel="stylesheet" href="boot_ui/style.css">
     </head>
     <body>
    	<h1>使用“高度动画”实现“手风琴”组件</h1>
    	<div class="accordion">
    		<div class="title" data-toggle="collapse">《西游记》简介</div>
    		<div class="content fade in">一个和尚和四个动物的故事: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique nulla voluptas velit minus esse voluptatem illum quis magni nihil sint facilis cupiditate nobis quia ab neque. Modi veniam omnis nisi?	</div>
    		<div class="title" data-toggle="collapse">《水浒传》简介</div>
    		<div class="content fade">105个男人和三个女人的故事: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis provident sapiente aperiam reprehenderit repellat rem magnam vel odio quia harum hic impedit dolorem similique ea est consequatur adipisci at nemo!</div>
    		<div class="title" data-toggle="collapse">《红楼梦》简介</div>
    		<div class="content fade">一个男人和一群女人的故事: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus minima quidem aspernatur eligendi optio cupiditate minus nam expedita? Aliquid veritatis doloribus maxime vel dicta illo unde iusto qui quasi doloremque.</div>
    	</div>
    
    	<script src="boot_ui/jquery-3.2.1.js"></script>
      <script src="boot_ui/style.js"></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;
    }
    
    /* ---------------------dropdown---------------------- */
    .dropdown{width:64px; height:20px;}
    .dropdown a{
      text-decoration:none; 
      color:#000;
      display:inline-block;
    }
    .dropdown>a{ 
      border:1px solid #000; padding:6px 12px;
    }
    .dropdown-menu{
      width:200px;
      list-style:none; margin:0; padding:0;
      border:1px solid #aaa;
      box-shadow:5px 5px 6px #000;
    }
    .dropdown-menu a{padding:6px 20px; width:160px}
    .dropdown-menu li:hover{background:#ddd}
    .dropdown>.fade{
      height:0;
      opacity:0;
      overflow:hidden;
      transition:all .5s linear;
    }
    .dropdown>.in{
      height:152px;
      opacity:1;
    }
    
    /* -----------------------accordion------------------------- */
    .accordion{width:80%; margin:0 auto;}
    .accordion>.title{
      background:#eee; border:1px soild #aaa;
      padding:6px; font-size:1.5em; 
      font-weight:bold; cursor:pointer;
    }
    .accordion>.content{
      border-left:1px solid #eee;
      border-right:1px solid #eee;
    }
    .accordion>:last-child{
      border-bottom:1px solid #eee;
    }
    .accordion>.fade{
      height:0;
      opacity:0;
      overflow:hidden;
      transition:all .5s linear;
    }
    .accordion>.in{
      height:84px;
      opacity:1;
    }

style.js

/*
      boot风格插件封装
     */
    if(typeof jQuery !== "function"){
      throw new Error("diy_ui依赖于jQuery,必须先引入jquery.js");
    }else{
    	$(()=>{  //DOM加载后自动执行
    		$(".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");
    	      }
    	    })
    	})
    
    	$(()=>{
    		$(".dropdown:has([data-trigger=dropdown])")  //boot中data-*表示行为
            .hover(function(){
                $(this)
                  .children(".dropdown-menu")
                  .toggleClass("in")
            })
    	})
    
    	$(()=>{
    		$(".accordion:has([data-toggle=collapse])").on("click",".title",e=>
    	      $(e.target).next(".content").toggleClass("in")
    	        .siblings(".content").removeClass("in")
    	    );
    	})
    }