經常使用的前端插件V1
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.enableTimejavascript
enableTime: true||false;//是否啓用日期選擇
option.enableSecondscss
enableSeconds: true||false,//是否啓用秒選擇器
option.dateFormathtml
dataFormat: "Y-m-d"||"d.m.Y";//設置日期顯示格式
option.(minDate&maxDate)java
minDate: "today"||"2016-10-20 15:30"..//可選擇的最小/最大時間，與dataFormat格式一致
option.weekNumbersjquery
weekNumbers: true||false;//是否顯示週數
option.disablegit
disable: ["2017-03-30","2017-05-1"..]||
[{form: "2017-04-01", to: "2017-05-01"}..]||
[function(data){
return (data.getMonth()%2===0)
}]
//禁選日期，具體的值、日期範圍或者函數，其他日期啓用
option.enablegithub
enable: ["2017-03-30","2017-05-1"..]||
[{form: "2017-04-01", to: "2017-05-01"}..]||
[function(data){
return (data.getMonth()%2===0)
}]
//啓用日期，其餘日期禁選
option.modeweb
mode: "single"||"multiple"||"range"; //分別表示只能選一個日期/可選多個日期/可選一個日期範圍
option.inlineajax
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>
JS
<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部分
<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));
});
pin
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>
JS
<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>
相關文章
- 1. 經常使用的前端插件
- 2. 前端經常使用插件彙總
- 3. Web前端經常使用插件
- 4. VSCode 前端經常使用插件
- 5. 前端經常使用插件
- 6. 前端經常使用js插件
- 7. web前端經常使用插件
- 8. Vscode web 前端 經常使用插件
- 9. vscode前端經常使用插件：
- 10. 前端：經常使用js插件
- 更多相關文章...
- • 二級緩存的併發訪問策略和常用插件 - Hibernate教程
- • Maven 插件 - Maven教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 常用的分佈式事務解決方案
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 外部其他進程嵌入到qt FindWindow獲得窗口句柄 報錯無法鏈接的外部符號 [email protected] 無法被([email protected]@[email protected]@@引用
- 2. UVa 11524 - InCircle
- 3. The Monocycle（bfs）
- 4. VEC-C滑窗
- 5. 堆排序的應用-TOPK問題
- 6. 實例演示ElasticSearch索引查詢term,match,match_phase,query_string之間的區別
- 7. 數學基礎知識 集合
- 8. amazeUI 復擇框問題解決
- 9. 揹包問題理解
- 10. 算數平均-幾何平均不等式的證明,從麥克勞林到柯西
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 經常使用的前端插件
- 2. 前端經常使用插件彙總
- 3. Web前端經常使用插件
- 4. VSCode 前端經常使用插件
- 5. 前端經常使用插件
- 6. 前端經常使用js插件
- 7. web前端經常使用插件
- 8. Vscode web 前端 經常使用插件
- 9. vscode前端經常使用插件：
- 10. 前端：經常使用js插件