bigSlide 插件應(yīng)用

XBaron 發(fā)布于2019-08-19 18:23 / 485人閱讀

摘要：一插件官網(wǎng)二基本代碼側(cè)邊欄控制開關(guān)用一個(gè)標(biāo)簽來控制側(cè)邊欄的開關(guān)。插件初始化最后則需要在標(biāo)簽尾部加上初始化插件的代碼。另外側(cè)邊欄并不需要隨著頁面的上下滾動(dòng)始終顯示在視口中，所以默認(rèn)的這個(gè)語句并不需要。

一、插件官網(wǎng)

bigSlide.js

二、基本代碼 側(cè)邊欄控制開關(guān)

用一個(gè) 標(biāo)簽來控制側(cè)邊欄的開關(guān)。#menu 用來指向 id 為 menu 的側(cè)邊欄，menu-link 為這個(gè) 標(biāo)簽的類名。

☰

側(cè)邊欄代碼實(shí)例

側(cè)邊欄代碼如下，由于需要實(shí)現(xiàn)的效果各不相同，所以各個(gè)

標(biāo)簽中設(shè)置的 style 并不一樣，這樣的代碼看起來很亂，其實(shí)還是應(yīng)該寫在css中，并根據(jù)效果進(jìn)行分類。


  
    < 所有課程內(nèi)容
  
  
    第3節(jié)課 / 共4節(jié)課：
  
  
    
      上一節(jié)課
      |
      下一節(jié)課

引入 JS 文件

文件中還需引入所需的 jQuery 庫以及 bigSlide 插件。

插件初始化

最后則需要在標(biāo)簽尾部加上初始化插件的代碼。

三、樣式自定義 側(cè)邊欄定位設(shè)置

作為側(cè)邊欄的

panel

position: fixed;

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

行內(nèi)元素等寬分布

最后一個(gè)

標(biāo)簽中的
標(biāo)簽設(shè)置為了 even 這個(gè)類，是為了讓
標(biāo)簽中的多個(gè) 元素等寬分布，代碼如下：
```
/* http://stackoverflow.com/questions/7245018/how-to-evenly-distribute-elements-in-a-div-next-to-each-other
將需要均勻分布的元素的外部 div 設(shè)置為 table，
table-layout 設(shè)置為 fixed，可讓各元素占據(jù)相同寬度 */
    div.even {
    display: table;
    width: 100%;
    table-layout: fixed; /* 各子元素寬度相同 */
}
div.even span {
    display: table-cell;
    text-align: center;
}
```
GPU云服務(wù)器云服務(wù)器 bigSlide 插件工具插件清理日歷插件

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79540.html
- 上一篇：關(guān)于json的一些問題
- 下一篇：JS 設(shè)計(jì)模式十四（策略模式）
相關(guān)文章
- bigSlide 插件應(yīng)用
  
  摘要：一插件官網(wǎng)二基本代碼側(cè)邊欄控制開關(guān)用一個(gè)標(biāo)簽來控制側(cè)邊欄的開關(guān)。插件初始化最后則需要在標(biāo)簽尾部加上初始化插件的代碼。另外側(cè)邊欄并不需要隨著頁面的上下滾動(dòng)始終顯示在視口中，所以默認(rèn)的這個(gè)語句并不需要。一、插件官網(wǎng) bigSlide.js 二、基本代碼側(cè)邊欄控制開關(guān) 用一個(gè) 標(biāo)簽來控制側(cè)邊欄的開關(guān)。#menu 用來指向 id 為 menu 的側(cè)邊欄，menu-link 為這個(gè) ...
  
  caspar 2019-08-02 15:55 評論0 收藏0
- bigSlide 插件應(yīng)用
  
  摘要：一插件官網(wǎng)二基本代碼側(cè)邊欄控制開關(guān)用一個(gè)標(biāo)簽來控制側(cè)邊欄的開關(guān)。插件初始化最后則需要在標(biāo)簽尾部加上初始化插件的代碼。另外側(cè)邊欄并不需要隨著頁面的上下滾動(dòng)始終顯示在視口中，所以默認(rèn)的這個(gè)語句并不需要。一、插件官網(wǎng) bigSlide.js 二、基本代碼側(cè)邊欄控制開關(guān) 用一個(gè) 標(biāo)簽來控制側(cè)邊欄的開關(guān)。#menu 用來指向 id 為 menu 的側(cè)邊欄，menu-link 為這個(gè) ...
  
  MrZONT 2019-08-30 13:04 評論0 收藏0
- 用 JS 更改元素的屬性
  
  摘要：設(shè)置側(cè)邊欄定位有了中間內(nèi)容區(qū)域頂部與頁面最上方的距離，以及頁面頂部導(dǎo)航欄的高度，側(cè)邊欄需要向下移動(dòng)的距離很容易就算出來了。用 bigSlide 生成的可滑動(dòng)側(cè)邊欄需要更改其定位和高度屬性，更改定位令其與中間內(nèi)容區(qū)域的頂部對齊，更改高度令其與中間內(nèi)容區(qū)域的底部對齊。這個(gè)問題可以拆分為下面幾個(gè)需求來依次實(shí)現(xiàn)：更改側(cè)邊欄定位獲取中間內(nèi)容區(qū)域頂部與頁面最上方的距離通過結(jié)合 CSS 選擇...
  
  chanjarster 2019-08-19 18:25 評論0 收藏0
- 個(gè)人文章分類整理
  
  摘要：春節(jié)閑來無事，看看自己在上寫的文章，想不到已經(jīng)篇了，各方面的都有，那就分類整理一下吧，也方便自己和別人查看。春節(jié)閑來無事，看看自己在SegmentFault上寫的文章，想不到已經(jīng)20篇了，各方面的都有，那就分類整理一下吧，也方便自己和別人查看。 CSS CSS Background-Size 屬性小記 [譯]關(guān)于垂直居中 Vertical Align 的探討 [譯]CSS 居中（...
  
  OnlyLing 2019-08-20 14:00 評論0 收藏0
- 個(gè)人文章分類整理
  
  摘要：春節(jié)閑來無事，看看自己在上寫的文章，想不到已經(jīng)篇了，各方面的都有，那就分類整理一下吧，也方便自己和別人查看。春節(jié)閑來無事，看看自己在SegmentFault上寫的文章，想不到已經(jīng)20篇了，各方面的都有，那就分類整理一下吧，也方便自己和別人查看。 CSS CSS Background-Size 屬性小記 [譯]關(guān)于垂直居中 Vertical Align 的探討 [譯]CSS 居中（...
  
  v1 2019-07-24 10:34 評論0 收藏0
發(fā)表評論

登陸后可評論

0條評論