/nanlan-toolkit

插件库

Primary LanguageJavaScript

快速使用

引入 js

script标签引入方式
<script src="lib/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/tab.min.js" type="text/javascript" charset="utf-8"></script>

创建 div

// 注意class的名字要一致
<div id="tab">
    <ul class="tab-nav">
            <li class="tab-nav__item active">新闻</li>
            <li class="tab-nav__item">娱乐</li>
            <li class="tab-nav__item">体育</li>
            <li class="tab-nav__item">科技</li>
        </ul>

        <div class="tab-content">
            <div class="tab-content__item active"><img src="images/01.jpg"></div>
            <div class="tab-content__item"><img src="images/02.jpg"></div>
            <div class="tab-content__item"><img src="images/01.jpg"></div>
            <div class="tab-content__item"><img src="images/02.jpg"></div>
        </div>
</div>

实例化

$(function(){
var tab = new Tab('#tab', {
  trigger: "click"
  });
})

使用npm

安装

npm install nanlan-tab --save-dev

引入

import Tab from 'nanlan-tab'
let dom = document.getElementById("tab");
var tab = new Tab(dom, {
  trigger: "mouseover",
});

模板

  <div id="tab" class="tab">
    <ul class="tab-nav">
      <li class="tab-nav__item active">新闻</li>
      <li>娱乐</li>
      <li>体育</li>
      <li>科技</li>
    </ul>

    <div class="tab-content">
      <div class="tab-content__item active"><img src="images/01.jpg" /></div>
      <div class="tab-content__item"><img src="images/02.jpg" /></div>
      <div class="tab-content__item"><img src="images/01.jpg" /></div>
      <div class="tab-content__item"><img src="images/02.jpg" /></div>
    </div>
  </div>

注意

模板的class名字保持一直（这点不太好,待优化）

参数说明

参数 说明 类型 可选值 默认值
trigger 触发事件 string mouseover/click click
animation 是否开启动画 boolean /string true/false/1000 true
defaultTab 默认高亮第几个 number 1-列表的长度 1
auto 是否自动播放 boolean /string flase/1000 flase