常用的前端插件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.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>

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

未来nan朋友

引用和评论

前端进阶：Page Lifecycle

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具