iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 33
0
Modern Web

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

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

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

尚未有邦友留言

立即登入留言