bigSlide 插件應用

時間 2019-12-06

標籤 bigslide 插件應用简体版

原文原文鏈接

1、插件官網

2、基本代碼

側邊欄控制開關

用一個 <a> 標籤來控制側邊欄的開關。#menu 用來指向 id 爲 menu 的側邊欄，menu-link 爲這個 <a> 標籤的類名。css

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

側邊欄代碼實例

側邊欄代碼以下，因爲須要實現的效果各不相同，因此各個 <li> 標籤中設置的 style 並不同，這樣的代碼看起來很亂，其實仍是應該寫在css中，並根據效果進行分類。java

<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 插件。jquery

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

插件初始化

最後則須要在 <body> 標籤尾部加上初始化插件的代碼。git

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

3、樣式自定義

側邊欄定位設置

做爲側邊欄的 <ul> 標籤類名爲 panel，由於初始狀態下須要讓該標籤隱藏在頁面視口以外，因此須要做以下設置。另外側邊欄並不須要隨着頁面的上下滾動始終顯示在視口中，因此默認的 position: fixed; 這個語句並不須要。github

.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> 元素等寬分佈，代碼以下：ide

/* 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;
}