一、jq插件
1、js、jquery、jquert插件的关系
js是最原生态的脚本语言
jquery是对js常用功能进行封装、组合、优化、简化
jquery插件是利用jquery开发出的实用功能
2、实用jquery插件的总体思路
A、引入jq类库文件
B、有必要时引入插件的CSS文件
C、引入插件的js文件
D、按照开发所者提供的插件说明文档或者参照DEMO取操作
3、jquery插件实例(layer.layui.com)
A、网上去搜索,非常多,很多都是免费的,都提供原代码。
B、layer:弹框插件
(1) 下载jquery插件,并解压。
(2) 把解压的layer目录直接复制到项目当中。
a、引入jq类库
b、引入插件的jq文件
c、引入项目本身的jq文件
** 三者顺序不可颠倒。
Ⅰ:layer.alert("弹出内容",{
title:"弹窗标题",
icon:2 //1~7的7钟图标,图标根据个人喜好可修改CSS来到目的。
skin:"layui-layer-molv" //弹窗颜色变为墨绿色
},function(){
alert("点击确定之后处理的内容:回调函数");
});
Ⅱ:layer.cinfirm("你确认删除吗?",{
title:"弹窗标题",
icon:4
skin:"layui-layer-molv"
},function(){
alert("点击确定之后处理的内容:回调函数"); //由于有两个按钮,所以有两个回调函数
},function(){
alert("点击取消之后处理的内容:回调函数");
});
Ⅲ:layer.msg("恭喜你注册成功!",{
title:"弹窗标题",
icon:4
skin:"layui-layer-molv"
time:5000 //默认3秒钟消失,本例5秒消失
});
Ⅳ:layer.open({
type:1, //0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
area:["390","300"]",
title:"弹出框标题",
content:$("#d1") //弹出窗中显示的内容,本例中是显示ID为d1的div里面的内容。
});
B、jplayer:音频视频播放插件
C、ECharts:报表插件(http://echarts.baidu.com/doc/example.html)