常用的前端外掛V1

未來nan朋友發表於2017-05-03

some jquery plugins are used for labelMangerSystem,some things may not be complete,ehhhh…,just leave them to perfection!

flatpickr

INTRODUCTION

輕量級(6k)，功能強大的日期選擇器，相容chrome和firefox
不依賴於其他庫，UI少，使用SVG作為介面的圖示
相容JQuery
在配置引數中，所有的型別為string或boolean的引數都可以通過data-屬性在HTML標籤中進行設定,例如：data-min-date、data-default-date、data-default-date..
月份可以滾動，年份可以手動輸入

CONFIG

option.enableTime

enableTime: true||false;//是否啟用日期選擇

option.enableSeconds

enableSeconds: true||false,//是否啟用秒選擇器

option.dateFormat


dataFormat: "Y-m-d"||"d.m.Y";//設定日期顯示格式

option.(minDate&maxDate)


minDate: "today"||"2016-10-20 15:30"..//可選擇的最小/最大時間，與dataFormat格式一致

option.weekNumbers

weekNumbers: true||false;//是否顯示週數

option.disable


disable: ["2017-03-30","2017-05-1"..]||
         [{form: "2017-04-01", to: "2017-05-01"}..]||
         [function(data){
            return (data.getMonth()%2===0)
            }]
//禁選日期，具體的值、日期範圍或者函式，其餘日期啟用

option.enable

enable: ["2017-03-30","2017-05-1"..]||
        [{form: "2017-04-01", to: "2017-05-01"}..]||
        [function(data){
            return (data.getMonth()%2===0)
            }]
 //啟用日期，其他日期禁選

option.mode

mode: "single"||"multiple"||"range";
//分別表示只能選一個日期/可選多個日期/可選一個日期範圍

option.inline

inline: true||false;//日期選擇器常開或者點選觸發

USAGE

在頁面中引入flatpicker.css和flatpicker.js檔案
解決於layer同用時，日曆顯示在layer層下，將 flatpicker.min.css 內 .flatpickr-calendar.open 的 z-index 屬性值改為 9999999

① HTML

<input id="flatpickr" placeholder="請選擇截止日期">

② JS

_initFlatPickr = function() {
    $("#flatpickr").flatpickr(
        //some options...
        );
},

jQgrid

INTRODUCTION

JQGrid是一個在jquery基礎上做的一個表格控制元件，以ajax的方式和伺服器端通訊
jqGrid使用jQuery Java指令碼庫，並作為該包的外掛編寫

CONFIG

option.url 設定資料地址,直接獲取資料


url: "/api/task/list-task-for-applicant",

option.datatype 資料傳輸格式

datatype: "json",

option.showLoadtext 讀取資料或者排序時所顯示的文字內容,比如loading…


showLoadtext: false,

option.showCellTips 顯示單元格的提示資訊，用 HTML:title 屬性就行了

showCellTips: false,

option.altRows 設定為交替行表格


altRows: false,

option.colNames 表頭

colNames: ["A","B","C"],

可以為表頭設定樣式，一般通過函式統一設定

var getHeadContent = function(arr) {
    var result = [];
    for (var i = 0, len = arr.length; i < len; i++) {
        result.push(`<span style="color:#666;" lang="cn";>` + arr[i] + `</span>`);
    }
    return result;
};

此時表頭設定為如下所示

colNames: getHeadContent(["A","B","C"]),

option.colModel 設定每一列引數列表

colModel: [{
    name: `name`, //設定列在表格中的唯一名稱，此屬性是必須的
    index: `name`, //通過sidx引數設定排序時的索引名
    fixed: isFixed, //若設為true，列寬不允許重新計算。GridWidth方法改變表格寬度時，列寬也不會改變。
    width: 120, //設定列的初始寬度，可用pixels和百分比
    align: "center", //定義表格單元格（非表頭）的對齊方式，可取值：left, center, right
    classes: "hello", //此屬性用於定義列的類名，當有多個類名時，用空格間隔
    formatter: format4List
}]

