开发网站的时候，如何合理运用好各种插件对开发的帮助是很大的。
免去了我们调试各种交互效果，
比如常用的弹窗、气泡、提示、加载、焦点、标签、导航、折叠等等
这里会推荐几个常用的js插件，丰富多样简单易移植很适合我们做前台开发使用
第一个插件：多功能弹窗控件layer-v2.4 下载地址：http://layer.layui.com/
页面调用js
1 //初体验 2 layer.alert('内容') 3 //第三方扩展皮肤 4 layer.alert('内容', { 5 icon: 1, 6 skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅 7 }) 8 //询问框 9 layer.confirm('您是如何看待前端开发？', { 10 btn: ['重要','奇葩'] //按钮 11 }, function(){ 12 layer.msg('的确很重要', {icon: 1}); 13 }, function(){ 14 layer.msg('也可以这样', { 15 time: 20000, //20s后自动关闭 16 btn: ['明白了', '知道了'] 17 }); 18 }); 19 //提示层 20 layer.msg('玩命提示中'); 21 //墨绿深蓝风 22 layer.alert('墨绿风格，点击确认看深蓝', { 23 skin: 'layui-layer-molv' //样式类名 24 ,closeBtn: 0 25 }, function(){ 26 layer.alert('偶吧深蓝style', { 27 skin: 'layui-layer-lan' 28 ,closeBtn: 0 29 ,shift: 4 //动画类型 30 }); 31 }); 32 //捕获页 33 layer.open({ 34 type: 1, 35 shade: false, 36 title: false, //不显示标题 37 content: $('.layer_notice'), //捕获的元素 38 cancel: function(index){ 39 layer.close(index); 40 this.content.show(); 41 layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', {time: 5000, icon:6}); 42 } 43 }); 44 //页面层 45 layer.open({ 46 type: 1, 47 skin: 'layui-layer-rim', //加上边框 48 area: ['420px', '240px'], //宽高 49 content: 'html内容' 50 }); 51 //自定页 52 layer.open({ 53 type: 1, 54 skin: 'layui-layer-demo', //样式类名 55 closeBtn: 0, //不显示关闭按钮 56 shift: 2, 57 shadeClose: true, //开启遮罩关闭 58 content: '内容' 59 }); 60 //tips层 61 layer.tips('Hi，我是tips', '吸附元素选择器，如#id'); 62 //iframe层 63 layer.open({ 64 type: 2, 65 title: 'layer mobile页', 66 shadeClose: true, 67 shade: 0.8, 68 area: ['380px', '90%'], 69 content: 'http://layer.layui.com/mobile/' //iframe的url 70 }); 71 //iframe窗 72 layer.open({ 73 type: 2, 74 title: false, 75 closeBtn: 0, //不显示关闭按钮 76 shade: [0], 77 area: ['340px', '215px'], 78 offset: 'rb', //右下角弹出 79 time: 2000, //2秒后自动关闭 80 shift: 2, 81 content: ['test/guodu.html', 'no'], //iframe的url，no代表不显示滚动条 82 end: function(){ //此处用于演示 83 layer.open({ 84 type: 2, 85 title: '很多时候，我们想最大化看，比如像这个页面。', 86 shadeClose: true, 87 shade: false, 88 maxmin: true, //开启最大化最小化按钮 89 area: ['893px', '600px'], 90 content: 'http://fly.layui.com/' 91 }); 92 } 93 }); 94 //加载层 95 var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2 96 //loading层 97 var index = layer.load(1, { 98 shade: [0.1,'#fff'] //0.1透明度的白色背景 99 }); 100 //小tips 101 layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', '吸附元素选择器', { 102 tips: [1, '#3595CC'], 103 time: 4000 104 }); 105 //prompt层 106 layer.prompt({ 107 title: '输入任何口令，并确认', 108 formType: 1 //prompt风格，支持0-2 109 }, function(pass){ 110 layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text){ 111 layer.msg('演示完毕！您的口令：'+ pass +' 您最后写下了：'+ text); 112 }); 113 }); 114 //tab层 115 layer.tab({ 116 area: ['600px', '300px'], 117 tab: [{ 118 title: 'TAB1', 119 content: '内容1' 120 }, { 121 title: 'TAB2', 122 content: '内容2' 123 }, { 124 title: 'TAB3', 125 content: '内容3' 126 }] 127 }); 128 //相册层 129 $.getJSON('test/photos.json?v='+new Date, function(json){ 130 layer.photos({ 131 photos: json //格式见API文档手册页 132 ,shift: 5 //0-6的选择，指定弹出图片动画类型，默认随机 133 }); 134 });