iT邦幫忙

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

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

[十分鐘學習] Toolbar.js - 工具列

example1

一套產生工具列的jQuery套件

GitHub Star: 2,000
Javascripting Overall: 53%
License: MIT
瀏覽器: ChromeFirefoxIE7+
RWD: 不支援(可運作)
License: MIT


《安裝》

  • CDN

      <!-- Font Awesome v4.3.0 -->
      <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
      <!-- jQuery v1.9.1 -->
      <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
      <!-- Toolbar.js v1.0.4 -->
      <link href="https://paulkinzett.github.io/toolbar/css/jquery.toolbar.css" rel="stylesheet" />
      <script src="http://paulkinzett.github.io/toolbar/js/jquery.toolbar.min.js"></script>
    

《範例》

  • 工具列效果

      <!-- 按鈕 -->
      <div data-toolbar="content-option" class="btn-toolbar">
      	<i class="fa fa-cog"></i>
      </div>
    
      <!-- 顯示列表 -->
      <div id="toolbar-options" class="hidden">
      	<a href="#"><i class="fa fa-plane"></i></a>
      	<a href="#"><i class="fa fa-car"></i></a>
      	<a href="#"><i class="fa fa-bicycle"></i></a>
      </div>
    
      <script>
      	$( ".btn-toolbar" ).toolbar({
      		// 參數設定[註1]
      		content: "#toolbar-options" // 目標物件
      	});
      </script>
    

    [註1]

    參數 描述 選項
    content 目標物件 [選擇器]
    position 工具列顯示位置 topleftrightbottom
    style 工具列CSS風格 primarydangerwarninginfosuccessinfo-odarklight
    animation 工具列過場動畫效果 flipgrowflyinbounce
    event 工具列顯現方式 clickmouseover...
    hideOnClick 當點選工具列以外的部分十,將隱藏工具列 truefalse

《延伸》

  1. Toolbar.js - jQuery plugin to create tooltip style toobars
  2. paulkinzett/toolbar: A tooltip style toolbar jQuery plugin

上一篇
[十分鐘學習] iScroll - 3秒變成iPhone,模擬拖曳反彈(bounds)神器
下一篇
[十分鐘學習] nanoScroller.js - Mac OS風格捲軸
系列文
30天學習30套前端技術(2018年)61

尚未有邦友留言

立即登入留言