option.rowNum 表格中可見的記錄數。此引數通過url傳遞給伺服器供檢索資料用。注意：若此引數設定為10，而伺服器返回15條記錄，將只有10條記錄被裝入。若此引數被設定為-1，則此檢查失效

rowNum: 7,

option.width 表格的寬度為colModel中定義的所有列寬度的總和,若設定了該項,每列的初始寬度按照shrinkToFit 設定的值

width: 1180,

option.mtype 定義提交型別POST或GET

mtype: "post",

option.pager 定義分頁瀏覽導航條。必須是一個HTML元素

pager: `#dataPager`,

option.height

height: `auto`,

option.hoverrows 錶行是否有滑鼠懸停效果

hoverrows: false,

option.sortorder 排序規則

sortorder: `desc`||`asc`,

option.viewsortcols 定義表頭中排序圖示的外觀和行為。預設為[false,`vertical`,true]


viewsortcols: [true, `vertical`, true],

event.onCellSelect 當點選單元格時觸發。rowid：當前行id；iCol：當前單元格索引；cellContent：當前單元格內容；e：event物件

onCellSelect: function(rowid, iCol, cellcontent, e) {
    //coding...
}

event.loadComplete 伺服器返回響應的回撥函式, xhr：XMLHttpRequest 物件

loadComplete: function(xhr){
    var total = xhr.records;//表示返回的記錄數
    //coding...
}

event.loadError 請求伺服器失敗的回撥函式

loadError: function(xhr, status, error){
    //coding...
}

event.loadBeforeSend 此事件發生在XMLHttpRequest被髮送前,用於修改物件屬性（如headers）

loadBeforeSend: function(xhr, settings) {
    var header = JwtTool.createAuthorizationTokenHeader();
    if (header.hasOwnProperty("Authorization")) {
        xhr.setRequestHeader("Authorization", header.Authorization);
    }
}

USAGE

CSS

<link href="/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />

HTML建立一個承載表格的TABLE元素

<table id="taskConfigGrid"></table>

<script src=`/Scripts/js/jquery-2.0.3.min.js` type="text/javascript"></script>
<script src=`/Scripts/js/jqGrid/jquery.jqGrid.min.js` type="text/javascript"></script>
<script src=`/Scripts/js/jqGrid/i18n/grid.locale-en.js` type="text/javascript"></script>
$("#taskConfigGrid").jqGrid({
    //options...
    //events...
});

requireJs

INTRODUCTION

JavaScript模組只是遵循SRP(Single Responsibility Principle單一職責原則)的程式碼段,傳統通過 <script> 標籤來進行載入,這就需要持續不斷的關注模組之間的依賴性，按照一個特定的順序載入這些模組,否則執行時將會發生錯誤(這種錯誤我經常遇到)
AMD（非同步模組定義）就是這樣一種對模組的定義，使模組和它的依賴可以被非同步的載入，但又按照正確的順序
RequireJS是一個Javascript 檔案和模組框架，使用RequireJS,你可以順序讀取僅需要相關依賴模組。RequireJS所做的是，在你使用script標籤載入你所定義的依賴時，將這些依賴通過head.appendChild()函式來載入他們。
當依賴載入以後，RequireJS計算出模組定義的順序，並按正確的順序進行呼叫。這意味著你需要做的僅僅是使用一個“根”來讀取你需要的所有功能，然後剩下的事情只需要交給RequireJS就行了。

CONFIG

option.data-main 用來引入入口檔案（當requireJS被載入完成後立即呼叫的檔案稱為入口檔案）

<script data-main="/require-config" src="/libs/require/require.js"></script>

require-config.baseUrl 用於載入模組的根路徑

baseUrl: `/`,

require-config.paths 用來配置別名，用別名來代替模組名，注意被替代的模組名不需要.js字尾

paths: {
    //moduleID:路徑(注意moduleID字尾不需要.js)
    //建議一個moduleId對應一個單獨的資料夾，因為可能因為版本不同產生差異
    `jquery`: `libs/core/jquery.min`
}

