面向对象深度解析 --- tab 导航栏实例

最新推荐文章于 2024-06-14 09:24:52 发布

小二李

最新推荐文章于 2024-06-14 09:24:52 发布

阅读量126

点赞数 1

分类专栏： JS面向对象文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_43800535/article/details/136834952

版权

JS面向对象专栏收录该内容

5 篇文章 0 订阅

订阅专栏

src\index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>面向对象</title>
    <link href="style/tab.css" />
  </head>
  <body>
    <div class="wrap">
      <!-- J_tab 标签为供 JS 获取DOM操作用的 -->
      <div class="tab J_tab">
        <div class="item current">选项1</div>
        <div class="item">选项2</div>
        <div class="item">选项3</div>
      </div>
      <div class="page J_page">
        <!-- fade 为页面的切换方式 -->
        <div class="page-wrap fade">
          <div class="item active">页面1</div>
          <div class="item">页面2</div>
          <div class="item">页面3</div>
        </div>
      </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="./js/tab.js"></script>
    <script type="text/javascript"></script>
  </body>
</html>

src\style\tab.css

样式文件

.page .page-wrap .item {
  height: 100%;
  font-size: 100px;
  text-align: center;
  line-height: 450px;
}

/* fade 切换方式 */
.page .page-wrap.fade .item {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

/* 显示页面 */
.page .page-wrap.fade .item.active {
  display: block;
}

/* slide 的切换方式 width 为 所有页面宽度的总和 */
.page .page-wrap.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 1500px;
}

.page .page-wrap.slide .item {
  float: left;
  width: 500px;
}

src\js\tab.js

业务逻辑

var Tab = function (mode) {
  this.mode = mode === 'fade' || mode === 'slide' ? mode : 'fade'

  this.oPage = $('.J_page')
  this.oTab = $('.J_tab')
  // children() https://www.w3school.com.cn/jquery/traversing_children.asp
  // 返回被选元素的所有直接子元素

  // find()  https://www.w3school.com.cn/jquery/traversing_find.asp
  // 获得当前元素集合中每个元素的后代
  this.oPageWrap = this.oPage.children('.page-wrap')
  this.oPageItems = this.oPage.find('.item')

  this.init()
}
/**
 * 初始化
 */
Tab.prototype.init = function () {
  this.setMode()
  this.bindEvent()
}

/**
 * 设置 mode，即给dom追加样式
 *
 * addClass() https://www.w3school.com.cn/jquery/attributes_addclass.asp
 * 向被选元素添加一个或多个类,该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。
 * 如需添加多个类，请使用空格分隔类名。
 */
Tab.prototype.setMode = function () {
  this.oPageWrap.addClass(this.mode)
}

/**
 * 绑定事件监听
 * on() https://www.runoob.com/jquery/event-on.html
 * 在被选元素及子元素上添加一个或多个事件处理程序
 * 如需移除事件处理程序，请使用 off() 方法。
 * 如需添加只运行一次的事件然后移除，请使用 one() 方法。
 *
 * $.proxy https://www.runoob.com/jquery/event-proxy.html
 * 方法接受一个已有的函数，并返回一个带特定上下文的新的函数
 */
Tab.prototype.bindEvent = function () {
  // .item 规定只能添加到指定的子元素上的事件处理程序
  this.oTab.on('click', '.item', $.proxy(this.tabClick, this))
}

/**
 * siblings() https://www.runoob.com/jquery/traversing-siblings.html
 *
 * removeClass()  https://www.w3school.com.cn/jquery/attributes_removeclass.asp
 * 从被选元素移除一个或多个类
 *
 * index() https://www.w3school.com.cn/jquery/dom_element_methods_index.asp
 *返回指定元素相对于其他指定元素的 index 位置
 * @param {*} e
 */
Tab.prototype.tabClick = function (e) {
  var e = e || window.event,
    tar = e.target || e.srcElement,
    curIdx = $(tar).index()

  if (tar.className === 'item') {
    // 为当前点击的 tab 追加样式
    $(tar).addClass('current').siblings('.item').removeClass('current')
    this._pageChange(curIdx)
  }
}

Tab.prototype._pageChange = function (index) {
  switch (this.mode) {
    case 'fade':
      this._fadePage(index)
      break
    case 'slide':
      this._slidePage(index)
      break
    default:
      this._fadePage(index)
      break
  }
}

/**
 * eq() https://www.w3school.com.cn/jquery/traversing_eq.asp
 * 将匹配元素集缩减值指定 index 上的一个
 *
 * fadeIn() https://www.w3school.com.cn/jquery/effect_fadein.asp
 * 使用淡入效果来显示被选元素，假如该元素是隐藏的
 *
 * fadeOut() https://www.w3school.com.cn/jquery/effect_fadeout.asp
 * 使用淡出效果来隐藏被选元素，假如该元素是隐藏的
 * @param {*} index
 */
Tab.prototype._fadePage = function (index) {
  this.oPageItems.eq(index).fadeIn(100).siblings('.item').fadeOut(100)
}

/**
 * slide 切换方式
 * animate()  https://www.w3school.com.cn/jquery/effect_animate.asp
 * 通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果
 * @param {*} index 
 */
Tab.prototype._slidePage = function (index) {
  this.oPageWrap.animate({ left: -index * 500 } + 'px')
}

new Tab('fade')