bigSlide 插件运用

2024年3月29日 268次阅读来源: samsara0511

一、插件官网

二、基础代码

侧边栏掌握开关

用一个 <a> 标签来掌握侧边栏的开关。#menu 用来指向 id 为 menu 的侧边栏，menu-link 为这个 <a> 标签的类名。

<a href="#menu" class="menu-link">&#9776;</a>

侧边栏代码实例

侧边栏代码以下，由于须要完成的结果各不雷同，所以各个 <li> 标签中设置的 style 并不一样，如许的代码看起来很乱，实在照样应当写在css中，并依据结果举行分类。

<ul id="menu" class="panel" role="navigation" style="height: auto;">
  <li style="line-height: 7em; border-bottom: 1px solid #fff;">
    <a href="sub2.htm" style="font-size: 16px;"><b>&lt;&nbsp;一切课程内容</b></a>
  </li>
  <li style="padding-top: 1em; line-height: 3em;">
    <a>第3节课&nbsp;/&nbsp;共4节课：</a>
  </li>
  <li style="padding-top: 1em; padding-bottom: 2em; line-height: 3em;">
    <div class="even">
      <span><a>上一节课</a></span>
      <span>|</span>
      <span><a>下一节课</a></span>
    </div>
  </li>
</ul>

引入 JS 文件

文件中还需引入所需的 jQuery 库以及 bigSlide 插件。

<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="slide/bigSlide.js"></script>

插件初始化

末了则须要在 <body> 标签尾部加上初始化插件的代码。

<script>
  $(document).ready(function() {
    $('.menu-link').bigSlide();
  });
</script>

三、款式自定义

侧边栏定位设置

作为侧边栏的 <ul> 标签类名为 panel，由于初始状态下须要让该标签隐藏在页面视口以外，所以须要作以下设置。别的侧边栏并不须要跟着页面的高低转动一直显现在视口中，所以默许的 position: fixed; 这个语句并不须要。

.panel {
  left: -20em; /*left or right and the width of your navigation panel*/
  width: 20em; /*should match the above value*/
}

行内元素等宽散布

末了一个 <li> 标签中的 <div> 标签设置为了 even 这个类，是为了让 <div> 标签中的多个 <span> 元素等宽散布，代码以下：

/* http://stackoverflow.com/questions/7245018/how-to-evenly-distribute-elements-in-a-div-next-to-each-other
将须要均匀散布的元素的外部 div 设置为 table，
table-layout 设置为 fixed，可以让各元素占有雷同宽度 */
    div.even {
    display: table;
    width: 100%;
    table-layout: fixed; /* 各子元素宽度雷同 */
}
div.even span {
    display: table-cell;
    text-align: center;
}

    原文作者：samsara0511
    原文地址: https://segmentfault.com/a/1190000005344216
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

一、 插件官网

二、 基础代码