iT邦幫忙

2018 iT 邦幫忙鐵人賽
0
Modern Web

30天學習30套前端技術(2018年)系列 第 33

[十分鐘學習] Slidebars - 簡易導入側欄選單

  • 分享至 

  • xImage
  •  

example1

Slidebars是一套jQuery框架,提供網站或網站應用程式側欄選單

GitHub Star: 1,400
Javascripting Overall: 50%
瀏覽器: ChromeFirefoxIE9
RWD: 支援
License: MIT


《安裝》

  • CDN

      <!-- jQuery v1.9.1 -->
      <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
      <!-- Slidebars v2.0.2 -->
      <link href="https://cdnjs.cloudflare.com/ajax/libs/slidebars/2.0.2/slidebars.min.css" rel="stylesheet" />
      <script src="https://cdnjs.cloudflare.com/ajax/libs/slidebars/2.0.2/slidebars.min.js"></script>
    

《範例》

  • 側欄選單

      <div canvas="container">
      	<button class="left-slidebar">左方</button>
      </div>
    
      <div off-canvas="example-1 left reveal">
      	<!-- 內容-->
      </div>
    
      <script>
      	var controller = new slidebars();
      	controller.init(); // 初始化
      	$( ".left-slidebar" ).on( "click", function ( event ) {
      		event.stopPropagation();
      		controller.toggle( "example-1" ); // 打開或關閉側欄選單
      	} );
      </script>
    

    函式列表

    函式 描述

    init()|初始化
    toggle()|打開或關閉側欄選單


《延伸》

  1. Slidebars | Adchsm
  2. adchsm/Slidebars: Slidebars is a jQuery Framework for Off-Canvas Menus and Sidebars into your website or web app.

上一篇
[十分鐘學習] Masonry - 自動排序Layout
下一篇
[十分鐘學習] three.js - 動畫繪製評價最高的神器
系列文
30天學習30套前端技術(2018年)61
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言