常用的前端插件V1

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文件

配置 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...
}

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 即可

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 } }
标注任务管理
提交日志管理
{ { /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 } }

    

        
{ { uname } }
        
{ { fname } }
        
{ { taskId } }
        
{ { fdesc } }
        
{ { machine } }
        
{ { update } } / {{sum}}
    

{ { /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);
    });

};

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

翻译内容

标注管理系统

翻译 alert

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

option.data-lang-token 用于标记长文本，自定义令牌替换原文本内容

USAGE

JS部分

js-cookie

初始化

var lang = new Lang();
//初始化国际化模块
_changeLang = function() {
    //定义语言包位置
    lang.dynamic("en", "../../libs/langpack/en.json");
    //定义默认语言
    lang.init({
        defaultLang: "cn"
    });
},

切换

lang.change("en");

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} 
{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 即可

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

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

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

option.data-background-video

keyboard

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

USAGE

CSS

HTML

    

        

            
Reveal.js
            
HELLO WORLD!
           
        
    

JS

//初始化
Reveal.initialize({
    //options...    
})

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

event

INTRODUCTION

Bootstrap Multiselect 是一个基于JQuery的插件，用于提供直观的用户界面，用于使用具有多个属性的选择输入。

CONFIG

option.multiple 添加在 中，启用多选

option.maxHeight 下拉框最大高度

maxHeight: 300

buttonWidth: "400px"

includeSelectAllOption: true

enableFiltering: true

     1 
     2
     3 
     4
     5 
     6