require-config.shim shim配置可簡單設定為依賴陣列,設定shim本身不會觸發程式碼的載入,想要實際載入shim指定的或涉及的模組，仍然需要一個常規的require/define呼叫

shim: {
    `jquery`: {
        //載入依賴關係陣列
        deps: [`css!/libs/jquery/jquery.css`]
    }
},

require-config.deps 載入依賴關係陣列

deps: [
    "app"
]

define 利用它來編寫模組，然後在相應的地方進行引入

define([
    `jquery`,
    `text!module/config/task-config-applicant/tpl/task-config-tpl.html`
], function(jQuery, Tpl) {
    //coding...
}

require 通過它將寫好的模組進行引入，並根據這些模組編寫我們的主程式碼

require([`jquery`], function ($) {
    //jQuery was loaded and can be used now
});

USAGE

主頁面引入JS檔案

<script data-main="/require" src="/libs/require/require.js"></script>

配置 require.js 檔案

require.config({
    urlArgs: "v=" + (new Date()).getTime(),
    waitSeconds: 0,
    baseUrl: `/`,
    paths: {
        `jquery`: `libs/core/jquery.min`,
        "multiselect": "libs/multiselect/bootstrap-multiselect"        
        },
    shim: {
        `multiselect`: {
            deps: [`css!/libs/multiselect/bootstrap-multiselect.css`]
        },
        `echarts_theme`: {
            deps: [`echarts`]
        }
    },
    deps: [
        "app"
    ]
});

相應頁面引入並使用

define([
    `jquery`,
    `text!module/config/task-config-applicant/tpl/task-config-tpl.html`
], function(jQuery, Tpl) {
    //coding...
}

layer

INTRODUCTION

可做獨立元件，一款優秀的彈出層元件

CONFIG

option.type

type:0 //資訊框，預設
type:1 //頁面層
type:2 //iframe層
type:3 //載入層
type:4 //tips層

option.title String/Array/Boolean，預設：`資訊`

title :`我是標題`
title: [`文字`, `font-size:18px;`]
title: false

option.content String/DOM/Array，預設：“

content: `傳入任意的文字或html`
content: $(`#id`)
content: html //可以結合 HandlebarJs 使用

option.skin String 目前layer內建的skin有：layui-layer-lanlayui-layer-molv

skin: `layui-layer-rim`,

option.area String/Array，預設：`auto`

area: `500px`//只定義寬度，高度自適應
area: [`500px`, `300px`]

option.btn

btn: [`確定`, `取消`],
btn1: function(index, layero) {
    var num = $("#submitNum").val();
    _controller.updatePassNum(v1, num).done(function(res) {
        if (res.code == 0) {
            layer.close(index);
            layer.msg("提交成功！");
            scope.refreshGrid();
        }
    });
},
btn2: function(index, layero) {
    layer.close(index);
}

option.zIndex 預設：19891014 一般用於解決和其它元件的層疊衝突

option.success

success: function(layero, index){
    console.log(layero, index);
}

layer.open

layer.open({
    option...//上述配置
});

layer.msg


layer.msg(`hello`,function(){
    //do something or not 
    });

layer.close 一般結合 btn 回撥函式進行使用

layer.close(index)

USAGE

直接引用 layer.js 即可

<script src="layer.js"></script>
<script>
layer.msg(`hello`); 
</script>

handlebarsjs

INTRODUCTION

Handlebars 是JavaScript一個語義模板庫，通過對 view 和 data 的分離來快速構建Web模板，意義在於讓你的 html 和 js 充分解耦，它在載入時被預編譯，而不是到了客戶端執行到程式碼時再去編譯，這樣可以保證模板載入和執行的速度。
Handlebars.js 是一個由Javascript構建的編譯器，它接收任意HTML與Handlebars.js表示式並將它們編譯為Javascript函式。這個派生出來的Javascript函式接著接收一個引數或者一個物件（即你的資料），然後它返回一個包含HTML以及被插值在HTML中的物件屬性值的字串。因此，你最終可以得到一個物件屬性值位於相應地方的字串（HTML），你可以將這個字串插入到頁面中。
路徑：../ 同CSS檔案路徑選擇

Handlebar.js 模板的三個部分：

**a.** Handlebars.js表示式：{ { ... } }，內容可以是變數或者函式等。 

**b.** Date(上下文)：即你想要展示在頁面上的內容，你將你的資料作為一個物件（一個正常的Javascript物件）傳遞給Handlebars函式。這個資料物件叫做上下文。這個物件能夠由陣列，字串，數字，其他物件組成，或者是包含所有的東西。如果資料物件擁有一個物件陣列，你可以使用Handlebars中的each輔助函式（稍後將討論輔助函式）去迭代陣列，此時的上下文將被設定為陣列中的每個物件。 

**c.** handlebars編譯函式：Handlebars編譯函式接收模板作為引數並返回一個Javascript函式。

CONFIG

option.expression 注意HandlebarJs的標籤是內閉合的，對 if 和 unless 只能判斷 true or false, “、undefined、null、0、[]等都會被識別為false

{ { !註釋 } }

{ { content } }

{ { #if } } { { /if } }

{ { #if } } { { else } } { { /if } }

{ { #if } } { { else if } } { { else } } { { /if } }

{ { #unless } } { { /unless } } //用法同if，與if判斷條件相反

{ { #each } } { { /each } } 遍歷陣列

{ { { richtext } } } 避免轉義

Handlebar.registerHelper 自定義一個 Handlebar 函式，可在html中作為標籤直接使用

//判斷是否為標註管理員
Handlebars.registerHelper("isTaskManger", function(options) {
    if (_currentUserRole === "ROLE_LABEL_MANAGER") {
        //滿足新增繼續執行
        return options.fn(this);
    } else {
        //不滿足條件執行{{else}}部分
        return options.inverse(this);
    }
});

//HTML內使用
{ { #isTaskManger } }
<li>標註任務管理</li>
<li>提交日誌管理</li>
{ { /isTaskManger } }

Handlebar.compile 對 handlebars.expression 進行預編譯，生成一個JavaScript函式

var source = $(`#template-user`).html();//獲取到html結構
var template = Handlebars.compile(source);//編譯成模板
var html = template(data);//生成完成的html結構

USAGE

在頁面中引入 Handlebar.js

HTML內構建Handlerbar表示式

{ { #each infoList } }
<div class="single-member effect-3">
    <div class="member-info">
        <h3>{ { uname } }</h3>
        <h5>{ { fname } }</h5>
        <p>{ { taskId } }</p>
        <p>{ { fdesc } }</p>
        <p>{ { machine } }</p>
        <p>{ { update } } / {{sum}}</p>
    </div>
</div>
{ { /each } }

JS部分：獲取資料格式如下

{
    "code": 0,
    "data": [{
        "taskId": "22000001",
        "uname": "使用者1",
        "fname": "PD1",
        "fdesc": "行人檢測",
        "machine": "01",
        "update": 50,
        "sum": 100
    },
    {
        "taskId": "22000002",
        "uname": "使用者2",
        "fname": "PD2",
        "fdesc": "臉譜檢測",
        "machine": "02",
        "update": 20,
        "sum": 100
    }
]
}

JS部分：對HTML進行預編譯生成一個JavaScript函式，然後通過生成的函式對資料進行渲染，生成HTML

var _getLabelInfo = function() {
    _controller.getLabelInfo().done(function(res) {
        var data = {infoList: res.data},
        template = Handlebars.compile(rightTpl)(data);
        $("#right-content").empty();
        $("#right-content").html(template);
    });

};

jQueryLangJs

INTRODUCTION

即時語言切換,無需重新載入頁面或向伺服器發出請求
跨網頁的語言永續性和通過cookie重新載入（需要js-cookie.js外掛）
自動翻譯頁面的動態部分（例如通過AJAX載入或通過jQuery新增）
增加了對正規表示式匹配的支援

CONFIG

en.json 配置語言包，包含短語部分和正則部分

{
    "token": {
        "搜尋": "searchFor",
        "首頁": "first",
        "尾頁": "last"
    },
    "regex": [
        ["Budget", "งบประมาณ"],
        ["^Something at start of text", ""],
        ["This will be case insensitive", "i", ""]
    ]
}

option.lang 放置在 HTML 檔案中，用於標記需要翻譯的元素

翻譯 title、alt、href

<button title="語言" lang="cn">

翻譯內容

<text lang="cn">標註管理系統</text>

翻譯 alert

alert(window.lang.translate(`Some text to translate`));

option.data-lang-token 用於標記長文字，自定義令牌替換原文字內容

USAGE

JS部分

js-cookie

<script src="js/jquery-lang.js" charset="utf-8" type="text/javascript"></script>
<script src="js/js.cookie.js" charset="utf-8" type="text/javascript"></script>

初始化

var lang = new Lang();
//初始化國際化模組
_changeLang = function() {
    //定義語言包位置
    lang.dynamic(`en`, `../../libs/langpack/en.json`);
    //定義預設語言
    lang.init({
        defaultLang: `cn`
    });
},

切換

lang.change(`en`);

ECharts

INTRODUCTION

純javascript的圖表庫，支援豐富圖表型別，所以下面只對專案所用的圖表進行介紹
相容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等）
底層依賴輕量級的 Canvas 類庫 ZRender
可定製，個性化
圖表父級DIV需要規定高度，否則顯示不出來

CONFIG

option.backgroundColor

backgroundColor: `#eee`,

option.title

title: {
        text: `主標題,
        subtext: `副標題`,
        textStyle: {...},//設定標題樣式
        x: `center`,
        y: `top`
    },

option.tooltip

tooltip: {
    trigger: `item`,//觸發型別{item/axis}
    formatter: "{a} <br/>{b} : {c} ({d}%)" //提示框浮層內容格式器，支援字串模板和回撥函式兩種形式，不同圖表型別各個標記代表含義不同
},

option.legend

legend: {
    orient: `vertical`,//列表的佈局朝向{vertical/horizontal}
    left: `left`,//自適應左邊距
    data: [{
            name: `系列1`,//展示資料[``,...]
            icon: `circle`,// 強制設定圖形為圓。
            textStyle: {
                color: `red`// 設定文字為紅色
            }
            }] 
    },

option.toolbox

toolbox: {
    orient: `vertical`,//工具欄 icon 的佈局朝向{vertical/horizontal}
    show: true,//預設不顯示
    feature: { //各工具配置項
        dataZoom: {yAxisIndex: `none`}, //區域縮放
        dataView: {readOnly: false}, //檢視源資料，false時可更改
        magicType: {type: [`line`, `bar`]}, //折線圖和柱狀圖切換
        restore: {}, //重新整理
        saveAsImage: {} //儲存影像
    }
},

option.xAxis

xAxis: {
    position: `top`, //X軸位置,default:bottom
    name: `evsion`, //X座標軸名稱
    type: `category`, //座標軸型別{value,category,time,log}
    boundaryGap: false, //座標軸兩邊留白策略，類目軸和非類目軸的設定和表現不一樣
    data: Array//與`category`配合使用,例[`2017-4-1`, `2017-4-2`, `2017-4-3`, `2017-4-4`, `2017-4-5`, `2017-4-6`, `2017-4-7`]
},

option.yAxis

yAxis: {
    type: `value`,
    //座標軸刻度的相關設定
    axisLabel: {
        formatter: `{value}~~~~`
    }
},

option.series 系列列表。每個系列通過 type 決定自己的圖表型別, 每個 type 對應不同的屬性

option.radar 雷達圖座標系元件，只適用於雷達圖

indicator:  [
{ name: `銷售（sales）`, max: 6500},
... 
]

option.visualMap

visualMap: {
    min: 0,
    max: 10,
    calculable: true,
    orient: `horizontal`,
    left: `center`,
    bottom: `15%`
},

option.calendar 日曆

calendar: {
    top: `middle`,
    left: `center`,
    orient: `vertical`,
    cellSize: [60], //單元格大小，`auto`||[`20`,`40`]
    //是否顯示年
    yearLabel: {
        show: true,
        textStyle: {
            fontSize: 30
        }
    },
    //是否顯示日
    dayLabel: {
        margin: 5, //星期標籤與軸線之間的距離
        firstDay: 1, //從週一開始
        nameMap: [`星期日`, `星期一`, `星期二`, `星期三`, `星期四`, `星期五`, `星期六`]
    },
    //是否顯示月
    monthLabel: {
        show: true
    },
    range: [`2017-01-02`, `2017-02-23`] // `2017-02`||2017||[`2017-01`, `2017-02`]
},

line

series: [{
    name: `登陸量`,
    type: `line`,
    data: [11, 11, 15, 13, 12, 13, 10],//實際運用中用陣列代替Array
    //描點
    markPoint: {
        data: [
        {
            type: `max`,
            name: `最大值`
        }, {
            type: `min`,
            name: `最小值`
        }]
    },
    //直線
    markLine: {
        data: [{
            type: `average`,
            name: `平均值`
        }]
    }
},

pie

series: [{
    name: `XXX`,//餅圖某部分啟用時名稱
    type: `pie`,
    radius: `55%`,//規定餅圖大小
    center: [`50%`, `60%`],
    data: [{
        //A部分的值和名稱
            value: {A},
            name: category[0]
        }, {
            value: {B},
            name: category[1]
        }, {
            value: {C},
            name: category[2]
        }, {
            value: {D},
            name: category[3]
        }],
        itemStyle: {//啟用時樣式
            emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: `rgba(0, 0, 0, 0.5)`
            }
        }
    }]
};

radar

series: [{
    name: `系統商品數量統計`,
    type: `radar`,
    data : [
        {
            value : gnum,
            name : `庫存`
        }, {
            value : snum,
            name : `銷售`
        }, {
            value : cnum,
            name : `評論`
        }
    ]
}]

map 注意ECharts3不再支援內建地圖，需要到ECharts-Map按需下載

series: [
    {   
        name: `XXX`,
        type: `map`,
        mapType: `湖南`,//這裡與配置的地圖有關，注意省要用中文
        selectedMode : `multiple`,//選中模式，表示是否支援多個選中，預設關閉{single/multiple}
        //圖形上的文字標籤，可用於說明圖形的一些資料資訊
        label: {
            //是否在普通狀態下顯示標籤。
            normal: {
                show: true
            },
            //是否在高亮狀態下顯示標籤。
            emphasis: {
                show: true
            }
        },
        data:[
            {name:`A`, value: 100}//注意A需要與mapType裡面的值相對應
        ]
    },

USAGE

init

var myChart = echarts.init(document.getElementById(`X`));//JQuery需要($("#X")[0])

config.option

var Xoption = {
    code...//內容既為CONFIG部分
}

setOption

myChart.setOption(Xoption);

event.click
這裡params顯示點選塊的所有配置，然後自動跳轉到百度並搜尋,params.name代表點選事件觸發時的取值

myChart.on(`click`, function(params) {
    window.open(`https://www.baidu.com/s?wd=` + encodeURIComponent(params.name));
});

INTRODUCTION

它能將任意頁面元素“釘”在某個容器頂部，而且在尺寸小的螢幕上能夠自動禁用這種效果

CONFIG

將某元素“釘”在容器內

    $(".pinned").pin({
          containerSelector: ".container"
    })

在小尺寸的螢幕上禁用Pin效果

    $(".pinned").pin({
          minWidth: 940
    })

USAGE

直接引用 jquery.pin.js 即可

revaelJs

INTRODUCTION

reveal.js是一個能夠幫助我們很輕易地使用HTML來建立漂亮的PPT演示效果
reveal.js不依賴其他任何javascript庫，是一個獨立的javascript外掛庫

CONFIG

options

// 是否在右下角展示控制條
controls: true,

// 是否顯示演示的進度條
progress: true,

// 是否顯示當前幻燈片的頁數
slideNumber: `c/t`,

// 是否將每個幻燈片改變加入到瀏覽器的歷史記錄中去
history: false,

// 是否啟用鍵盤快捷鍵來導航
keyboard: true,

// 是否啟用幻燈片的概覽模式,開啟後，可以使用ESC鍵檢視幻燈片概覽
overview: true,

// 是否將幻燈片垂直居中
center: true,

// 是否在觸屏裝置上啟用觸控導航
touch: true,

// 是否迴圈演示
loop: false,

// 是否將演示的方向變成 right to left
rtl: false,

// 全域性開啟和關閉碎片
fragments: true,

// 標識簡報是否在嵌入模式中執行，即包含在螢幕的有限部分中的
embedded: false,

// 標識當問號鍵被點選的時候是否應該顯示一個幫助的覆蓋層
help: true,

//  兩個幻燈片之間自動切換的時間間隔（毫秒），當設定成 0 的時候則禁止自動切換，該值可以被幻燈片上的 ` data-autoslide` 屬性覆蓋
autoSlide: 0,

// 當遇到使用者輸入的時候停止切換
autoSlideStoppable: true,

// 是否啟用通過滑鼠滾輪來導航幻燈片
mouseWheel: true,

//  是否在移動裝置上隱藏位址列
hideAddressBar: true,

// 是否在一個彈出的 iframe 中開啟幻燈片中的連結
previewLinks: false,

// 切換過渡效果
transition: `default`, // none/fade/slide/convex/concave/zoom

// 過渡速度
transitionSpeed: `default`, // default/fast/slow

// 全屏幻燈片背景的過渡效果
backgroundTransition: `default`, // none/fade/slide/convex/concave/zoom

// 除當前可見的之外的幻燈片數量
viewDistance: 3,

// 視差背景圖片
parallaxBackgroundImage: ``, // e.g. "`https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg`"

// 視差背景尺寸
parallaxBackgroundSize: ``, // CSS syntax, e.g. "2100px 900px"

// 移動視差背景（水平和垂直）滑動變化的數量, 例如100
parallaxBackgroundHorizontal: ``,
parallaxBackgroundVertical: ``

options.transition None – Fade – Slide – Convex – Concave – Zoom

<section data-transition="zoom">

options.theme Black (default) – White – League – Sky – Beige – SimpleSerif – Blood – Night – Moon – Solarized

<link rel="stylesheet" href="css/theme/moon.css">

options.background #color||image.png(data-background-repeat=”repeat” data-background-size=”100px)||

<section data-background="#ff0000">

option.data-background-video

<section data-background-video="video.mp4,video.webm">

keyboard


B||.  //pause
o   //preview
F11 // full screen

USAGE

CSS

<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/moon.css">

HTML

<div class="reveal">
    <div class="slides">
        <section data-background="#ff0000" id="s4">
            <h2>Reveal.js</h2>
            <p>HELLO WORLD!</p>           
        </section>
    </div>
</div>

<script src="js/reveal.js"></script>
//初始化
Reveal.initialize({
    //options...    
})

material-icon

INTRODUCTION

大方，美觀，跨平臺，易於使用

CONFIG

CSS配置，可根據需求自行調節樣式

@font-face {
    font-family: `Material Icons`;
    font-style: normal;
    font-weight: 400;
    src: local(`Material Icons`), local(`MaterialIcons-Regular`), url(http://fonts.gstatic.com/s/materialicons/v21/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format(`woff2`);
}

.material-icons {
    font-family: `Material Icons`;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: `liga`;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

USAGE

配置CSS檔案即可

DEMO

<i class="material-icons">event</i>

Bootstrap Multiselect

INTRODUCTION

Bootstrap Multiselect 是一個基於JQuery的外掛，用於提供直觀的使用者介面，用於使用具有多個屬性的選擇輸入。

CONFIG

option.multiple 新增在 <select> 中，啟用多選

<select id="test" multiple="multiple">

option.maxHeight 下拉框最大高度

maxHeight: 300

option.buttonWidth 觸發按鈕寬度

buttonWidth: `400px`

option.includeSelectAllOption 全選

includeSelectAllOption: true

option.enableFiltering 啟用篩選

enableFiltering: true

USAGE

引入 JS 和 CSS 檔案，在CSS檔案內進行相關樣式的更改

<link rel="stylesheet" type="text/css" href="./dist/css/bootstrap-multiselect.css">
<link rel="stylesheet" type="text/css" href="./docs/css/bootstrap-3.3.2.min.css">
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="./docs/js/bootstrap-3.3.2.min.js"></script>
<script type="text/javascript" src="./dist/js/bootstrap-multiselect.js"></script>

建立一個下拉選擇框

<select id="test" multiple="multiple">
    <option value="1"> 1 </option>
    <option value="2"> 2</option>
    <option value="3"> 3 </option>
    <option value="4"> 4</option>
    <option value="5"> 5 </option>
    <option value="6"> 6</option>
</select>

初始化外掛

<script type="text/javascript">
    $(document).ready(function(){
        $("#test").multiselect({
            //options...
            });
    })
</script>

Web前端常用外掛
2015-05-12
Web前端
前端常用外掛與軟體
2020-05-08
前端
sublime Text3 前端常用外掛
2019-02-16
前端
前端Vscode常用外掛概述
2021-01-01
前端VSCode
前端開發常用的Chrome外掛推薦！
2021-11-25
前端Chrome
前端常用外掛、工具類庫彙總
2019-02-16
前端
Vim常用外掛——前端開發工具系列
2015-08-16
前端
前端開發常用的VS Code外掛總結
2019-10-22
前端
前端常用外掛、工具類庫彙總（下）
2018-11-13
前端
前端常用外掛、工具類庫彙總（上）
2018-11-12
前端
常用web外掛
2015-05-05
Web
ubuntu 常用外掛安裝
2019-11-25
Ubuntu
rematch常用外掛介紹
2019-03-03
REM
php常用外掛安裝
2021-09-09
PHP
常用chrome外掛推薦
2018-08-23
Chrome
常用瀏覽器外掛
2022-11-13
瀏覽器
oh my zsh 常用外掛
2020-10-18
macOS QuickLook常用外掛
2017-11-02
MacUI
常用Sprite Kit外掛整理
2015-02-10
常用jquery外掛資料
2016-03-13
jQuery
vscode常用外掛
2024-03-13
VSCode
VS Code折騰記 - (4) 常用必備外掛推薦【前端】
2017-02-17
前端
我常用的Sketch外掛推薦
2018-04-27
Idea 外掛開發常用的方法
2017-11-12
Idea
編寫jquery常用外掛的基本格式
2015-03-01
jQuery
前端外掛一：jQuery Multi-Select多選外掛
2016-11-24
前端jQuery
logstash常用外掛介紹
2019-02-14
jquery複習之路---常用外掛
2021-09-09
jQuery
SpringMvc+Mybatis常用外掛
2016-03-18
SpringMVCMyBatis
前端開發者需要的10個Sublime外掛
2015-03-06
前端
fastclick外掛的使用--移動端vue專案開發(vue常用外掛)
2020-12-20
ASTVue
前端外掛之Datatables使用--下篇
2019-08-14
前端
前端外掛之Datatables使用--上篇
2019-08-09
前端
Web前端開發Chrome外掛
2018-07-18
Web前端Chrome
WEB 前端開發外掛整理
2017-05-06
Web前端
前端常用外掛、工具類庫彙總，不要重複造輪子啦！！！
2018-09-24
前端
前端動畫調研-V1
2019-03-01
前端動畫
工作中常用的vscode外掛
2018-11-14
VSCode

常用的前端外掛V1

INTRODUCTION

CONFIG

USAGE

INTRODUCTION

CONFIG

USAGE

INTRODUCTION

CONFIG

USAGE

INTRODUCTION

CONFIG

USAGE

INTRODUCTION

CONFIG

USAGE

INTRODUCTION

CONFIG

USAGE

INTRODUCTION

CONFIG

USAGE

INTRODUCTION

CONFIG

USAGE

INTRODUCTION

CONFIG

USAGE

INTRODUCTION

CONFIG

USAGE

INTRODUCTION

CONFIG

USAGE

相關文章