暂存
This commit is contained in:
commit
37bfeb505b
139
dist/config.js
vendored
Normal file
139
dist/config.js
vendored
Normal file
@ -0,0 +1,139 @@
|
|||||||
|
/**
|
||||||
|
|
||||||
|
@Name：全局配置
|
||||||
|
@Author：贤心
|
||||||
|
@Site：http://www.layui.com/admin/
|
||||||
|
@License：LPPL（layui付费产品协议）
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
||||||
|
layui.define(['laytpl', 'layer', 'element', 'util'], function(exports){
|
||||||
|
exports('setter', {
|
||||||
|
container: 'LAY_app' //容器ID
|
||||||
|
,base: layui.cache.base //记录layuiAdmin文件夹所在路径
|
||||||
|
,views: layui.cache.base + 'views/' //视图所在目录
|
||||||
|
,entry: 'index' //默认视图文件名
|
||||||
|
,engine: '.html' //视图文件后缀名
|
||||||
|
,pageTabs: false //是否开启页面选项卡功能。单页版不推荐开启
|
||||||
|
|
||||||
|
,name: 'layuiAdmin Pro'
|
||||||
|
,tableName: 'layuiAdmin' //本地存储表名
|
||||||
|
,MOD_NAME: 'admin' //模块事件名
|
||||||
|
|
||||||
|
,debug: true //是否开启调试模式。如开启，接口异常时会抛出异常 URL 等信息
|
||||||
|
|
||||||
|
,interceptor: false //是否开启未登入拦截
|
||||||
|
|
||||||
|
//自定义请求字段
|
||||||
|
,request: {
|
||||||
|
tokenName: 'access_token' //自动携带 token 的字段名。可设置 false 不携带。
|
||||||
|
}
|
||||||
|
|
||||||
|
//自定义响应字段
|
||||||
|
,response: {
|
||||||
|
statusName: 'code' //数据状态的字段名称
|
||||||
|
,statusCode: {
|
||||||
|
ok: 0 //数据状态一切正常的状态码
|
||||||
|
,logout: 1001 //登录状态失效的状态码
|
||||||
|
}
|
||||||
|
,msgName: 'msg' //状态信息的字段名称
|
||||||
|
,dataName: 'data' //数据详情的字段名称
|
||||||
|
}
|
||||||
|
|
||||||
|
//独立页面路由，可随意添加（无需写参数）
|
||||||
|
,indPage: [
|
||||||
|
'/user/login' //登入页
|
||||||
|
,'/user/reg' //注册页
|
||||||
|
,'/user/forget' //找回密码
|
||||||
|
,'/template/tips/test' //独立页的一个测试 demo
|
||||||
|
]
|
||||||
|
|
||||||
|
//扩展的第三方模块
|
||||||
|
,extend: [
|
||||||
|
'echarts', //echarts 核心包
|
||||||
|
'echartsTheme' //echarts 主题
|
||||||
|
]
|
||||||
|
|
||||||
|
//主题配置
|
||||||
|
,theme: {
|
||||||
|
//内置主题配色方案
|
||||||
|
color: [{
|
||||||
|
main: '#20222A' //主题色
|
||||||
|
,selected: '#009688' //选中色
|
||||||
|
,alias: 'default' //默认别名
|
||||||
|
},{
|
||||||
|
main: '#03152A'
|
||||||
|
,selected: '#3B91FF'
|
||||||
|
,alias: 'dark-blue' //藏蓝
|
||||||
|
},{
|
||||||
|
main: '#2E241B'
|
||||||
|
,selected: '#A48566'
|
||||||
|
,alias: 'coffee' //咖啡
|
||||||
|
},{
|
||||||
|
main: '#50314F'
|
||||||
|
,selected: '#7A4D7B'
|
||||||
|
,alias: 'purple-red' //紫红
|
||||||
|
},{
|
||||||
|
main: '#344058'
|
||||||
|
,logo: '#1E9FFF'
|
||||||
|
,selected: '#1E9FFF'
|
||||||
|
,alias: 'ocean' //海洋
|
||||||
|
},{
|
||||||
|
main: '#3A3D49'
|
||||||
|
,logo: '#2F9688'
|
||||||
|
,selected: '#5FB878'
|
||||||
|
,alias: 'green' //墨绿
|
||||||
|
},{
|
||||||
|
main: '#20222A'
|
||||||
|
,logo: '#F78400'
|
||||||
|
,selected: '#F78400'
|
||||||
|
,alias: 'red' //橙色
|
||||||
|
},{
|
||||||
|
main: '#28333E'
|
||||||
|
,logo: '#AA3130'
|
||||||
|
,selected: '#AA3130'
|
||||||
|
,alias: 'fashion-red' //时尚红
|
||||||
|
},{
|
||||||
|
main: '#24262F'
|
||||||
|
,logo: '#3A3D49'
|
||||||
|
,selected: '#009688'
|
||||||
|
,alias: 'classic-black' //经典黑
|
||||||
|
},{
|
||||||
|
logo: '#226A62'
|
||||||
|
,header: '#2F9688'
|
||||||
|
,alias: 'green-header' //墨绿头
|
||||||
|
},{
|
||||||
|
main: '#344058'
|
||||||
|
,logo: '#0085E8'
|
||||||
|
,selected: '#1E9FFF'
|
||||||
|
,header: '#1E9FFF'
|
||||||
|
,alias: 'ocean-header' //海洋头
|
||||||
|
},{
|
||||||
|
header: '#393D49'
|
||||||
|
,alias: 'classic-black-header' //经典黑
|
||||||
|
},{
|
||||||
|
main: '#50314F'
|
||||||
|
,logo: '#50314F'
|
||||||
|
,selected: '#7A4D7B'
|
||||||
|
,header: '#50314F'
|
||||||
|
,alias: 'purple-red-header' //紫红头
|
||||||
|
},{
|
||||||
|
main: '#28333E'
|
||||||
|
,logo: '#28333E'
|
||||||
|
,selected: '#AA3130'
|
||||||
|
,header: '#AA3130'
|
||||||
|
,alias: 'fashion-red-header' //时尚红头
|
||||||
|
},{
|
||||||
|
main: '#28333E'
|
||||||
|
,logo: '#009688'
|
||||||
|
,selected: '#009688'
|
||||||
|
,header: '#009688'
|
||||||
|
,alias: 'green-header' //墨绿头
|
||||||
|
}]
|
||||||
|
|
||||||
|
//初始的颜色索引，对应上面的配色方案数组索引
|
||||||
|
//如果本地已经有主题色记录，则以本地记录为优先，除非请求本地数据（localStorage）
|
||||||
|
,initColorIndex: 0
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
2
dist/controller/common.js
vendored
Normal file
2
dist/controller/common.js
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
/** layuiAdmin.pro-v1.4.0 LPPL License By https://www.layui.com/admin/ */
|
||||||
|
;layui.define(function(e){var i=(layui.$,layui.layer,layui.laytpl,layui.setter,layui.view,layui.admin);i.events.logout=function(){i.req({url:"./json/user/logout.js",type:"get",data:{},done:function(e){i.exit()}})},e("common",{})});
|
||||||
2
dist/controller/console.js
vendored
Normal file
2
dist/controller/console.js
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
/** layuiAdmin.pro-v1.4.0 LPPL License By https://www.layui.com/admin/ */
|
||||||
|
;layui.define(function(e){layui.use(["admin","carousel"],function(){var e=layui.$,t=(layui.admin,layui.carousel),a=layui.element,i=layui.device();e(".layadmin-carousel").each(function(){var a=e(this);t.render({elem:this,width:"100%",arrow:"none",interval:a.data("interval"),autoplay:a.data("autoplay")===!0,trigger:i.ios||i.android?"click":"hover",anim:a.data("anim")})}),a.render("progress")}),layui.use(["admin","carousel","echarts"],function(){var e=layui.$,t=layui.admin,a=layui.carousel,i=layui.echarts,l=[],n=[{title:{text:"今日流量趋势",x:"center",textStyle:{fontSize:14}},tooltip:{trigger:"axis"},legend:{data:["",""]},xAxis:[{type:"category",boundaryGap:!1,data:["06:00","06:30","07:00","07:30","08:00","08:30","09:00","09:30","10:00","11:30","12:00","12:30","13:00","13:30","14:00","14:30","15:00","15:30","16:00","16:30","17:00","17:30","18:00","18:30","19:00","19:30","20:00","20:30","21:00","21:30","22:00","22:30","23:00","23:30"]}],yAxis:[{type:"value"}],series:[{name:"PV",type:"line",smooth:!0,itemStyle:{normal:{areaStyle:{type:"default"}}},data:[111,222,333,444,555,666,3333,33333,55555,66666,33333,3333,6666,11888,26666,38888,56666,42222,39999,28888,17777,9666,6555,5555,3333,2222,3111,6999,5888,2777,1666,999,888,777]},{name:"UV",type:"line",smooth:!0,itemStyle:{normal:{areaStyle:{type:"default"}}},data:[11,22,33,44,55,66,333,3333,5555,12666,3333,333,666,1188,2666,3888,6666,4222,3999,2888,1777,966,655,555,333,222,311,699,588,277,166,99,88,77]}]},{title:{text:"访客浏览器分布",x:"center",textStyle:{fontSize:14}},tooltip:{trigger:"item",formatter:"{a} <br/>{b} : {c} ({d}%)"},legend:{orient:"vertical",x:"left",data:["Chrome","Firefox","IE 8.0","Safari","其它浏览器"]},series:[{name:"访问来源",type:"pie",radius:"55%",center:["50%","50%"],data:[{value:9052,name:"Chrome"},{value:1610,name:"Firefox"},{value:3200,name:"IE 8.0"},{value:535,name:"Safari"},{value:1700,name:"其它浏览器"}]}]},{title:{text:"最近一周新增的用户量",x:"center",textStyle:{fontSize:14}},tooltip:{trigger:"axis",formatter:"{b}<br>新增用户：{c}"},xAxis:[{type:"category",data:["11-07","11-08","11-09","11-10","11-11","11-12","11-13"]}],yAxis:[{type:"value"}],series:[{type:"line",data:[200,300,400,610,150,270,380]}]}],r=e("#LAY-index-dataview").children("div"),o=function(e){l[e]=i.init(r[e],layui.echartsTheme),l[e].setOption(n[e]),t.resize(function(){l[e].resize()})};if(r[0]){o(0);var d=0;a.on("change(LAY-index-dataview)",function(e){o(d=e.index)}),layui.admin.on("side",function(){setTimeout(function(){o(d)},300)}),layui.admin.on("hash(tab)",function(){layui.router().path.join("")||o(d)})}}),layui.use("table",function(){var e=(layui.$,layui.table);e.render({elem:"#LAY-index-topSearch",url:"./json/console/top-search.js",page:!0,cols:[[{type:"numbers",fixed:"left"},{field:"keywords",title:"关键词",minWidth:300,templet:'<div><a href="https://www.baidu.com/s?wd={{ d.keywords }}" target="_blank" class="layui-table-link">{{ d.keywords }}</div>'},{field:"frequency",title:"搜索次数",minWidth:120,sort:!0},{field:"userNums",title:"用户数",sort:!0}]],skin:"line"}),e.render({elem:"#LAY-index-topCard",url:"./json/console/top-card.js",page:!0,cellMinWidth:120,cols:[[{type:"numbers",fixed:"left"},{field:"title",title:"标题",minWidth:300,templet:'<div><a href="{{ d.href }}" target="_blank" class="layui-table-link">{{ d.title }}</div>'},{field:"username",title:"发帖者"},{field:"channel",title:"类别"},{field:"crt",title:"点击率",sort:!0}]],skin:"line"})}),e("console",{})});
|
||||||
1
dist/controller/console.php
vendored
Normal file
1
dist/controller/console.php
vendored
Normal file
File diff suppressed because one or more lines are too long
2
dist/controller/contlist.js
vendored
Normal file
2
dist/controller/contlist.js
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
/** layuiAdmin.pro-v1.4.0 LPPL License By https://www.layui.com/admin/ */
|
||||||
|
;layui.define(["table","form"],function(t){var e=(layui.$,layui.admin),i=layui.view,n=layui.table,l=layui.form;n.render({elem:"#LAY-app-content-list",url:"./json/content/list.js",cols:[[{type:"checkbox",fixed:"left"},{field:"id",width:100,title:"文章ID",sort:!0},{field:"label",title:"文章标签",minWidth:100},{field:"title",title:"文章标题"},{field:"author",title:"作者"},{field:"uploadtime",title:"上传时间",sort:!0},{field:"status",title:"发布状态",templet:"#buttonTpl",minWidth:80,align:"center"},{title:"操作",minWidth:150,align:"center",fixed:"right",toolbar:"#table-content-list"}]],page:!0,limit:10,limits:[10,15,20,25,30],text:"对不起，加载出现异常！"}),n.on("tool(LAY-app-content-list)",function(t){var n=t.data;"del"===t.event?layer.confirm("确定删除此文章？",function(e){t.del(),layer.close(e)}):"edit"===t.event&&e.popup({title:"编辑文章",area:["550px","550px"],id:"LAY-popup-content-edit",success:function(t,e){i(this.id).render("app/content/listform",n).done(function(){l.render(null,"layuiadmin-app-form-list"),l.on("submit(layuiadmin-app-form-submit)",function(t){t.field;layui.table.reload("LAY-app-content-list"),layer.close(e)})})}})}),n.render({elem:"#LAY-app-content-tags",url:"./json/content/tags.js",cols:[[{type:"numbers",fixed:"left"},{field:"id",width:100,title:"ID",sort:!0},{field:"tags",title:"分类名",minWidth:100},{title:"操作",width:150,align:"center",fixed:"right",toolbar:"#layuiadmin-app-cont-tagsbar"}]],text:"对不起，加载出现异常！"}),n.on("tool(LAY-app-content-tags)",function(t){var n=t.data;"del"===t.event?layer.confirm("确定删除此分类？",function(e){t.del(),layer.close(e)}):"edit"===t.event&&e.popup({title:"编辑分类",area:["450px","200px"],id:"LAY-popup-content-tags",success:function(t,e){i(this.id).render("app/content/tagsform",n).done(function(){l.render(null,"layuiadmin-form-tags"),l.on("submit(layuiadmin-app-tags-submit)",function(t){t.field;layui.table.reload("LAY-app-content-tags"),layer.close(e)})})}})}),n.render({elem:"#LAY-app-content-comm",url:"./json/content/comment.js",cols:[[{type:"checkbox",fixed:"left"},{field:"id",width:100,title:"ID",sort:!0},{field:"reviewers",title:"评论者",minWidth:100},{field:"content",title:"评论内容",minWidth:100},{field:"commtime",title:"评论时间",minWidth:100,sort:!0},{title:"操作",width:150,align:"center",fixed:"right",toolbar:"#table-content-com"}]],page:!0,limit:10,limits:[10,15,20,25,30],text:"对不起，加载出现异常！"}),n.on("tool(LAY-app-content-comm)",function(t){var n=t.data;"del"===t.event?layer.confirm("确定删除此条评论？",function(e){t.del(),layer.close(e)}):"edit"===t.event&&e.popup({title:"编辑评论",area:["450px","300px"],id:"LAY-popup-content-comm",success:function(t,e){i(this.id).render("app/content/contform",n).done(function(){l.render(null,"layuiadmin-form-comment"),l.on("submit(layuiadmin-app-com-submit)",function(t){t.field;layui.table.reload("LAY-app-content-comm"),layer.close(e)})})}})}),t("contlist",{})});
|
||||||
2
dist/controller/forum.js
vendored
Normal file
2
dist/controller/forum.js
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
/** layuiAdmin.pro-v1.4.0 LPPL License By https://www.layui.com/admin/ */
|
||||||
|
;layui.define(["table","form"],function(e){var t=(layui.$,layui.admin),i=layui.view,l=layui.table,r=layui.form;l.render({elem:"#LAY-app-forum-list",url:"./json/forum/list.js",cols:[[{type:"checkbox",fixed:"left"},{field:"id",width:100,title:"ID",sort:!0},{field:"poster",title:"发帖人"},{field:"avatar",title:"头像",width:100,templet:"#imgTpl"},{field:"content",title:"发帖内容"},{field:"posttime",title:"发帖时间",sort:!0},{field:"top",title:"置顶",templet:"#buttonTpl",minWidth:80,align:"center"},{title:"操作",width:150,align:"center",fixed:"right",toolbar:"#table-forum-list"}]],page:!0,limit:10,limits:[10,15,20,25,30],text:"对不起，加载出现异常！"}),l.on("tool(LAY-app-forum-list)",function(e){var l=e.data;"del"===e.event?layer.confirm("确定删除此条帖子？",function(t){e.del(),layer.close(t)}):"edit"===e.event&&t.popup({title:"编辑帖子",area:["550px","450px"],id:"LAY-popup-forum-edit",resize:!1,success:function(e,t){i(this.id).render("app/forum/listform",l).done(function(){r.render(null,"layuiadmin-form-list"),r.on("submit(layuiadmin-app-forum-submit)",function(e){e.field;layui.table.reload("LAY-app-forum-list"),layer.close(t)})})}})}),l.render({elem:"#LAY-app-forumreply-list",url:"./json/forum/replys.js",cols:[[{type:"checkbox",fixed:"left"},{field:"id",width:100,title:"ID",sort:!0},{field:"replyer",title:"回帖人"},{field:"cardid",title:"回帖ID",sort:!0},{field:"avatar",title:"头像",width:100,templet:"#imgTpl"},{field:"content",title:"回帖内容",width:200},{field:"replytime",title:"回帖时间",sort:!0},{title:"操作",width:150,align:"center",fixed:"right",toolbar:"#table-forum-replys"}]],page:!0,limit:10,limits:[10,15,20,25,30],text:"对不起，加载出现异常！"}),l.on("tool(LAY-app-forumreply-list)",function(e){var l=e.data;"del"===e.event?layer.confirm("确定删除此条评论？",function(t){e.del(),layer.close(t)}):"edit"===e.event&&t.popup({title:"编辑回帖",area:["550px","400px"],id:"LAY-popup-forum-edit",resize:!1,success:function(e,t){i(this.id).render("app/forum/replysform",l).done(function(){r.render(null,"layuiadmin-app-forum-reply"),r.on("submit(layuiadmin-app-forumreply-submit)",function(e){e.field;layui.table.reload("LAY-app-forumreply-list"),layer.close(t)})})}})}),e("forum",{})});
|
||||||
2
dist/controller/sample.js
vendored
Normal file
2
dist/controller/sample.js
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
/** layuiAdmin.pro-v1.4.0 LPPL License By https://www.layui.com/admin/ */
|
||||||
|
;layui.define(function(e){var a=layui.admin;layui.use(["admin","carousel"],function(){var e=layui.$,a=(layui.admin,layui.carousel),l=layui.element,t=layui.device();e(".layadmin-carousel").each(function(){var l=e(this);a.render({elem:this,width:"100%",arrow:"none",interval:l.data("interval"),autoplay:l.data("autoplay")===!0,trigger:t.ios||t.android?"click":"hover",anim:l.data("anim")})}),l.render("progress")}),layui.use(["carousel","echarts"],function(){var e=layui.$,a=(layui.carousel,layui.echarts),l=[],t=[{title:{subtext:"完全实况球员数据",textStyle:{fontSize:14}},tooltip:{trigger:"axis"},legend:{x:"left",data:["罗纳尔多","舍普琴科"]},polar:[{indicator:[{text:"进攻",max:100},{text:"防守",max:100},{text:"体能",max:100},{text:"速度",max:100},{text:"力量",max:100},{text:"技巧",max:100}],radius:130}],series:[{type:"radar",center:["50%","50%"],itemStyle:{normal:{areaStyle:{type:"default"}}},data:[{value:[97,42,88,94,90,86],name:"舍普琴科"},{value:[97,32,74,95,88,92],name:"罗纳尔多"}]}]}],i=e("#LAY-index-pageone").children("div"),n=function(e){l[e]=a.init(i[e],layui.echartsTheme),l[e].setOption(t[e]),window.onresize=l[e].resize};i[0]&&n(0)}),layui.use(["carousel","echarts"],function(){var e=layui.$,a=(layui.carousel,layui.echarts),l=[],t=[{tooltip:{trigger:"axis"},calculable:!0,legend:{data:["访问量","下载量","平均访问量"]},xAxis:[{type:"category",data:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]}],yAxis:[{type:"value",name:"访问量",axisLabel:{formatter:"{value} 万"}},{type:"value",name:"下载量",axisLabel:{formatter:"{value} 万"}}],series:[{name:"访问量",type:"line",data:[900,850,950,1e3,1100,1050,1e3,1150,1250,1370,1250,1100]},{name:"下载量",type:"line",yAxisIndex:1,data:[850,850,800,950,1e3,950,950,1150,1100,1240,1e3,950]},{name:"平均访问量",type:"line",data:[870,850,850,950,1050,1e3,980,1150,1e3,1300,1150,1e3]}]}],i=e("#LAY-index-pagetwo").children("div"),n=function(e){l[e]=a.init(i[e],layui.echartsTheme),l[e].setOption(t[e]),window.onresize=l[e].resize};i[0]&&n(0)}),layui.use(["carousel","echarts"],function(){var e=layui.$,a=(layui.carousel,layui.echarts),l=[],t=[{title:{text:"全国的 layui 用户分布",subtext:"不完全统计"},tooltip:{trigger:"item"},dataRange:{orient:"horizontal",min:0,max:6e4,text:["高","低"],splitNumber:0},series:[{name:"全国的 layui 用户分布",type:"map",mapType:"china",selectedMode:"multiple",itemStyle:{normal:{label:{show:!0}},emphasis:{label:{show:!0}}},data:[{name:"西藏",value:60},{name:"青海",value:167},{name:"宁夏",value:210},{name:"海南",value:252},{name:"甘肃",value:502},{name:"贵州",value:570},{name:"新疆",value:661},{name:"云南",value:8890},{name:"重庆",value:10010},{name:"吉林",value:5056},{name:"山西",value:2123},{name:"天津",value:9130},{name:"江西",value:10170},{name:"广西",value:6172},{name:"陕西",value:9251},{name:"黑龙江",value:5125},{name:"内蒙古",value:1435},{name:"安徽",value:9530},{name:"北京",value:51919},{name:"福建",value:3756},{name:"上海",value:59190},{name:"湖北",value:37109},{name:"湖南",value:8966},{name:"四川",value:31020},{name:"辽宁",value:7222},{name:"河北",value:3451},{name:"河南",value:9693},{name:"浙江",value:62310},{name:"山东",value:39231},{name:"江苏",value:35911},{name:"广东",value:55891}]}]}],i=e("#LAY-index-pagethree").children("div"),n=function(e){l[e]=a.init(i[e],layui.echartsTheme),l[e].setOption(t[e]),window.onresize=l[e].resize};i[0]&&n(0)}),layui.use("table",function(){var e=(layui.$,layui.table);e.render({elem:"#LAY-home-homepage2",url:"./json/console/prograss.js",cols:[[{type:"checkbox",fixed:"left"},{field:"prograss",title:"任务"},{field:"time",title:"所需时间"},{field:"complete",title:"完成情况",templet:function(e){return"已完成"==e.complete?'<del style="color: #5FB878;">'+e.complete+"</del>":"进行中"==e.complete?'<span style="color: #FFB800;">'+e.complete+"</span>":'<span style="color: #FF5722;">'+e.complete+"</span>"}}]],skin:"line"})}),a.events.replyNote=function(e){var a=e.data("id");layer.prompt({title:"回复留言 ID:"+a,formType:2},function(e,a){layer.msg("得到："+e),layer.close(a)})},e("sample",{})});
|
||||||
4
dist/controller/senior.js
vendored
Normal file
4
dist/controller/senior.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
dist/controller/set.js
vendored
Normal file
2
dist/controller/set.js
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
/** layuiAdmin.pro-v1.4.0 LPPL License By https://www.layui.com/admin/ */
|
||||||
|
;layui.define(["form","upload"],function(t){var i=layui.$,e=layui.layer,n=(layui.laytpl,layui.setter,layui.view,layui.admin),a=layui.form,s=layui.upload;i("body");a.render(),a.verify({nickname:function(t,i){return new RegExp("^[a-zA-Z0-9_一-龥\\s·]+$").test(t)?/(^\_)|(\__)|(\_+$)/.test(t)?"用户名首尾不能出现下划线'_'":/^\d+\d+\d$/.test(t)?"用户名不能全为数字":void 0:"用户名不能有特殊字符"},pass:[/^[\S]{6,12}$/,"密码必须6到12位，且不能出现空格"],repass:function(t){if(t!==i("#LAY_password").val())return"两次密码输入不一致"}}),a.on("submit(set_website)",function(t){return e.msg(JSON.stringify(t.field)),!1}),a.on("submit(set_system_email)",function(t){return e.msg(JSON.stringify(t.field)),!1}),a.on("submit(setmyinfo)",function(t){return e.msg(JSON.stringify(t.field)),!1});var r=i("#LAY_avatarSrc");s.render({url:"/api/upload/",elem:"#LAY_avatarUpload",done:function(t){0==t.status?r.val(t.url):e.msg(t.msg,{icon:5})}}),n.events.avartatPreview=function(t){var i=r.val();e.photos({photos:{title:"查看头像",data:[{src:i}]},shade:.01,closeBtn:1,anim:5})},a.on("submit(setmypass)",function(t){return e.msg(JSON.stringify(t.field)),!1}),t("set",{})});
|
||||||
2
dist/controller/user.js
vendored
Normal file
2
dist/controller/user.js
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
/** layuiAdmin.pro-v1.4.0 LPPL License By https://www.layui.com/admin/ */
|
||||||
|
;layui.define("form",function(e){var t=layui.$,i=(layui.layer,layui.laytpl,layui.setter,layui.view,layui.admin,layui.form),a=t("body");i.verify({nickname:function(e,t){return new RegExp("^[a-zA-Z0-9_一-龥\\s·]+$").test(e)?/(^\_)|(\__)|(\_+$)/.test(e)?"用户名首尾不能出现下划线'_'":/^\d+\d+\d$/.test(e)?"用户名不能全为数字":void 0:"用户名不能有特殊字符"},pass:[/^[\S]{6,12}$/,"密码必须6到12位，且不能出现空格"]}),a.on("click","#LAY-user-get-vercode",function(){t(this);this.src="https://www.oschina.net/action/user/captcha?t="+(new Date).getTime()}),e("user",{})});
|
||||||
2
dist/controller/useradmin.js
vendored
Normal file
2
dist/controller/useradmin.js
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
/** layuiAdmin.pro-v1.4.0 LPPL License By https://www.layui.com/admin/ */
|
||||||
|
;layui.define(["table","form"],function(e){var i=(layui.$,layui.admin),t=layui.view,l=layui.table,r=layui.form;l.render({elem:"#LAY-user-manage",url:"./json/useradmin/webuser.js",cols:[[{type:"checkbox",fixed:"left"},{field:"id",width:100,title:"ID",sort:!0},{field:"username",title:"用户名",minWidth:100},{field:"avatar",title:"头像",width:100,templet:"#imgTpl"},{field:"phone",title:"手机"},{field:"email",title:"邮箱"},{field:"sex",width:80,title:"性别"},{field:"ip",title:"IP"},{field:"jointime",title:"加入时间",sort:!0},{title:"操作",width:150,align:"center",fixed:"right",toolbar:"#table-useradmin-webuser"}]],page:!0,limit:30,height:"full-320",text:"对不起，加载出现异常！"}),l.on("tool(LAY-user-manage)",function(e){var l=e.data;"del"===e.event?layer.prompt({formType:1,title:"敏感操作，请验证口令"},function(i,t){layer.close(t),layer.confirm("真的删除行么",function(i){e.del(),layer.close(i)})}):"edit"===e.event&&i.popup({title:"编辑用户",area:["500px","450px"],id:"LAY-popup-user-add",success:function(e,i){t(this.id).render("user/user/userform",l).done(function(){r.render(null,"layuiadmin-form-useradmin"),r.on("submit(LAY-user-front-submit)",function(e){e.field;layui.table.reload("LAY-user-manage"),layer.close(i)})})}})}),l.render({elem:"#LAY-user-back-manage",url:"./json/useradmin/mangadmin.js",cols:[[{type:"checkbox",fixed:"left"},{field:"id",width:80,title:"ID",sort:!0},{field:"loginname",title:"登录名"},{field:"telphone",title:"手机"},{field:"email",title:"邮箱"},{field:"role",title:"角色"},{field:"jointime",title:"加入时间",sort:!0},{field:"check",title:"审核状态",templet:"#buttonTpl",minWidth:80,align:"center"},{title:"操作",width:150,align:"center",fixed:"right",toolbar:"#table-useradmin-admin"}]],text:"对不起，加载出现异常！"}),l.on("tool(LAY-user-back-manage)",function(e){var l=e.data;"del"===e.event?layer.prompt({formType:1,title:"敏感操作，请验证口令"},function(i,t){layer.close(t),layer.confirm("确定删除此管理员？",function(i){console.log(e),e.del(),layer.close(i)})}):"edit"===e.event&&i.popup({title:"编辑管理员",area:["420px","450px"],id:"LAY-popup-user-add",success:function(e,i){t(this.id).render("user/administrators/adminform",l).done(function(){r.render(null,"layuiadmin-form-admin"),r.on("submit(LAY-user-back-submit)",function(e){e.field;layui.table.reload("LAY-user-back-manage"),layer.close(i)})})}})}),l.render({elem:"#LAY-user-back-role",url:"./json/useradmin/role.js",cols:[[{type:"checkbox",fixed:"left"},{field:"id",width:80,title:"ID",sort:!0},{field:"rolename",title:"角色名"},{field:"limits",title:"拥有权限"},{field:"descr",title:"具体描述"},{title:"操作",width:150,align:"center",fixed:"right",toolbar:"#table-useradmin-admin"}]],text:"对不起，加载出现异常！"}),l.on("tool(LAY-user-back-role)",function(e){var l=e.data;"del"===e.event?layer.confirm("确定删除此角色？",function(i){e.del(),layer.close(i)}):"edit"===e.event&&i.popup({title:"添加新角色",area:["500px","480px"],id:"LAY-popup-user-add",success:function(e,i){t(this.id).render("user/administrators/roleform",l).done(function(){r.render(null,"layuiadmin-form-role"),r.on("submit(LAY-user-role-submit)",function(e){e.field;layui.table.reload("LAY-user-back-role"),layer.close(i)})})}})}),e("useradmin",{})});
|
||||||
2
dist/controller/workorder.js
vendored
Normal file
2
dist/controller/workorder.js
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
/** layuiAdmin.pro-v1.4.0 LPPL License By https://www.layui.com/admin/ */
|
||||||
|
;layui.define(["table","form","element"],function(e){var t=(layui.$,layui.admin),i=layui.view,r=layui.table,l=layui.form,o=layui.element;r.render({elem:"#LAY-app-workorder",url:"./json/workorder/demo.js",cols:[[{type:"numbers",fixed:"left"},{field:"orderid",width:100,title:"工单号",sort:!0},{field:"attr",width:100,title:"业务性质"},{field:"title",width:100,title:"工单标题",width:300},{field:"progress",title:"进度",width:200,align:"center",templet:"#progressTpl"},{field:"submit",width:100,title:"提交者"},{field:"accept",width:100,title:"受理人员"},{field:"state",title:"工单状态",templet:"#buttonTpl",minWidth:80,align:"center"},{title:"操作",align:"center",fixed:"right",toolbar:"#table-system-order"}]],page:!0,limit:10,limits:[10,15,20,25,30],text:"对不起，加载出现异常！",done:function(){o.render("progress")}}),r.on("tool(LAY-app-workorder)",function(e){e.data;"edit"===e.event&&t.popup({title:"编辑工单",area:["450px","450px"],id:"LAY-popup-workorder-add",success:function(e,t){i(this.id).render("app/workorder/listform").done(function(){l.render(null,"layuiadmin-form-workorder"),l.on("submit(LAY-app-workorder-submit)",function(e){e.field;layui.table.reload("LAY-app-workorder"),layer.close(t)})})}})}),e("workorder",{})});
|
||||||
2
dist/index.js
vendored
Normal file
2
dist/index.js
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
/** layuiAdmin.pro-v1.4.0 LPPL License By https://www.layui.com/admin/ */
|
||||||
|
;layui.extend({setter:"config",admin:"lib/admin",view:"lib/view"}).define(["setter","admin"],function(e){var a=layui.setter,n=layui.element,i=layui.admin,t=i.tabsPage,l=layui.view,o=function(){var e=layui.router(),r=e.path,y=i.correctRouter(e.path.join("/"));r.length||(r=[""]),""===r[r.length-1]&&(r[r.length-1]=a.entry);var h=function(e){o.haveInit&&d(".layui-layer").each(function(){var e=d(this),a=e.attr("times");e.hasClass("layui-layim")||layer.close(a)}),o.haveInit=!0,d(s).scrollTop(0),delete t.type};return"tab"===t.type&&("/"!==y||"/"===y&&i.tabsBody().html())?(i.tabsBodyChange(t.index),h(t.type)):(l().render(r.join("/")).then(function(l){var o,r=d("#LAY_app_tabsheader>li");r.each(function(e){var a=d(this),n=a.attr("lay-id");n===y&&(o=!0,t.index=e)}),a.pageTabs&&"/"!==y&&(o||(d(s).append('<div class="layadmin-tabsbody-item layui-show"></div>'),t.index=r.length,n.tabAdd(u,{title:"<span>"+(l.title||"新标签页")+"</span>",id:y,attr:e.href}))),this.container=i.tabsBody(t.index),a.pageTabs||this.container.scrollTop(0),n.tabChange(u,y),i.tabsBodyChange(t.index)}).done(function(){layui.use("common",layui.cache.callback.common),c.on("resize",layui.data.resize),n.render("breadcrumb","breadcrumb"),i.tabsBody(t.index).on("scroll",function(){var e=d(this),a=d(".layui-laydate"),n=d(".layui-layer")[0];a[0]&&(a.each(function(){var e=d(this);e.hasClass("layui-laydate-static")||e.remove()}),e.find("input").blur()),n&&layer.closeAll("tips")})}),void h())},r=function(e){var n,t=layui.router(),r=l(a.container),s=i.correctRouter(t.path.join("/"));if(layui.each(a.indPage,function(e,a){if(s===a)return n=!0}),layui.config({base:a.base+"controller/"}),n||"/user/login"===s)r.render(t.path.join("/")).done(function(){i.pageType="alone"});else{if(a.interceptor){var u=layui.data(a.tableName);if(!u[a.request.tokenName])return location.hash="/user/login/redirect="+encodeURIComponent(s)}"console"===i.pageType?o():r.render("layout").done(function(){o(),layui.element.render(),i.screen()<2&&i.sideFlexible(),i.pageType="console"})}},s="#LAY_app_body",u="layadmin-layout-tabs",d=layui.$,c=d(window);layui.link(a.base+"style/admin.css?v="+(i.v+"-1"),function(){r()},"layuiAdmin"),window.onhashchange=function(){r(),layui.event.call(this,a.MOD_NAME,"hash({*})",layui.router())},layui.each(a.extend,function(e,n){var i={};i[n]="{/}"+a.base+"lib/extend/"+n,layui.extend(i)}),e("index",{render:o})});
|
||||||
2
dist/lib/admin.js
vendored
Normal file
2
dist/lib/admin.js
vendored
Normal file
File diff suppressed because one or more lines are too long
39
dist/lib/extend/echarts.js
vendored
Normal file
39
dist/lib/extend/echarts.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
dist/lib/extend/echartsTheme.js
vendored
Normal file
2
dist/lib/extend/echartsTheme.js
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
/** layuiAdmin.pro-v1.4.0 LPPL License By https://www.layui.com/admin/ */
|
||||||
|
;layui.define(function(e){e("echartsTheme",{color:["#009688","#1E9FFF","#5FB878","#FFB980","#D87A80","#8d98b3","#e5cf0d","#97b552","#95706d","#dc69aa","#07a2a4","#9a7fd1","#588dd5","#f5994e","#c05050","#59678c","#c9ab00","#7eb00a","#6f5553","#c14089"],title:{textStyle:{fontWeight:"normal",color:"#666"}},dataRange:{itemWidth:15,color:["#009688","#e0ffff"]},toolbox:{color:["#1e90ff","#1e90ff","#1e90ff","#1e90ff"],effectiveColor:"#ff4500"},tooltip:{backgroundColor:"rgba(50,50,50,0.5)",axisPointer:{type:"line",lineStyle:{color:"#009688"},crossStyle:{color:"#008acd"},shadowStyle:{color:"rgba(200,200,200,0.2)"}}},dataZoom:{dataBackgroundColor:"#efefff",fillerColor:"rgba(182,162,222,0.2)",handleColor:"#008acd"},grid:{borderColor:"#eee"},categoryAxis:{axisLine:{lineStyle:{color:"#009688"}},axisTick:{show:!1},splitLine:{lineStyle:{color:["#eee"]}}},valueAxis:{axisLine:{lineStyle:{color:"#009688"}},splitArea:{show:!0,areaStyle:{color:["rgba(250,250,250,0.1)","rgba(200,200,200,0.1)"]}},splitLine:{lineStyle:{color:["#eee"]}}},polar:{axisLine:{lineStyle:{color:"#ddd"}},splitArea:{show:!0,areaStyle:{color:["rgba(250,250,250,0.2)","rgba(200,200,200,0.2)"]}},splitLine:{lineStyle:{color:"#ddd"}}},timeline:{lineStyle:{color:"#009688"},controlStyle:{normal:{color:"#009688"},emphasis:{color:"#009688"}},symbol:"emptyCircle",symbolSize:3},bar:{itemStyle:{normal:{barBorderRadius:2},emphasis:{barBorderRadius:2}}},line:{smooth:!0,symbol:"emptyCircle",symbolSize:3},k:{itemStyle:{normal:{color:"#d87a80",color0:"#2ec7c9",lineStyle:{color:"#d87a80",color0:"#2ec7c9"}}}},scatter:{symbol:"circle",symbolSize:4},radar:{symbol:"emptyCircle",symbolSize:3},map:{itemStyle:{normal:{areaStyle:{color:"#ddd"},label:{textStyle:{color:"#d87a80"}}},emphasis:{areaStyle:{color:"#fe994e"}}}},force:{itemStyle:{normal:{linkStyle:{color:"#1e90ff"}}}},chord:{itemStyle:{normal:{borderWidth:1,borderColor:"rgba(128, 128, 128, 0.5)",chordStyle:{lineStyle:{color:"rgba(128, 128, 128, 0.5)"}}},emphasis:{borderWidth:1,borderColor:"rgba(128, 128, 128, 0.5)",chordStyle:{lineStyle:{color:"rgba(128, 128, 128, 0.5)"}}}}},gauge:{axisLine:{lineStyle:{color:[[.2,"#2ec7c9"],[.8,"#5ab1ef"],[1,"#d87a80"]],width:10}},axisTick:{splitNumber:10,length:15,lineStyle:{color:"auto"}},splitLine:{length:22,lineStyle:{color:"auto"}},pointer:{width:5}},textStyle:{fontFamily:"微软雅黑, Arial, Verdana, sans-serif"}})});
|
||||||
2
dist/lib/view.js
vendored
Normal file
2
dist/lib/view.js
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
/** layuiAdmin.pro-v1.4.0 LPPL License By https://www.layui.com/admin/ */
|
||||||
|
;layui.define(["laytpl","layer"],function(e){var t=layui.jquery,a=layui.laytpl,n=layui.layer,r=layui.setter,o=(layui.device(),layui.hint()),i=function(e){return new d(e)},s="LAY_app_body",d=function(e){this.id=e,this.container=t("#"+(e||s))};i.loading=function(e){e.append(this.elemLoad=t('<i class="layui-anim layui-anim-rotate layui-anim-loop layui-icon layui-icon-loading layadmin-loading"></i>'))},i.removeLoad=function(){this.elemLoad&&this.elemLoad.remove()},i.exit=function(){layui.data(r.tableName,{key:r.request.tokenName,remove:!0}),location.hash="/user/login"},i.req=function(e){var a=e.success,n=e.error,o=r.request,s=r.response,d=function(){return r.debug?"<br><cite>URL：</cite>"+e.url:""};if(e.data=e.data||{},e.headers=e.headers||{},o.tokenName){var l="string"==typeof e.data?JSON.parse(e.data):e.data;e.data[o.tokenName]=o.tokenName in l?e.data[o.tokenName]:layui.data(r.tableName)[o.tokenName]||"",e.headers[o.tokenName]=o.tokenName in e.headers?e.headers[o.tokenName]:layui.data(r.tableName)[o.tokenName]||""}return delete e.success,delete e.error,t.ajax(t.extend({type:"get",dataType:"json",success:function(t){var n=s.statusCode;if(t[s.statusName]==n.ok)"function"==typeof e.done&&e.done(t);else if(t[s.statusName]==n.logout)i.exit();else{var r=["<cite>Error：</cite> "+(t[s.msgName]||"返回状态码异常"),d()].join("");i.error(r)}"function"==typeof a&&a(t)},error:function(e,t){var a=["请求异常，请重试<br><cite>错误信息：</cite>"+t,d()].join("");i.error(a),"function"==typeof n&&n(res)}},e))},i.popup=function(e){var a=e.success,r=e.skin;return delete e.success,delete e.skin,n.open(t.extend({type:1,title:"提示",content:"",id:"LAY-system-view-popup",skin:"layui-layer-admin"+(r?" "+r:""),shadeClose:!0,closeBtn:!1,success:function(e,r){var o=t('<i class="layui-icon" close>ဆ</i>');e.append(o),o.on("click",function(){n.close(r)}),"function"==typeof a&&a.apply(this,arguments)}},e))},i.error=function(e,a){return i.popup(t.extend({content:e,maxWidth:300,offset:"t",anim:6,id:"LAY_adminError"},a))},d.prototype.render=function(e,a){var n=this;layui.router();return e=r.views+e+r.engine,t("#"+s).children(".layadmin-loading").remove(),i.loading(n.container),t.ajax({url:e,type:"get",dataType:"html",data:{v:layui.cache.version},success:function(e){e="<div>"+e+"</div>";var r=t(e).find("title"),o=r.text()||(e.match(/\<title\>([\s\S]*)\<\/title>/)||[])[1],s={title:o,body:e};r.remove(),n.params=a||{},n.then&&(n.then(s),delete n.then),n.parse(e),i.removeLoad(),n.done&&(n.done(s),delete n.done)},error:function(e){return i.removeLoad(),n.render.isError?i.error("请求视图文件异常，状态："+e.status):(404===e.status?n.render("template/tips/404"):n.render("template/tips/error"),void(n.render.isError=!0))}}),n},d.prototype.parse=function(e,n,r){var s=this,d="object"==typeof e,l=d?e:t(e),u=d?e:l.find("*[template]"),c=function(e){var n=a(e.dataElem.html()),o=t.extend({params:y.params},e.res);e.dataElem.after(n.render(o)),"function"==typeof r&&r();try{e.done&&new Function("d",e.done)(o)}catch(i){console.error(e.dataElem[0],"\n存在错误回调脚本\n\n",i)}},y=layui.router();l.find("title").remove(),s.container[n?"after":"html"](l.children()),y.params=s.params||{};for(var p=u.length;p>0;p--)!function(){var e=u.eq(p-1),t=e.attr("lay-done")||e.attr("lay-then"),n=a(e.attr("lay-url")||"").render(y),r=a(e.attr("lay-data")||"").render(y),s=a(e.attr("lay-headers")||"").render(y);try{r=new Function("return "+r+";")()}catch(d){o.error("lay-data: "+d.message),r={}}try{s=new Function("return "+s+";")()}catch(d){o.error("lay-headers: "+d.message),s=s||{}}n?i.req({type:e.attr("lay-type")||"get",url:n,data:r,dataType:"json",headers:s,success:function(a){c({dataElem:e,res:a,done:t})}}):c({dataElem:e,done:t})}();return s},d.prototype.send=function(e,t){var n=a(e||this.container.html()).render(t||{});return this.container.html(n),this},d.prototype.refresh=function(e){var t=this,a=t.container.next(),n=a.attr("lay-templateid");return t.id!=n?t:(t.parse(t.container,"refresh",function(){t.container.siblings('[lay-templateid="'+t.id+'"]:last').remove(),"function"==typeof e&&e()}),t)},d.prototype.then=function(e){return this.then=e,this},d.prototype.done=function(e){return this.done=e,this},e("view",i)});
|
||||||
2
dist/style/admin.css
vendored
Normal file
2
dist/style/admin.css
vendored
Normal file
File diff suppressed because one or more lines are too long
2
dist/style/login.css
vendored
Normal file
2
dist/style/login.css
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
/** layuiAdmin.pro-v1.4.0 LPPL License By https://www.layui.com/admin/ */
|
||||||
|
#LAY_app,body,html{height:100%}.layui-layout-body{overflow:auto}#LAY-user-login,.layadmin-user-display-show{display:block!important}.layadmin-user-login{position:relative;left:0;top:0;padding:110px 0;min-height:100%;box-sizing:border-box}.layadmin-user-login-main{width:375px;margin:0 auto;box-sizing:border-box}.layadmin-user-login-box{padding:20px}.layadmin-user-login-header{text-align:center}.layadmin-user-login-header h2{margin-bottom:10px;font-weight:300;font-size:30px;color:#000}.layadmin-user-login-header p{font-weight:300;color:#999}.layadmin-user-login-body .layui-form-item{position:relative}.layadmin-user-login-icon{position:absolute;left:1px;top:1px;width:38px;line-height:36px;text-align:center;color:#d2d2d2}.layadmin-user-login-body .layui-form-item .layui-input{padding-left:38px}.layadmin-user-login-codeimg{max-height:38px;width:100%;cursor:pointer;box-sizing:border-box}.layadmin-user-login-other{position:relative;font-size:0;line-height:38px;padding-top:20px}.layadmin-user-login-other>*{display:inline-block;vertical-align:middle;margin-right:10px;font-size:14px}.layadmin-user-login-other .layui-icon{position:relative;top:2px;font-size:26px}.layadmin-user-login-other a:hover{opacity:.8}.layadmin-user-jump-change{float:right}.layadmin-user-login-footer{position:absolute;left:0;bottom:0;width:100%;line-height:30px;padding:20px;text-align:center;box-sizing:border-box;color:rgba(0,0,0,.5)}.layadmin-user-login-footer span{padding:0 5px}.layadmin-user-login-footer a{padding:0 5px;color:rgba(0,0,0,.5)}.layadmin-user-login-footer a:hover{color:rgba(0,0,0,1)}.layadmin-user-login-main[bgimg]{background-color:#fff;box-shadow:0 0 5px rgba(0,0,0,.05)}.ladmin-user-login-theme{position:fixed;bottom:0;left:0;width:100%;text-align:center}.ladmin-user-login-theme ul{display:inline-block;padding:5px;background-color:#fff}.ladmin-user-login-theme ul li{display:inline-block;vertical-align:top;width:64px;height:43px;cursor:pointer;transition:all .3s;-webkit-transition:all .3s;background-color:#f2f2f2}.ladmin-user-login-theme ul li:hover{opacity:.9}@media screen and (max-width:768px){.layadmin-user-login{padding-top:60px}.layadmin-user-login-main{width:300px}.layadmin-user-login-box{padding:10px}}
|
||||||
BIN
dist/style/res/bg-none.jpg
vendored
Normal file
BIN
dist/style/res/bg-none.jpg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 832 B |
BIN
dist/style/res/layui-logo.jpg
vendored
Normal file
BIN
dist/style/res/layui-logo.jpg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
dist/style/res/logo-black.png
vendored
Normal file
BIN
dist/style/res/logo-black.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 455 B |
BIN
dist/style/res/logo.png
vendored
Normal file
BIN
dist/style/res/logo.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 457 B |
BIN
dist/style/res/template/character.jpg
vendored
Normal file
BIN
dist/style/res/template/character.jpg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
BIN
dist/style/res/template/huge.jpg
vendored
Normal file
BIN
dist/style/res/template/huge.jpg
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 410 KiB |
BIN
dist/style/res/template/portrait.png
vendored
Normal file
BIN
dist/style/res/template/portrait.png
vendored
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
2
dist/style/template.css
vendored
Normal file
2
dist/style/template.css
vendored
Normal file
File diff suppressed because one or more lines are too long
106
dist/views/app/content/comment.html
vendored
Normal file
106
dist/views/app/content/comment.html
vendored
Normal file
@ -0,0 +1,106 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>评论管理</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>应用</cite></a>
|
||||||
|
<a><cite>评论管理</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="app-content-comment">
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">ID</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" name="cid" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">评论者</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" name="username" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">评论内容</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" name="content" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<button class="layui-btn layuiadmin-btn-comm" data-type="reload" lay-submit lay-filter="LAY-app-contcomm-search">
|
||||||
|
<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div style="padding-bottom: 10px;">
|
||||||
|
<button class="layui-btn layuiadmin-btn-comm" data-type="batchdel">删除</button>
|
||||||
|
</div>
|
||||||
|
<table id="LAY-app-content-comm" lay-filter="LAY-app-content-comm"></table>
|
||||||
|
<script type="text/html" id="table-content-com">
|
||||||
|
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
|
||||||
|
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use('contlist', layui.factory('contlist')).use(['admin', 'contlist', 'table'], function(){
|
||||||
|
var $ = layui.$
|
||||||
|
,admin = layui.admin
|
||||||
|
,view = layui.view
|
||||||
|
,table = layui.table
|
||||||
|
,form = layui.form;
|
||||||
|
|
||||||
|
form.render(null, 'app-content-comment');
|
||||||
|
|
||||||
|
//监听搜索
|
||||||
|
form.on('submit(LAY-app-contcomm-search)', function(data){
|
||||||
|
var field = data.field;
|
||||||
|
|
||||||
|
//执行重载
|
||||||
|
table.reload('LAY-app-content-comm', {
|
||||||
|
where: field
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
//点击事件
|
||||||
|
var active = {
|
||||||
|
batchdel: function(){
|
||||||
|
var checkStatus = table.checkStatus('LAY-app-content-comm')
|
||||||
|
,checkData = checkStatus.data; //得到选中的数据
|
||||||
|
|
||||||
|
if(checkData.length === 0){
|
||||||
|
return layer.msg('请选择数据');
|
||||||
|
}
|
||||||
|
|
||||||
|
layer.confirm('确定删除吗？', function(index) {
|
||||||
|
|
||||||
|
//执行 Ajax 后重载
|
||||||
|
/*
|
||||||
|
admin.req({
|
||||||
|
url: 'xxx'
|
||||||
|
//,……
|
||||||
|
});
|
||||||
|
*/
|
||||||
|
table.reload('LAY-app-content-comm');
|
||||||
|
layer.msg('已删除');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$('.layui-btn.layuiadmin-btn-comm').on('click', function(){
|
||||||
|
var type = $(this).data('type');
|
||||||
|
active[type] ? active[type].call(this) : '';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
20
dist/views/app/content/contform.html
vendored
Normal file
20
dist/views/app/content/contform.html
vendored
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<div class="layui-form" lay-filter="layuiadmin-form-comment" id="layuiadmin-form-comment">
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">评论内容</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<script type="text/html" template>
|
||||||
|
<textarea name="content" lay-verify="required" placeholder="请输入" class="layui-textarea">
|
||||||
|
{{ d.params.content || '' }}
|
||||||
|
</textarea>
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label"></label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="button" lay-submit lay-filter="layuiadmin-app-com-submit" value="确认" class="layui-btn">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
151
dist/views/app/content/list.html
vendored
Normal file
151
dist/views/app/content/list.html
vendored
Normal file
@ -0,0 +1,151 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>文章列表</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>应用</cite></a>
|
||||||
|
<a><cite>文章列表</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="app-content-list">
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">文章ID</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" name="id" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">作者</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" name="author" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">标题</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" name="title" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">文章标签</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<select name="label">
|
||||||
|
<option value="">请选择标签</option>
|
||||||
|
<option value="0">美食</option>
|
||||||
|
<option value="1">新闻</option>
|
||||||
|
<option value="2">八卦</option>
|
||||||
|
<option value="3">体育</option>
|
||||||
|
<option value="4">音乐</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search">
|
||||||
|
<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div style="padding-bottom: 10px;">
|
||||||
|
<button class="layui-btn layuiadmin-btn-list" data-type="batchdel">删除</button>
|
||||||
|
<button class="layui-btn layuiadmin-btn-list" data-type="add">添加</button>
|
||||||
|
</div>
|
||||||
|
<table id="LAY-app-content-list" lay-filter="LAY-app-content-list"></table>
|
||||||
|
<script type="text/html" id="buttonTpl">
|
||||||
|
{{# if(d.status){ }}
|
||||||
|
<button class="layui-btn layui-btn-xs">已发布</button>
|
||||||
|
{{# } else { }}
|
||||||
|
<button class="layui-btn layui-btn-primary layui-btn-xs">待修改</button>
|
||||||
|
{{# } }}
|
||||||
|
</script>
|
||||||
|
<script type="text/html" id="table-content-list">
|
||||||
|
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
|
||||||
|
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use('contlist', layui.factory('contlist')).use(['admin', 'contlist', 'table'], function(){
|
||||||
|
var $ = layui.$
|
||||||
|
,admin = layui.admin
|
||||||
|
,view = layui.view
|
||||||
|
,table = layui.table
|
||||||
|
,form = layui.form;
|
||||||
|
|
||||||
|
form.render(null, 'app-content-list');
|
||||||
|
|
||||||
|
//监听搜索
|
||||||
|
form.on('submit(LAY-app-contlist-search)', function(data){
|
||||||
|
var field = data.field;
|
||||||
|
|
||||||
|
//执行重载
|
||||||
|
table.reload('LAY-app-content-list', {
|
||||||
|
where: field
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
var active = {
|
||||||
|
batchdel: function(){
|
||||||
|
var checkStatus = table.checkStatus('LAY-app-content-list')
|
||||||
|
,checkData = checkStatus.data; //得到选中的数据
|
||||||
|
|
||||||
|
if(checkData.length === 0){
|
||||||
|
return layer.msg('请选择数据');
|
||||||
|
}
|
||||||
|
|
||||||
|
layer.confirm('确定删除吗？', function(index) {
|
||||||
|
|
||||||
|
//执行 Ajax 后重载
|
||||||
|
/*
|
||||||
|
admin.req({
|
||||||
|
url: 'xxx'
|
||||||
|
//,……
|
||||||
|
});
|
||||||
|
*/
|
||||||
|
table.reload('LAY-app-content-list');
|
||||||
|
layer.msg('已删除');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
//添加
|
||||||
|
,add: function(othis){
|
||||||
|
admin.popup({
|
||||||
|
title: '添加文章'
|
||||||
|
,area: ['550px', '550px']
|
||||||
|
,id: 'LAY-popup-content-add'
|
||||||
|
,success: function(layero, index){
|
||||||
|
view(this.id).render('app/content/listform').done(function(){
|
||||||
|
form.render(null, 'layuiadmin-app-form-list');
|
||||||
|
|
||||||
|
//监听提交
|
||||||
|
form.on('submit(layuiadmin-app-form-submit)', function(data){
|
||||||
|
var field = data.field; //获取提交的字段
|
||||||
|
|
||||||
|
//提交 Ajax 成功后，关闭当前弹层并重载表格
|
||||||
|
//$.ajax({});
|
||||||
|
layui.table.reload('LAY-app-content-list'); //重载表格
|
||||||
|
layer.close(index); //执行关闭
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$('.layui-btn.layuiadmin-btn-list').on('click', function(){
|
||||||
|
var type = $(this).data('type');
|
||||||
|
active[type] ? active[type].call(this) : '';
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
59
dist/views/app/content/listform.html
vendored
Normal file
59
dist/views/app/content/listform.html
vendored
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
|
||||||
|
<div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list"style="padding: 20px 30px 0 0;">
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">文章标题</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<script type="text/html" template>
|
||||||
|
<input type="text" name="title" value="{{ d.params.title || '' }}" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">发布人</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<script type="text/html" template>
|
||||||
|
<input type="text" name="author" value="{{ d.params.author || '' }}" lay-verify="required" placeholder="请输入号码" autocomplete="off" class="layui-input">
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">文章内容</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<script type="text/html" template>
|
||||||
|
<textarea name="content" lay-verify="required" style="width: 400px; height: 150px;" autocomplete="off" class="layui-textarea">
|
||||||
|
{{ d.params.content || '' }}
|
||||||
|
</textarea>
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">标签</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<script type="text/html" template>
|
||||||
|
<select name="label" lay-verify="required">
|
||||||
|
<option value="">请选择标签</option>
|
||||||
|
<option value="美食" {{ d.params.label === '美食' ? 'selected' : '' }}>美食</option>
|
||||||
|
<option value="新闻" {{ d.params.label === '新闻' ? 'selected' : '' }}>新闻</option>
|
||||||
|
<option value="八卦" {{ d.params.label === '八卦' ? 'selected' : '' }}>八卦</option>
|
||||||
|
<option value="体育" {{ d.params.label === '体育' ? 'selected' : '' }}>体育</option>
|
||||||
|
<option value="音乐" {{ d.params.label === '音乐' ? 'selected' : '' }}>音乐</option>
|
||||||
|
</select>
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">发布状态</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="checkbox" lay-verify="required" lay-filter="status" name="status" lay-skin="switch" lay-text="已发布|待修改">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script type="text/html" template>
|
||||||
|
<input type="hidden" name="id" value="{{ d.params.id || '' }}">
|
||||||
|
</script>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label"></label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="button" lay-submit lay-filter="layuiadmin-app-form-submit" value="确认" class="layui-btn">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
65
dist/views/app/content/tags.html
vendored
Normal file
65
dist/views/app/content/tags.html
vendored
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>分类管理</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>应用</cite></a>
|
||||||
|
<a><cite>分类管理</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header layuiadmin-card-header-auto">
|
||||||
|
<button class="layui-btn layuiadmin-btn-tags" data-type="add">添加</button>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<table id="LAY-app-content-tags" lay-filter="LAY-app-content-tags"></table>
|
||||||
|
<script type="text/html" id="layuiadmin-app-cont-tagsbar">
|
||||||
|
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
|
||||||
|
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use('contlist', layui.factory('contlist')).use(['admin', 'contlist', 'table'], function(){
|
||||||
|
var $ = layui.$
|
||||||
|
,admin = layui.admin
|
||||||
|
,view = layui.view
|
||||||
|
,table = layui.table
|
||||||
|
,form = layui.form;
|
||||||
|
|
||||||
|
var active = {
|
||||||
|
add: function(){
|
||||||
|
admin.popup({
|
||||||
|
title: '添加分类'
|
||||||
|
,area: ['450px', '200px']
|
||||||
|
,id: 'LAY-popup-content-tags'
|
||||||
|
,success: function(layero, index){
|
||||||
|
view(this.id).render('app/content/tagsform').done(function(){
|
||||||
|
form.render(null, 'layuiadmin-form-tags');
|
||||||
|
|
||||||
|
//监听提交
|
||||||
|
form.on('submit(layuiadmin-app-tags-submit)', function(data){
|
||||||
|
var field = data.field; //获取提交的字段
|
||||||
|
|
||||||
|
//提交 Ajax 成功后，关闭当前弹层并重载表格
|
||||||
|
//$.ajax({});
|
||||||
|
layui.table.reload('LAY-app-content-tags'); //重载表格
|
||||||
|
layer.close(index); //执行关闭
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
$('.layui-btn.layuiadmin-btn-tags').on('click', function(){
|
||||||
|
var type = $(this).data('type');
|
||||||
|
active[type] ? active[type].call(this) : '';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
18
dist/views/app/content/tagsform.html
vendored
Normal file
18
dist/views/app/content/tagsform.html
vendored
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<div class="layui-form" lay-filter="layuiadmin-form-tags" id="layuiadmin-app-form-tags">
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">分类名</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<script type="text/html" template>
|
||||||
|
<input type="text" name="tags" value="{{ d.params.tags || '' }}" lay-verify="required" placeholder="请输入..." autocomplete="off" class="layui-input">
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label"></label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="button" lay-submit lay-filter="layuiadmin-app-tags-submit" value="确认" class="layui-btn">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
123
dist/views/app/forum/list.html
vendored
Normal file
123
dist/views/app/forum/list.html
vendored
Normal file
@ -0,0 +1,123 @@
|
|||||||
|
|
||||||
|
<title>帖子列表</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>应用</cite></a>
|
||||||
|
<a><cite>帖子列表</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="app-forum-list">
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">ID</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="text" name="id" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">发帖人</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="text" name="poster" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">发帖内容</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="text" name="content" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">帖子状态</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<select name="top">
|
||||||
|
<option value="0">正常</option>
|
||||||
|
<option value="1">置顶</option>
|
||||||
|
<option value="2">封禁</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<button class="layui-btn layuiadmin-btn-forum-list" lay-submit lay-filter="LAY-app-forumlist-search">
|
||||||
|
<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div style="padding-bottom: 10px;">
|
||||||
|
<button class="layui-btn layuiadmin-btn-forum-list" data-type="batchdel">删除</button>
|
||||||
|
</div>
|
||||||
|
<table id="LAY-app-forum-list" lay-filter="LAY-app-forum-list"></table>
|
||||||
|
<script type="text/html" id="imgTpl">
|
||||||
|
<img style="display: inline-block; width: 50%; height: 100%;" src= {{ d.avatar }}>
|
||||||
|
</script>
|
||||||
|
<script type="text/html" id="buttonTpl">
|
||||||
|
{{# if(d.top == true){ }}
|
||||||
|
<button class="layui-btn layui-btn-xs">已置顶</button>
|
||||||
|
{{# } else { }}
|
||||||
|
<button class="layui-btn layui-btn-primary layui-btn-xs">正常显示</button>
|
||||||
|
{{# } }}
|
||||||
|
</script>
|
||||||
|
<script type="text/html" id="table-forum-list">
|
||||||
|
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
|
||||||
|
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use('forum', layui.factory('forum')).use(['admin', 'forum', 'table'], function(){
|
||||||
|
var $ = layui.$
|
||||||
|
,form = layui.form
|
||||||
|
,table = layui.table;
|
||||||
|
|
||||||
|
form.render(null, 'app-forum-list');
|
||||||
|
|
||||||
|
//监听搜索
|
||||||
|
form.on('submit(LAY-app-forumlist-search)', function(data){
|
||||||
|
var field = data.field;
|
||||||
|
|
||||||
|
//执行重载
|
||||||
|
table.reload('LAY-app-forum-list', {
|
||||||
|
where: field
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
//事件
|
||||||
|
var active = {
|
||||||
|
batchdel: function(){
|
||||||
|
var checkStatus = table.checkStatus('LAY-app-forum-list')
|
||||||
|
,checkData = checkStatus.data; //得到选中的数据
|
||||||
|
|
||||||
|
if(checkData.length === 0){
|
||||||
|
return layer.msg('请选择数据');
|
||||||
|
}
|
||||||
|
|
||||||
|
layer.confirm('确定删除吗？', function(index) {
|
||||||
|
|
||||||
|
//执行 Ajax 后重载
|
||||||
|
/*
|
||||||
|
admin.req({
|
||||||
|
url: 'xxx'
|
||||||
|
//,……
|
||||||
|
});
|
||||||
|
*/
|
||||||
|
table.reload('LAY-app-forum-list');
|
||||||
|
layer.msg('已删除');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$('.layui-btn.layuiadmin-btn-forum-list').on('click', function(){
|
||||||
|
var type = $(this).data('type');
|
||||||
|
active[type] ? active[type].call(this) : '';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
57
dist/views/app/forum/listform.html
vendored
Normal file
57
dist/views/app/forum/listform.html
vendored
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<form class="layui-form" lay-filter="layuiadmin-form-list" id="layuiadmin-form-list" style="padding: 20px 30px 0 0;">
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">用户名</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="text" name="poster" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">发帖内容</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<textarea name="content" lay-verify="required" autocomplete="off" class="layui-textarea"></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">置顶</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="checkbox" lay-filter="switch" lay-verify="required" name="switch" lay-skin="switch" lay-text="ON|OFF">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">头像</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" name="avatar" placeholder="请上传图片" autocomplete="off" class="layui-input" >
|
||||||
|
</div>
|
||||||
|
<button style="float: left;" type="button" class="layui-btn" id="layuiadmin-upload-list">上传图片</button>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label"></label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="button" lay-submit lay-filter="layuiadmin-app-forum-submit" value="确认" class="layui-btn">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'form', 'upload'], function(){
|
||||||
|
var $ = layui.$
|
||||||
|
,admin = layui.admin
|
||||||
|
,view = layui.view
|
||||||
|
,table = layui.table
|
||||||
|
,form = layui.form
|
||||||
|
,upload = layui.upload;
|
||||||
|
|
||||||
|
upload.render({
|
||||||
|
elem: '#layuiadmin-upload-list'
|
||||||
|
,url: './json/upload/demo.js'
|
||||||
|
,accept: 'images'
|
||||||
|
,method: 'get'
|
||||||
|
,acceptMime: 'image/*'
|
||||||
|
,done: function(res){
|
||||||
|
$(this.item).prev("div").children("input").val(res.data.src)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
</script>
|
||||||
99
dist/views/app/forum/replys.html
vendored
Normal file
99
dist/views/app/forum/replys.html
vendored
Normal file
@ -0,0 +1,99 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>回帖列表</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>应用</cite></a>
|
||||||
|
<a><cite>回帖列表</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="layuiadmin-app-forum-reply">
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<div class="layui-inline layuiadmin-input-useradmin">
|
||||||
|
<label class="layui-form-label">回帖人</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="text" name="replyer" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">回帖内容</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="text" name="content" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<button class="layui-btn layuiadmin-btn-replys" data-type="reload" lay-submit lay-filter="LAY-app-forumreply-search">
|
||||||
|
<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div style="padding-bottom: 10px;">
|
||||||
|
<button class="layui-btn layuiadmin-btn-replys" data-type="batchdel">删除</button>
|
||||||
|
</div>
|
||||||
|
<table id="LAY-app-forumreply-list" lay-filter="LAY-app-forumreply-list"></table>
|
||||||
|
<script type="text/html" id="imgTpl">
|
||||||
|
<img style="display: inline-block; width: 50%; height: 100%;" src= {{ d.avatar }}>
|
||||||
|
</script>
|
||||||
|
<script type="text/html" id="table-forum-replys">
|
||||||
|
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
|
||||||
|
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use('forum', layui.factory('forum')).use(['admin', 'forum', 'table'], function(){
|
||||||
|
var $ = layui.$
|
||||||
|
,form = layui.form
|
||||||
|
,table = layui.table;
|
||||||
|
|
||||||
|
form.render(null, 'layuiadmin-app-forum-reply');
|
||||||
|
|
||||||
|
//监听搜索
|
||||||
|
form.on('submit(LAY-app-forumreply-search)', function(data){
|
||||||
|
var field = data.field;
|
||||||
|
|
||||||
|
//执行重载
|
||||||
|
table.reload('LAY-app-forumreply-list', {
|
||||||
|
where: field
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
var active = {
|
||||||
|
batchdel: function(){
|
||||||
|
var checkStatus = table.checkStatus('LAY-app-forumreply-list')
|
||||||
|
,checkData = checkStatus.data; //得到选中的数据
|
||||||
|
|
||||||
|
if(checkData.length === 0){
|
||||||
|
return layer.msg('请选择数据');
|
||||||
|
}
|
||||||
|
|
||||||
|
layer.confirm('确定删除吗？', function(index) {
|
||||||
|
|
||||||
|
//执行 Ajax 后重载
|
||||||
|
/*
|
||||||
|
admin.req({
|
||||||
|
url: 'xxx'
|
||||||
|
//,……
|
||||||
|
});
|
||||||
|
*/
|
||||||
|
table.reload('LAY-app-forumreply-list');
|
||||||
|
layer.msg('已删除');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$('.layui-btn.layuiadmin-btn-replys').on('click', function(){
|
||||||
|
var type = $(this).data('type');
|
||||||
|
active[type] ? active[type].call(this) : '';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
35
dist/views/app/forum/replysform.html
vendored
Normal file
35
dist/views/app/forum/replysform.html
vendored
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<form class="layui-form" lay-filter="layuiadmin-app-forum-reply" style="padding: 20px 30px 0 0;">
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">回帖内容</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<textarea name="content" lay-verify="required" autocomplete="off" class="layui-textarea" style="height: 220px;"></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label"></label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="button" lay-submit lay-filter="layuiadmin-app-forumreply-submit" value="确认" class="layui-btn">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['index', 'form', 'upload'], function(){
|
||||||
|
var $ = layui.$
|
||||||
|
,form = layui.form
|
||||||
|
,upload = layui.upload;
|
||||||
|
|
||||||
|
upload.render({
|
||||||
|
elem: '#layuiadmin-upload-replys'
|
||||||
|
,url: layui.setter.base + 'json/upload/demo.js'
|
||||||
|
,accept: 'images'
|
||||||
|
,method: 'get'
|
||||||
|
,acceptMime: 'image/*'
|
||||||
|
,done: function(res){
|
||||||
|
$(this.item).prev("div").children("input").val(res.data.src)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
</script>
|
||||||
43
dist/views/app/message/detail.html
vendored
Normal file
43
dist/views/app/message/detail.html
vendored
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
|
||||||
|
<title>消息详情</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a lay-href="app/message/">消息中心</a>
|
||||||
|
<a><cite>详情</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid" id="LAY-app-message-detail">
|
||||||
|
<div class="layui-card layuiAdmin-msg-detail">
|
||||||
|
<div template lay-url="./json/message/detail.js?id={{ layui.router().search.id }}">
|
||||||
|
<div class="layui-card-header">
|
||||||
|
<h1>{{ d.data.title }}</h1>
|
||||||
|
<p>
|
||||||
|
<span>{{ layui.util.timeAgo(d.data.time) }}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card-body layui-text">
|
||||||
|
<div class="layadmin-text">
|
||||||
|
{{ d.data.content }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="padding-top: 30px;">
|
||||||
|
<a lay-href="app/message/" class="layui-btn layui-btn-primary layui-btn-sm">返回上级</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin'], function(){
|
||||||
|
var $ = layui.$
|
||||||
|
,admin = layui.admin
|
||||||
|
,table = layui.table
|
||||||
|
,element = layui.element;
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
176
dist/views/app/message/index.html
vendored
Normal file
176
dist/views/app/message/index.html
vendored
Normal file
@ -0,0 +1,176 @@
|
|||||||
|
|
||||||
|
<title>消息中心</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>消息中心</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid" id="LAY-app-message">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-tab layui-tab-brief">
|
||||||
|
<ul class="layui-tab-title">
|
||||||
|
<li class="layui-this">全部消息</li>
|
||||||
|
<li>通知<span class="layui-badge">6</span></li>
|
||||||
|
<li>私信</li>
|
||||||
|
</ul>
|
||||||
|
<div class="layui-tab-content">
|
||||||
|
|
||||||
|
<div class="layui-tab-item layui-show">
|
||||||
|
<div class="LAY-app-message-btns" style="margin-bottom: 10px;">
|
||||||
|
<button class="layui-btn layui-btn-primary layui-btn-sm" data-type="all" data-events="del">删除</button>
|
||||||
|
<button class="layui-btn layui-btn-primary layui-btn-sm" data-type="all" data-events="ready">标记已读</button>
|
||||||
|
<button class="layui-btn layui-btn-primary layui-btn-sm" data-type="all" data-events="readyAll">全部已读</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table id="LAY-app-message-all" lay-filter="LAY-app-message-all"></table>
|
||||||
|
</div>
|
||||||
|
<div class="layui-tab-item">
|
||||||
|
|
||||||
|
<div class="LAY-app-message-btns" style="margin-bottom: 10px;">
|
||||||
|
<button class="layui-btn layui-btn-primary layui-btn-sm" data-type="notice" data-events="del">删除</button>
|
||||||
|
<button class="layui-btn layui-btn-primary layui-btn-sm" data-type="notice" data-events="ready">标记已读</button>
|
||||||
|
<button class="layui-btn layui-btn-primary layui-btn-sm" data-type="notice" data-events="readyAll">全部已读</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table id="LAY-app-message-notice" lay-filter="LAY-app-message-notice"></table>
|
||||||
|
</div>
|
||||||
|
<div class="layui-tab-item">
|
||||||
|
|
||||||
|
<div class="LAY-app-message-btns" style="margin-bottom: 10px;">
|
||||||
|
<button class="layui-btn layui-btn-primary layui-btn-sm" data-type="direct" data-events="del">删除</button>
|
||||||
|
<button class="layui-btn layui-btn-primary layui-btn-sm" data-type="direct" data-events="ready">标记已读</button>
|
||||||
|
<button class="layui-btn layui-btn-primary layui-btn-sm" data-type="direct" data-events="readyAll">全部已读</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table id="LAY-app-message-direct" lay-filter="LAY-app-message-direct"></table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'table', 'util'], function(){
|
||||||
|
var $ = layui.$
|
||||||
|
,admin = layui.admin
|
||||||
|
,table = layui.table
|
||||||
|
,element = layui.element;
|
||||||
|
|
||||||
|
|
||||||
|
var DISABLED = 'layui-btn-disabled'
|
||||||
|
|
||||||
|
//区分各选项卡中的表格
|
||||||
|
,tabs = {
|
||||||
|
all: {
|
||||||
|
text: '全部消息'
|
||||||
|
,id: 'LAY-app-message-all'
|
||||||
|
}
|
||||||
|
,notice: {
|
||||||
|
text: '通知'
|
||||||
|
,id: 'LAY-app-message-notice'
|
||||||
|
}
|
||||||
|
,direct: {
|
||||||
|
text: '私信'
|
||||||
|
,id: 'LAY-app-message-direct'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
//标题内容模板
|
||||||
|
var tplTitle = function(d){
|
||||||
|
return '<a lay-href="app/message/detail/id='+ d.id +'">'+ d.title;
|
||||||
|
};
|
||||||
|
|
||||||
|
//全部消息
|
||||||
|
table.render({
|
||||||
|
elem: '#LAY-app-message-all'
|
||||||
|
,url: './json/message/all.js' //模拟接口
|
||||||
|
,page: true
|
||||||
|
,cols: [[
|
||||||
|
{type: 'checkbox', fixed: 'left'}
|
||||||
|
,{field: 'title', title: '标题内容', minWidth: 300, templet: tplTitle}
|
||||||
|
,{field: 'time', title: '时间', width: 170, templet: '<div>{{ layui.util.timeAgo(d.time) }}</div>'}
|
||||||
|
]]
|
||||||
|
,skin: 'line'
|
||||||
|
});
|
||||||
|
|
||||||
|
//通知
|
||||||
|
table.render({
|
||||||
|
elem: '#LAY-app-message-notice'
|
||||||
|
,url: './json/message/notice.js' //模拟接口
|
||||||
|
,page: true
|
||||||
|
,cols: [[
|
||||||
|
{type: 'checkbox', fixed: 'left'}
|
||||||
|
,{field: 'title', title: '标题内容', minWidth: 300, templet: tplTitle}
|
||||||
|
,{field: 'time', title: '时间', width: 170, templet: '<div>{{ layui.util.timeAgo(d.time) }}</div>'}
|
||||||
|
]]
|
||||||
|
,skin: 'line'
|
||||||
|
});
|
||||||
|
|
||||||
|
//私信
|
||||||
|
table.render({
|
||||||
|
elem: '#LAY-app-message-direct'
|
||||||
|
,url: './json/message/direct.js' //模拟接口
|
||||||
|
,page: true
|
||||||
|
,cols: [[
|
||||||
|
{type: 'checkbox', fixed: 'left'}
|
||||||
|
,{field: 'title', title: '标题内容', minWidth: 300, templet: tplTitle}
|
||||||
|
,{field: 'time', title: '时间', width: 170, templet: '<div>{{ layui.util.timeAgo(d.time) }}</div>'}
|
||||||
|
]]
|
||||||
|
,skin: 'line'
|
||||||
|
});
|
||||||
|
|
||||||
|
//事件处理
|
||||||
|
var events = {
|
||||||
|
del: function(othis, type){
|
||||||
|
var thisTabs = tabs[type]
|
||||||
|
,checkStatus = table.checkStatus(thisTabs.id)
|
||||||
|
,data = checkStatus.data; //获得选中的数据
|
||||||
|
if(data.length === 0) return layer.msg('未选中行');
|
||||||
|
|
||||||
|
layer.confirm('确定删除选中的数据吗？', function(){
|
||||||
|
/*
|
||||||
|
admin.req('url', {}, function(){ //请求接口
|
||||||
|
//do somethin
|
||||||
|
});
|
||||||
|
*/
|
||||||
|
//此处只是演示，实际应用需把下述代码放入上述Ajax回调中
|
||||||
|
layer.msg('删除成功', {
|
||||||
|
icon: 1
|
||||||
|
});
|
||||||
|
table.reload(thisTabs.id); //刷新表格
|
||||||
|
});
|
||||||
|
}
|
||||||
|
,ready: function(othis, type){
|
||||||
|
var thisTabs = tabs[type]
|
||||||
|
,checkStatus = table.checkStatus(thisTabs.id)
|
||||||
|
,data = checkStatus.data; //获得选中的数据
|
||||||
|
if(data.length === 0) return layer.msg('未选中行');
|
||||||
|
|
||||||
|
//此处只是演示
|
||||||
|
layer.msg('标记已读成功', {
|
||||||
|
icon: 1
|
||||||
|
});
|
||||||
|
table.reload(thisTabs.id); //刷新表格
|
||||||
|
}
|
||||||
|
,readyAll: function(othis, type){
|
||||||
|
var thisTabs = tabs[type];
|
||||||
|
|
||||||
|
//do somethin
|
||||||
|
|
||||||
|
layer.msg(thisTabs.text + '：全部已读', {
|
||||||
|
icon: 1
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$('.LAY-app-message-btns .layui-btn').on('click', function(){
|
||||||
|
var othis = $(this)
|
||||||
|
,thisEvent = othis.data('events')
|
||||||
|
,type = othis.data('type');
|
||||||
|
events[thisEvent] && events[thisEvent].call(this, othis, type);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
89
dist/views/app/workorder/list.html
vendored
Normal file
89
dist/views/app/workorder/list.html
vendored
Normal file
@ -0,0 +1,89 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>工单系统</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>应用</cite></a>
|
||||||
|
<a><cite>工单系统</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="app-content-workorder">
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">工单号</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="text" name="orderid" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">工单标题</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="text" name="title" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">业务性质</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="text" name="attr" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">受理人</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="text" name="accept" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<button class="layui-btn layuiadmin-btn-order" lay-submit lay-filter="LAY-app-order-search">
|
||||||
|
<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<table id="LAY-app-workorder" lay-filter="LAY-app-workorder"></table>
|
||||||
|
<script type="text/html" id="progressTpl">
|
||||||
|
<div class="layui-progress layuiadmin-order-progress" lay-filter="progress-"+ {{ d.orderid }} +"">
|
||||||
|
<div class="layui-progress-bar layui-bg-blue" lay-percent= {{ d.progress }}></div>
|
||||||
|
</div>
|
||||||
|
</script>
|
||||||
|
<script type="text/html" id="buttonTpl">
|
||||||
|
{{# if(d.state == '已处理'){ }}
|
||||||
|
<button class="layui-btn layui-btn-normal layui-btn-xs">已处理</button>
|
||||||
|
{{# } else if(d.state == '未分配'){ }}
|
||||||
|
<button class="layui-btn layui-btn-primary layui-btn-xs">未分配</button>
|
||||||
|
{{# } else{ }}
|
||||||
|
<button class="layui-btn layui-btn-warm layui-btn-xs">处理中</button>
|
||||||
|
{{# } }}
|
||||||
|
</script>
|
||||||
|
<script type="text/html" id="table-system-order">
|
||||||
|
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use('workorder', layui.factory('workorder')).use(['admin', 'workorder', 'table'], function(){
|
||||||
|
var $ = layui.$
|
||||||
|
,form = layui.form
|
||||||
|
,table = layui.table;
|
||||||
|
|
||||||
|
form.render(null, 'app-content-workorder');
|
||||||
|
|
||||||
|
//监听搜索
|
||||||
|
form.on('submit(LAY-app-order-search)', function(data){
|
||||||
|
var field = data.field;
|
||||||
|
|
||||||
|
//执行重载
|
||||||
|
table.reload('LAY-app-workorder', {
|
||||||
|
where: field
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
59
dist/views/app/workorder/listform.html
vendored
Normal file
59
dist/views/app/workorder/listform.html
vendored
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<form class="layui-form" lay-filter="layuiadmin-form-workorder" id="layuiadmin-form-workorder" style="padding: 20px 30px 0 0;">
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">业务性质</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" name="attr" lay-verify="required" placeholder="请输入业务性质" autocomplete="off" class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">工单标题</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" name="title" lay-verify="required" placeholder="工单标题..." autocomplete="off" class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">工单进度</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" name="progress" lay-verify="required" placeholder="工单进度..." autocomplete="off" class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">工单状态</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<select name="state">
|
||||||
|
<option value="未分配">未分配</option>
|
||||||
|
<option value="处理中">处理中</option>
|
||||||
|
<option value="已处理">已处理</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">受理人员</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<select name="accept">
|
||||||
|
<option value="">请选择受理人员</option>
|
||||||
|
<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>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label"></label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="button" lay-submit lay-filter="LAY-app-workorder-submit" value="确认" class="layui-btn">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['index', 'form'], function(){
|
||||||
|
var $ = layui.$
|
||||||
|
,form = layui.form;
|
||||||
|
|
||||||
|
})
|
||||||
|
</script>
|
||||||
2
dist/views/app/说明.txt
vendored
Normal file
2
dist/views/app/说明.txt
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
|
||||||
|
该目录存放【应用】的视图文件
|
||||||
108
dist/views/component/anim/index.html
vendored
Normal file
108
dist/views/component/anim/index.html
vendored
Normal file
@ -0,0 +1,108 @@
|
|||||||
|
|
||||||
|
<title>动画</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>动画</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 这段样式只是用于演示 */
|
||||||
|
#component-anim .layui-card-body{padding: 15px;}
|
||||||
|
|
||||||
|
#component-anim .component-anim-demo{margin-bottom: 50px; font-size: 0;}
|
||||||
|
#component-anim .component-anim-demo li{display: inline-block; vertical-align: middle; width: 127px; line-height: 25px; padding: 20px 0; margin-right: -1px; margin-bottom: -1px; border: 1px solid #e2e2e2; font-size: 14px; text-align: center; color: #666; transition: all .3s; -webkit-transition: all .3s;}
|
||||||
|
#component-anim .component-anim-demo li .layui-icon{display: inline-block; font-size: 36px;}
|
||||||
|
|
||||||
|
#component-anim .component-anim-demo li .fontclass{display: none;}
|
||||||
|
#component-anim .component-anim-demo li .name{color: #c2c2c2;}
|
||||||
|
#component-anim .component-anim-demo li:hover{background-color: #f2f2f2; color: #000;}
|
||||||
|
|
||||||
|
#component-anim .component-anim-demo li{width: 222px;}
|
||||||
|
#component-anim .component-anim-demo .layui-anim{width: 150px; height: 150px; line-height: 150px; margin: 0 auto 10px; text-align: center; background-color: #009688; cursor: pointer; color: #fff; border-radius: 50%;}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="layui-fluid" id="component-anim">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">点击演示动画</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
|
||||||
|
<ul class="component-anim-demo">
|
||||||
|
<li>
|
||||||
|
<div class="layui-anim" data-anim="layui-anim-up">从最底部往上滑入</div>
|
||||||
|
<div class="code">layui-anim-up</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="layui-anim" data-anim="layui-anim-upbit">微微往上滑入</div>
|
||||||
|
<div class="code">layui-anim-upbit</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="layui-anim" data-anim="layui-anim-scale">平滑放大</div>
|
||||||
|
<div class="code">layui-anim-scale</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="layui-anim" data-anim="layui-anim-scaleSpring">弹簧式放大</div>
|
||||||
|
<div class="code">layui-anim-scaleSpring</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul class="component-anim-demo">
|
||||||
|
<li>
|
||||||
|
<div class="layui-anim" data-anim="layui-anim-fadein">渐现</div>
|
||||||
|
<div class="code">layui-anim-fadein</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="layui-anim" data-anim="layui-anim-fadeout">渐隐</div>
|
||||||
|
<div class="code">layui-anim-fadeout</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="layui-anim" data-anim="layui-anim-rotate">360度旋转</div>
|
||||||
|
<div class="code">layui-anim-rotate</div>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<div class="layui-anim" data-anim="layui-anim-rotate layui-anim-loop">循环动画</div>
|
||||||
|
<div class="code">追加：layui-anim-loop</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin'], function(){
|
||||||
|
var $ = layui.$
|
||||||
|
,admin = layui.admin
|
||||||
|
,element = layui.element
|
||||||
|
,router = layui.router();
|
||||||
|
|
||||||
|
/* 演示动画 */
|
||||||
|
$('#component-anim .component-anim-demo .layui-anim').on('click', function(){
|
||||||
|
var othis = $(this), anim = othis.data('anim');
|
||||||
|
|
||||||
|
/* 停止循环 */
|
||||||
|
if(othis.hasClass('layui-anim-loop')){
|
||||||
|
return othis.removeClass(anim);
|
||||||
|
}
|
||||||
|
|
||||||
|
othis.removeClass(anim);
|
||||||
|
|
||||||
|
setTimeout(function(){
|
||||||
|
othis.addClass(anim);
|
||||||
|
});
|
||||||
|
|
||||||
|
/* 恢复渐隐 */
|
||||||
|
if(anim === 'layui-anim-fadeout'){
|
||||||
|
setTimeout(function(){
|
||||||
|
othis.removeClass(anim);
|
||||||
|
}, 1300);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
103
dist/views/component/auxiliar/index.html
vendored
Normal file
103
dist/views/component/auxiliar/index.html
vendored
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
|
||||||
|
<title>辅助元素</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>辅助</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 这段样式只是用于演示 */
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">引用区块</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<blockquote class="layui-elem-quote">这个貌似不用多介绍，因为你已经在太多的地方都看到</blockquote>
|
||||||
|
|
||||||
|
<blockquote class="layui-elem-quote layui-quote-nm">
|
||||||
|
猿强，则国强。国强，则猿更强！
|
||||||
|
<br>——孟子（好囖。。其实这特喵的是我说的）
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">字段集区块</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
|
||||||
|
<fieldset class="layui-elem-field">
|
||||||
|
<legend>爱好</legend>
|
||||||
|
<div class="layui-field-box">
|
||||||
|
你可以在这里放任何内容，比如表单神马的
|
||||||
|
</div>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<fieldset class="layui-elem-field layui-field-title">
|
||||||
|
<legend>带标题的横线</legend>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">分割线</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
|
||||||
|
默认分割线
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
赤色分割线
|
||||||
|
<hr class="layui-bg-red">
|
||||||
|
|
||||||
|
橙色分割线
|
||||||
|
<hr class="layui-bg-orange">
|
||||||
|
|
||||||
|
墨绿分割线
|
||||||
|
<hr class="layui-bg-green">
|
||||||
|
|
||||||
|
青色分割线
|
||||||
|
<hr class="layui-bg-cyan">
|
||||||
|
|
||||||
|
蓝色分割线
|
||||||
|
<hr class="layui-bg-blue">
|
||||||
|
|
||||||
|
黑色分割线
|
||||||
|
<hr class="layui-bg-black">
|
||||||
|
|
||||||
|
灰色分割线
|
||||||
|
<hr class="layui-bg-gray">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">纯圆角</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
|
||||||
|
<div class="layui-inline">
|
||||||
|
<img src="http://cdn.layui.com/avatar/168.jpg?t=1490352249902" class="layui-circle">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin'], function(){
|
||||||
|
var $ = layui.$
|
||||||
|
,admin = layui.admin
|
||||||
|
,element = layui.element
|
||||||
|
,router = layui.router();
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
103
dist/views/component/badge/index.html
vendored
Normal file
103
dist/views/component/badge/index.html
vendored
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
|
||||||
|
<title>徽章</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>徽章</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 这段样式只是用于演示 */
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">小徽章大家族</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
|
||||||
|
<br>小圆点：
|
||||||
|
|
||||||
|
<span class="layui-badge-dot"></span>
|
||||||
|
<span class="layui-badge-dot layui-bg-orange"></span>
|
||||||
|
<span class="layui-badge-dot layui-bg-green"></span>
|
||||||
|
<span class="layui-badge-dot layui-bg-cyan"></span>
|
||||||
|
<span class="layui-badge-dot layui-bg-blue"></span>
|
||||||
|
<span class="layui-badge-dot layui-bg-black"></span>
|
||||||
|
<span class="layui-badge-dot layui-bg-gray"></span>
|
||||||
|
|
||||||
|
<br><br>常规弧形徽章：
|
||||||
|
|
||||||
|
<span class="layui-badge">6</span>
|
||||||
|
<span class="layui-badge">99</span>
|
||||||
|
<span class="layui-badge">61728</span>
|
||||||
|
<span class="layui-badge">赤</span>
|
||||||
|
<span class="layui-badge layui-bg-orange">橙</span>
|
||||||
|
<span class="layui-badge layui-bg-green">绿</span>
|
||||||
|
<span class="layui-badge layui-bg-cyan">青</span>
|
||||||
|
<span class="layui-badge layui-bg-blue">蓝</span>
|
||||||
|
<span class="layui-badge layui-bg-black">黑</span>
|
||||||
|
<span class="layui-badge layui-bg-gray">灰</span>
|
||||||
|
|
||||||
|
<br><br>边框徽章：
|
||||||
|
|
||||||
|
<span class="layui-badge-rim">6</span>
|
||||||
|
<span class="layui-badge-rim">Hot</span>
|
||||||
|
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">与其它元素的搭配</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<button class="layui-btn">查看消息<span class="layui-badge layui-bg-gray">1</span></button>
|
||||||
|
<button class="layui-btn">动态<span class="layui-badge-dot layui-bg-orange"></span></button>
|
||||||
|
|
||||||
|
<br><br>
|
||||||
|
|
||||||
|
<ul class="layui-nav style=" text-align:="" right;"=""> <-- 小Tips：这里有没有发现，设置导航靠右对齐（或居中对齐）其实非常简单 -->
|
||||||
|
<li class="layui-nav-item">
|
||||||
|
<a href="">控制台<span class="layui-badge">9</span></a>
|
||||||
|
</li>
|
||||||
|
<li class="layui-nav-item">
|
||||||
|
<a href="">个人中心<span class="layui-badge-dot"></span></a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<div class="layui-tab layui-tab-brief">
|
||||||
|
<ul class="layui-tab-title">
|
||||||
|
<li class="layui-this">网站设置</li>
|
||||||
|
<li>用户管理<span class="layui-badge-dot"></span></li>
|
||||||
|
<li>最新邮件<span class="layui-badge">99+</span></li>
|
||||||
|
</ul>
|
||||||
|
<div class="layui-tab-content"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin'], function(){
|
||||||
|
var $ = layui.$
|
||||||
|
,admin = layui.admin
|
||||||
|
,element = layui.element
|
||||||
|
,router = layui.router();
|
||||||
|
|
||||||
|
element.render();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
178
dist/views/component/button/index.html
vendored
Normal file
178
dist/views/component/button/index.html
vendored
Normal file
@ -0,0 +1,178 @@
|
|||||||
|
|
||||||
|
<title>按钮</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>按钮</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md6">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">按钮主题</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div class="layui-btn-container">
|
||||||
|
<button class="layui-btn layui-btn-primary">原始按钮</button>
|
||||||
|
<button class="layui-btn">默认按钮</button>
|
||||||
|
<button class="layui-btn layui-btn-normal">百搭按钮</button>
|
||||||
|
<button class="layui-btn layui-btn-warm">暖色按钮</button>
|
||||||
|
<button class="layui-btn layui-btn-danger">警告按钮</button>
|
||||||
|
<button class="layui-btn layui-btn-disabled">禁用按钮</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">按钮尺寸</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div class="layui-btn-container">
|
||||||
|
<button class="layui-btn layui-btn-primary layui-btn-lg">大型按钮</button>
|
||||||
|
<button class="layui-btn layui-btn-primary">默认按钮</button>
|
||||||
|
<button class="layui-btn layui-btn-primary layui-btn-sm">小型按钮</button>
|
||||||
|
<button class="layui-btn layui-btn-primary layui-btn-xs">迷你按钮</button>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<button class="layui-btn layui-btn-lg">大型按钮</button>
|
||||||
|
<button class="layui-btn">默认按钮</button>
|
||||||
|
<button class="layui-btn layui-btn-sm">小型按钮</button>
|
||||||
|
<button class="layui-btn layui-btn-xs">迷你按钮</button>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<button class="layui-btn layui-btn-lg layui-btn-normal">大型按钮</button>
|
||||||
|
<button class="layui-btn layui-btn-normal">默认按钮</button>
|
||||||
|
<button class="layui-btn layui-btn-sm layui-btn-normal">小型按钮</button>
|
||||||
|
<button class="layui-btn layui-btn-xs layui-btn-normal">迷你按钮</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">按钮图标</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div class="layui-btn-container">
|
||||||
|
<button class="layui-btn"><i class="layui-icon"></i></button>
|
||||||
|
<button class="layui-btn"><i class="layui-icon"></i></button>
|
||||||
|
<button class="layui-btn"><i class="layui-icon"></i></button>
|
||||||
|
<button class="layui-btn"><i class="layui-icon"></i></button>
|
||||||
|
<button class="layui-btn"><i class="layui-icon"></i></button>
|
||||||
|
<button class="layui-btn"><i class="layui-icon"></i></button>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<button class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
|
||||||
|
<button class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
|
||||||
|
<button class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
|
||||||
|
<button class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
|
||||||
|
<button class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
|
||||||
|
<button class="layui-btn layui-btn-danger"><i class="layui-icon"></i></button>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
|
||||||
|
<button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
|
||||||
|
<button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
|
||||||
|
<button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
|
||||||
|
<button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
|
||||||
|
<button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
|
||||||
|
<button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
|
||||||
|
<button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
|
||||||
|
<button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
|
||||||
|
<button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
|
||||||
|
<button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<button class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
|
||||||
|
<button class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
|
||||||
|
<button class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
|
||||||
|
<button class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
|
||||||
|
<button class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
|
||||||
|
<button class="layui-btn layui-btn-normal layui-btn-sm"><i class="layui-icon"></i></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md6">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">按钮圆角</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div class="layui-btn-container">
|
||||||
|
<button class="layui-btn layui-btn-primary layui-btn-radius">原始按钮</button>
|
||||||
|
<button class="layui-btn layui-btn-radius">默认按钮</button>
|
||||||
|
<button class="layui-btn layui-btn-normal layui-btn-radius">百搭按钮</button>
|
||||||
|
<button class="layui-btn layui-btn-warm layui-btn-radius">暖色按钮</button>
|
||||||
|
<button class="layui-btn layui-btn-danger layui-btn-radius">警告按钮</button>
|
||||||
|
<button class="layui-btn layui-btn-disabled layui-btn-radius">禁用按钮</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">按钮混搭</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div class="layui-btn-container">
|
||||||
|
<button class="layui-btn layui-btn-lg layui-btn-primary layui-btn-radius">大型加圆角</button>
|
||||||
|
<a href="http://www.layui.com/doc/element/button.html" class="layui-btn" target="_blank">跳转的按钮</a>
|
||||||
|
<button class="layui-btn layui-btn-sm layui-btn-normal"><i class="layui-icon"></i> 删除</button>
|
||||||
|
<button class="layui-btn layui-btn-xs layui-btn-disabled"><i class="layui-icon"></i> 分享</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">按钮组合</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div class="layui-btn-container">
|
||||||
|
<div class="layui-btn-group">
|
||||||
|
<button class="layui-btn">增加</button>
|
||||||
|
<button class="layui-btn ">编辑</button>
|
||||||
|
<button class="layui-btn">删除</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-btn-container">
|
||||||
|
<div class="layui-btn-group">
|
||||||
|
<button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
|
||||||
|
<button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
|
||||||
|
<button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
|
||||||
|
<button class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button>
|
||||||
|
</div>
|
||||||
|
<div class="layui-btn-group">
|
||||||
|
<button class="layui-btn layui-btn-primary layui-btn-sm">文字</button>
|
||||||
|
<button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
|
||||||
|
<button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
|
||||||
|
<button class="layui-btn layui-btn-primary layui-btn-sm"><i class="layui-icon"></i></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">按钮铺满</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div class="layui-btn-container">
|
||||||
|
<button class="layui-btn layui-btn-fluid">好雨知时节</button>
|
||||||
|
<button class="layui-btn layui-btn-fluid">当春乃发生</button>
|
||||||
|
<button class="layui-btn layui-btn-fluid">随风潜入夜</button>
|
||||||
|
<button class="layui-btn layui-btn-fluid">润物细无声</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin'], function(){
|
||||||
|
var $ = layui.$
|
||||||
|
,admin = layui.admin
|
||||||
|
,element = layui.element;
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
219
dist/views/component/carousel/index.html
vendored
Normal file
219
dist/views/component/carousel/index.html
vendored
Normal file
@ -0,0 +1,219 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>轮播</title>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 为了区分效果 */
|
||||||
|
#LAY-demo-carousel div[carousel-item]>*{text-align: center; line-height: 280px; color: #666;}
|
||||||
|
#LAY-demo-carousel div[carousel-item]>*:nth-child(2n){background-color: #E2E2E2;}
|
||||||
|
#LAY-demo-carousel div[carousel-item]>*:nth-child(2n+1){background-color: #eee;}
|
||||||
|
#test-carousel-normal-2 div[carousel-item]>*{line-height: 120px;}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>轮播</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid" id="LAY-demo-carousel">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">常规轮播</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div class="layui-carousel" id="test-carousel-normal" lay-filter="test-carousel-normal">
|
||||||
|
<div carousel-item="">
|
||||||
|
<div>条目1</div>
|
||||||
|
<div>条目2</div>
|
||||||
|
<div>条目3</div>
|
||||||
|
<div>条目4</div>
|
||||||
|
<div>条目5</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-carousel" id="test-carousel-normal-2" style="margin-top: 15px;">
|
||||||
|
<div carousel-item="">
|
||||||
|
<div>条目1</div>
|
||||||
|
<div>条目2</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">设定各种参数</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
|
||||||
|
<div class="layui-form">
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">宽高</label>
|
||||||
|
<div class="layui-input-inline" style="width: 98px;">
|
||||||
|
<input type="tel" name="width" value="600" autocomplete="off" placeholder="width" class="layui-input test-carousel-demoSet">
|
||||||
|
</div>
|
||||||
|
<div class="layui-input-inline" style="width: 98px;">
|
||||||
|
<input type="tel" name="height" value="280" autocomplete="off" placeholder="height" class="layui-input test-carousel-demoSet">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">动画类型</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<div class="layui-btn-group test-carousel-demoTest" style="margin-top: 5px;">
|
||||||
|
<button class="layui-btn layui-btn-sm" style="background-color: #5FB878;" data-type="set" data-key="anim" data-value="default">左右切换</button>
|
||||||
|
<button class="layui-btn layui-btn-sm" data-type="set" data-key="anim" data-value="updown">上下切换</button>
|
||||||
|
<button class="layui-btn layui-btn-sm" data-type="set" data-key="anim" data-value="fade">渐隐渐显</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">箭头状态</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<div class="layui-btn-group test-carousel-demoTest" style="margin-top: 5px;">
|
||||||
|
<button class="layui-btn layui-btn-sm" style="background-color: #5FB878;" data-type="set" data-key="arrow" data-value="hover">悬停显示</button>
|
||||||
|
<button class="layui-btn layui-btn-sm" data-type="set" data-key="arrow" data-value="always">始终显示</button>
|
||||||
|
<button class="layui-btn layui-btn-sm" data-type="set" data-key="arrow" data-value="none">不显示</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">指示器位置</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<div class="layui-btn-group test-carousel-demoTest" style="margin-top: 5px;">
|
||||||
|
<button class="layui-btn layui-btn-sm" style="background-color: #5FB878;" data-key="indicator" data-type="set" data-value="inside">容器内部</button>
|
||||||
|
<button class="layui-btn layui-btn-sm" data-type="set" data-key="indicator" data-value="outside">容器外部</button>
|
||||||
|
<button class="layui-btn layui-btn-sm" data-type="set" data-key="indicator" data-value="none">不显示</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">自动切换</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="checkbox" name="switch" lay-skin="switch" checked="" lay-text="ON|OFF" lay-filter="test-carousel-autoplay">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label" style="width: auto;">时间间隔</label>
|
||||||
|
<div class="layui-input-inline" style="width: 120px;">
|
||||||
|
<input type="tel" name="interval" value="3000" autocomplete="off" placeholder="毫秒" class="layui-input test-carousel-demoSet">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-carousel" id="test-carousel-demo" lay-filter="test-carousel-demo">
|
||||||
|
<div carousel-item="">
|
||||||
|
<div>条目1</div>
|
||||||
|
<div>条目2</div>
|
||||||
|
<div>条目3</div>
|
||||||
|
<div>条目4</div>
|
||||||
|
<div>条目5</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">填充轮播元素 - 以图片为例</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div class="layui-carousel" id="test-carousel-img">
|
||||||
|
<div carousel-item="">
|
||||||
|
<div><img src="//res.layui.com/images/layui/demo/1.png"></div>
|
||||||
|
<div><img src="//res.layui.com/images/layui/demo/2.png"></div>
|
||||||
|
<div><img src="//res.layui.com/images/layui/demo/3.png"></div>
|
||||||
|
<div><img src="//res.layui.com/images/layui/demo/4.png"></div>
|
||||||
|
<div><img src="//res.layui.com/images/layui/demo/5.png"></div>
|
||||||
|
<div><img src="//res.layui.com/images/layui/demo/6.png"></div>
|
||||||
|
<div><img src="//res.layui.com/images/layui/demo/7.png"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'carousel', 'form'], function(){
|
||||||
|
var carousel = layui.carousel
|
||||||
|
,form = layui.form;
|
||||||
|
|
||||||
|
//常规轮播
|
||||||
|
carousel.render({
|
||||||
|
elem: '#test-carousel-normal'
|
||||||
|
,arrow: 'always'
|
||||||
|
});
|
||||||
|
|
||||||
|
//改变下时间间隔、动画类型、高度
|
||||||
|
carousel.render({
|
||||||
|
elem: '#test-carousel-normal-2'
|
||||||
|
,interval: 1800
|
||||||
|
,anim: 'fade'
|
||||||
|
,height: '120px'
|
||||||
|
});
|
||||||
|
|
||||||
|
//设定各种参数
|
||||||
|
var ins3 = carousel.render({
|
||||||
|
elem: '#test-carousel-demo'
|
||||||
|
});
|
||||||
|
//图片轮播
|
||||||
|
carousel.render({
|
||||||
|
elem: '#test-carousel-img'
|
||||||
|
,width: '778px'
|
||||||
|
,height: '440px'
|
||||||
|
,interval: 5000
|
||||||
|
});
|
||||||
|
|
||||||
|
//事件
|
||||||
|
carousel.on('change(test-carousel-demo)', function(res){
|
||||||
|
console.log(res)
|
||||||
|
});
|
||||||
|
|
||||||
|
var $ = layui.$, active = {
|
||||||
|
set: function(othis){
|
||||||
|
var THIS = 'layui-bg-normal'
|
||||||
|
,key = othis.data('key')
|
||||||
|
,options = {};
|
||||||
|
|
||||||
|
othis.css('background-color', '#5FB878').siblings().removeAttr('style');
|
||||||
|
options[key] = othis.data('value');
|
||||||
|
ins3.reload(options);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
//监听开关
|
||||||
|
form.on('switch(test-carousel-autoplay)', function(){
|
||||||
|
ins3.reload({
|
||||||
|
autoplay: this.checked
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.test-carousel-demoSet').on('keyup', function(){
|
||||||
|
var value = this.value
|
||||||
|
,options = {};
|
||||||
|
if(!/^\d+$/.test(value)) return;
|
||||||
|
|
||||||
|
options[this.name] = value;
|
||||||
|
ins3.reload(options);
|
||||||
|
});
|
||||||
|
|
||||||
|
//其它示例
|
||||||
|
$('.test-carousel-demoTest .layui-btn').on('click', function(){
|
||||||
|
var othis = $(this), type = othis.data('type');
|
||||||
|
active[type] ? active[type].call(this, othis) : '';
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
141
dist/views/component/code/index.html
vendored
Normal file
141
dist/views/component/code/index.html
vendored
Normal file
@ -0,0 +1,141 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>代码修饰</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>代码修饰</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">默认修饰</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<pre class="layui-code">//在里面存放任意的代码
|
||||||
|
Lay.fn.event = function(modName, events, params){
|
||||||
|
var that = this, result = null, filter = events.match(/\(.*\)$/)||[];
|
||||||
|
var set = (events = modName + '.'+ events).replace(filter, '');
|
||||||
|
};
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">notepad风格</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<pre class="layui-code" lay-title="JavaScript" lay-skin="notepad">//代码区域
|
||||||
|
Lay.fn.event = function(modName, events, params){
|
||||||
|
var that = this, result = null, filter = events.match(/\(.*\)$/)||[];
|
||||||
|
var set = (events = modName + '.'+ events).replace(filter, '');
|
||||||
|
};
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">代码中的代码</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<pre class="layui-code">//代码区域
|
||||||
|
Lay.fn.event = function(modName, events, params){
|
||||||
|
var that = this, result = null, filter = events.match(/\(.*\)$/)||[];
|
||||||
|
var set = (events = modName + '.'+ events).replace(filter, '');
|
||||||
|
};
|
||||||
|
<pre class="layui-code">//代码区域
|
||||||
|
Lay.fn.event = function(modName, events, params){
|
||||||
|
var that = this, result = null, filter = events.match(/\(.*\)$/)||[];
|
||||||
|
var set = (events = modName + '.'+ events).replace(filter, '');
|
||||||
|
};
|
||||||
|
</pre>
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<pre class="layui-code" lay-skin="notepad">//代码区域
|
||||||
|
Lay.fn.event = function(modName, events, params){
|
||||||
|
var that = this, result = null, filter = events.match(/\(.*\)$/)||[];
|
||||||
|
var set = (events = modName + '.'+ events).replace(filter, '');
|
||||||
|
};
|
||||||
|
<pre class="layui-code" lay-skin="notepad">//代码区域
|
||||||
|
Lay.fn.event = function(modName, events, params){
|
||||||
|
var that = this, result = null, filter = events.match(/\(.*\)$/)||[];
|
||||||
|
var set = (events = modName + '.'+ events).replace(filter, '');
|
||||||
|
};
|
||||||
|
<pre class="layui-code" lay-skin="notepad">//代码区域
|
||||||
|
Lay.fn.event = function(modName, events, params){
|
||||||
|
var that = this, result = null, filter = events.match(/\(.*\)$/)||[];
|
||||||
|
var set = (events = modName + '.'+ events).replace(filter, '');
|
||||||
|
};
|
||||||
|
<pre class="layui-code" lay-skin="notepad">//代码区域
|
||||||
|
Lay.fn.event = function(modName, events, params){
|
||||||
|
var that = this, result = null, filter = events.match(/\(.*\)$/)||[];
|
||||||
|
var set = (events = modName + '.'+ events).replace(filter, '');
|
||||||
|
};
|
||||||
|
<pre class="layui-code" lay-skin="notepad">//代码区域
|
||||||
|
Lay.fn.event = function(modName, events, params){
|
||||||
|
var that = this, result = null, filter = events.match(/\(.*\)$/)||[];
|
||||||
|
var set = (events = modName + '.'+ events).replace(filter, '');
|
||||||
|
};
|
||||||
|
</pre>
|
||||||
|
</pre>
|
||||||
|
</pre>
|
||||||
|
</pre>
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">固定高度</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<pre class="layui-code" lay-height="150px">//代码区域
|
||||||
|
Lay.fn.event = function(modName, events, params){
|
||||||
|
var that = this, result = null, filter = events.match(/\(.*\)$/)||[]; //提取事件过滤器
|
||||||
|
var set = (events = modName + '.'+ events).replace(filter, ''); //获取事件本体名
|
||||||
|
var callback = function(_, item){
|
||||||
|
var res = item && item.call(that, params);
|
||||||
|
res === false && result === null && (result = false);
|
||||||
|
};
|
||||||
|
layui.each(config.event[set], callback);
|
||||||
|
filter[0] && layui.each(config.event[events], callback); //执行过滤器中的事件
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">XXX</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">XXX</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">XXX</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'code'], function(){
|
||||||
|
|
||||||
|
layui.code({
|
||||||
|
elem: 'pre'
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
190
dist/views/component/colorpicker/index.html
vendored
Normal file
190
dist/views/component/colorpicker/index.html
vendored
Normal file
@ -0,0 +1,190 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>颜色选择器组件</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>颜色选择器组件</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">常规使用</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-colorpicker-dome1"></div>
|
||||||
|
<div id="test-colorpicker-dome2" style="margin-left: 10px;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">表单赋值</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<form class="layui-form" action="">
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<div class="layui-input-inline" style="width: 120px;">
|
||||||
|
<input type="text" value="" placeholder="请选择颜色" class="layui-input" id="test-colorpicker-form-input">
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline" style="left: -11px;">
|
||||||
|
<div id="test-colorpicker-dome3"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">RGB / RGBA 色值</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-colorpicker-dome4"></div>
|
||||||
|
<div id="test-colorpicker-dome5" style="margin-left: 30px;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">透明度选择</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-colorpicker-dome6"></div>
|
||||||
|
<div id="test-colorpicker-dome7" style="margin-left: 30px;"></div>
|
||||||
|
<div id="test-colorpicker-dome8" style="margin-left: 30px;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">预定义颜色项</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-colorpicker-dome9"></div>
|
||||||
|
<div id="test-colorpicker-dome10" style="margin-left: 30px;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">全功能和回调的使用</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<input type="hidden" name="color" value="" id="test-colorpicker-all-input">
|
||||||
|
<div id="test-colorpicker-dome11"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">颜色框尺寸</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-colorpicker-dome12"></div>
|
||||||
|
<div id="test-colorpicker-dome13" style="margin-left: 30px;"></div>
|
||||||
|
<div id="test-colorpicker-dome14" style="margin-left: 30px;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'colorpicker'], function(){
|
||||||
|
var $ = layui.$
|
||||||
|
,colorpicker = layui.colorpicker;
|
||||||
|
|
||||||
|
//常规使用
|
||||||
|
colorpicker.render({
|
||||||
|
elem: '#test-colorpicker-dome1' //绑定元素
|
||||||
|
,change: function(color){ //颜色改变的回调
|
||||||
|
layer.tips('选择了：'+ color, this.elem, {
|
||||||
|
tips: 1
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//初始色值
|
||||||
|
colorpicker.render({
|
||||||
|
elem: '#test-colorpicker-dome2'
|
||||||
|
,color: '#2ec770' //设置默认色
|
||||||
|
,done: function(color){
|
||||||
|
layer.tips('选择了：'+ color, this.elem);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//表单赋值
|
||||||
|
colorpicker.render({
|
||||||
|
elem: '#test-colorpicker-dome3'
|
||||||
|
,color: '#1c97f5'
|
||||||
|
,done: function(color){
|
||||||
|
$('#test-colorpicker-form-input').val(color);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//RGB 、RGBA
|
||||||
|
colorpicker.render({
|
||||||
|
elem: '#test-colorpicker-dome4'
|
||||||
|
,color: 'rgb(68,66,66)'
|
||||||
|
,format: 'rgb' //默认为 hex
|
||||||
|
});
|
||||||
|
colorpicker.render({
|
||||||
|
elem: '#test-colorpicker-dome5'
|
||||||
|
,color: 'rgba(68,66,66,0.5)'
|
||||||
|
,format: 'rgb'
|
||||||
|
,alpha: true //开启透明度滑块
|
||||||
|
});
|
||||||
|
|
||||||
|
//开启透明度
|
||||||
|
colorpicker.render({
|
||||||
|
elem: '#test-colorpicker-dome6'
|
||||||
|
,color: '#009688' //hex
|
||||||
|
,alpha: true //开启透明度
|
||||||
|
,format: 'rgb'
|
||||||
|
});
|
||||||
|
colorpicker.render({
|
||||||
|
elem: '#test-colorpicker-dome7'
|
||||||
|
,color: 'rgb(0,150,136,0.6)' //rgba
|
||||||
|
,alpha: true
|
||||||
|
,format: 'rgb'
|
||||||
|
});
|
||||||
|
colorpicker.render({ //无初始色值时
|
||||||
|
elem: '#test-colorpicker-dome8'
|
||||||
|
,alpha: true
|
||||||
|
,format: 'rgb'
|
||||||
|
});
|
||||||
|
|
||||||
|
//预定义颜色项
|
||||||
|
colorpicker.render({
|
||||||
|
elem: '#test-colorpicker-dome9'
|
||||||
|
,color: '#c71585'
|
||||||
|
,predefine: true // 开启预定义颜色
|
||||||
|
});
|
||||||
|
colorpicker.render({
|
||||||
|
elem: '#test-colorpicker-dome10'
|
||||||
|
,color: '#9d8a0e'
|
||||||
|
,predefine: true // 开启预定义颜色
|
||||||
|
,colors: ['#ff8c00','#00ced1','#9d8a0e'] //自定义预定义颜色项
|
||||||
|
});
|
||||||
|
|
||||||
|
//开启全功能
|
||||||
|
colorpicker.render({
|
||||||
|
elem: '#test-colorpicker-dome11'
|
||||||
|
,color: 'rgba(7, 155, 140, 1)'
|
||||||
|
,format: 'rgb'
|
||||||
|
,predefine: true
|
||||||
|
,alpha: true
|
||||||
|
,done: function(color){
|
||||||
|
$('#test-colorpicker-all-input').val(color); //向隐藏域赋值
|
||||||
|
layer.tips('给指定隐藏域设置了颜色值：'+ color, this.elem);
|
||||||
|
|
||||||
|
color || this.change(color); //清空时执行 change
|
||||||
|
}
|
||||||
|
,change: function(color){
|
||||||
|
//给当前页面头部和左侧设置主题色
|
||||||
|
$('.layui-side-menu,.layui-logo').css('cssText', 'background-color: '+ color + ' !important;');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//设定颜色框尺寸
|
||||||
|
colorpicker.render({
|
||||||
|
elem: '#test-colorpicker-dome12'
|
||||||
|
,size: 'lg' //大号下拉框
|
||||||
|
});
|
||||||
|
colorpicker.render({
|
||||||
|
elem: '#test-colorpicker-dome13'
|
||||||
|
//,size: 'sm' //默认 sm
|
||||||
|
});
|
||||||
|
colorpicker.render({
|
||||||
|
elem: '#test-colorpicker-dome14'
|
||||||
|
,size: 'xs' //mini下拉框
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
124
dist/views/component/flow/index.html
vendored
Normal file
124
dist/views/component/flow/index.html
vendored
Normal file
@ -0,0 +1,124 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>流加载</title>
|
||||||
|
|
||||||
|
<!-- 以下样式仅供演示 -->
|
||||||
|
<style>
|
||||||
|
#LAY-flow-demo .flow-default{width: 600px; height: 400px; overflow: auto; font-size: 0;}
|
||||||
|
#LAY-flow-demo .flow-default li{display: inline-block; margin: 0 5px; font-size: 14px; width: 48%; margin-bottom: 10px; height: 100px; line-height: 100px; text-align: center; background-color: #eee;}
|
||||||
|
#LAY-flow-demo .flow-default img{width: 100%; height: 100%;}
|
||||||
|
#LAY-flow-demo .site-demo-flow{width: 600px; height: 300px; overflow: auto; text-align: center;}
|
||||||
|
#LAY-flow-demo .site-demo-flow img{width: 40%; height: 200px; margin: 0 2px 5px 0; border: none;}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
#LAY-flow-demo .flow-default,
|
||||||
|
#LAY-flow-demo .site-demo-flow{width: 100%;}
|
||||||
|
#LAY-flow-demo .flow-default li{width: 45%}
|
||||||
|
#LAY-flow-demo .site-demo-flow img{height: 150px;}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>流加载</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid" id="LAY-flow-demo">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">信息流 - 滚动加载</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<ul class="flow-default" id="test-flow-auto"></ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">信息流 - 手工加载</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<ul class="flow-default" style="height: 300px;" id="test-flow-manual"></ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">图片懒加载</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div class="site-demo-flow" id="test-flow-lazyimg">
|
||||||
|
<img lay-src="https://gw.alicdn.com/bao/uploaded/i2/701696736/TB2PNl5ahQa61Bjy0FhXXaalFXa_!!701696736.jpg_400x400q90.jpg?t=1523290753265">
|
||||||
|
<img lay-src="https://gw.alicdn.com/bao/uploaded/i2/162734861/TB2V5rsX_gc61BjSZFkXXcTkFXa_!!162734861.jpg_400x400q90.jpg?t=1523290753265">
|
||||||
|
<img lay-src="https://gw.alicdn.com/bao/uploaded/i4/69476562/TB2htq4XTka61BjSszfXXXN8pXa_!!69476562.jpg_400x400q90.jpg?t=1523290753265">
|
||||||
|
<img lay-src="https://gw.alicdn.com/bao/uploaded/i1/180558071/TB2sy6jXMQc61BjSZFGXXa1DFXa_!!180558071.jpg_400x400q90.jpg?t=1523290753265">
|
||||||
|
<img lay-src="https://gw.alicdn.com/bao/uploaded/i2/701696736/TB2PNl5ahQa61Bjy0FhXXaalFXa_!!701696736.jpg_400x400q90.jpg?t=1523290753265">
|
||||||
|
<img lay-src="https://gw.alicdn.com/bao/uploaded/i3/285892163/TB2qu2HX9Zb61BjSZPfXXaU.pXa_!!285892163.jpg_400x400q90.jpg?t=1523290753265">
|
||||||
|
<img lay-src="https://gw.alicdn.com/bao/uploaded/i2/704998060/TB2S.gAXTgc61BjSZFkXXcTkFXa_!!704998060.jpg_400x400q90.jpg?t=1523290753265">
|
||||||
|
<img lay-src="https://gw.alicdn.com/bao/uploaded/i3/117202952/TB25lckX_AX61Bjy0FcXXaSlFXa_!!117202952.jpg_400x400q90.jpg?t=1523290753265">
|
||||||
|
<img lay-src="https://gw.alicdn.com/bao/uploaded/i2/162734861/TB2qijoX9Zb61BjSZPfXXaU.pXa_!!162734861.jpg_400x400q90.jpg?t=1523290753265">
|
||||||
|
<img lay-src="https://gw.alicdn.com/bao/uploaded/i3/96216586/TB2S7EfXHMc61BjSZFFXXaDLFXa_!!96216586.jpg_400x400q90.jpg?t=1523290753265">
|
||||||
|
<img lay-src="https://gw.alicdn.com/bao/uploaded/i8/TB1jSSFNFXXXXcoXFXXYXGcGpXX_M2.SS2_400x400q90.jpg?t=1523290753265">
|
||||||
|
<img lay-src="https://gw.alicdn.com/bao/uploaded/i2/162734861/TB2ylbsX37c61BjSZFKXXb6hFXa_!!162734861.jpg_400x400q90.jpg?t=1523290753265">
|
||||||
|
<img lay-src="https://gw.alicdn.com/bao/uploaded/i2/117202952/TB2FdyZajUd61BjSZPcXXc6hXXa_!!117202952.jpg_400x400q90.jpg?t=1523290753265">
|
||||||
|
<img lay-src="https://gw.alicdn.com/bao/uploaded/i4/777105914/TB2t.qbXZwb61Bjy0FfXXXvlpXa_!!777105914.jpg_400x400q90.jpg?t=1523290753265">
|
||||||
|
<img lay-src="https://gw.alicdn.com/bao/uploaded/i4/TB1XzupNFXXXXcpXXXXXXXXXXXX_!!0-item_pic.jpg_400x400q90.jpg?t=1523290753265">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'flow'], function(){
|
||||||
|
var flow = layui.flow;
|
||||||
|
|
||||||
|
flow.load({
|
||||||
|
elem: '#test-flow-auto' //流加载容器
|
||||||
|
,scrollElem: '#test-flow-auto' //滚动条所在元素，一般不用填，此处只是演示需要。
|
||||||
|
,done: function(page, next){ //执行下一页的回调
|
||||||
|
|
||||||
|
//模拟数据插入
|
||||||
|
setTimeout(function(){
|
||||||
|
var lis = [];
|
||||||
|
for(var i = 0; i < 8; i++){
|
||||||
|
lis.push('<li>'+ ( (page-1)*8 + i + 1 ) +'</li>')
|
||||||
|
}
|
||||||
|
|
||||||
|
//执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
|
||||||
|
//pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
|
||||||
|
next(lis.join(''), page < 10); //假设总页数为 10
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
flow.load({
|
||||||
|
elem: '#test-flow-manual' //流加载容器
|
||||||
|
,scrollElem: '#test-flow-manual' //滚动条所在元素，一般不用填，此处只是演示需要。
|
||||||
|
,isAuto: false
|
||||||
|
,isLazyimg: true
|
||||||
|
,done: function(page, next){ //加载下一页
|
||||||
|
//模拟插入
|
||||||
|
setTimeout(function(){
|
||||||
|
var lis = [];
|
||||||
|
for(var i = 0; i < 6; i++){
|
||||||
|
lis.push('<li><img lay-src="http://s17.mogucdn.com/p2/161011/upload_279h87jbc9l0hkl54djjjh42dc7i1_800x480.jpg?v='+ ( (page-1)*6 + i + 1 ) +'"></li>')
|
||||||
|
}
|
||||||
|
next(lis.join(''), page < 6); //假设总页数为 6
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//按屏加载图片
|
||||||
|
flow.lazyimg({
|
||||||
|
elem: '#test-flow-lazyimg img'
|
||||||
|
,scrollElem: '#test-flow-lazyimg' //一般不用设置，此处只是演示需要。
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
237
dist/views/component/form/element.html
vendored
Normal file
237
dist/views/component/form/element.html
vendored
Normal file
@ -0,0 +1,237 @@
|
|||||||
|
|
||||||
|
<title>表单元素</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>表单</cite></a>
|
||||||
|
<a><cite>表单元素</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 这段样式只是用于演示 */
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md6">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">输入框</div>
|
||||||
|
<div class="layui-card-body layui-row layui-col-space10">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<input type="text" name="title" placeholder="请输入标题" autocomplete="off" class="layui-input">
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md6">
|
||||||
|
<input type="text" name="title" placeholder="用户名" autocomplete="off" class="layui-input">
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md6">
|
||||||
|
<input type="password" name="title" placeholder="密码" autocomplete="off" class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card layui-form" lay-filter="component-form-element">
|
||||||
|
<div class="layui-card-header">下拉选择框</div>
|
||||||
|
<div class="layui-card-body layui-row layui-col-space10">
|
||||||
|
<div class="layui-col-md6">
|
||||||
|
<select name="city" lay-verify="">
|
||||||
|
<option value="">请选择一个城市</option>
|
||||||
|
<option value="010">北京</option>
|
||||||
|
<option value="021">上海</option>
|
||||||
|
<option value="0571">杭州</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md6">
|
||||||
|
<select name="city" lay-verify="">
|
||||||
|
<option value="010">北京</option>
|
||||||
|
<option value="021" disabled>上海（禁用效果）</option>
|
||||||
|
<option value="0571" selected>杭州</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md6">
|
||||||
|
<select name="quiz">
|
||||||
|
<option value="">请选择</option>
|
||||||
|
<optgroup label="城市记忆">
|
||||||
|
<option value="你工作的第一个城市">你工作的第一个城市？</option>
|
||||||
|
</optgroup>
|
||||||
|
<optgroup label="学生时代">
|
||||||
|
<option value="你的工号">你的工号？</option>
|
||||||
|
<option value="你最喜欢的老师">你最喜欢的老师？</option>
|
||||||
|
</optgroup>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md6">
|
||||||
|
<select name="city" lay-verify="required" lay-search>
|
||||||
|
<option value="">带搜索的选择框</option>
|
||||||
|
<option value="1">layer</option>
|
||||||
|
<option value="2">form</option>
|
||||||
|
<option value="3">layim</option>
|
||||||
|
<option value="4">element</option>
|
||||||
|
<option value="5">laytpl</option>
|
||||||
|
<option value="6">upload</option>
|
||||||
|
<option value="7">laydate</option>
|
||||||
|
<option value="8">laypage</option>
|
||||||
|
<option value="9">flow</option>
|
||||||
|
<option value="10">util</option>
|
||||||
|
<option value="11">code</option>
|
||||||
|
<option value="12">tree</option>
|
||||||
|
<option value="13">layedit</option>
|
||||||
|
<option value="14">nav</option>
|
||||||
|
<option value="15">tab</option>
|
||||||
|
<option value="16">table</option>
|
||||||
|
<option value="17">select</option>
|
||||||
|
<option value="18">checkbox</option>
|
||||||
|
<option value="19">switch</option>
|
||||||
|
<option value="20">radio</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<select name="city" lay-verify="">
|
||||||
|
<option value="">请选择一个城市</option>
|
||||||
|
<option value="010">北京</option>
|
||||||
|
<option value="021">上海</option>
|
||||||
|
<option value="0571">杭州</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card layui-form" lay-filter="component-form-element">
|
||||||
|
<div class="layui-card-header">复选框</div>
|
||||||
|
<div class="layui-card-body layui-row layui-col-space10">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<input type="checkbox" name="" title="写作" checked>
|
||||||
|
<input type="checkbox" name="" title="发呆">
|
||||||
|
<input type="checkbox" name="" title="禁用" disabled>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
|
||||||
|
<input type="checkbox" name="" title="发呆" lay-skin="primary">
|
||||||
|
<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
|
||||||
|
<input type="checkbox" name="" lay-skin="primary">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card layui-form" lay-filter="component-form-element">
|
||||||
|
<div class="layui-card-header">开关</div>
|
||||||
|
<div class="layui-card-body layui-row layui-col-space10">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<input type="checkbox" name="xxx" lay-skin="switch">
|
||||||
|
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
|
||||||
|
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
|
||||||
|
<input type="checkbox" name="aaa" lay-skin="switch" disabled>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card layui-form" lay-filter="component-form-element">
|
||||||
|
<div class="layui-card-header">单选框</div>
|
||||||
|
<div class="layui-card-body layui-row layui-col-space10">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<input type="radio" name="sex" value="nan" title="男">
|
||||||
|
<input type="radio" name="sex" value="nv" title="女" checked>
|
||||||
|
<input type="radio" name="sex" value="" title="中性" disabled>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md6">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">文本域</div>
|
||||||
|
<div class="layui-card-body layui-row layui-col-space10">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<textarea name="" placeholder="请输入" class="layui-textarea"></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">响应式组合</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<form class="layui-form" action="" lay-filter="component-form-element">
|
||||||
|
<div class="layui-row layui-col-space10 layui-form-item">
|
||||||
|
<div class="layui-col-lg6">
|
||||||
|
<label class="layui-form-label">员工姓名：</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="text" name="fullname" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-lg6">
|
||||||
|
<label class="layui-form-label">技术工种：</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<select name="type" lay-verify="required" lay-filter="aihao">
|
||||||
|
<option value=""></option>
|
||||||
|
<option value="0">前端工程师</option>
|
||||||
|
<option value="1">Node.js工程师</option>
|
||||||
|
<option value="2">PHP工程师</option>
|
||||||
|
<option value="3">Java工程师</option>
|
||||||
|
<option value="4">运维</option>
|
||||||
|
<option value="4">视觉设计师</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">兴趣爱好：</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="checkbox" name="interest[write]" title="写作">
|
||||||
|
<input type="checkbox" name="interest[read]" title="阅读">
|
||||||
|
<input type="checkbox" name="interest[code]" title="代码" checked>
|
||||||
|
<input type="checkbox" name="interest[dreaming]" title="做梦">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">是否婚姻：</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="checkbox" name="marriage" lay-skin="switch" lay-text="是|否">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">所属职称：</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="radio" name="role" value="" title="经理">
|
||||||
|
<input type="radio" name="role" value="" title="主管">
|
||||||
|
<input type="radio" name="role" value="" title="码农" checked>
|
||||||
|
<input type="radio" name="role" value="" title="端水">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">其它信息：</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<textarea name="other" placeholder="" class="layui-textarea"></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label"> </label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="checkbox" name="" title="同意" lay-skin="primary" checked>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<button class="layui-btn" lay-submit lay-filter="component-form-element">立即提交</button>
|
||||||
|
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'form'], function(){
|
||||||
|
var $ = layui.$
|
||||||
|
,admin = layui.admin
|
||||||
|
,element = layui.element
|
||||||
|
,form = layui.form;
|
||||||
|
|
||||||
|
form.render(null, 'component-form-element');
|
||||||
|
element.render('breadcrumb', 'breadcrumb');
|
||||||
|
|
||||||
|
form.on('submit(component-form-element)', function(data){
|
||||||
|
layer.msg(JSON.stringify(data.field));
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
291
dist/views/component/form/group.html
vendored
Normal file
291
dist/views/component/form/group.html
vendored
Normal file
@ -0,0 +1,291 @@
|
|||||||
|
|
||||||
|
<title>表单组合</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>表单</cite></a>
|
||||||
|
<a><cite>表单组合</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">表单组合</div>
|
||||||
|
<div class="layui-card-body" style="padding: 15px;">
|
||||||
|
<form class="layui-form" action="" lay-filter="component-form-group">
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">单行输入框</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">验证必填项</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">验证手机</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">验证邮箱</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">多规则验证</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">验证日期</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" name="date" id="LAY-component-form-group-date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">验证链接</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="tel" name="url" lay-verify="url" autocomplete="off" class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">验证身份证</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="text" name="identity" lay-verify="identity" placeholder="" autocomplete="off" class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">自定义验证</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="password" name="password" lay-verify="pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-mid layui-word-aux">请填写6到12位密码</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">范围</label>
|
||||||
|
<div class="layui-input-inline" style="width: 100px;">
|
||||||
|
<input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-mid">-</div>
|
||||||
|
<div class="layui-input-inline" style="width: 100px;">
|
||||||
|
<input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">单行选择框</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<select name="interest" lay-filter="aihao">
|
||||||
|
<option value=""></option>
|
||||||
|
<option value="0">写作</option>
|
||||||
|
<option value="1" selected="">阅读</option>
|
||||||
|
<option value="2">游戏</option>
|
||||||
|
<option value="3">音乐</option>
|
||||||
|
<option value="4">旅行</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">分组选择框</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<select name="quiz">
|
||||||
|
<option value="">请选择问题</option>
|
||||||
|
<optgroup label="城市记忆">
|
||||||
|
<option value="你工作的第一个城市">你工作的第一个城市</option>
|
||||||
|
</optgroup>
|
||||||
|
<optgroup label="学生时代">
|
||||||
|
<option value="你的工号">你的工号</option>
|
||||||
|
<option value="你最喜欢的老师">你最喜欢的老师</option>
|
||||||
|
</optgroup>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">搜索选择框</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<select name="modules" lay-verify="required" lay-search="">
|
||||||
|
<option value="">直接选择或搜索选择</option>
|
||||||
|
<option value="1">layer</option>
|
||||||
|
<option value="2">form</option>
|
||||||
|
<option value="3">layim</option>
|
||||||
|
<option value="4">element</option>
|
||||||
|
<option value="5">laytpl</option>
|
||||||
|
<option value="6">upload</option>
|
||||||
|
<option value="7">laydate</option>
|
||||||
|
<option value="8">laypage</option>
|
||||||
|
<option value="9">flow</option>
|
||||||
|
<option value="10">util</option>
|
||||||
|
<option value="11">code</option>
|
||||||
|
<option value="12">tree</option>
|
||||||
|
<option value="13">layedit</option>
|
||||||
|
<option value="14">nav</option>
|
||||||
|
<option value="15">tab</option>
|
||||||
|
<option value="16">table</option>
|
||||||
|
<option value="17">select</option>
|
||||||
|
<option value="18">checkbox</option>
|
||||||
|
<option value="19">switch</option>
|
||||||
|
<option value="20">radio</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">联动选择框</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<div class="layui-inline">
|
||||||
|
<select name="quiz1">
|
||||||
|
<option value="">请选择省</option>
|
||||||
|
<option value="浙江" selected="">浙江省</option>
|
||||||
|
<option value="你的工号">江西省</option>
|
||||||
|
<option value="你最喜欢的老师">福建省</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<select name="quiz2">
|
||||||
|
<option value="">请选择市</option>
|
||||||
|
<option value="杭州">杭州</option>
|
||||||
|
<option value="宁波" disabled="">宁波</option>
|
||||||
|
<option value="温州">温州</option>
|
||||||
|
<option value="温州">台州</option>
|
||||||
|
<option value="温州">绍兴</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<select name="quiz3">
|
||||||
|
<option value="">请选择县/区</option>
|
||||||
|
<option value="西湖区">西湖区</option>
|
||||||
|
<option value="余杭区">余杭区</option>
|
||||||
|
<option value="拱墅区">临安市</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<div class="layui-form-mid layui-word-aux">此处只是演示联动排版，并未做联动交互</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">复选框</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="checkbox" name="like[write]" title="写作">
|
||||||
|
<input type="checkbox" name="like[read]" title="阅读" checked="">
|
||||||
|
<input type="checkbox" name="like[game]" title="游戏">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-form-item" pane="">
|
||||||
|
<label class="layui-form-label">原始复选框</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="checkbox" name="like1[write]" lay-skin="primary" title="写作" checked="">
|
||||||
|
<input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">
|
||||||
|
<input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">开关-默认关</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="checkbox" name="close" lay-skin="switch" lay-text="ON|OFF">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">开关-默认开</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="component-form-switchTest" lay-text="ON|OFF">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<label class="layui-form-label">单选框</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<input type="radio" name="sex" value="男" title="男" checked="">
|
||||||
|
<input type="radio" name="sex" value="女" title="女">
|
||||||
|
<input type="radio" name="sex" value="禁" title="禁用" disabled="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item layui-form-text">
|
||||||
|
<label class="layui-form-label">普通文本域</label>
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<textarea name="text" placeholder="请输入内容" class="layui-textarea"></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<div class="layui-input-block">
|
||||||
|
<div class="layui-footer">
|
||||||
|
<button class="layui-btn" lay-submit="" lay-filter="component-form-demo1">立即提交</button>
|
||||||
|
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'form', 'laydate'], function(){
|
||||||
|
var $ = layui.$
|
||||||
|
,admin = layui.admin
|
||||||
|
,element = layui.element
|
||||||
|
,layer = layui.layer
|
||||||
|
,laydate = layui.laydate
|
||||||
|
,form = layui.form;
|
||||||
|
|
||||||
|
form.render(null, 'component-form-group');
|
||||||
|
|
||||||
|
laydate.render({
|
||||||
|
elem: '#LAY-component-form-group-date'
|
||||||
|
});
|
||||||
|
|
||||||
|
/* 自定义验证规则 */
|
||||||
|
form.verify({
|
||||||
|
title: function(value){
|
||||||
|
if(value.length < 5){
|
||||||
|
return '标题至少得5个字符啊';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
,pass: [/(.+){6,12}$/, '密码必须6到12位']
|
||||||
|
,content: function(value){
|
||||||
|
layedit.sync(editIndex);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/* 监听指定开关 */
|
||||||
|
form.on('switch(component-form-switchTest)', function(data){
|
||||||
|
layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
|
||||||
|
offset: '6px'
|
||||||
|
});
|
||||||
|
layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
|
||||||
|
});
|
||||||
|
|
||||||
|
/* 监听提交 */
|
||||||
|
form.on('submit(component-form-demo1)', function(data){
|
||||||
|
layer.alert(JSON.stringify(data.field), {
|
||||||
|
title: '最终的提交信息'
|
||||||
|
})
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
80
dist/views/component/grid/all.html
vendored
Normal file
80
dist/views/component/grid/all.html
vendored
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
|
||||||
|
<title>全端复杂组合</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>栅格</cite></a>
|
||||||
|
<a><cite>全端复杂组合</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 这段样式只是用于演示 */
|
||||||
|
#LAY-component-grid-all .layui-card-body{display: flex; justify-content: center; flex-direction: column; text-align: center; height: 200px;}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="layui-fluid" id="LAY-component-grid-all">
|
||||||
|
<div class="layui-row layui-col-space10">
|
||||||
|
<div class="layui-col-xs6 layui-col-sm7 layui-col-md3">
|
||||||
|
<!-- 填充内容 -->
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs6 layui-col-sm5 layui-col-md3">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs6 layui-col-sm5 layui-col-md3">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs6 layui-col-sm7 layui-col-md3">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs6 layui-col-sm7 layui-col-md9">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs6 layui-col-sm5 layui-col-md3">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs6 layui-col-sm5 layui-col-md3">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs6 layui-col-sm7 layui-col-md9">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin'], function(){
|
||||||
|
var $ = layui.$
|
||||||
|
,admin = layui.admin
|
||||||
|
,table = layui.table
|
||||||
|
,element = layui.element;
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
122
dist/views/component/grid/list.html
vendored
Normal file
122
dist/views/component/grid/list.html
vendored
Normal file
@ -0,0 +1,122 @@
|
|||||||
|
|
||||||
|
<title>等比例列表排列</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>栅格</cite></a>
|
||||||
|
<a><cite>等比例列表排列</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 这段样式只是用于演示 */
|
||||||
|
#LAY-component-grid-list .demo-list .layui-card{height: 267px;}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="layui-fluid" id="LAY-component-grid-list">
|
||||||
|
<div class="layui-row layui-col-space10 demo-list">
|
||||||
|
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
|
||||||
|
<!-- 填充内容 -->
|
||||||
|
<div class="layui-card">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
|
||||||
|
<div class="layui-card">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
|
||||||
|
<div class="layui-card">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
|
||||||
|
<div class="layui-card">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
|
||||||
|
<div class="layui-card">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
|
||||||
|
<div class="layui-card">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
|
||||||
|
<div class="layui-card">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
|
||||||
|
<div class="layui-card">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
|
||||||
|
<div class="layui-card">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
|
||||||
|
<div class="layui-card">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
|
||||||
|
<div class="layui-card">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
|
||||||
|
<div class="layui-card">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
|
||||||
|
<div class="layui-card">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
|
||||||
|
<div class="layui-card">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
|
||||||
|
<div class="layui-card">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
|
||||||
|
<div class="layui-card">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
|
||||||
|
<div class="layui-card">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-sm4 layui-col-md3 layui-col-lg2">
|
||||||
|
<div class="layui-card">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin'], function(){
|
||||||
|
var $ = layui.$
|
||||||
|
,admin = layui.admin
|
||||||
|
,table = layui.table
|
||||||
|
,element = layui.element;
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
80
dist/views/component/grid/mobile-pc.html
vendored
Normal file
80
dist/views/component/grid/mobile-pc.html
vendored
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
|
||||||
|
<title>移动桌面组合</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>栅格</cite></a>
|
||||||
|
<a><cite>移动桌面组合</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 这段样式只是用于演示 */
|
||||||
|
#LAY-component-grid-mobile-pc .layui-card-body{display: flex; justify-content: center; flex-direction: column; text-align: center; height: 200px;}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="layui-fluid" id="LAY-component-grid-mobile-pc">
|
||||||
|
<div class="layui-row layui-col-space10">
|
||||||
|
<div class="layui-col-xs6 layui-col-md8">
|
||||||
|
<!-- 填充内容 -->
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs6 layui-col-md4">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs6 layui-col-md4">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs6 layui-col-md4">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs12 layui-col-md4">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs6 layui-col-md4">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs6 layui-col-md4">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs12 layui-col-md4">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin'], function(){
|
||||||
|
var $ = layui.$
|
||||||
|
,admin = layui.admin
|
||||||
|
,table = layui.table
|
||||||
|
,element = layui.element;
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
112
dist/views/component/grid/mobile.html
vendored
Normal file
112
dist/views/component/grid/mobile.html
vendored
Normal file
@ -0,0 +1,112 @@
|
|||||||
|
|
||||||
|
<title>按移动端排列</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>栅格</cite></a>
|
||||||
|
<a><cite>按移动端排列</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 这段样式只是用于演示 */
|
||||||
|
#LAY-component-grid-mobile .layui-card-body{display: flex; justify-content: center; flex-direction: column; text-align: center; height: 200px;}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="layui-fluid" id="LAY-component-grid-mobile">
|
||||||
|
<div class="layui-row layui-col-space10">
|
||||||
|
<div class="layui-col-xs6">
|
||||||
|
<!-- 填充内容 -->
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs6">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs4">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs4">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs4">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-row layui-col-space10">
|
||||||
|
<div class="layui-col-xs3">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs3">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs3">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs3">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs3">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs3">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs3">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs3">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin'], function(){
|
||||||
|
var $ = layui.$
|
||||||
|
,admin = layui.admin
|
||||||
|
,table = layui.table
|
||||||
|
,element = layui.element;
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
84
dist/views/component/grid/speed-dial.html
vendored
Normal file
84
dist/views/component/grid/speed-dial.html
vendored
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
|
||||||
|
<title>九宫格</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>栅格</cite></a>
|
||||||
|
<a><cite>九宫格</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 这段样式只是用于演示 */
|
||||||
|
#LAY-component-grid-speed-dial .layui-card-body{display: flex; justify-content: center; flex-direction: column; text-align: center; font-size: 20px;}
|
||||||
|
#LAY-component-grid-speed-dial .layui-card-body:hover{background-color: #FAFAFA;}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="layui-fluid" id="LAY-component-grid-speed-dial">
|
||||||
|
<div class="layui-row layui-col-space1">
|
||||||
|
<div class="layui-col-xs4">
|
||||||
|
<!-- 填充内容 -->
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-body">1</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs4">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-body">2</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs4">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-body">3</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs4">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-body">4</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs4">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-body">5</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs4">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-body">6</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs4">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-body">7</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs4">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-body">8</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs4">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-body">9</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin'], function(){
|
||||||
|
var $ = layui.$
|
||||||
|
,admin = layui.admin
|
||||||
|
,element = layui.element;
|
||||||
|
|
||||||
|
element.render('breadcrumb', 'breadcrumb');
|
||||||
|
|
||||||
|
//监听窗口尺寸改变事件，控制宽度相同
|
||||||
|
admin.resize(function(){
|
||||||
|
var cardBody = $('#LAY-component-grid-speed-dial .layui-card-body');
|
||||||
|
cardBody.height(cardBody.width())
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
143
dist/views/component/grid/stack.html
vendored
Normal file
143
dist/views/component/grid/stack.html
vendored
Normal file
@ -0,0 +1,143 @@
|
|||||||
|
|
||||||
|
<title>低于桌面堆叠排列</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>栅格</cite></a>
|
||||||
|
<a><cite>低于桌面堆叠排列</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 这段样式只是用于演示 */
|
||||||
|
#LAY-component-grid-stack .layui-card-body{display: flex; justify-content: center; flex-direction: column; text-align: center; height: 200px;}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="layui-fluid" id="LAY-component-grid-stack">
|
||||||
|
<div class="layui-row layui-col-space10">
|
||||||
|
<div class="layui-col-md4">
|
||||||
|
<!-- 填充内容 -->
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md4">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md4">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md4">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md4">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md4">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md4">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md4">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md4">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md4">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md4">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md4">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md4">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md4">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md4">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md4">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md4">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md4">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header"></div>
|
||||||
|
<div class="layui-card-body"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin'], function(){
|
||||||
|
var $ = layui.$
|
||||||
|
,admin = layui.admin
|
||||||
|
,table = layui.table
|
||||||
|
,element = layui.element;
|
||||||
|
|
||||||
|
element.render('breadcrumb', 'breadcrumb');
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
324
dist/views/component/laydate/demo1.html
vendored
Normal file
324
dist/views/component/laydate/demo1.html
vendored
Normal file
@ -0,0 +1,324 @@
|
|||||||
|
|
||||||
|
<title>layDate 功能演示一</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>日期时间</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">常规用法</div>
|
||||||
|
<div class="layui-card-body" pad15>
|
||||||
|
|
||||||
|
<div class="layui-form">
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">中文版</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-normal-cn" placeholder="yyyy-MM-dd">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">国际版</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-normal-en" placeholder="yyyy-MM-dd">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">五大选择器</div>
|
||||||
|
<div class="layui-card-body" pad15>
|
||||||
|
|
||||||
|
<div class="layui-form" wid100>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">年选择器</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-type-year" placeholder="yyyy">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">年月选择器</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-type-month" placeholder="yyyy-MM">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">日期选择器</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-type-date" placeholder="yyyy-MM-dd">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">时间选择器</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-type-time" placeholder="HH:mm:ss">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">日期时间选择器</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-type-datetime" placeholder="yyyy-MM-dd HH:mm:ss">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">范围选择</div>
|
||||||
|
<div class="layui-card-body" pad15>
|
||||||
|
|
||||||
|
<div class="layui-form" wid100>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">日期范围</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-range-date" placeholder=" - ">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">年范围</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-range-year" placeholder=" - ">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">年月范围</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-range-month" placeholder=" - ">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">时间范围</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-range-time" placeholder=" - ">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">日期时间范围</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-range-datetime" placeholder=" - ">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">自定义格式</div>
|
||||||
|
<div class="layui-card-body" pad15>
|
||||||
|
|
||||||
|
<div class="layui-form" wid100>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">请选择日期</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-format-date1" placeholder="yyyy年MM月dd日">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">请选择日期</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-format-date2" placeholder="dd/MM/yyyy">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">请选择月份</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-format-month" placeholder="yyyyMM">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">请选择时间</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-format-time" placeholder="H点m分">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">请选择范围</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-format-range1" placeholder=" ~ ">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">请选择范围</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-format-range2" placeholder="开始 到 结束">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">同时绑定多个</div>
|
||||||
|
<div class="layui-card-body" pad15>
|
||||||
|
<div class="layui-form" wid100>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<div class="layui-inline">
|
||||||
|
<input type="text" class="layui-input test-laydate-item" placeholder="yyyy-MM-dd">
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<input type="text" class="layui-input test-laydate-item" placeholder="yyyy-MM-dd">
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<input type="text" class="layui-input test-laydate-item" placeholder="yyyy-MM-dd">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'laydate'], function(){
|
||||||
|
var laydate = layui.laydate;
|
||||||
|
|
||||||
|
//示例代码
|
||||||
|
|
||||||
|
//常规用法
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-normal-cn'
|
||||||
|
});
|
||||||
|
|
||||||
|
//国际版
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-normal-en'
|
||||||
|
,lang: 'en'
|
||||||
|
});
|
||||||
|
|
||||||
|
//年选择器
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-type-year'
|
||||||
|
,type: 'year'
|
||||||
|
});
|
||||||
|
|
||||||
|
//年月选择器
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-type-month'
|
||||||
|
,type: 'month'
|
||||||
|
});
|
||||||
|
|
||||||
|
//日期选择器
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-type-date'
|
||||||
|
//,type: 'date' //type 默认为 date，所以可不填
|
||||||
|
});
|
||||||
|
|
||||||
|
//时间选择器
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-type-time'
|
||||||
|
,type: 'time'
|
||||||
|
});
|
||||||
|
|
||||||
|
//日期时间选择器
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-type-datetime'
|
||||||
|
,type: 'datetime'
|
||||||
|
});
|
||||||
|
|
||||||
|
//日期范围
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-range-date'
|
||||||
|
,range: true
|
||||||
|
});
|
||||||
|
|
||||||
|
//年范围
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-range-year'
|
||||||
|
,type: 'year'
|
||||||
|
,range: true
|
||||||
|
});
|
||||||
|
|
||||||
|
//年月范围
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-range-month'
|
||||||
|
,type: 'month'
|
||||||
|
,range: true
|
||||||
|
});
|
||||||
|
|
||||||
|
//时间范围
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-range-time'
|
||||||
|
,type: 'time'
|
||||||
|
,range: true
|
||||||
|
});
|
||||||
|
|
||||||
|
//日期时间范围
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-range-datetime'
|
||||||
|
,type: 'datetime'
|
||||||
|
,range: true
|
||||||
|
});
|
||||||
|
|
||||||
|
//自定义格式
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-format-date1'
|
||||||
|
,format: 'yyyy年MM月dd日'
|
||||||
|
});
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-format-date2'
|
||||||
|
,format: 'dd/MM/yyyy'
|
||||||
|
});
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-format-month'
|
||||||
|
,type: 'month'
|
||||||
|
,format: 'yyyyMM'
|
||||||
|
});
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-format-time'
|
||||||
|
,type: 'time'
|
||||||
|
,format: 'H点m分'
|
||||||
|
});
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-format-range1'
|
||||||
|
,range: '~'
|
||||||
|
});
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-format-range2'
|
||||||
|
,type: 'datetime'
|
||||||
|
,range: '到'
|
||||||
|
,format: 'yyyy年M月d日H时m分s秒'
|
||||||
|
});
|
||||||
|
|
||||||
|
//同时绑定多个
|
||||||
|
lay('.test-laydate-item').each(function(){
|
||||||
|
laydate.render({
|
||||||
|
elem: this
|
||||||
|
,trigger: 'click'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
276
dist/views/component/laydate/demo2.html
vendored
Normal file
276
dist/views/component/laydate/demo2.html
vendored
Normal file
@ -0,0 +1,276 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>layDate 功能演示二</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>日期时间</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">公历节日和自定义重要日子</div>
|
||||||
|
<div class="layui-card-body" pad15>
|
||||||
|
|
||||||
|
<div class="layui-form" wid100>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">开启公历节日</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-mark" placeholder="yyyy-MM-dd">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">自定义重要日</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-mark-custom" placeholder="yyyy-MM-dd">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">控制可选的日期与时间</div>
|
||||||
|
<div class="layui-card-body" pad15>
|
||||||
|
<div class="layui-form" wid100>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">限定可选日期</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-limit1" placeholder="yyyy-MM-dd">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">前后若干天可选</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-limit2" placeholder="yyyy-MM-dd">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">限定可选时间</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-limit3" placeholder="HH:mm:ss">
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-mid layui-word-aux">
|
||||||
|
这里以控制在9:30-17:30为例
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">其它功能示例</div>
|
||||||
|
<div class="layui-card-body" pad15>
|
||||||
|
<div class="layui-form" wid100>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">初始赋值</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-init-value" placeholder="yyyy-MM-dd">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">选中后的回调</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-call-done" placeholder="yyyy-MM-dd">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">日期切换的回调</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-call-change" placeholder="yyyy-MM-dd">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">不出现底部栏</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-showBottom" placeholder="yyyy-MM-dd">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">只出现确定按钮</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-confirm" placeholder="yyyy-MM-dd">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">自定义事件</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-trigger1" placeholder="yyyy-MM-dd">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label" id="test-laydate-trigger2-1">点我触发</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-trigger2" placeholder="yyyy-MM-dd">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label" id="test-laydate-trigger3-1">双击我触发</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-trigger3" placeholder="yyyy-MM-dd">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">日期只读</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-readonly" readonly="" placeholder="yyyy-MM-dd">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">非input元素</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<div id="test-laydate-normElem" style="height: 38px; line-height: 38px; cursor: pointer; border-bottom: 1px solid #e2e2e2;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'laydate'], function(){
|
||||||
|
var laydate = layui.laydate;
|
||||||
|
|
||||||
|
//示例代码
|
||||||
|
|
||||||
|
//开启公历节日
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-mark'
|
||||||
|
,calendar: true
|
||||||
|
});
|
||||||
|
|
||||||
|
//自定义重要日
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-mark-custom'
|
||||||
|
,mark: {
|
||||||
|
'0-10-14': '生日'
|
||||||
|
,'0-12-31': '跨年'
|
||||||
|
,'0-0-10': '工资'
|
||||||
|
,'0-0-15': '月中'
|
||||||
|
,'2018-8-8': ''
|
||||||
|
,'2099-10-14': '呵呵'
|
||||||
|
}
|
||||||
|
,done: function(value, date){
|
||||||
|
if(date.year === 2018 && date.month === 8 && date.date === 8){
|
||||||
|
layer.msg('北京奥运会十周年，时间都去哪儿了');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//限定可选日期
|
||||||
|
var ins22 = laydate.render({
|
||||||
|
elem: '#test-laydate-limit1'
|
||||||
|
,min: '2016-10-14'
|
||||||
|
,max: '2080-10-14'
|
||||||
|
,ready: function(){
|
||||||
|
ins22.hint('日期可选值设定在 <br> 2016-10-14 到 2080-10-14');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//前后若干天可选，这里以7天为例
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-limit2'
|
||||||
|
,min: -7
|
||||||
|
,max: 7
|
||||||
|
});
|
||||||
|
|
||||||
|
//限定可选时间
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-limit3'
|
||||||
|
,type: 'time'
|
||||||
|
,min: '09:30:00'
|
||||||
|
,max: '17:30:00'
|
||||||
|
,btns: ['clear', 'confirm']
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
//初始赋值
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-init-value'
|
||||||
|
,value: '1989-10-14'
|
||||||
|
});
|
||||||
|
|
||||||
|
//选中后的回调
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-call-done'
|
||||||
|
,done: function(value, date){
|
||||||
|
layer.alert('你选择的日期是：' + value + '<br>获得的对象是' + JSON.stringify(date));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//日期切换的回调
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-call-change'
|
||||||
|
,change: function(value, date){
|
||||||
|
layer.msg('你选择的日期是：' + value + '<br><br>获得的对象是' + JSON.stringify(date));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
//不出现底部栏
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-showBottom'
|
||||||
|
,showBottom: false
|
||||||
|
});
|
||||||
|
|
||||||
|
//只出现确定按钮
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-confirm'
|
||||||
|
,btns: ['confirm']
|
||||||
|
});
|
||||||
|
|
||||||
|
//自定义事件
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-trigger1'
|
||||||
|
,trigger: 'mousedown'
|
||||||
|
});
|
||||||
|
|
||||||
|
//点我触发
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-trigger2'
|
||||||
|
,eventElem: '#test-laydate-trigger2-1'
|
||||||
|
,trigger: 'click'
|
||||||
|
});
|
||||||
|
|
||||||
|
//双击我触发
|
||||||
|
lay('#test-laydate-trigger3-1').on('dblclick', function(){
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-trigger3'
|
||||||
|
,show: true
|
||||||
|
,closeStop: '#test-laydate-trigger3-1'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
//日期只读
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-readonly'
|
||||||
|
,trigger: 'click'
|
||||||
|
});
|
||||||
|
|
||||||
|
//非input元素
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-normElem'
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
74
dist/views/component/laydate/special-demo.html
vendored
Normal file
74
dist/views/component/laydate/special-demo.html
vendored
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>layDate 日期组件功能演示</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>日期时间</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">联动范围选择</div>
|
||||||
|
<div class="layui-card-body" pad15>
|
||||||
|
<div class="layui-form" wid100>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">活动日期</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-start" placeholder="开始日期">
|
||||||
|
</div>
|
||||||
|
<div class="layui-form-mid">
|
||||||
|
-
|
||||||
|
</div>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-end" placeholder="结束日期">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'laydate'], function(){
|
||||||
|
var laydate = layui.laydate;
|
||||||
|
|
||||||
|
//示例代码
|
||||||
|
|
||||||
|
//开始日期
|
||||||
|
var insStart = laydate.render({
|
||||||
|
elem: '#test-laydate-start'
|
||||||
|
,min: 0
|
||||||
|
,done: function(value, date){
|
||||||
|
//更新结束日期的最小日期
|
||||||
|
insEnd.config.min = lay.extend({}, date, {
|
||||||
|
month: date.month - 1
|
||||||
|
});
|
||||||
|
|
||||||
|
//自动弹出结束日期的选择器
|
||||||
|
insEnd.config.elem[0].focus();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//结束日期
|
||||||
|
var insEnd = laydate.render({
|
||||||
|
elem: '#test-laydate-end'
|
||||||
|
,min: 0
|
||||||
|
,done: function(value, date){
|
||||||
|
//更新开始日期的最大日期
|
||||||
|
insStart.config.max = lay.extend({}, date, {
|
||||||
|
month: date.month - 1
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
173
dist/views/component/laydate/theme.html
vendored
Normal file
173
dist/views/component/laydate/theme.html
vendored
Normal file
@ -0,0 +1,173 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>layDate 日期组件功能演示</title>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.test-laydate-theme-box .layui-inline{margin: 0 20px 20px 0;}
|
||||||
|
|
||||||
|
/* 定制 laydate 皮肤：gbw（由社区提供） */
|
||||||
|
.layui-laydate-hint.laydate-theme-gbw,.layui-laydate.laydate-theme-gbw{border:1px solid #FFF;-webkit-box-shadow:0 2px 8px rgba(0,0,0,.15);-moz-box-shadow:0 2px 8px rgba(0,0,0,.15);box-shadow:0 2px 8px rgba(0,0,0,.15)}
|
||||||
|
.layui-laydate.laydate-theme-gbw{border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;font-family:"Helvetica Neue For Number",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.5;color:rgba(0,0,0,.65);-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;list-style:none;position:absolute;z-index:19850126}
|
||||||
|
.laydate-theme-gbw .layui-laydate-header{border-bottom:1px solid #e8e8e8;padding-top:5px}
|
||||||
|
.laydate-theme-gbw .layui-laydate-header i{font-size:12px;color:rgba(0,0,0,.45)}
|
||||||
|
.laydate-theme-gbw .layui-laydate-header span{color:rgba(0,0,0,.85);font-weight:500}
|
||||||
|
.laydate-theme-gbw .layui-laydate-header i:hover,.laydate-theme-gbw .layui-laydate-header span:hover{color:#40a9ff}
|
||||||
|
.laydate-theme-gbw .layui-laydate-footer{border-top:0;padding-top:0;height:36px}
|
||||||
|
.laydate-theme-gbw .layui-laydate-footer span:hover{color:#40a9ff}
|
||||||
|
.laydate-theme-gbw .laydate-footer-btns{top:0}
|
||||||
|
.laydate-theme-gbw .layui-laydate-content th{color:rgba(0,0,0,.65)}
|
||||||
|
.laydate-theme-gbw .layui-laydate-content td{color:rgba(0,0,0,.65);border-radius:2px;-webkit-transition:background .3s ease;-o-transition:background .3s ease;transition:background .3s ease}
|
||||||
|
.laydate-theme-gbw .layui-laydate-content .laydate-day-next,.laydate-theme-gbw .layui-laydate-content .laydate-day-prev{color:rgba(0,0,0,.25)}
|
||||||
|
.layui-laydate.laydate-theme-gbw td.layui-this{background-color:transparent!important;border:1px solid #1890ff;border-radius:3px;font-weight:700;color:#1890ff!important}
|
||||||
|
.layui-laydate.laydate-theme-gbw li.layui-this{background-color:#1890ff!important;color:#fff!important;border-radius:0;border:0}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>日期时间</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">自定义按钮主题</div>
|
||||||
|
<div class="layui-card-body" pad15>
|
||||||
|
<div class="layui-form" wid100>
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">墨绿主题</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-theme-molv" placeholder="yyyy-MM-dd">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">格子主题</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-theme-grid" placeholder="yyyy-MM-dd">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">蓝色主题</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-theme-blue" placeholder="yyyy-MM-dd">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">大红主题</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-theme-red" placeholder="yyyy-MM-dd">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">自定义其它颜色</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-theme-other" placeholder="yyyy-MM-dd">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">定制主题</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input type="text" class="layui-input" id="test-laydate-theme-custom" placeholder="yyyy-MM-dd">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">直接嵌套显示</div>
|
||||||
|
<div class="layui-card-body" pad15>
|
||||||
|
<div class="test-laydate-theme-box">
|
||||||
|
<div class="layui-inline" id="test-laydate-static-n1"></div>
|
||||||
|
<div class="layui-inline" id="test-laydate-static-n2"></div>
|
||||||
|
<div class="layui-inline" id="test-laydate-static-n3"></div>
|
||||||
|
<div class="layui-inline" id="test-laydate-static-n4"></div>
|
||||||
|
<div class="layui-inline" id="test-laydate-static-n5"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'laydate'], function(){
|
||||||
|
var laydate = layui.laydate;
|
||||||
|
|
||||||
|
//示例代码
|
||||||
|
|
||||||
|
//墨绿主题
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-theme-molv'
|
||||||
|
,theme: 'molv'
|
||||||
|
});
|
||||||
|
|
||||||
|
//格子主题
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-theme-grid'
|
||||||
|
,theme: 'grid'
|
||||||
|
});
|
||||||
|
|
||||||
|
//蓝色主题
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-theme-blue'
|
||||||
|
,theme: '#1E9FFF'
|
||||||
|
});
|
||||||
|
|
||||||
|
//大红主题
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-theme-red'
|
||||||
|
,theme: '#c00'
|
||||||
|
});
|
||||||
|
|
||||||
|
//自定义其它颜色
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-theme-other'
|
||||||
|
,theme: '#393D49'
|
||||||
|
});
|
||||||
|
|
||||||
|
//定制主题
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-theme-custom'
|
||||||
|
,theme: 'gbw'
|
||||||
|
});
|
||||||
|
|
||||||
|
//直接嵌套显示
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-static-n1'
|
||||||
|
,position: 'static'
|
||||||
|
});
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-static-n2'
|
||||||
|
,position: 'static'
|
||||||
|
,lang: 'en'
|
||||||
|
});
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-static-n3'
|
||||||
|
,type: 'year'
|
||||||
|
,position: 'static'
|
||||||
|
});
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-static-n4'
|
||||||
|
,type: 'month'
|
||||||
|
,position: 'static'
|
||||||
|
});
|
||||||
|
laydate.render({
|
||||||
|
elem: '#test-laydate-static-n4'
|
||||||
|
,type: 'time'
|
||||||
|
,position: 'static'
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
491
dist/views/component/layer/list.html
vendored
Normal file
491
dist/views/component/layer/list.html
vendored
Normal file
@ -0,0 +1,491 @@
|
|||||||
|
|
||||||
|
<title>layer 组件功能演示</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a href="http://layer.layui.com/" target="_blank">layer</a>
|
||||||
|
<a><cite>功能演示</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 这段样式只是用于演示 */
|
||||||
|
#LAY-component-layer-list .layui-card-body{padding-top: 15px;}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="layui-fluid" id="LAY-component-layer-list">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card demo-component-layer">
|
||||||
|
<div class="layui-card-header">弹层之美</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
|
||||||
|
<blockquote class="layui-elem-quote">
|
||||||
|
layer 是 layui 中最广为人知的组件，它可以轻松应对 Web 应用开发中的各类复杂的弹出交互。有人说使用 layer 是一种情怀，一旦用上了，就离不开了。有多少人是因为 layer 才选择 layui 的呢，有一种信仰，叫：无条件相信
|
||||||
|
</blockquote>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">弹层类型</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
|
||||||
|
<div class="layui-btn-container layadmin-layer-demo">
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test1">Alert</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test2">Confirm</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test3">Msg</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test4">Tips</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test5">Page</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test6">Iframe</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test7">Prompt</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test8">Tab</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test9">Photos</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">常规使用</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
|
||||||
|
<div class="layui-btn-container layadmin-layer-demo">
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test10">信息框</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test11">询问层</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test12">提示层</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test13">墨绿深蓝风</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test14">捕获页</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test15">页面层</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test16">自定风格</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test17">tips层1</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test18">tips层2</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test19">iframe层</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test20">iframe窗</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test21">加载层1</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test22">加载层2</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test23">prompt层</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test8">tab层</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test9">相册层</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">信息框</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
|
||||||
|
<div class="layui-btn-container layadmin-layer-demo">
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test26">例1</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test27">例2</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test28">例3</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test29">例4</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test30">例5</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test31">例6</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">页面层与iframe层</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
|
||||||
|
<div class="layui-btn-container layadmin-layer-demo">
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test33">自定义页面</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test35" id="LAY_layer_iframe_demo">iframe父子通讯</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test36">禁止iframe滚动条</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">加载层</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
|
||||||
|
<div class="layui-btn-container layadmin-layer-demo">
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test37">风格1</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test38">风格2</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test39">风格3</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test40">风格4</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">tips层</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
|
||||||
|
<div class="layui-btn-container layadmin-layer-demo">
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test41">显示在上</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test42">显示在右</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test43">显示在下</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test44">显示在左</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test45">不销毁上一个tips</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">其它示例</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
|
||||||
|
<div class="layui-btn-container layadmin-layer-demo">
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test47">最大化弹出</button>
|
||||||
|
<button class="layui-btn layui-btn-primary" data-type="test48">显示在正上方</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'layer'], function(){
|
||||||
|
var $ = layui.$
|
||||||
|
,admin = layui.admin
|
||||||
|
,element = layui.element
|
||||||
|
,layer = layui.layer;
|
||||||
|
|
||||||
|
element.render();
|
||||||
|
|
||||||
|
/* 触发弹层 */
|
||||||
|
var active = {
|
||||||
|
test1: function(){
|
||||||
|
layer.alert('你好，体验者');
|
||||||
|
}
|
||||||
|
,test2: function(){
|
||||||
|
layer.confirm('您是如何看待前端开发？', {
|
||||||
|
btn: ['重要','奇葩'] //按钮
|
||||||
|
}, function(){
|
||||||
|
layer.msg('的确很重要', {icon: 1});
|
||||||
|
}, function(){
|
||||||
|
layer.msg('也可以这样', {
|
||||||
|
time: 20000, //20s后自动关闭
|
||||||
|
btn: ['明白了', '知道了']
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
,test3: function(){
|
||||||
|
layer.msg('玩命提示中');
|
||||||
|
}
|
||||||
|
,test4: function(){
|
||||||
|
layer.tips('Hi，我是一个提示', this, {tips: 1});
|
||||||
|
}
|
||||||
|
,test5: function(){
|
||||||
|
layer.open({
|
||||||
|
title:'页面层'
|
||||||
|
,type: 1
|
||||||
|
//,skin: 'layui-layer-rim'
|
||||||
|
,shadeClose: true
|
||||||
|
,area: admin.screen() < 2 ? ['80%', '300px'] : ['700px', '500px']
|
||||||
|
,content: '<div style="padding: 20px;">放入任意HTML</div>'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
,test6: function(){
|
||||||
|
layer.open({
|
||||||
|
type: 2
|
||||||
|
,content: 'http://fly.layui.com/'
|
||||||
|
,shadeClose: true
|
||||||
|
,area: admin.screen() < 2 ? ['100%', '80%'] : ['375px', '500px']
|
||||||
|
,maxmin: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
,test7: function(){
|
||||||
|
layer.prompt({title: '输入任何口令，并确认', formType: 1}, function(pass, index){
|
||||||
|
layer.close(index);
|
||||||
|
layer.prompt({title: '随便写点啥，并确认', formType: 2}, function(text, index){
|
||||||
|
layer.close(index);
|
||||||
|
layer.msg('演示完毕！您的口令：'+ pass +'<br>您最后写下了：'+text);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
,test8: function(){
|
||||||
|
layer.tab({
|
||||||
|
area: admin.screen() < 2 ? ['100%', '80%'] : ['600px', '300px'],
|
||||||
|
tab: [{
|
||||||
|
title: 'TAB1',
|
||||||
|
content: '<div style="padding:20px;">内容1</div>'
|
||||||
|
}, {
|
||||||
|
title: 'TAB2',
|
||||||
|
content: '<div style="padding:20px;">内容2</div>'
|
||||||
|
}]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
,test9: function(){
|
||||||
|
$.getJSON('./json/layer/photos.js', function(json){
|
||||||
|
layer.photos({
|
||||||
|
photos: json //格式见API文档手册页
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
,test10: function(){
|
||||||
|
var icon = -1;
|
||||||
|
(function changeIcon(){
|
||||||
|
var index = layer.alert('Hi，你好！ 点击确认更换图标', {
|
||||||
|
icon: icon,
|
||||||
|
shadeClose: true,
|
||||||
|
title: icon === -1 ? '初体验 - layer '+layer.v : 'icon：'+icon + ' - layer '+layer.v
|
||||||
|
}, changeIcon);
|
||||||
|
if(8 === ++icon) layer.close(index);
|
||||||
|
}());
|
||||||
|
}
|
||||||
|
,test11: function(){
|
||||||
|
layer.confirm('真的吗？', function(index){
|
||||||
|
layer.msg('哦')
|
||||||
|
layer.close(index);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
,test12: function(){
|
||||||
|
layer.msg('玩了命提示中');
|
||||||
|
}
|
||||||
|
,test13: function(){
|
||||||
|
//墨绿深蓝风
|
||||||
|
layer.alert('墨绿风格，点击确认看深蓝', {
|
||||||
|
skin: 'layui-layer-molv'
|
||||||
|
,closeBtn: 0
|
||||||
|
}, function(){
|
||||||
|
layer.alert('偶吧深蓝style', {
|
||||||
|
skin: 'layui-layer-lan'
|
||||||
|
,closeBtn: 0
|
||||||
|
,anim: 4
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
,test14: function(){
|
||||||
|
layer.open({
|
||||||
|
type: 1,
|
||||||
|
shade: false,
|
||||||
|
title: false,
|
||||||
|
content: $('.demo-component-layer'),
|
||||||
|
cancel: function(){
|
||||||
|
setTimeout(function(){
|
||||||
|
layer.tips('捕获就是从页面已经存在的元素上，包裹 layer 的结构，从而弹出显示。是不是比较好玩呢？', '.demo-component-layer', {
|
||||||
|
tips: 3, time: 5000
|
||||||
|
});
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
,test15: function(){
|
||||||
|
layer.open({
|
||||||
|
type: 1,
|
||||||
|
skin: 'layui-layer-rim',
|
||||||
|
area: ['420px', '240px'],
|
||||||
|
content: '<div style="padding: 10px;">任意html内容</div>'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
,test16: function(){
|
||||||
|
layer.open({
|
||||||
|
type: 1,
|
||||||
|
skin: 'layui-layer-admin',
|
||||||
|
closeBtn: false,
|
||||||
|
area: '350px',
|
||||||
|
anim: 5,
|
||||||
|
shadeClose: true,
|
||||||
|
content: '<div style="padding:20px;">即传入skin:"样式名"，然后你就可以为所欲为了。你怎么样给她整容都行</div>'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
,test17: function(){
|
||||||
|
layer.tips('Hi，我是tips', this, {
|
||||||
|
tips: 1
|
||||||
|
});
|
||||||
|
}
|
||||||
|
,test18: function(){
|
||||||
|
layer.tips('我是另外一个tips，只不过我长得跟之前那位稍有些不一样。', this, {
|
||||||
|
tips: [3, '#2F9688'],
|
||||||
|
time: 4000
|
||||||
|
});
|
||||||
|
}
|
||||||
|
,test19: function(){
|
||||||
|
layer.open({
|
||||||
|
type: 2,
|
||||||
|
title: '贤心博客',
|
||||||
|
shadeClose: true,
|
||||||
|
shade: 0.8,
|
||||||
|
area: ['375px', '500px'],
|
||||||
|
content: 'http://sentsin.com/'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
,test20: function(){
|
||||||
|
layer.open({
|
||||||
|
type: 2,
|
||||||
|
title: '百度一下',
|
||||||
|
shade: false,
|
||||||
|
maxmin: true,
|
||||||
|
area: ['90%', '90%'],
|
||||||
|
content: 'http://www.baidu.com/'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
,test21: function(){
|
||||||
|
var ii = layer.load(0, {shade: false});
|
||||||
|
setTimeout(function(){
|
||||||
|
layer.close(ii)
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
,test22: function(){
|
||||||
|
var iii = layer.load(1, {
|
||||||
|
shade: [0.1,'#fff']
|
||||||
|
});
|
||||||
|
setTimeout(function(){
|
||||||
|
layer.close(iii)
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
,test23: function(){
|
||||||
|
layer.prompt({title: '写点什么吧'}, function(value, index){
|
||||||
|
layer.msg('你写下了：'+ value, {
|
||||||
|
icon: 6
|
||||||
|
,shade: 0.9
|
||||||
|
}, function(){
|
||||||
|
layer.close(index);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
,test26: function(){
|
||||||
|
layer.alert('见到你真的很高兴', {icon: 6});
|
||||||
|
}
|
||||||
|
,test27: function(){
|
||||||
|
layer.msg('你确定你很帅么？', {
|
||||||
|
time: 0 //不自动关闭
|
||||||
|
,btn: ['必须啊', '丑到爆']
|
||||||
|
,yes: function(index){
|
||||||
|
layer.close(index);
|
||||||
|
layer.msg('雅蠛蝶 O.o', {
|
||||||
|
icon: 6
|
||||||
|
,time: 0
|
||||||
|
,btn: ['嗷','嗷','嗷']
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
,test28: function(){
|
||||||
|
layer.msg('这是最常用的吧');
|
||||||
|
}
|
||||||
|
,test29: function(){
|
||||||
|
layer.msg('并不十分开心。。', {icon: 5});
|
||||||
|
}
|
||||||
|
,test30: function(){
|
||||||
|
layer.msg('玩命卖萌中', function(){
|
||||||
|
layer.msg('卖完了');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
,test31: function(){
|
||||||
|
layer.confirm('真的删除吗？', function(){
|
||||||
|
layer.msg('正在删除', {icon: 16}, function(){
|
||||||
|
layer.msg('成功删除', {icon: 1})
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
,test33: function(){
|
||||||
|
layer.open({
|
||||||
|
type: 1,
|
||||||
|
title: false,
|
||||||
|
closeBtn: 0,
|
||||||
|
shadeClose: true,
|
||||||
|
skin: 'yourClass',
|
||||||
|
content: '<div style="padding: 20px; width: 260px; height: 180px;">自定义HTML内容</div>'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
,test35: function(){
|
||||||
|
layer.open({
|
||||||
|
type: 2,
|
||||||
|
area: ['700px', '450px'],
|
||||||
|
fixed: false,
|
||||||
|
maxmin: true,
|
||||||
|
content: layui.setter.base + 'views/iframe/layer/iframe.html'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
,test36: function(){
|
||||||
|
layer.open({
|
||||||
|
type: 2,
|
||||||
|
area: ['360px', '500px'],
|
||||||
|
skin: 'layui-layer-rim',
|
||||||
|
content: ['http://sentsin.com/', 'no']
|
||||||
|
});
|
||||||
|
}
|
||||||
|
,test37: function(){
|
||||||
|
layer.load();
|
||||||
|
setTimeout(function(){
|
||||||
|
layer.closeAll('loading');
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
,test38: function(){
|
||||||
|
layer.load(1);
|
||||||
|
setTimeout(function(){
|
||||||
|
layer.closeAll('loading');
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
,test39: function(){
|
||||||
|
layer.load(2);
|
||||||
|
setTimeout(function(){
|
||||||
|
layer.closeAll('loading');
|
||||||
|
}, 2000);
|
||||||
|
}
|
||||||
|
,test40: function(){
|
||||||
|
layer.msg('加载中', {
|
||||||
|
icon: 16
|
||||||
|
,shade: 0.01
|
||||||
|
});
|
||||||
|
}
|
||||||
|
,test41: function(){
|
||||||
|
layer.tips('上', this, {
|
||||||
|
tips: [1, '#000']
|
||||||
|
});
|
||||||
|
}
|
||||||
|
,test42: function(){
|
||||||
|
layer.tips('默认就是向右的，3秒后关闭', this);
|
||||||
|
}
|
||||||
|
,test43: function(){
|
||||||
|
layer.tips('下', this, {
|
||||||
|
tips: 3
|
||||||
|
});
|
||||||
|
}
|
||||||
|
,test44: function(){
|
||||||
|
layer.tips('在很久很久以前，在很久很久以前，在很久很久以前……', this, {
|
||||||
|
tips: [4, '#78BA32']
|
||||||
|
});
|
||||||
|
}
|
||||||
|
,test45: function(){
|
||||||
|
layer.tips('不会销毁之前的', this, {tipsMore: true});
|
||||||
|
}
|
||||||
|
|
||||||
|
,test47: function(){
|
||||||
|
var index = layer.open({
|
||||||
|
type: 2,
|
||||||
|
content: 'http://baidu.com',
|
||||||
|
area: ['300px', '300px'],
|
||||||
|
maxmin: true
|
||||||
|
});
|
||||||
|
layer.full(index);
|
||||||
|
}
|
||||||
|
,test48: function(){
|
||||||
|
layer.msg('灵活运用 offset', {
|
||||||
|
offset: 't',
|
||||||
|
anim: 6
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
$('#LAY-component-layer-list .layadmin-layer-demo .layui-btn').on('click', function(){
|
||||||
|
var type = $(this).data('type');
|
||||||
|
active[type] && active[type].call(this);
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
147
dist/views/component/layer/special-demo.html
vendored
Normal file
147
dist/views/component/layer/special-demo.html
vendored
Normal file
@ -0,0 +1,147 @@
|
|||||||
|
|
||||||
|
<title>layer 组件特殊示例</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a href="http://layer.layui.com/" target="_blank">layer</a>
|
||||||
|
<a><cite>特殊示例</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 这段样式只是用于演示 */
|
||||||
|
#LAY-component-layer-special-demo .layui-card-body{padding-top: 15px;}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="layui-fluid" id="LAY-component-layer-special-demo">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">场景</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
|
||||||
|
<div class="layui-btn-container layadmin-layer-demo">
|
||||||
|
<button data-method="setTop" class="layui-btn layui-btn-primary">多窗口模式，层叠置顶</button>
|
||||||
|
<button data-method="confirmTrans" class="layui-btn layui-btn-primary">配置一个透明的询问框</button>
|
||||||
|
<button data-method="notice" class="layui-btn layui-btn-primary">示范一个公告层</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">坐标</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
|
||||||
|
<div class="layui-btn-container layadmin-layer-demo">
|
||||||
|
<button data-method="offset" data-type="t" class="layui-btn layui-btn-primary">上弹出</button>
|
||||||
|
<button data-method="offset" data-type="r" class="layui-btn layui-btn-primary">右弹出</button>
|
||||||
|
<button data-method="offset" data-type="b" class="layui-btn layui-btn-primary">下弹出</button>
|
||||||
|
<button data-method="offset" data-type="l" class="layui-btn layui-btn-primary">左弹出</button>
|
||||||
|
<button data-method="offset" data-type="lt" class="layui-btn layui-btn-primary">左上弹出</button>
|
||||||
|
<button data-method="offset" data-type="lb" class="layui-btn layui-btn-primary">左下弹出</button>
|
||||||
|
<button data-method="offset" data-type="rt" class="layui-btn layui-btn-primary">右上弹出</button>
|
||||||
|
<button data-method="offset" data-type="rb" class="layui-btn layui-btn-primary">右下弹出</button>
|
||||||
|
<button data-method="offset" data-type="auto" class="layui-btn layui-btn-primary">居中弹出</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin'], function(){
|
||||||
|
var $ = layui.$
|
||||||
|
,admin = layui.admin
|
||||||
|
,element = layui.element
|
||||||
|
,router = layui.router();
|
||||||
|
|
||||||
|
element.render();
|
||||||
|
|
||||||
|
var active = {
|
||||||
|
setTop: function(){
|
||||||
|
var that = this;
|
||||||
|
layer.open({
|
||||||
|
type: 1
|
||||||
|
,title: '当你选择该窗体时，即会在最顶端'
|
||||||
|
,area: ['390px', '260px']
|
||||||
|
,shade: 0
|
||||||
|
,maxmin: true
|
||||||
|
,offset: [
|
||||||
|
Math.random()*($(window).height()-300)
|
||||||
|
,Math.random()*($(window).width()-390)
|
||||||
|
]
|
||||||
|
,content: '<div style="padding: 20px;">当你的页面有很多很多layer窗口，你需要像Window窗体那样，点击某个窗口，该窗体就置顶在上面，那么layer.setTop()可以来轻松实现。它采用巧妙的逻辑，以使这种置顶的性能达到最优。</div>'
|
||||||
|
,btn: ['继续弹出', '全部关闭']
|
||||||
|
,yes: function(){
|
||||||
|
$(that).click();
|
||||||
|
}
|
||||||
|
,btn2: function(){
|
||||||
|
layer.closeAll();
|
||||||
|
}
|
||||||
|
|
||||||
|
,zIndex: layer.zIndex
|
||||||
|
,success: function(layero){
|
||||||
|
layer.setTop(layero);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
,confirmTrans: function(){
|
||||||
|
layer.closeAll();
|
||||||
|
layer.msg('大部分参数都是可以公用的<br>合理搭配，展示不一样的风格', {
|
||||||
|
time: 20*1000,
|
||||||
|
btn: ['明白了', '知道了', '哦']
|
||||||
|
});
|
||||||
|
}
|
||||||
|
,notice: function(){
|
||||||
|
layer.closeAll();
|
||||||
|
layer.open({
|
||||||
|
type: 1
|
||||||
|
,title: false
|
||||||
|
,closeBtn: false
|
||||||
|
,area: '300px;'
|
||||||
|
,shade: 0.8
|
||||||
|
,id: 'LAY_layuipro'
|
||||||
|
,btn: ['火速围观', '残忍拒绝']
|
||||||
|
,btnAlign: 'c'
|
||||||
|
,moveType: 1 //拖拽模式，0或者1
|
||||||
|
,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你知道吗？亲！<br>layer ≠ layui<br><br>layer只是作为Layui的一个弹层模块，由于其用户基数较大，所以常常会有人以为layui是layerui<br><br>layer虽然已被 Layui 收编为内置的弹层模块，但仍然会作为一个独立组件全力维护、升级。<br><br>我们此后的征途是星辰大海 ^_^</div>'
|
||||||
|
,success: function(layero){
|
||||||
|
var btn = layero.find('.layui-layer-btn');
|
||||||
|
btn.find('.layui-layer-btn0').attr({
|
||||||
|
href: 'http://www.layui.com/'
|
||||||
|
,target: '_blank'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
,offset: function(othis){
|
||||||
|
var type = othis.data('type')
|
||||||
|
,text = othis.text();
|
||||||
|
|
||||||
|
layer.open({
|
||||||
|
type: 1
|
||||||
|
,offset: type
|
||||||
|
,id: 'layerDemo'+type
|
||||||
|
,content: '<div style="padding: 20px 100px;">'+ text +'</div>'
|
||||||
|
,btn: '关闭全部'
|
||||||
|
,btnAlign: 'c'
|
||||||
|
,shade: 0
|
||||||
|
,yes: function(){
|
||||||
|
layer.closeAll();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$('#LAY-component-layer-special-demo .layadmin-layer-demo .layui-btn').on('click', function(){
|
||||||
|
var othis = $(this), method = othis.data('method');
|
||||||
|
active[method] ? active[method].call(this, othis) : '';
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
82
dist/views/component/layer/theme.html
vendored
Normal file
82
dist/views/component/layer/theme.html
vendored
Normal file
@ -0,0 +1,82 @@
|
|||||||
|
|
||||||
|
<title>layer 组件风格定制</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a href="http://layer.layui.com/" target="_blank">layer</a>
|
||||||
|
<a><cite>风格定制</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 这段样式只是用于演示 */
|
||||||
|
#LAY-component-layer-theme .layui-card-body{padding-top: 15px;}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="layui-fluid" id="LAY-component-layer-theme">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">风格定制</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
|
||||||
|
<div class="layui-btn-container layadmin-layer-demo">
|
||||||
|
<button data-type="test1" class="layui-btn layui-btn-primary">layuiAdmin风格</button>
|
||||||
|
<button data-type="test2" class="layui-btn layui-btn-primary">右侧呼出</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-body">
|
||||||
|
|
||||||
|
持续增加中
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin'], function(){
|
||||||
|
var $ = layui.$
|
||||||
|
,admin = layui.admin
|
||||||
|
,element = layui.element
|
||||||
|
,router = layui.router();
|
||||||
|
|
||||||
|
element.render();
|
||||||
|
|
||||||
|
var active = {
|
||||||
|
test1: function(){
|
||||||
|
admin.popup({
|
||||||
|
title: 'layuiAdmin'
|
||||||
|
,shade: 0
|
||||||
|
,anim: -1
|
||||||
|
,area: ['280px', '150px']
|
||||||
|
,id: 'layadmin-layer-skin-test'
|
||||||
|
,skin: 'layui-anim layui-anim-upbit'
|
||||||
|
,content: '内容'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
,test2: function(){
|
||||||
|
admin.popupRight({
|
||||||
|
id: 'LAY_adminPopupLayerTest'
|
||||||
|
,success: function(){
|
||||||
|
$('#'+ this.id).html('<div style="padding: 20px;">放入内容</div>');
|
||||||
|
//admin.view(this.id).render('system/xxx')
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$('#LAY-component-layer-theme .layadmin-layer-demo .layui-btn').on('click', function(){
|
||||||
|
var type = $(this).data('type');
|
||||||
|
active[type] && active[type].call(this);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
158
dist/views/component/laypage/demo1.html
vendored
Normal file
158
dist/views/component/laypage/demo1.html
vendored
Normal file
@ -0,0 +1,158 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>功能演示1 - 通用分页组件</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>分页演示一</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">总页数低于页码总数</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-laypage-demo0"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">总页数大于页码总数</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-laypage-demo1"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">自定义主题 - 颜色随意定义</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-laypage-demo2"></div>
|
||||||
|
<div id="test-laypage-demo2-1"></div>
|
||||||
|
<div id="test-laypage-demo2-2"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">自定义首页、尾页、上一页、下一页文本</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-laypage-demo3"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">不显示首页尾页</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-laypage-demo4"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">开启HASH</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-laypage-demo5"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">只显示上一页、下一页</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-laypage-demo6"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'laypage'], function(){
|
||||||
|
var laypage = layui.laypage;
|
||||||
|
|
||||||
|
//总页数低于页码总数
|
||||||
|
laypage.render({
|
||||||
|
elem: 'test-laypage-demo0'
|
||||||
|
,count: 50 //数据总数
|
||||||
|
});
|
||||||
|
|
||||||
|
//总页数大于页码总数
|
||||||
|
laypage.render({
|
||||||
|
elem: 'test-laypage-demo1'
|
||||||
|
,count: 70 //数据总数
|
||||||
|
,jump: function(obj){
|
||||||
|
console.log(obj)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//自定义样式
|
||||||
|
laypage.render({
|
||||||
|
elem: 'test-laypage-demo2'
|
||||||
|
,count: 100
|
||||||
|
,theme: '#1E9FFF'
|
||||||
|
});
|
||||||
|
laypage.render({
|
||||||
|
elem: 'test-laypage-demo2-1'
|
||||||
|
,count: 100
|
||||||
|
,theme: '#FF5722'
|
||||||
|
});
|
||||||
|
laypage.render({
|
||||||
|
elem: 'test-laypage-demo2-2'
|
||||||
|
,count: 100
|
||||||
|
,theme: '#FFB800'
|
||||||
|
});
|
||||||
|
|
||||||
|
//自定义首页、尾页、上一页、下一页文本
|
||||||
|
laypage.render({
|
||||||
|
elem: 'test-laypage-demo3'
|
||||||
|
,count: 100
|
||||||
|
,first: '首页'
|
||||||
|
,last: '尾页'
|
||||||
|
,prev: '<em>←</em>'
|
||||||
|
,next: '<em>→</em>'
|
||||||
|
});
|
||||||
|
|
||||||
|
//不显示首页尾页
|
||||||
|
laypage.render({
|
||||||
|
elem: 'test-laypage-demo4'
|
||||||
|
,count: 100
|
||||||
|
,first: false
|
||||||
|
,last: false
|
||||||
|
});
|
||||||
|
|
||||||
|
//开启HASH
|
||||||
|
laypage.render({
|
||||||
|
elem: 'test-laypage-demo5'
|
||||||
|
,count: 500
|
||||||
|
,curr: location.hash.replace('#!fenye=', '') //获取hash值为fenye的当前页
|
||||||
|
,hash: 'fenye' //自定义hash值
|
||||||
|
});
|
||||||
|
|
||||||
|
//只显示上一页、下一页
|
||||||
|
laypage.render({
|
||||||
|
elem: 'test-laypage-demo6'
|
||||||
|
,count: 50
|
||||||
|
,layout: ['prev', 'next']
|
||||||
|
,jump: function(obj, first){
|
||||||
|
if(!first){
|
||||||
|
layer.msg('第 '+ obj.curr +' 页');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
159
dist/views/component/laypage/demo2.html
vendored
Normal file
159
dist/views/component/laypage/demo2.html
vendored
Normal file
@ -0,0 +1,159 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>功能演示2 - 通用分页组件</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>分页演示二</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">显示完整功能</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-laypage-demo7"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">自定义排版</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-laypage-demo8"></div>
|
||||||
|
<div id="test-laypage-demo9"></div>
|
||||||
|
<div id="test-laypage-demo10"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">自定义每页条数的选择项</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-laypage-demo11"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">将一段已知数组分页展示</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-laypage-demo20"></div>
|
||||||
|
<ul id="test-laypage-biuuu_city_list"></ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'laypage'], function(){
|
||||||
|
var laypage = layui.laypage;
|
||||||
|
|
||||||
|
//完整功能
|
||||||
|
laypage.render({
|
||||||
|
elem: 'test-laypage-demo7'
|
||||||
|
,count: 100
|
||||||
|
,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
|
||||||
|
,jump: function(obj){
|
||||||
|
console.log(obj)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//自定义排版
|
||||||
|
laypage.render({
|
||||||
|
elem: 'test-laypage-demo8'
|
||||||
|
,count: 1000
|
||||||
|
,layout: ['limit', 'prev', 'page', 'next']
|
||||||
|
});
|
||||||
|
laypage.render({
|
||||||
|
elem: 'test-laypage-demo9'
|
||||||
|
,count: 1000
|
||||||
|
,layout: ['prev', 'next', 'page']
|
||||||
|
});
|
||||||
|
laypage.render({
|
||||||
|
elem: 'test-laypage-demo10'
|
||||||
|
,count: 1000
|
||||||
|
,layout: ['page', 'count']
|
||||||
|
});
|
||||||
|
|
||||||
|
//自定义每页条数的选择项
|
||||||
|
laypage.render({
|
||||||
|
elem: 'test-laypage-demo11'
|
||||||
|
,count: 1000
|
||||||
|
,limit: 100
|
||||||
|
,limits: [100, 300, 500]
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
//将一段数组分页展示
|
||||||
|
|
||||||
|
//测试数据
|
||||||
|
var testLayPageData = [
|
||||||
|
'北京',
|
||||||
|
'上海',
|
||||||
|
'广州',
|
||||||
|
'深圳',
|
||||||
|
'杭州',
|
||||||
|
'长沙',
|
||||||
|
'合肥',
|
||||||
|
'宁夏',
|
||||||
|
'成都',
|
||||||
|
'西安',
|
||||||
|
'南昌',
|
||||||
|
'上饶',
|
||||||
|
'沈阳',
|
||||||
|
'济南',
|
||||||
|
'厦门',
|
||||||
|
'福州',
|
||||||
|
'九江',
|
||||||
|
'宜春',
|
||||||
|
'赣州',
|
||||||
|
'宁波',
|
||||||
|
'绍兴',
|
||||||
|
'无锡',
|
||||||
|
'苏州',
|
||||||
|
'徐州',
|
||||||
|
'东莞',
|
||||||
|
'佛山',
|
||||||
|
'中山',
|
||||||
|
'成都',
|
||||||
|
'武汉',
|
||||||
|
'青岛',
|
||||||
|
'天津',
|
||||||
|
'重庆',
|
||||||
|
'南京',
|
||||||
|
'九江',
|
||||||
|
'香港',
|
||||||
|
'澳门',
|
||||||
|
'台北'
|
||||||
|
];
|
||||||
|
|
||||||
|
//调用分页
|
||||||
|
laypage.render({
|
||||||
|
elem: 'test-laypage-demo20'
|
||||||
|
,count: testLayPageData.length
|
||||||
|
,jump: function(obj){
|
||||||
|
//模拟渲染
|
||||||
|
document.getElementById('test-laypage-biuuu_city_list').innerHTML = function(){
|
||||||
|
var arr = []
|
||||||
|
,thisData = testLayPageData.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
|
||||||
|
layui.each(thisData, function(index, item){
|
||||||
|
arr.push('<li>'+ item +'</li>');
|
||||||
|
});
|
||||||
|
return arr.join('');
|
||||||
|
}();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
34
dist/views/component/laytpl/index.html
vendored
Normal file
34
dist/views/component/laytpl/index.html
vendored
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
|
||||||
|
<title>模板引擎</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>模板引擎</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 这段样式只是用于演示 */
|
||||||
|
.layadmin-trailer{position: absolute; left: 0; top: 0; height: 100%; width: 100%; padding: 15px; display: flex; justify-content: center; flex-direction: column; text-align: center; box-sizing: border-box; font-size: 20px; font-weight: 300; color: #ccc;}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="layadmin-trailer">
|
||||||
|
<div style="width: 280px; margin: 0 auto;">
|
||||||
|
<a href="http://www.layui.com/demo/laytpl.html" target="_blank" class="layui-btn">
|
||||||
|
正在整理中，你可以先去官网看示例
|
||||||
|
</a>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin'], function(){
|
||||||
|
var $ = layui.$
|
||||||
|
,admin = layui.admin
|
||||||
|
,element = layui.element
|
||||||
|
,router = layui.router();
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
206
dist/views/component/nav/index.html
vendored
Normal file
206
dist/views/component/nav/index.html
vendored
Normal file
@ -0,0 +1,206 @@
|
|||||||
|
|
||||||
|
<title>导航</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>导航</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 这段样式只是用于演示 */
|
||||||
|
#LAY-component-nav .layui-nav-tree {vertical-align: top;}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="layui-fluid" id="LAY-component-nav">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md6">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">水平导航菜单</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<ul class="layui-nav" lay-filter="component-nav">
|
||||||
|
<li class="layui-nav-item"><a href="javascript:;">最新活动</a></li>
|
||||||
|
<li class="layui-nav-item layui-this">
|
||||||
|
<a href="javascript:;">产品</a>
|
||||||
|
<dl class="layui-nav-child">
|
||||||
|
<dd><a href="javascript:;">选项1</a></dd>
|
||||||
|
<dd><a href="javascript:;">选项2</a></dd>
|
||||||
|
<dd><a href="javascript:;">选项3</a></dd>
|
||||||
|
</dl>
|
||||||
|
</li>
|
||||||
|
<li class="layui-nav-item"><a href="javascript:;">大数据</a></li>
|
||||||
|
<li class="layui-nav-item">
|
||||||
|
<a href="javascript:;">解决方案</a>
|
||||||
|
<dl class="layui-nav-child">
|
||||||
|
<dd><a href="javascript:;">移动模块</a></dd>
|
||||||
|
<dd><a href="javascript:;">后台模版</a></dd>
|
||||||
|
<dd class="layui-this"><a href="javascript:;">选中项</a></dd>
|
||||||
|
<dd><a href="javascript:;">电商平台</a></dd>
|
||||||
|
</dl>
|
||||||
|
</li>
|
||||||
|
<li class="layui-nav-item"><a href="javascript:;">社区</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">导航带徽章和图片</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<ul class="layui-nav" lay-filter="component-nav">
|
||||||
|
<li class="layui-nav-item">
|
||||||
|
<a href="javascript:;">控制台<span class="layui-badge">9</span></a>
|
||||||
|
</li>
|
||||||
|
<li class="layui-nav-item">
|
||||||
|
<a href="javascript:;">个人中心<span class="layui-badge-dot"></span></a>
|
||||||
|
</li>
|
||||||
|
<li class="layui-nav-item" lay-unselect="">
|
||||||
|
<a href="javascript:;"><img src="http://t.cn/RCzsdCq" class="layui-nav-img">我</a>
|
||||||
|
<dl class="layui-nav-child">
|
||||||
|
<dd><a href="javascript:;">修改信息</a></dd>
|
||||||
|
<dd><a href="javascript:;">安全管理</a></dd>
|
||||||
|
<dd><a href="javascript:;">退了</a></dd>
|
||||||
|
</dl>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">导航主题</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<ul class="layui-nav layui-bg-cyan" lay-filter="component-nav">
|
||||||
|
<li class="layui-nav-item"><a href="javascript:;">藏青导航</a></li>
|
||||||
|
<li class="layui-nav-item layui-this"><a href="javascript:;">产品</a></li>
|
||||||
|
<li class="layui-nav-item"><a href="javascript:;">大数据</a></li>
|
||||||
|
<li class="layui-nav-item">
|
||||||
|
<a href="javascript:;">解决方案</a>
|
||||||
|
<dl class="layui-nav-child">
|
||||||
|
<dd><a href="javascript:;">移动模块</a></dd>
|
||||||
|
<dd><a href="javascript:;">后台模版</a></dd>
|
||||||
|
<dd><a href="javascript:;">电商平台</a></dd>
|
||||||
|
</dl>
|
||||||
|
</li>
|
||||||
|
<li class="layui-nav-item"><a href="javascript:;">社区</a></li>
|
||||||
|
</ul>
|
||||||
|
<br>
|
||||||
|
<ul class="layui-nav layui-bg-green" lay-filter="component-nav">
|
||||||
|
<li class="layui-nav-item"><a href="javascript:;">墨绿导航</a></li>
|
||||||
|
<li class="layui-nav-item layui-this"><a href="javascript:;">产品</a></li>
|
||||||
|
<li class="layui-nav-item"><a href="javascript:;">大数据</a></li>
|
||||||
|
<li class="layui-nav-item">
|
||||||
|
<a href="javascript:;">解决方案</a>
|
||||||
|
<dl class="layui-nav-child">
|
||||||
|
<dd><a href="javascript:;">移动模块</a></dd>
|
||||||
|
<dd><a href="javascript:;">后台模版</a></dd>
|
||||||
|
<dd><a href="javascript:;">电商平台</a></dd>
|
||||||
|
</dl>
|
||||||
|
</li>
|
||||||
|
<li class="layui-nav-item"><a href="javascript:;">社区</a></li>
|
||||||
|
</ul>
|
||||||
|
<br>
|
||||||
|
<ul class="layui-nav layui-bg-blue" lay-filter="component-nav">
|
||||||
|
<li class="layui-nav-item"><a href="javascript:;">艳蓝导航</a></li>
|
||||||
|
<li class="layui-nav-item layui-this"><a href="javascript:;">产品</a></li>
|
||||||
|
<li class="layui-nav-item"><a href="javascript:;">大数据</a></li>
|
||||||
|
<li class="layui-nav-item">
|
||||||
|
<a href="javascript:;">解决方案</a>
|
||||||
|
<dl class="layui-nav-child">
|
||||||
|
<dd><a href="javascript:;">移动模块</a></dd>
|
||||||
|
<dd><a href="javascript:;">后台模版</a></dd>
|
||||||
|
<dd><a href="javascript:;">电商平台</a></dd>
|
||||||
|
</dl>
|
||||||
|
</li>
|
||||||
|
<li class="layui-nav-item"><a href="javascript:;">社区</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-col-md6">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">垂直导航菜单</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<ul class="layui-nav layui-nav-tree layui-inline" lay-filter="component-nav-active" style="margin-right: 10px;">
|
||||||
|
<li class="layui-nav-item layui-nav-itemed">
|
||||||
|
<a href="javascript:;">默认展开</a>
|
||||||
|
<dl class="layui-nav-child">
|
||||||
|
<dd><a href="javascript:;">选项一</a></dd>
|
||||||
|
<dd><a href="javascript:;">选项二</a></dd>
|
||||||
|
<dd><a href="javascript:;">选项三</a></dd>
|
||||||
|
<dd><a href="javascript:;">跳转项</a></dd>
|
||||||
|
</dl>
|
||||||
|
</li>
|
||||||
|
<li class="layui-nav-item">
|
||||||
|
<a href="javascript:;">解决方案</a>
|
||||||
|
<dl class="layui-nav-child">
|
||||||
|
<dd><a href="javascript:;">移动模块</a></dd>
|
||||||
|
<dd><a href="javascript:;">后台模版</a></dd>
|
||||||
|
<dd><a href="javascript:;">电商平台</a></dd>
|
||||||
|
</dl>
|
||||||
|
</li>
|
||||||
|
<li class="layui-nav-item"><a href="javascript:;">云市场</a></li>
|
||||||
|
<li class="layui-nav-item"><a href="javascript:;">社区</a></li>
|
||||||
|
</ul>
|
||||||
|
<ul class="layui-nav layui-nav-tree layui-bg-cyan layui-inline" lay-filter="component-nav-active">
|
||||||
|
<li class="layui-nav-item layui-nav-itemed">
|
||||||
|
<a href="javascript:;">默认展开</a>
|
||||||
|
<dl class="layui-nav-child">
|
||||||
|
<dd><a href="javascript:;">选项一</a></dd>
|
||||||
|
<dd><a href="javascript:;">选项二</a></dd>
|
||||||
|
<dd><a href="javascript:;">选项三</a></dd>
|
||||||
|
<dd><a href="http://www.layui.com/admin/" target="_blank">跳转项</a></dd>
|
||||||
|
</dl>
|
||||||
|
</li>
|
||||||
|
<li class="layui-nav-item">
|
||||||
|
<a href="javascript:;">解决方案</a>
|
||||||
|
<dl class="layui-nav-child">
|
||||||
|
<dd><a href="javascript:;">移动模块</a></dd>
|
||||||
|
<dd><a href="javascript:;">后台模版</a></dd>
|
||||||
|
<dd><a href="javascript:;">电商平台</a></dd>
|
||||||
|
</dl>
|
||||||
|
</li>
|
||||||
|
<li class="layui-nav-item"><a href="javascript:;">云市场</a></li>
|
||||||
|
<li class="layui-nav-item"><a href="javascript:;">社区</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">面包屑</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<span class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a href="javascript:;">首页</a>
|
||||||
|
<a href="javascript:;">演示</a>
|
||||||
|
<a><cite>导航元素</cite></a>
|
||||||
|
</span>
|
||||||
|
<br>
|
||||||
|
<span class="layui-breadcrumb" lay-separator="-" lay-filter="breadcrumb">
|
||||||
|
<a href="javascript:;">首页</a>
|
||||||
|
<a href="javascript:;">演示</a>
|
||||||
|
<a><cite>导航元素</cite></a>
|
||||||
|
</span>
|
||||||
|
<br>
|
||||||
|
<span class="layui-breadcrumb" lay-separator="\" lay-filter="breadcrumb">
|
||||||
|
<a href="javascript:;">首页</a>
|
||||||
|
<a href="javascript:;">演示</a>
|
||||||
|
<a><cite>导航元素</cite></a>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin'], function(){
|
||||||
|
var $ = layui.$
|
||||||
|
,admin = layui.admin
|
||||||
|
,element = layui.element;
|
||||||
|
|
||||||
|
element.render('nav', 'component-nav');
|
||||||
|
element.render('nav', 'component-nav-active');
|
||||||
|
|
||||||
|
element.on('nav(component-nav-active)', function(elem){
|
||||||
|
layer.msg(elem.text());
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
181
dist/views/component/panel/index.html
vendored
Normal file
181
dist/views/component/panel/index.html
vendored
Normal file
@ -0,0 +1,181 @@
|
|||||||
|
|
||||||
|
<title>面板</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>面板</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 这段样式只是用于演示 */
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">折叠面板</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div class="layui-collapse" lay-filter="component-panel">
|
||||||
|
<div class="layui-colla-item">
|
||||||
|
<h2 class="layui-colla-title">为什么JS社区大量采用未发布或者未广泛支持的语言特性？</h2>
|
||||||
|
<div class="layui-colla-content">
|
||||||
|
<p>有不少其他答案说是因为JS太差。我下面的答案已经说了，这不是根本性的原因。但除此之外，我还要纠正一些对JS具体问题的误解。JS当初是被作为脚本语言设计的，所以某些问题并不是JS设计得差或者是JS设计者的失误。比如var的作用域问题，并不是“错误”，而是当时绝大部分脚本语言都是这样的，如perl/php/sh等。模块的问题也是，脚本语言几乎都没有模块/命名空间功能。弱类型、for-in之类的问题也是，只不过现在用那些老的脚本语言的人比较少，所以很多人都误以为是JS才有的坑。另外有人说JS是半残语言，满足不了开发需求，1999年就该死。半残这个嘛，就夸张了。JS虽然有很多问题，但是设计总体还是优秀的。——来自知乎@贺师俊</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-colla-item">
|
||||||
|
<h2 class="layui-colla-title">为什么前端工程师多不愿意用 Bootstrap 框架？</h2>
|
||||||
|
<div class="layui-colla-content">
|
||||||
|
<p>因为不适合。如果希望开发长期的项目或者制作产品类网站，那么就需要实现特定的设计，为了在维护项目中可以方便地按设计师要求快速修改样式，肯定会逐步编写出各种业务组件、工具类，相当于为项目自行开发一套框架。——来自知乎@Kayo</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-colla-item">
|
||||||
|
<h2 class="layui-colla-title">layui 更适合哪些开发者？</h2>
|
||||||
|
<div class="layui-colla-content">
|
||||||
|
<p>在前端技术快速变革的今天，layui 仍然坚持语义化的组织模式，甚至于模块理念都是采用类AMD组织形式，并非是有意与时代背道而驰。layui 认为以jQuery为核心的开发方式还没有到完全消亡的时候，而早期市面上基于jQuery的UI都普通做得差强人意，所以需要有一个新的UI去重新为这一领域注入活力，并采用一些更科学的架构方式。
|
||||||
|
<br><br>
|
||||||
|
因此准确地说，layui 更多是面向那些追求开发简单的前端工程师们，以及所有层次的服务端程序员。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-colla-item">
|
||||||
|
<h2 class="layui-colla-title">贤心是男是女？</h2>
|
||||||
|
<div class="layui-colla-content">
|
||||||
|
<p>man！ 所以这个问题不要再出现了。。。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
|
||||||
|
<div class="layui-card-header">手风琴折叠</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div class="layui-collapse" lay-accordion="">
|
||||||
|
<div class="layui-colla-item">
|
||||||
|
<h2 class="layui-colla-title">layui 更适合哪些开发者？</h2>
|
||||||
|
<div class="layui-colla-content layui-show">
|
||||||
|
<p>在前端技术快速变革的今天，layui 仍然坚持语义化的组织模式，甚至于模块理念都是采用类AMD组织形式，并非是有意与时代背道而驰。layui 认为以jQuery为核心的开发方式还没有到完全消亡的时候，而早期市面上基于jQuery的UI都普通做得差强人意，所以需要有一个新的UI去重新为这一领域注入活力，并采用一些更科学的架构方式。
|
||||||
|
<br>
|
||||||
|
因此准确地说，layui 更多是面向那些追求开发简单的前端工程师们，以及所有层次的服务端程序员。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-colla-item">
|
||||||
|
<h2 class="layui-colla-title">为什么JS社区大量采用未发布或者未广泛支持的语言特性？</h2>
|
||||||
|
<div class="layui-colla-content">
|
||||||
|
<p>有不少其他答案说是因为JS太差。我下面的答案已经说了，这不是根本性的原因。但除此之外，我还要纠正一些对JS具体问题的误解。JS当初是被作为脚本语言设计的，所以某些问题并不是JS设计得差或者是JS设计者的失误。比如var的作用域问题，并不是“错误”，而是当时绝大部分脚本语言都是这样的，如perl/php/sh等。模块的问题也是，脚本语言几乎都没有模块/命名空间功能。弱类型、for-in之类的问题也是，只不过现在用那些老的脚本语言的人比较少，所以很多人都误以为是JS才有的坑。另外有人说JS是半残语言，满足不了开发需求，1999年就该死。半残这个嘛，就夸张了。JS虽然有很多问题，但是设计总体还是优秀的。——来自知乎@贺师俊</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-colla-item">
|
||||||
|
<h2 class="layui-colla-title">为什么前端工程师多不愿意用 Bootstrap 框架？</h2>
|
||||||
|
<div class="layui-colla-content">
|
||||||
|
<p>因为不适合。如果希望开发长期的项目或者制作产品类网站，那么就需要实现特定的设计，为了在维护项目中可以方便地按设计师要求快速修改样式，肯定会逐步编写出各种业务组件、工具类，相当于为项目自行开发一套框架。——来自知乎@Kayo</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-colla-item">
|
||||||
|
<h2 class="layui-colla-title">贤心是男是女？</h2>
|
||||||
|
<div class="layui-colla-content">
|
||||||
|
<p>man！ 所以这个问题不要再出现了。。。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">折叠面板嵌套</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div class="layui-collapse" lay-accordion="">
|
||||||
|
<div class="layui-colla-item">
|
||||||
|
<h2 class="layui-colla-title">文豪</h2>
|
||||||
|
<div class="layui-colla-content layui-show">
|
||||||
|
|
||||||
|
<div class="layui-collapse" lay-accordion="">
|
||||||
|
<div class="layui-colla-item">
|
||||||
|
<h2 class="layui-colla-title">唐代</h2>
|
||||||
|
<div class="layui-colla-content layui-show">
|
||||||
|
|
||||||
|
<div class="layui-collapse" lay-accordion="">
|
||||||
|
<div class="layui-colla-item">
|
||||||
|
<h2 class="layui-colla-title">杜甫</h2>
|
||||||
|
<div class="layui-colla-content layui-show">
|
||||||
|
伟大的诗人
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-colla-item">
|
||||||
|
<h2 class="layui-colla-title">李白</h2>
|
||||||
|
<div class="layui-colla-content">
|
||||||
|
<p>据说是韩国人</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-colla-item">
|
||||||
|
<h2 class="layui-colla-title">王勃</h2>
|
||||||
|
<div class="layui-colla-content">
|
||||||
|
<p>千古绝唱《滕王阁序》</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-colla-item">
|
||||||
|
<h2 class="layui-colla-title">宋代</h2>
|
||||||
|
<div class="layui-colla-content">
|
||||||
|
<p>比如苏轼、李清照</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-colla-item">
|
||||||
|
<h2 class="layui-colla-title">当代</h2>
|
||||||
|
<div class="layui-colla-content">
|
||||||
|
<p>比如贤心</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-colla-item">
|
||||||
|
<h2 class="layui-colla-title">科学家</h2>
|
||||||
|
<div class="layui-colla-content">
|
||||||
|
<p>伟大的科学家</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-colla-item">
|
||||||
|
<h2 class="layui-colla-title">艺术家</h2>
|
||||||
|
<div class="layui-colla-content">
|
||||||
|
<p>浑身散发着艺术细胞</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">卡片面板</div>
|
||||||
|
<div class="layui-card-body" style="height: 200px;">
|
||||||
|
就是当前这个
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin'], function(){
|
||||||
|
var $ = layui.$
|
||||||
|
,admin = layui.admin
|
||||||
|
,element = layui.element
|
||||||
|
,router = layui.router();
|
||||||
|
|
||||||
|
element.render('collapse');
|
||||||
|
|
||||||
|
//监听折叠
|
||||||
|
element.on('collapse(component-panel)', function(data){
|
||||||
|
layer.msg('展开状态：'+ data.show);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
159
dist/views/component/progress/index.html
vendored
Normal file
159
dist/views/component/progress/index.html
vendored
Normal file
@ -0,0 +1,159 @@
|
|||||||
|
|
||||||
|
<title>进度条</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>进度条</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 这段样式只是用于演示 */
|
||||||
|
.layui-progress{margin: 20px 0;}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="layui-fluid" id="LAY-component-progress">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">默认进度条</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
|
||||||
|
<div class="layui-progress">
|
||||||
|
<div class="layui-progress-bar" lay-percent="50%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-xs6">
|
||||||
|
<div class="layui-progress">
|
||||||
|
<div class="layui-progress-bar" lay-percent="50%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-xs6">
|
||||||
|
<div class="layui-progress">
|
||||||
|
<div class="layui-progress-bar" lay-percent="50%"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">更多颜色进度条</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
|
||||||
|
<div class="layui-progress">
|
||||||
|
<div class="layui-progress-bar layui-bg-red" lay-percent="20%"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-progress">
|
||||||
|
<div class="layui-progress-bar layui-bg-orange" lay-percent="30%"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-progress">
|
||||||
|
<div class="layui-progress-bar layui-bg-green" lay-percent="40%"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-progress">
|
||||||
|
<div class="layui-progress-bar layui-bg-blue" lay-percent="50%"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-progress">
|
||||||
|
<div class="layui-progress-bar layui-bg-cyan" lay-percent="60%"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-progress layui-progress-big">
|
||||||
|
<div class="layui-progress-bar" lay-percent="20%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-progress layui-progress-big">
|
||||||
|
<div class="layui-progress-bar layui-bg-green" lay-percent="35%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-progress layui-progress-big">
|
||||||
|
<div class="layui-progress-bar layui-bg-cyan" lay-percent="75%"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">动态改变进度</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
|
||||||
|
<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="component-progress-demo">
|
||||||
|
<div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-btn-container" style="margin-top: 20px; margin-bottom: 0;">
|
||||||
|
<button class="layui-btn site-demo-active" data-type="setPercent">设置50%</button>
|
||||||
|
<button class="layui-btn site-demo-active" data-type="loading">模拟loading</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">显示进度比文本</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
|
||||||
|
<div class="layui-progress" lay-showpercent="true">
|
||||||
|
<div class="layui-progress-bar" lay-percent="20%"></div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-progress" lay-showpercent="true">
|
||||||
|
<div class="layui-progress-bar" lay-percent="5 / 10"></div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-progress layui-progress-big" lay-showpercent="true">
|
||||||
|
<div class="layui-progress-bar" lay-percent="70%"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin'], function(){
|
||||||
|
var $ = layui.$
|
||||||
|
,admin = layui.admin
|
||||||
|
,element = layui.element
|
||||||
|
,router = layui.router();
|
||||||
|
|
||||||
|
element.render('progress');
|
||||||
|
|
||||||
|
//触发事件
|
||||||
|
var active = {
|
||||||
|
setPercent: function(){
|
||||||
|
//设置50%进度
|
||||||
|
element.progress('component-progress-demo', '50%')
|
||||||
|
}
|
||||||
|
,loading: function(othis){
|
||||||
|
var DISABLED = 'layui-btn-disabled';
|
||||||
|
if(othis.hasClass(DISABLED)) return;
|
||||||
|
|
||||||
|
//模拟loading
|
||||||
|
var n = 0, timer = setInterval(function(){
|
||||||
|
n = n + Math.random()*10|0;
|
||||||
|
if(n>100){
|
||||||
|
n = 100;
|
||||||
|
clearInterval(timer);
|
||||||
|
othis.removeClass(DISABLED);
|
||||||
|
}
|
||||||
|
element.progress('component-progress-demo', n+'%');
|
||||||
|
}, 300+Math.random()*1000);
|
||||||
|
|
||||||
|
othis.addClass(DISABLED);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$('#LAY-component-progress .site-demo-active').on('click', function(){
|
||||||
|
var othis = $(this), type = $(this).data('type');
|
||||||
|
active[type] ? active[type].call(this, othis) : '';
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
177
dist/views/component/rate/index.html
vendored
Normal file
177
dist/views/component/rate/index.html
vendored
Normal file
@ -0,0 +1,177 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>评分组件</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>评分组件</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md6">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">基础效果</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-rate-dome1"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">显示文字</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-rate-dome2"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">半星效果</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-rate-dome3"></div>
|
||||||
|
<div><div id="test-rate-dome4"></div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">自定义主题色</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<ul>
|
||||||
|
<li><div id="test-rate-dome10"></div></li>
|
||||||
|
<li><div id="test-rate-dome11"></div></li>
|
||||||
|
<li><div id="test-rate-dome12"></div></li>
|
||||||
|
<li><div id="test-rate-dome13"></div></li>
|
||||||
|
<li><div id="test-rate-dome14"></div></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md6">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">只读</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-rate-dome9"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">自定义内容</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-rate-dome5"></div>
|
||||||
|
<div><div id="test-rate-dome6"></div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">自定义长度</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-rate-dome7"></div>
|
||||||
|
<div><div id="test-rate-dome8"></div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'rate'], function(){
|
||||||
|
var rate = layui.rate;
|
||||||
|
//基础效果
|
||||||
|
rate.render({
|
||||||
|
elem: '#test-rate-dome1'
|
||||||
|
})
|
||||||
|
|
||||||
|
//显示文字
|
||||||
|
rate.render({
|
||||||
|
elem: '#test-rate-dome2'
|
||||||
|
,value: 2 //初始值
|
||||||
|
,text: true //开启文本
|
||||||
|
});
|
||||||
|
|
||||||
|
//半星效果
|
||||||
|
rate.render({
|
||||||
|
elem: '#test-rate-dome3'
|
||||||
|
,value: 2.5 //初始值
|
||||||
|
,half: true //开启半星
|
||||||
|
})
|
||||||
|
rate.render({
|
||||||
|
elem: '#test-rate-dome4'
|
||||||
|
,value: 3.5
|
||||||
|
,half: true
|
||||||
|
,text: true
|
||||||
|
})
|
||||||
|
|
||||||
|
//自定义文本
|
||||||
|
rate.render({
|
||||||
|
elem: '#test-rate-dome5'
|
||||||
|
,value: 3
|
||||||
|
,text: true
|
||||||
|
,setText: function(value){ //自定义文本的回调
|
||||||
|
var arrs = {
|
||||||
|
'1': '极差'
|
||||||
|
,'2': '差'
|
||||||
|
,'3': '中等'
|
||||||
|
,'4': '好'
|
||||||
|
,'5': '极好'
|
||||||
|
};
|
||||||
|
this.span.text(arrs[value] || ( value + "星"));
|
||||||
|
}
|
||||||
|
})
|
||||||
|
rate.render({
|
||||||
|
elem: '#test-rate-dome6'
|
||||||
|
,value: 1.5
|
||||||
|
,half: true
|
||||||
|
,text: true
|
||||||
|
,setText: function(value){
|
||||||
|
this.span.text(value);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
//自定义长度
|
||||||
|
rate.render({
|
||||||
|
elem: '#test-rate-dome7'
|
||||||
|
,length: 3
|
||||||
|
});
|
||||||
|
rate.render({
|
||||||
|
elem: '#test-rate-dome8'
|
||||||
|
,length: 10
|
||||||
|
,value: 8 //初始值
|
||||||
|
});
|
||||||
|
|
||||||
|
//只读
|
||||||
|
rate.render({
|
||||||
|
elem: '#test-rate-dome9'
|
||||||
|
,value: 4
|
||||||
|
,readonly: true
|
||||||
|
});
|
||||||
|
|
||||||
|
//主题色
|
||||||
|
rate.render({
|
||||||
|
elem: '#test-rate-dome10'
|
||||||
|
,value: 3
|
||||||
|
,theme: '#FF8000' //自定义主题色
|
||||||
|
});
|
||||||
|
rate.render({
|
||||||
|
elem: '#test-rate-dome11'
|
||||||
|
,value: 3
|
||||||
|
,theme: '#009688'
|
||||||
|
});
|
||||||
|
|
||||||
|
rate.render({
|
||||||
|
elem: '#test-rate-dome12'
|
||||||
|
,value: 2.5
|
||||||
|
,half: true
|
||||||
|
,theme: '#1E9FFF'
|
||||||
|
})
|
||||||
|
rate.render({
|
||||||
|
elem: '#test-rate-dome13'
|
||||||
|
,value: 2.5
|
||||||
|
,half: true
|
||||||
|
,theme: '#2F4056'
|
||||||
|
});
|
||||||
|
rate.render({
|
||||||
|
elem: '#test-rate-dome14'
|
||||||
|
,value: 2.5
|
||||||
|
,half: true
|
||||||
|
,theme: '#FE0000'
|
||||||
|
})
|
||||||
|
});
|
||||||
|
</script>
|
||||||
216
dist/views/component/slider/index.html
vendored
Normal file
216
dist/views/component/slider/index.html
vendored
Normal file
@ -0,0 +1,216 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>滑块组件</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>滑块组件</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.test-slider-demo{margin: 45px 30px;}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md6">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">基础效果</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-slider-dome1" class="test-slider-demo"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">定义初始值</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-slider-dome1" class="test-slider-demo"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">设置最大最小值</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-slider-dome3" class="test-slider-demo"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">设置步长</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-slider-dome4" class="test-slider-demo"></div>
|
||||||
|
<div id="test-slider-dome5" class="test-slider-demo"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">设置提示文本</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-slider-dome6" class="test-slider-demo"></div>
|
||||||
|
<div id="test-slider-dome7" class="test-slider-demo"></div>
|
||||||
|
<div id="test-slider-tips1" style="position:relative; left: 30px; top: -20px;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">开启输入框</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-slider-dome8" class="test-slider-demo"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md6">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">开启范围选择</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-slider-dome9" class="test-slider-demo"></div>
|
||||||
|
<div id="test-slider-tips2" style="position:relative; left: 30px; margin-top: -10px;"></div>
|
||||||
|
<div id="test-slider-dome10" class="test-slider-demo"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">垂直滑块</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-slider-dome11" style="margin: 45px 30px; display: inline-block;"></div>
|
||||||
|
<div id="test-slider-dome12" style="margin: 45px 30px; display: inline-block;"></div>
|
||||||
|
<div id="test-slider-dome13" style="margin: 45px 30px; display: inline-block;"></div>
|
||||||
|
<div id="test-slider-dome14" style="margin: 45px 30px; display: inline-block;"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">自定义颜色</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-slider-dome15" class="test-slider-demo"></div>
|
||||||
|
<div id="test-slider-dome16" class="test-slider-demo"></div>
|
||||||
|
<div id="test-slider-dome17" class="test-slider-demo"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">禁用滑块</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-slider-dome18" class="test-slider-demo"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'slider'], function(){
|
||||||
|
var $ = layui.$
|
||||||
|
,slider = layui.slider;
|
||||||
|
|
||||||
|
//默认滑块
|
||||||
|
slider.render({
|
||||||
|
elem: '#test-slider-dome1'
|
||||||
|
});
|
||||||
|
|
||||||
|
//定义初始值
|
||||||
|
slider.render({
|
||||||
|
elem: '#test-slider-dome2'
|
||||||
|
,value: 20 //初始值
|
||||||
|
});
|
||||||
|
|
||||||
|
//设置最大最小值
|
||||||
|
slider.render({
|
||||||
|
elem: '#test-slider-dome3'
|
||||||
|
,min: 20 //最小值
|
||||||
|
,max: 50 //最大值
|
||||||
|
});
|
||||||
|
|
||||||
|
//设置步长
|
||||||
|
slider.render({
|
||||||
|
elem: '#test-slider-dome4'
|
||||||
|
,step: 10 //步长
|
||||||
|
});
|
||||||
|
|
||||||
|
slider.render({
|
||||||
|
elem: '#test-slider-dome5'
|
||||||
|
,step: 10 //步长
|
||||||
|
,showstep: true //开启间隔点
|
||||||
|
});
|
||||||
|
|
||||||
|
//设置提示文本
|
||||||
|
slider.render({
|
||||||
|
elem: '#test-slider-dome6'
|
||||||
|
,min: 20
|
||||||
|
,max: 1000
|
||||||
|
,setTips: function(value){ //自定义提示文本
|
||||||
|
return value + 'GB';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
slider.render({
|
||||||
|
elem: '#test-slider-dome7'
|
||||||
|
,tips: false //关闭默认提示层
|
||||||
|
,change: function(value){
|
||||||
|
$('#test-slider-tips1').html('当前数值：'+ value);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//开启输入框
|
||||||
|
slider.render({
|
||||||
|
elem: '#test-slider-dome8'
|
||||||
|
,input: true //输入框
|
||||||
|
});
|
||||||
|
|
||||||
|
//开启范围选择
|
||||||
|
slider.render({
|
||||||
|
elem: '#test-slider-dome9'
|
||||||
|
,value: 40 //初始值
|
||||||
|
,range: true //范围选择
|
||||||
|
,change: function(vals){
|
||||||
|
$('#test-slider-tips2').html('开始值：'+ vals[0] + '、结尾值：'+ vals[1]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
slider.render({
|
||||||
|
elem: '#test-slider-dome10'
|
||||||
|
,value: [30, 60] //初始值
|
||||||
|
,range: true //范围选择
|
||||||
|
});
|
||||||
|
|
||||||
|
//垂直滑块
|
||||||
|
slider.render({
|
||||||
|
elem: '#test-slider-dome11'
|
||||||
|
,type: 'vertical' //垂直滑块
|
||||||
|
});
|
||||||
|
slider.render({
|
||||||
|
elem: '#test-slider-dome12'
|
||||||
|
,value: 30
|
||||||
|
,type: 'vertical' //垂直滑块
|
||||||
|
});
|
||||||
|
slider.render({
|
||||||
|
elem: '#test-slider-dome13'
|
||||||
|
,value: 50
|
||||||
|
,range: true //范围选择
|
||||||
|
,type: 'vertical' //垂直滑块
|
||||||
|
});
|
||||||
|
slider.render({
|
||||||
|
elem: '#test-slider-dome14'
|
||||||
|
,value: 80
|
||||||
|
,input: true //输入框
|
||||||
|
,type: 'vertical' //垂直滑块
|
||||||
|
});
|
||||||
|
|
||||||
|
//自定义颜色
|
||||||
|
slider.render({
|
||||||
|
elem: '#test-slider-dome15'
|
||||||
|
,theme: '#1E9FFF' //主题色
|
||||||
|
});
|
||||||
|
slider.render({
|
||||||
|
elem: '#test-slider-dome16'
|
||||||
|
,value: 50
|
||||||
|
,theme: '#5FB878' //主题色
|
||||||
|
});
|
||||||
|
slider.render({
|
||||||
|
elem: '#test-slider-dome17'
|
||||||
|
,value: [30, 70]
|
||||||
|
,range: true
|
||||||
|
,theme: '#FF5722' //主题色
|
||||||
|
});
|
||||||
|
|
||||||
|
//禁用滑块
|
||||||
|
slider.render({
|
||||||
|
elem: '#test-slider-dome18'
|
||||||
|
,value: 35
|
||||||
|
,disabled: true //禁用滑块
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
49
dist/views/component/table/auto.html
vendored
Normal file
49
dist/views/component/table/auto.html
vendored
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>列宽自动分配 - 数据表格</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>数据表格</cite></a>
|
||||||
|
<a><cite>列宽自动分配</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">列宽自动分配</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<table class="layui-hide" id="test-table-autowidth"></table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'table'], function(){
|
||||||
|
var table = layui.table;
|
||||||
|
|
||||||
|
table.render({
|
||||||
|
elem: '#test-table-autowidth'
|
||||||
|
,url: './json/table/user.js'
|
||||||
|
,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
|
||||||
|
,cols: [[
|
||||||
|
{field:'id', title: 'ID', sort: true}
|
||||||
|
,{field:'username', title: '用户名'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
|
||||||
|
,{field:'sex', title: '性别', sort: true}
|
||||||
|
,{field:'city', title: '城市'}
|
||||||
|
,{field:'sign', title: '签名'}
|
||||||
|
,{field:'classify', title: '职业', align: 'center'} //单元格内容水平居中
|
||||||
|
,{field:'experience', title: '积分', sort: true, align: 'right'} //单元格内容水平居中
|
||||||
|
,{field:'score', title: '评分', sort: true, align: 'right'}
|
||||||
|
,{field:'wealth', title: '财富', sort: true, align: 'right'}
|
||||||
|
]]
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
56
dist/views/component/table/cellEdit.html
vendored
Normal file
56
dist/views/component/table/cellEdit.html
vendored
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>开启单元格编辑 - 数据表格</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>数据表格</cite></a>
|
||||||
|
<a><cite>开启单元格编辑</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">开启单元格编辑</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<table class="layui-hide" id="test-table-cellEdit" lay-filter="test-table-cellEdit"></table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'table'], function(){
|
||||||
|
var table = layui.table;
|
||||||
|
|
||||||
|
table.render({
|
||||||
|
elem: '#test-table-cellEdit'
|
||||||
|
,url: './json/table/demo.js'
|
||||||
|
,cols: [[
|
||||||
|
{type:'checkbox'}
|
||||||
|
,{field:'id', title:'ID', width:80, sort: true}
|
||||||
|
,{field:'username', title:'用户名', width:120, sort: true, edit: 'text'}
|
||||||
|
,{field:'email', title:'邮箱', edit: 'text', minWidth: 150}
|
||||||
|
,{field:'sex', title:'性别', width:80, edit: 'text'}
|
||||||
|
,{field:'city', title:'城市', edit: 'text', minWidth: 100}
|
||||||
|
,{field:'experience', title:'积分', sort: true, edit: 'text'}
|
||||||
|
]]
|
||||||
|
})
|
||||||
|
|
||||||
|
//监听单元格编辑
|
||||||
|
table.on('edit(test-table-cellEdit)', function(obj){
|
||||||
|
var value = obj.value //得到修改后的值
|
||||||
|
,data = obj.data //得到所在行所有键值
|
||||||
|
,field = obj.field; //得到字段
|
||||||
|
layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value, {
|
||||||
|
offset: '15px'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
67
dist/views/component/table/cellEvent.html
vendored
Normal file
67
dist/views/component/table/cellEvent.html
vendored
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>监听单元格事件 - 数据表格</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>数据表格</cite></a>
|
||||||
|
<a><cite>监听单元格事件</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">监听单元格事件</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<blockquote class="layui-elem-quote">点击下面表格中的【签名列】，以演示单元格事件</blockquote>
|
||||||
|
<table class="layui-hide" id="test-table-demoEvent" lay-filter="test-table-demoEvent"></table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'table'], function(){
|
||||||
|
var table = layui.table;
|
||||||
|
|
||||||
|
table.render({
|
||||||
|
elem: '#test-table-demoEvent'
|
||||||
|
,height: 313
|
||||||
|
,url: './json/table/user.js'
|
||||||
|
,cols: [[
|
||||||
|
{field:'id', title: 'ID', width:80}
|
||||||
|
,{field:'username', title: '用户名', width:80}
|
||||||
|
,{field:'sign', title: '签名', width:'50%', event: 'setSign', style:'cursor: pointer;'}
|
||||||
|
,{field:'experience', title: '积分'}
|
||||||
|
,{field:'score', title: '评分'}
|
||||||
|
]]
|
||||||
|
});
|
||||||
|
|
||||||
|
//监听单元格事件
|
||||||
|
table.on('tool(test-table-demoEvent)', function(obj){
|
||||||
|
var data = obj.data;
|
||||||
|
if(obj.event === 'setSign'){
|
||||||
|
layer.prompt({
|
||||||
|
formType: 2
|
||||||
|
,title: '修改 ID 为 ['+ data.id +'] 的用户签名'
|
||||||
|
,value: data.sign
|
||||||
|
}, function(value, index){
|
||||||
|
layer.close(index);
|
||||||
|
|
||||||
|
//这里一般是发送修改的Ajax请求
|
||||||
|
|
||||||
|
//同步更新表格和缓存对应的值
|
||||||
|
obj.update({
|
||||||
|
sign: value
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
50
dist/views/component/table/checkbox.html
vendored
Normal file
50
dist/views/component/table/checkbox.html
vendored
Normal file
@ -0,0 +1,50 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>开启复选框 - 数据表格</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>数据表格</cite></a>
|
||||||
|
<a><cite>开启复选框</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">开启复选框</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<table class="layui-hide" id="test-table-checkbox"></table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'table'], function(){
|
||||||
|
var table = layui.table;
|
||||||
|
|
||||||
|
table.render({
|
||||||
|
elem: '#test-table-checkbox'
|
||||||
|
,url: './json/table/user.js'
|
||||||
|
,cols: [[
|
||||||
|
{type:'checkbox'}
|
||||||
|
,{field:'id', width:80, title: 'ID', sort: true}
|
||||||
|
,{field:'username', width:80, title: '用户名'}
|
||||||
|
,{field:'sex', width:80, title: '性别', sort: true}
|
||||||
|
,{field:'city', width:80, title: '城市'}
|
||||||
|
,{field:'sign', title: '签名', minWidth: 100}
|
||||||
|
,{field:'experience', width:80, title: '积分', sort: true}
|
||||||
|
,{field:'score', width:80, title: '评分', sort: true}
|
||||||
|
,{field:'classify', width:80, title: '职业'}
|
||||||
|
,{field:'wealth', width:135, title: '财富', sort: true}
|
||||||
|
]]
|
||||||
|
,page: true
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
141
dist/views/component/table/data.html
vendored
Normal file
141
dist/views/component/table/data.html
vendored
Normal file
@ -0,0 +1,141 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>赋值已知数据 - 数据表格</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>数据表格</cite></a>
|
||||||
|
<a><cite>简单用法</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">赋值已知数据</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<table class="layui-hide" id="test-table-data"></table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'table'], function(){
|
||||||
|
var table = layui.table;
|
||||||
|
|
||||||
|
//展示已知数据
|
||||||
|
table.render({
|
||||||
|
elem: '#test-table-data'
|
||||||
|
,cols: [[ //标题栏
|
||||||
|
{field: 'id', title: 'ID', width: 80, sort: true}
|
||||||
|
,{field: 'username', title: '用户名', width: 120}
|
||||||
|
,{field: 'email', title: '邮箱', minWidth: 150}
|
||||||
|
,{field: 'sign', title: '签名', minWidth: 160}
|
||||||
|
,{field: 'sex', title: '性别', width: 80}
|
||||||
|
,{field: 'city', title: '城市', width: 100}
|
||||||
|
,{field: 'experience', title: '积分', width: 80, sort: true}
|
||||||
|
]]
|
||||||
|
,data: [{
|
||||||
|
"id": "10001"
|
||||||
|
,"username": "杜甫"
|
||||||
|
,"email": "xianxin@layui.com"
|
||||||
|
,"sex": "男"
|
||||||
|
,"city": "浙江杭州"
|
||||||
|
,"sign": "人生恰似一场修行"
|
||||||
|
,"experience": "116"
|
||||||
|
,"ip": "192.168.0.8"
|
||||||
|
,"logins": "108"
|
||||||
|
,"joinTime": "2016-10-14"
|
||||||
|
}, {
|
||||||
|
"id": "10002"
|
||||||
|
,"username": "李白"
|
||||||
|
,"email": "xianxin@layui.com"
|
||||||
|
,"sex": "男"
|
||||||
|
,"city": "浙江杭州"
|
||||||
|
,"sign": "人生恰似一场修行"
|
||||||
|
,"experience": "12"
|
||||||
|
,"ip": "192.168.0.8"
|
||||||
|
,"logins": "106"
|
||||||
|
,"joinTime": "2016-10-14"
|
||||||
|
,"LAY_CHECKED": true
|
||||||
|
}, {
|
||||||
|
"id": "10003"
|
||||||
|
,"username": "王勃"
|
||||||
|
,"email": "xianxin@layui.com"
|
||||||
|
,"sex": "男"
|
||||||
|
,"city": "浙江杭州"
|
||||||
|
,"sign": "人生恰似一场修行"
|
||||||
|
,"experience": "65"
|
||||||
|
,"ip": "192.168.0.8"
|
||||||
|
,"logins": "106"
|
||||||
|
,"joinTime": "2016-10-14"
|
||||||
|
}, {
|
||||||
|
"id": "10004"
|
||||||
|
,"username": "贤心"
|
||||||
|
,"email": "xianxin@layui.com"
|
||||||
|
,"sex": "男"
|
||||||
|
,"city": "浙江杭州"
|
||||||
|
,"sign": "人生恰似一场修行"
|
||||||
|
,"experience": "666"
|
||||||
|
,"ip": "192.168.0.8"
|
||||||
|
,"logins": "106"
|
||||||
|
,"joinTime": "2016-10-14"
|
||||||
|
}, {
|
||||||
|
"id": "10005"
|
||||||
|
,"username": "贤心"
|
||||||
|
,"email": "xianxin@layui.com"
|
||||||
|
,"sex": "男"
|
||||||
|
,"city": "浙江杭州"
|
||||||
|
,"sign": "人生恰似一场修行"
|
||||||
|
,"experience": "86"
|
||||||
|
,"ip": "192.168.0.8"
|
||||||
|
,"logins": "106"
|
||||||
|
,"joinTime": "2016-10-14"
|
||||||
|
}, {
|
||||||
|
"id": "10006"
|
||||||
|
,"username": "贤心"
|
||||||
|
,"email": "xianxin@layui.com"
|
||||||
|
,"sex": "男"
|
||||||
|
,"city": "浙江杭州"
|
||||||
|
,"sign": "人生恰似一场修行"
|
||||||
|
,"experience": "12"
|
||||||
|
,"ip": "192.168.0.8"
|
||||||
|
,"logins": "106"
|
||||||
|
,"joinTime": "2016-10-14"
|
||||||
|
}, {
|
||||||
|
"id": "10007"
|
||||||
|
,"username": "贤心"
|
||||||
|
,"email": "xianxin@layui.com"
|
||||||
|
,"sex": "男"
|
||||||
|
,"city": "浙江杭州"
|
||||||
|
,"sign": "人生恰似一场修行"
|
||||||
|
,"experience": "16"
|
||||||
|
,"ip": "192.168.0.8"
|
||||||
|
,"logins": "106"
|
||||||
|
,"joinTime": "2016-10-14"
|
||||||
|
}, {
|
||||||
|
"id": "10008"
|
||||||
|
,"username": "贤心"
|
||||||
|
,"email": "xianxin@layui.com"
|
||||||
|
,"sex": "男"
|
||||||
|
,"city": "浙江杭州"
|
||||||
|
,"sign": "人生恰似一场修行"
|
||||||
|
,"experience": "106"
|
||||||
|
,"ip": "192.168.0.8"
|
||||||
|
,"logins": "106"
|
||||||
|
,"joinTime": "2016-10-14"
|
||||||
|
}]
|
||||||
|
//,skin: 'line' //表格风格
|
||||||
|
,even: true
|
||||||
|
//,page: true //是否显示分页
|
||||||
|
//,limits: [5, 7, 10]
|
||||||
|
//,limit: 5 //每页默认显示的数量
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
53
dist/views/component/table/fixed.html
vendored
Normal file
53
dist/views/component/table/fixed.html
vendored
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>固定列 - 数据表格</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>数据表格</cite></a>
|
||||||
|
<a><cite>固定列</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">固定列</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<table class="layui-hide" id="test-table-fixed"></table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'table'], function(){
|
||||||
|
var table = layui.table
|
||||||
|
,admin = layui.admin;
|
||||||
|
|
||||||
|
table.render({
|
||||||
|
elem: '#test-table-fixed'
|
||||||
|
,url: './json/table/user.js'
|
||||||
|
,width: admin.screen() > 1 ? 892 : ''
|
||||||
|
,height: 332
|
||||||
|
,cols: [[
|
||||||
|
{type:'checkbox', fixed: 'left'}
|
||||||
|
,{field:'id', width:80, title: 'ID', sort: true, fixed: 'left'}
|
||||||
|
,{field:'username', width:80, title: '用户名'}
|
||||||
|
,{field:'sex', width:80, title: '性别', sort: true}
|
||||||
|
,{field:'city', width:80, title: '城市'}
|
||||||
|
,{field:'sign', width: 219, title: '签名'}
|
||||||
|
,{field:'experience', width:80, title: '积分', sort: true}
|
||||||
|
,{field:'score', width:80, title: '评分', sort: true}
|
||||||
|
,{field:'classify', width:80, title: '职业'}
|
||||||
|
,{field:'wealth', width:120, title: '财富', sort: true, fixed: 'right'}
|
||||||
|
]]
|
||||||
|
,page: true
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
82
dist/views/component/table/form.html
vendored
Normal file
82
dist/views/component/table/form.html
vendored
Normal file
@ -0,0 +1,82 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>加入表单元素 - 数据表格</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>数据表格</cite></a>
|
||||||
|
<a><cite>加入表单元素</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">加入表单元素</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<table class="layui-hide" id="test-table-form"></table>
|
||||||
|
|
||||||
|
<script type="text/html" id="test-table-switchTpl">
|
||||||
|
<!-- 这里的 checked 的状态只是演示 -->
|
||||||
|
<input type="checkbox" name="sex" lay-skin="switch" lay-text="女|男" lay-filter="test-table-sexDemo"
|
||||||
|
value="{{ d.id }}" data-json="{{ encodeURIComponent(JSON.stringify(d)) }}" {{ d.id == 10003 ? 'checked' : '' }}>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="text/html" id="test-table-checkboxTpl">
|
||||||
|
<!-- 这里的 checked 的状态只是演示 -->
|
||||||
|
<input type="checkbox" name="lock" title="锁定" lay-filter="test-table-lockDemo"
|
||||||
|
value="{{d.id}}" data-json="{{ encodeURIComponent(JSON.stringify(d)) }}" {{ d.id == 10006 ? 'checked' : '' }}>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'table', 'form'], function(){
|
||||||
|
var table = layui.table
|
||||||
|
,form = layui.form
|
||||||
|
,$ = layui.$;
|
||||||
|
|
||||||
|
table.render({
|
||||||
|
elem: '#test-table-form'
|
||||||
|
,url:'/demo/table/user/'
|
||||||
|
,cellMinWidth: 80
|
||||||
|
,cols: [[
|
||||||
|
{type:'numbers'}
|
||||||
|
,{type: 'checkbox'}
|
||||||
|
,{field:'id', title:'ID', width:100, unresize: true, sort: true}
|
||||||
|
,{field:'username', title:'用户名'}
|
||||||
|
,{field:'city', title:'城市'}
|
||||||
|
,{field:'wealth', title: '财富', minWidth:120, sort: true}
|
||||||
|
,{field:'sex', title:'性别', width:85, templet: '#test-table-switchTpl', unresize: true}
|
||||||
|
,{field:'lock', title:'是否锁定', width:110, templet: '#test-table-checkboxTpl', unresize: true}
|
||||||
|
]]
|
||||||
|
,page: true
|
||||||
|
});
|
||||||
|
|
||||||
|
//监听性别操作
|
||||||
|
form.on('switch(test-table-sexDemo)', function(obj){
|
||||||
|
var json = JSON.parse(decodeURIComponent($(this).data('json')));
|
||||||
|
layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
|
||||||
|
|
||||||
|
json = table.clearCacheKey(json);
|
||||||
|
console.log(json); //当前行数据
|
||||||
|
});
|
||||||
|
|
||||||
|
//监听锁定操作
|
||||||
|
form.on('checkbox(test-table-lockDemo)', function(obj){
|
||||||
|
var json = JSON.parse(decodeURIComponent($(this).data('json')));
|
||||||
|
layer.tips(this.value + ' ' + this.name + '：'+ obj.elem.checked, obj.othis);
|
||||||
|
|
||||||
|
json = table.clearCacheKey(json);
|
||||||
|
console.log(json); //当前行数据
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
51
dist/views/component/table/height.html
vendored
Normal file
51
dist/views/component/table/height.html
vendored
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>高度最大适应 - 数据表格</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>数据表格</cite></a>
|
||||||
|
<a><cite>高度最大适应</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">高度最大适应</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<table class="layui-hide" id="test-table-height"></table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'table'], function(){
|
||||||
|
var admin = layui.admin
|
||||||
|
,table = layui.table;
|
||||||
|
|
||||||
|
table.render({
|
||||||
|
elem: '#test-table-height'
|
||||||
|
,url: './json/table/user30.js'
|
||||||
|
,height: 'full-100'
|
||||||
|
,cellMinWidth: 80
|
||||||
|
,page: true
|
||||||
|
,limit: 30
|
||||||
|
,cols: [[
|
||||||
|
{type:'checkbox'}
|
||||||
|
,{field:'id', title: 'ID', width:100, sort: true}
|
||||||
|
,{field:'username', title: '用户名', width:100}
|
||||||
|
,{field:'sex', title: '性别', width:100, sort: true}
|
||||||
|
,{field:'sign', title: '签名', minWidth: 150}
|
||||||
|
,{field:'experience', title: '积分', sort: true, align: 'right'}
|
||||||
|
,{field:'score', title: '评分', sort: true, minWidth: 100, align: 'right'}
|
||||||
|
]]
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
48
dist/views/component/table/initSort.html
vendored
Normal file
48
dist/views/component/table/initSort.html
vendored
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>设置初始排序 - 数据表格</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>数据表格</cite></a>
|
||||||
|
<a><cite>设置初始排序</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">设置初始排序</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<table class="layui-hide" id="test-table-initSort"></table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'table'], function(){
|
||||||
|
var table = layui.table;
|
||||||
|
|
||||||
|
table.render({
|
||||||
|
elem: '#test-table-initSort'
|
||||||
|
,height: 313
|
||||||
|
,url: './json/table/user.js'
|
||||||
|
,initSort: {
|
||||||
|
field: 'wealth'
|
||||||
|
,type: 'desc'
|
||||||
|
}
|
||||||
|
,cols: [[
|
||||||
|
{field:'id', title: 'ID', width:80}
|
||||||
|
,{field:'username', title: '用户名', width:80}
|
||||||
|
,{field:'score', title: '评分', width:80, sort: true}
|
||||||
|
,{field:'wealth', title: '财富', sort: true, minWidth: 150}
|
||||||
|
]]
|
||||||
|
})
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
67
dist/views/component/table/onrow.html
vendored
Normal file
67
dist/views/component/table/onrow.html
vendored
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>监听行事件 - 数据表格</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>数据表格</cite></a>
|
||||||
|
<a><cite>监听行事件</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">监听行事件</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
|
||||||
|
<table class="layui-hide" id="test-table-onrow" lay-filter="test-table-onrow"></table>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'table'], function(){
|
||||||
|
var admin = layui.admin
|
||||||
|
,table = layui.table;
|
||||||
|
|
||||||
|
table.render({
|
||||||
|
elem: '#test-table-onrow'
|
||||||
|
,url:'/test/table/demo1.json'
|
||||||
|
,cols: [[
|
||||||
|
{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
|
||||||
|
,{field:'username', title:'用户名', width:120}
|
||||||
|
,{field:'email', title:'邮箱', width:150, templet: function(res){
|
||||||
|
return '<em>'+ res.email +'</em>'
|
||||||
|
}}
|
||||||
|
,{field:'sex', title:'性别', width:80, sort: true}
|
||||||
|
,{field:'city', title:'城市', width:100}
|
||||||
|
,{field:'sign', title:'签名'}
|
||||||
|
,{field:'experience', title:'积分', width:80, sort: true}
|
||||||
|
,{field:'ip', title:'IP', width:120}
|
||||||
|
,{field:'logins', title:'登入次数', width:100, sort: true}
|
||||||
|
,{field:'joinTime', title:'加入时间', width:120}
|
||||||
|
]]
|
||||||
|
,page: true
|
||||||
|
});
|
||||||
|
|
||||||
|
//监听行单击事件（单击事件为：rowDouble）
|
||||||
|
table.on('row(test-table-onrow)', function(obj){
|
||||||
|
var data = obj.data;
|
||||||
|
|
||||||
|
layer.alert(JSON.stringify(data), {
|
||||||
|
title: '当前行数据：'
|
||||||
|
});
|
||||||
|
|
||||||
|
//标注选中样式
|
||||||
|
obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
107
dist/views/component/table/operate.html
vendored
Normal file
107
dist/views/component/table/operate.html
vendored
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>数据操作 - 数据表格</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>数据表格</cite></a>
|
||||||
|
<a><cite>数据操作</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">数据操作</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div class="layui-btn-group test-table-operate-btn" style="margin-bottom: 10px;">
|
||||||
|
<button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
|
||||||
|
<button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
|
||||||
|
<button class="layui-btn" data-type="isAll">验证是否全选</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table class="layui-hide" id="test-table-operate" lay-filter="test-table-operate"></table>
|
||||||
|
|
||||||
|
<script type="text/html" id="test-table-operate-barDemo">
|
||||||
|
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
|
||||||
|
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
|
||||||
|
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'table'], function(){
|
||||||
|
var table = layui.table
|
||||||
|
,admin = layui.admin;
|
||||||
|
|
||||||
|
table.render({
|
||||||
|
elem: '#test-table-operate'
|
||||||
|
,url: './json/table/user.js'
|
||||||
|
,width: admin.screen() > 1 ? 892 : ''
|
||||||
|
,height: 332
|
||||||
|
,cols: [[
|
||||||
|
{type:'checkbox', fixed: 'left'}
|
||||||
|
,{field:'id', width:80, title: 'ID', sort: true, fixed: 'left'}
|
||||||
|
,{field:'username', width:80, title: '用户名'}
|
||||||
|
,{field:'sex', width:80, title: '性别', sort: true}
|
||||||
|
,{field:'city', width:80, title: '城市'}
|
||||||
|
,{field:'sign', width: 160, title: '签名'}
|
||||||
|
,{field:'experience', width:80, title: '积分', sort: true}
|
||||||
|
,{field:'wealth', width:135, title: '财富', sort: true}
|
||||||
|
,{field:'classify', width:80, title: '职业'}
|
||||||
|
,{field:'score', width:80, title: '评分', sort: true, fixed: 'right'}
|
||||||
|
,{width:178, align:'center', fixed: 'right', toolbar: '#test-table-operate-barDemo'}
|
||||||
|
]]
|
||||||
|
,page: true
|
||||||
|
});
|
||||||
|
|
||||||
|
//监听表格复选框选择
|
||||||
|
table.on('checkbox(test-table-operate)', function(obj){
|
||||||
|
console.log(obj)
|
||||||
|
});
|
||||||
|
//监听工具条
|
||||||
|
table.on('tool(test-table-operate)', function(obj){
|
||||||
|
var data = obj.data;
|
||||||
|
if(obj.event === 'detail'){
|
||||||
|
layer.msg('ID：'+ data.id + ' 的查看操作');
|
||||||
|
} else if(obj.event === 'del'){
|
||||||
|
layer.confirm('真的删除行么', function(index){
|
||||||
|
obj.del();
|
||||||
|
layer.close(index);
|
||||||
|
});
|
||||||
|
} else if(obj.event === 'edit'){
|
||||||
|
layer.alert('编辑行：<br>'+ JSON.stringify(data))
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
var $ = layui.$, active = {
|
||||||
|
getCheckData: function(){ //获取选中数据
|
||||||
|
var checkStatus = table.checkStatus('test-table-operate')
|
||||||
|
,data = checkStatus.data;
|
||||||
|
layer.alert(JSON.stringify(data));
|
||||||
|
}
|
||||||
|
,getCheckLength: function(){ //获取选中数目
|
||||||
|
var checkStatus = table.checkStatus('test-table-operate')
|
||||||
|
,data = checkStatus.data;
|
||||||
|
layer.msg('选中了：'+ data.length + ' 个');
|
||||||
|
}
|
||||||
|
,isAll: function(){ //验证是否全选
|
||||||
|
var checkStatus = table.checkStatus('test-table-operate');
|
||||||
|
layer.msg(checkStatus.isAll ? '全选': '未全选')
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$('.test-table-operate-btn .layui-btn').on('click', function(){
|
||||||
|
var type = $(this).data('type');
|
||||||
|
active[type] ? active[type].call(this) : '';
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
57
dist/views/component/table/page.html
vendored
Normal file
57
dist/views/component/table/page.html
vendored
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>开启分页 - 数据表格</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>数据表格</cite></a>
|
||||||
|
<a><cite>开启分页</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">开启分页</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<table class="layui-hide" id="test-table-page"></table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'table'], function(){
|
||||||
|
var admin = layui.admin
|
||||||
|
,table = layui.table;
|
||||||
|
|
||||||
|
table.render({
|
||||||
|
elem: '#test-table-page'
|
||||||
|
,url: './json/table/user.js'
|
||||||
|
,cols: [[
|
||||||
|
{field:'id', width:80, title: 'ID', sort: true}
|
||||||
|
,{field:'username', width:80, title: '用户名'}
|
||||||
|
,{field:'sex', width:80, title: '性别', sort: true}
|
||||||
|
,{field:'city', width:80, title: '城市'}
|
||||||
|
,{field:'sign', title: '签名', minWidth: 150}
|
||||||
|
,{field:'experience', width:80, title: '积分', sort: true}
|
||||||
|
,{field:'score', width:80, title: '评分', sort: true}
|
||||||
|
,{field:'classify', width:80, title: '职业'}
|
||||||
|
,{field:'wealth', width:135, title: '财富', sort: true}
|
||||||
|
]]
|
||||||
|
,page: true
|
||||||
|
});
|
||||||
|
|
||||||
|
admin.popup({
|
||||||
|
content: '演示数据均为静态模拟数据，因此【切换分页和条数时】发现数据未变并非 BUG。实际使用时改成真实接口即可。'
|
||||||
|
,area: '300px'
|
||||||
|
,offset: '15px'
|
||||||
|
,shade: false
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
65
dist/views/component/table/parseData.html
vendored
Normal file
65
dist/views/component/table/parseData.html
vendored
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>解析任意数据格式 - 数据表格</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>数据表格</cite></a>
|
||||||
|
<a><cite>解析任意数据格式</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">解析任意数据格式</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<blockquote class="layui-elem-quote layui-text">
|
||||||
|
尽管本示例中的原始数据：<a href="./json/table/demo3.js" target="_blank">./json/table/demo3.js</a>，并不符合 table 组件默认规定的数据格式，但从 layui 2.4.0 开始，新增的 parseData 回调可以将原始的任意格式的数据重新解析成 table 组件规定的数据格式。具体可以点击上方查看代码。
|
||||||
|
</blockquote>
|
||||||
|
|
||||||
|
<table class="layui-hide" id="test-table-parseData" lay-filter="test-table-parseData"></table>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'table'], function(){
|
||||||
|
var admin = layui.admin
|
||||||
|
,table = layui.table;
|
||||||
|
|
||||||
|
table.render({
|
||||||
|
elem: '#test-table-parseData'
|
||||||
|
,url: './json/table/demo3.js'
|
||||||
|
,toolbar: true
|
||||||
|
,title: '用户数据表'
|
||||||
|
,totalRow: true
|
||||||
|
,cellMinWidth: 120
|
||||||
|
,cols: [[
|
||||||
|
{field:'id', title:'ID', width:80, sort: true, totalRowText: '合计行'}
|
||||||
|
,{field:'username', title:'用户名', edit: 'text'}
|
||||||
|
,{field:'experience', title:'积分', sort: true, totalRow: true}
|
||||||
|
,{field:'logins', title:'登入次数', sort: true, totalRow: true}
|
||||||
|
]]
|
||||||
|
,page: true
|
||||||
|
,response: {
|
||||||
|
statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
|
||||||
|
}
|
||||||
|
,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
|
||||||
|
return {
|
||||||
|
"code": res.status, //解析接口状态
|
||||||
|
"msg": res.message, //解析提示文本
|
||||||
|
"count": res.total, //解析数据长度
|
||||||
|
"data": res.rows.item //解析数据列表
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
70
dist/views/component/table/radio.html
vendored
Normal file
70
dist/views/component/table/radio.html
vendored
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>开启单选框 - 数据表格</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>数据表格</cite></a>
|
||||||
|
<a><cite>开启单选框</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">开启单选框</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<table class="layui-hide" id="test-table-radio" lay-filter="test-table-radio"></table>
|
||||||
|
|
||||||
|
<script type="text/html" id="test-table-radio-toolbarDemo">
|
||||||
|
<div class="layui-btn-container">
|
||||||
|
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
|
||||||
|
</div>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'table'], function(){
|
||||||
|
var admin = layui.admin
|
||||||
|
,table = layui.table;
|
||||||
|
|
||||||
|
table.render({
|
||||||
|
elem: '#test-table-radio'
|
||||||
|
,url: './json/table/user.js'
|
||||||
|
,toolbar: '#test-table-radio-toolbarDemo'
|
||||||
|
,cols: [[
|
||||||
|
{type:'radio'}
|
||||||
|
,{field:'id', width:80, title: 'ID', sort: true}
|
||||||
|
,{field:'username', width:80, title: '用户名'}
|
||||||
|
,{field:'sex', width:80, title: '性别', sort: true}
|
||||||
|
,{field:'city', width:80, title: '城市'}
|
||||||
|
,{field:'sign', title: '签名', minWidth: 100}
|
||||||
|
,{field:'experience', width:80, title: '积分', sort: true}
|
||||||
|
,{field:'score', width:80, title: '评分', sort: true}
|
||||||
|
,{field:'classify', width:80, title: '职业'}
|
||||||
|
,{field:'wealth', width:135, title: '财富', sort: true}
|
||||||
|
]]
|
||||||
|
,page: true
|
||||||
|
});
|
||||||
|
|
||||||
|
//头工具栏事件
|
||||||
|
table.on('toolbar(test-table-radio)', function(obj){
|
||||||
|
var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
|
||||||
|
switch(obj.event){
|
||||||
|
case 'getCheckData':
|
||||||
|
var data = checkStatus.data; //获取选中行数据
|
||||||
|
layer.alert(JSON.stringify(data));
|
||||||
|
break;
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
87
dist/views/component/table/reload.html
vendored
Normal file
87
dist/views/component/table/reload.html
vendored
Normal file
@ -0,0 +1,87 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>数据表格的重载 - 数据表格</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>数据表格</cite></a>
|
||||||
|
<a><cite>数据表格的重载</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">数据表格的重载</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
|
||||||
|
<div class="test-table-reload-btn" style="margin-bottom: 10px;">
|
||||||
|
搜索ID：
|
||||||
|
<div class="layui-inline">
|
||||||
|
<input class="layui-input" name="id" id="test-table-demoReload" autocomplete="off">
|
||||||
|
</div>
|
||||||
|
<button class="layui-btn" data-type="reload">搜索</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table class="layui-hide" id="test-table-reload" lay-filter="user"></table>
|
||||||
|
|
||||||
|
<blockquote class="layui-elem-quote">此处由于是静态模拟数据，所以搜索后重载的结果没变，这并非是 BUG。实际使用时改成真实接口并根据搜索的字段筛选出对应的数据即可。</blockquote>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'table'], function(){
|
||||||
|
var table = layui.table;
|
||||||
|
|
||||||
|
//方法级渲染
|
||||||
|
table.render({
|
||||||
|
elem: '#test-table-reload'
|
||||||
|
,url: './json/table/user.js'
|
||||||
|
,cols: [[
|
||||||
|
{checkbox: true, fixed: true}
|
||||||
|
,{field:'id', title: 'ID', width:80, sort: true, fixed: true}
|
||||||
|
,{field:'username', title: '用户名', width:80}
|
||||||
|
,{field:'sex', title: '性别', width:80, sort: true}
|
||||||
|
,{field:'city', title: '城市', width:80}
|
||||||
|
,{field:'sign', title: '签名'}
|
||||||
|
,{field:'experience', title: '积分', sort: true, width:80}
|
||||||
|
,{field:'score', title: '评分', sort: true, width:80}
|
||||||
|
,{field:'classify', title: '职业', width:80}
|
||||||
|
,{field:'wealth', title: '财富', sort: true, width:135}
|
||||||
|
]]
|
||||||
|
,page: true
|
||||||
|
,height: 315
|
||||||
|
});
|
||||||
|
|
||||||
|
var $ = layui.$, active = {
|
||||||
|
reload: function(){
|
||||||
|
var demoReload = $('#test-table-demoReload');
|
||||||
|
|
||||||
|
//执行重载
|
||||||
|
table.reload('test-table-reload', {
|
||||||
|
page: {
|
||||||
|
curr: 1 //重新从第 1 页开始
|
||||||
|
}
|
||||||
|
,where: {
|
||||||
|
key: {
|
||||||
|
id: demoReload.val()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$('.test-table-reload-btn .layui-btn').on('click', function(){
|
||||||
|
var type = $(this).data('type');
|
||||||
|
active[type] ? active[type].call(this) : '';
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
58
dist/views/component/table/resetPage.html
vendored
Normal file
58
dist/views/component/table/resetPage.html
vendored
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>自定义分页 - 数据表格</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>数据表格</cite></a>
|
||||||
|
<a><cite>自定义分页</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">自定义分页</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<table class="layui-hide" id="test-table-resetPage"></table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'table'], function(){
|
||||||
|
var admin = layui.admin
|
||||||
|
,table = layui.table;
|
||||||
|
|
||||||
|
table.render({
|
||||||
|
elem: '#test-table-resetPage'
|
||||||
|
,url: './json/table/user.js'
|
||||||
|
,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
|
||||||
|
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
|
||||||
|
//,curr: 5 //设定初始在第 5 页
|
||||||
|
,groups: 1 //只显示 1 个连续页码
|
||||||
|
,first: false //不显示首页
|
||||||
|
,last: false //不显示尾页
|
||||||
|
|
||||||
|
}
|
||||||
|
,cols: [[
|
||||||
|
{field:'id', width:80, title: 'ID', sort: true}
|
||||||
|
,{field:'username', width:100, title: '用户名'}
|
||||||
|
,{field:'sex', width:80, title: '性别', sort: true}
|
||||||
|
,{field:'city', width:80, title: '城市'}
|
||||||
|
,{field:'sign', title: '签名', minWidth: 150}
|
||||||
|
,{field:'experience', width:80, title: '积分', sort: true}
|
||||||
|
,{field:'score', width:80, title: '评分', sort: true}
|
||||||
|
,{field:'classify', width:80, title: '职业'}
|
||||||
|
,{field:'wealth', width:135, title: '财富', sort: true}
|
||||||
|
]]
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
48
dist/views/component/table/simple.html
vendored
Normal file
48
dist/views/component/table/simple.html
vendored
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>简单用法 - 数据表格</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>数据表格</cite></a>
|
||||||
|
<a><cite>简单用法</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">简单用法</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<table class="layui-hide" id="test-table-simple"></table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'table'], function(){
|
||||||
|
var table = layui.table;
|
||||||
|
|
||||||
|
table.render({
|
||||||
|
elem: '#test-table-simple'
|
||||||
|
,url: './json/table/user.js'
|
||||||
|
,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
|
||||||
|
,cols: [[
|
||||||
|
{field:'id', width:80, title: 'ID', sort: true}
|
||||||
|
,{field:'username', width:80, title: '用户名'}
|
||||||
|
,{field:'sex', width:80, title: '性别', sort: true}
|
||||||
|
,{field:'city', width:80, title: '城市'}
|
||||||
|
,{field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
|
||||||
|
,{field:'experience', title: '积分', sort: true}
|
||||||
|
,{field:'score', title: '评分', sort: true}
|
||||||
|
,{field:'classify', title: '职业'}
|
||||||
|
,{field:'wealth', width:137, title: '财富', sort: true}
|
||||||
|
]]
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
309
dist/views/component/table/static.html
vendored
Normal file
309
dist/views/component/table/static.html
vendored
Normal file
@ -0,0 +1,309 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>静态表格</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>静态表格</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">默认风格</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<table class="layui-table">
|
||||||
|
<colgroup>
|
||||||
|
<col width="150">
|
||||||
|
<col width="150">
|
||||||
|
<col width="200">
|
||||||
|
<col>
|
||||||
|
</colgroup>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>人物</th>
|
||||||
|
<th>民族</th>
|
||||||
|
<th>出场时间</th>
|
||||||
|
<th>格言</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>贤心</td>
|
||||||
|
<td>汉族</td>
|
||||||
|
<td>1989-10-14</td>
|
||||||
|
<td>人生似修行</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>张爱玲</td>
|
||||||
|
<td>汉族</td>
|
||||||
|
<td>1920-09-30</td>
|
||||||
|
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Helen Keller</td>
|
||||||
|
<td>拉丁美裔</td>
|
||||||
|
<td>1880-06-27</td>
|
||||||
|
<td> Life is either a daring adventure or nothing.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>岳飞</td>
|
||||||
|
<td>汉族</td>
|
||||||
|
<td>1103-北宋崇宁二年</td>
|
||||||
|
<td>教科书再滥改，也抹不去“民族英雄”的事实</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>孟子</td>
|
||||||
|
<td>华夏族（汉族）</td>
|
||||||
|
<td>公元前-372年</td>
|
||||||
|
<td>猿强，则国强。国强，则猿更强！ </td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">行边框风格</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<table class="layui-table" lay-skin="line">
|
||||||
|
<colgroup>
|
||||||
|
<col width="150">
|
||||||
|
<col width="150">
|
||||||
|
<col width="200">
|
||||||
|
<col>
|
||||||
|
</colgroup>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>人物</th>
|
||||||
|
<th>民族</th>
|
||||||
|
<th>出场时间</th>
|
||||||
|
<th>格言</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>贤心</td>
|
||||||
|
<td>汉族</td>
|
||||||
|
<td>1989-10-14</td>
|
||||||
|
<td>人生似修行</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>张爱玲</td>
|
||||||
|
<td>汉族</td>
|
||||||
|
<td>1920-09-30</td>
|
||||||
|
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Helen Keller</td>
|
||||||
|
<td>拉丁美裔</td>
|
||||||
|
<td>1880-06-27</td>
|
||||||
|
<td> Life is either a daring adventure or nothing.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>岳飞</td>
|
||||||
|
<td>汉族</td>
|
||||||
|
<td>1103-北宋崇宁二年</td>
|
||||||
|
<td>教科书再滥改，也抹不去“民族英雄”的事实</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>孟子</td>
|
||||||
|
<td>华夏族（汉族）</td>
|
||||||
|
<td>公元前-372年</td>
|
||||||
|
<td>猿强，则国强。国强，则猿更强！ </td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">列边框风格</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<table class="layui-table" lay-even="" lay-skin="row">
|
||||||
|
<colgroup>
|
||||||
|
<col width="150">
|
||||||
|
<col width="150">
|
||||||
|
<col width="200">
|
||||||
|
<col>
|
||||||
|
</colgroup>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>人物</th>
|
||||||
|
<th>民族</th>
|
||||||
|
<th>出场时间</th>
|
||||||
|
<th>格言</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>贤心</td>
|
||||||
|
<td>汉族</td>
|
||||||
|
<td>1989-10-14</td>
|
||||||
|
<td>人生似修行</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>张爱玲</td>
|
||||||
|
<td>汉族</td>
|
||||||
|
<td>1920-09-30</td>
|
||||||
|
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Helen Keller</td>
|
||||||
|
<td>拉丁美裔</td>
|
||||||
|
<td>1880-06-27</td>
|
||||||
|
<td> Life is either a daring adventure or nothing.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>岳飞</td>
|
||||||
|
<td>汉族</td>
|
||||||
|
<td>1103-北宋崇宁二年</td>
|
||||||
|
<td>教科书再滥改，也抹不去“民族英雄”的事实</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>孟子</td>
|
||||||
|
<td>华夏族（汉族）</td>
|
||||||
|
<td>公元前-372年</td>
|
||||||
|
<td>猿强，则国强。国强，则猿更强！ </td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">无边框风格</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<table class="layui-table" lay-even="" lay-skin="nob">
|
||||||
|
<colgroup>
|
||||||
|
<col width="150">
|
||||||
|
<col width="150">
|
||||||
|
<col width="200">
|
||||||
|
<col>
|
||||||
|
</colgroup>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>人物</th>
|
||||||
|
<th>民族</th>
|
||||||
|
<th>出场时间</th>
|
||||||
|
<th>格言</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>贤心</td>
|
||||||
|
<td>汉族</td>
|
||||||
|
<td>1989-10-14</td>
|
||||||
|
<td>人生似修行</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>张爱玲</td>
|
||||||
|
<td>汉族</td>
|
||||||
|
<td>1920-09-30</td>
|
||||||
|
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Helen Keller</td>
|
||||||
|
<td>拉丁美裔</td>
|
||||||
|
<td>1880-06-27</td>
|
||||||
|
<td> Life is either a daring adventure or nothing.</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>岳飞</td>
|
||||||
|
<td>汉族</td>
|
||||||
|
<td>1103-北宋崇宁二年</td>
|
||||||
|
<td>教科书再滥改，也抹不去“民族英雄”的事实</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>孟子</td>
|
||||||
|
<td>华夏族（汉族）</td>
|
||||||
|
<td>公元前-372年</td>
|
||||||
|
<td>猿强，则国强。国强，则猿更强！ </td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">其它尺寸</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<table class="layui-table" lay-size="lg">
|
||||||
|
<colgroup>
|
||||||
|
<col width="150">
|
||||||
|
<col width="200">
|
||||||
|
<col>
|
||||||
|
</colgroup>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>昵称</th>
|
||||||
|
<th>加入时间</th>
|
||||||
|
<th>签名</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>贤心</td>
|
||||||
|
<td>2016-11-29</td>
|
||||||
|
<td>人生就像是一场修行</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>许闲心</td>
|
||||||
|
<td>2016-11-28</td>
|
||||||
|
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>sentsin</td>
|
||||||
|
<td>2016-11-27</td>
|
||||||
|
<td> Life is either a daring adventure or nothing.</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<table class="layui-table" lay-size="sm">
|
||||||
|
<colgroup>
|
||||||
|
<col width="150">
|
||||||
|
<col width="200">
|
||||||
|
<col>
|
||||||
|
</colgroup>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>昵称</th>
|
||||||
|
<th>加入时间</th>
|
||||||
|
<th>签名</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>贤心</td>
|
||||||
|
<td>2016-11-29</td>
|
||||||
|
<td>人生就像是一场修行</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>许闲心</td>
|
||||||
|
<td>2016-11-28</td>
|
||||||
|
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>sentsin</td>
|
||||||
|
<td>2016-11-27</td>
|
||||||
|
<td> Life is either a daring adventure or nothing.</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin'])
|
||||||
|
</script>
|
||||||
63
dist/views/component/table/style.html
vendored
Normal file
63
dist/views/component/table/style.html
vendored
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>设置单元格样式 - 数据表格</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>数据表格</cite></a>
|
||||||
|
<a><cite>设置单元格样式</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">设置单元格样式</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<table class="layui-hide" id="test-table-style"></table>
|
||||||
|
|
||||||
|
<script type="text/html" id="test-table-usernameTpl">
|
||||||
|
<a href="/?table-demo-id={{d.id}}" class="layui-table-link" target="_blank">{{ d.username }}</a>
|
||||||
|
</script>
|
||||||
|
<script type="text/html" id="test-table-sexTpl">
|
||||||
|
{{# if(d.sex === '女'){ }}
|
||||||
|
<span style="color: #F581B1;">{{ d.sex }}</span>
|
||||||
|
{{# } else { }}
|
||||||
|
{{ d.sex }}
|
||||||
|
{{# } }}
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'table'], function(){
|
||||||
|
var table = layui.table;
|
||||||
|
|
||||||
|
table.render({
|
||||||
|
elem: '#test-table-style'
|
||||||
|
,url: './json/table/user.js'
|
||||||
|
,height: 310
|
||||||
|
,cols: [[
|
||||||
|
{field:'id', title:'ID', width:80, sort: true}
|
||||||
|
,{field:'username', title:'用户名', width:80, templet: '#usernameTpl'}
|
||||||
|
,{field:'sex', title:'性别', width:80, sort: true, templet: '#sexTpl'}
|
||||||
|
,{field:'city', title:'城市', width:80}
|
||||||
|
,{field:'sign', title:'签名'}
|
||||||
|
,{field:'experience', title:'积分', width:80, sort: true, style:'background-color: #eee;'}
|
||||||
|
,{field:'score', title:'评分', width:80, sort: true}
|
||||||
|
,{field:'classify', title:'职业', width:80, style:'background-color: #009688; color: #fff;'}
|
||||||
|
,{field:'wealth', title:'财富', width:135, sort: true}
|
||||||
|
]]
|
||||||
|
,page: true
|
||||||
|
,skin: 'row'
|
||||||
|
,even: true
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
96
dist/views/component/table/thead.html
vendored
Normal file
96
dist/views/component/table/thead.html
vendored
Normal file
@ -0,0 +1,96 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>复杂表头 - 数据表格</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>数据表格</cite></a>
|
||||||
|
<a><cite>复杂表头</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">复杂表头</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<fieldset class="layui-elem-field layui-field-title">
|
||||||
|
<legend>常用两级表头</legend>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<table class="layui-table" lay-data="{width:800, page: true, limit: 6, limits:[6]}" lay-filter="test-table-thead1">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th lay-data="{checkbox:true, fixed:'left'}" rowspan="2"></th>
|
||||||
|
<th lay-data="{field:'username', width:150}" rowspan="2">联系人</th>
|
||||||
|
<th lay-data="{align:'center'}" colspan="3">地址</th>
|
||||||
|
<th lay-data="{field:'amount', width:120}" rowspan="2">金额</th>
|
||||||
|
<th lay-data="{fixed: 'right', width: 160, align: 'center', toolbar: '#test-table-thead-barDemo'}" rowspan="2">操作</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th lay-data="{field:'province', width:120}">省</th>
|
||||||
|
<th lay-data="{field:'city', width:120}">市</th>
|
||||||
|
<th lay-data="{field:'zone', width:200}">区</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
|
||||||
|
<fieldset class="layui-elem-field layui-field-title">
|
||||||
|
<legend>更多级表头（可以无限极）</legend>
|
||||||
|
</fieldset>
|
||||||
|
<table class="layui-table" lay-data="{cellMinWidth: 80, page: true}" lay-filter="test-table-thead1">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th lay-data="{field:'username', width:80}" rowspan="3">联系人</th>
|
||||||
|
<th lay-data="{field:'amount', width:120}" rowspan="3">金额</th>
|
||||||
|
<th lay-data="{align:'center'}" colspan="5">地址1</th>
|
||||||
|
<th lay-data="{align:'center'}" colspan="2">地址2</th>
|
||||||
|
<th lay-data="{fixed: 'right', width: 160, align: 'center', toolbar: '#test-table-thead-barDemo'}" rowspan="3">操作</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th lay-data="{field:'province'}" rowspan="2">省</th>
|
||||||
|
<th lay-data="{field:'city'}" rowspan="2">市</th>
|
||||||
|
<th lay-data="{align:'center'}" colspan="3">详细</th>
|
||||||
|
<th lay-data="{field:'province'}" rowspan="2">省</th>
|
||||||
|
<th lay-data="{field:'city'}" rowspan="2">市</th>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th lay-data="{field:'street'}" rowspan="2">街道</th>
|
||||||
|
<th lay-data="{field:'address'}">小区</th>
|
||||||
|
<th lay-data="{field:'house'}">单元</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
<script type="text/html" id="test-table-thead-barDemo">
|
||||||
|
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a>
|
||||||
|
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
<blockquote class="layui-elem-quote">注：上述例子读取的均是静态模拟数据</blockquote>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'table'], function(){
|
||||||
|
var table = layui.table;
|
||||||
|
|
||||||
|
table.init('test-table-thead1', {
|
||||||
|
url: './json/table/demo2.js'
|
||||||
|
});
|
||||||
|
|
||||||
|
table.init('test-table-thead2', {
|
||||||
|
url: './json/table/demo2.js'
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
109
dist/views/component/table/toolbar.html
vendored
Normal file
109
dist/views/component/table/toolbar.html
vendored
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>开启头部工具栏 - 数据表格</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>数据表格</cite></a>
|
||||||
|
<a><cite>开启头部工具栏</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">开启头部工具栏</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<table class="layui-hide" id="test-table-toolbar" lay-filter="test-table-toolbar"></table>
|
||||||
|
|
||||||
|
<script type="text/html" id="test-table-toolbar-toolbarDemo">
|
||||||
|
<div class="layui-btn-container">
|
||||||
|
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
|
||||||
|
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
|
||||||
|
<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
|
||||||
|
</div>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script type="text/html" id="test-table-toolbar-barDemo">
|
||||||
|
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
|
||||||
|
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'table'], function(){
|
||||||
|
var admin = layui.admin
|
||||||
|
,table = layui.table;
|
||||||
|
|
||||||
|
table.render({
|
||||||
|
elem: '#test-table-toolbar'
|
||||||
|
,url:'./json/table/demo.js'
|
||||||
|
,toolbar: '#test-table-toolbar-toolbarDemo'
|
||||||
|
,title: '用户数据表'
|
||||||
|
,cols: [[
|
||||||
|
{type: 'checkbox', fixed: 'left'}
|
||||||
|
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
|
||||||
|
,{field:'username', title:'用户名', width:120, edit: 'text'}
|
||||||
|
,{field:'email', title:'邮箱', width:150, edit: 'text', templet: function(res){
|
||||||
|
return '<em>'+ res.email +'</em>'
|
||||||
|
}}
|
||||||
|
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
|
||||||
|
,{field:'city', title:'城市', width:100}
|
||||||
|
,{field:'sign', title:'签名'}
|
||||||
|
,{field:'experience', title:'积分', width:80, sort: true}
|
||||||
|
,{field:'ip', title:'IP', width:120}
|
||||||
|
,{field:'logins', title:'登入次数', width:100, sort: true}
|
||||||
|
,{field:'joinTime', title:'加入时间', width:120}
|
||||||
|
,{fixed: 'right', title:'操作', toolbar: '#test-table-toolbar-barDemo', width:150}
|
||||||
|
]]
|
||||||
|
,page: true
|
||||||
|
});
|
||||||
|
|
||||||
|
//头工具栏事件
|
||||||
|
table.on('toolbar(test-table-toolbar)', function(obj){
|
||||||
|
var checkStatus = table.checkStatus(obj.config.id);
|
||||||
|
switch(obj.event){
|
||||||
|
case 'getCheckData':
|
||||||
|
var data = checkStatus.data;
|
||||||
|
layer.alert(JSON.stringify(data));
|
||||||
|
break;
|
||||||
|
case 'getCheckLength':
|
||||||
|
var data = checkStatus.data;
|
||||||
|
layer.msg('选中了：'+ data.length + ' 个');
|
||||||
|
break;
|
||||||
|
case 'isAll':
|
||||||
|
layer.msg(checkStatus.isAll ? '全选': '未全选');
|
||||||
|
break;
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
//监听行工具事件
|
||||||
|
table.on('tool(test-table-toolbar)', function(obj){
|
||||||
|
var data = obj.data;
|
||||||
|
if(obj.event === 'del'){
|
||||||
|
layer.confirm('真的删除行么', function(index){
|
||||||
|
obj.del();
|
||||||
|
layer.close(index);
|
||||||
|
});
|
||||||
|
} else if(obj.event === 'edit'){
|
||||||
|
layer.prompt({
|
||||||
|
formType: 2
|
||||||
|
,value: data.email
|
||||||
|
}, function(value, index){
|
||||||
|
obj.update({
|
||||||
|
email: value
|
||||||
|
});
|
||||||
|
layer.close(index);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
75
dist/views/component/table/tostatic.html
vendored
Normal file
75
dist/views/component/table/tostatic.html
vendored
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>转化静态表格 - 数据表格</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>数据表格</cite></a>
|
||||||
|
<a><cite>转化静态表格</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">转化静态表格</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
|
||||||
|
<div class="layui-btn-group test-table-btn" style="margin-bottom: 10px;">
|
||||||
|
<button class="layui-btn" data-type="parseTable">立即转化为数据表格</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table lay-filter="parse-table-demo">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th lay-data="{field:'username', width:200}">昵称</th>
|
||||||
|
<th lay-data="{field:'joinTime', width:150}">加入时间</th>
|
||||||
|
<th lay-data="{field:'sign', minWidth: 180}">签名</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>贤心1</td>
|
||||||
|
<td>2016-11-28</td>
|
||||||
|
<td>人生就像是一场修行 A</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>贤心2</td>
|
||||||
|
<td>2016-11-29</td>
|
||||||
|
<td>人生就像是一场修行 B</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>贤心3</td>
|
||||||
|
<td>2016-11-30</td>
|
||||||
|
<td>人生就像是一场修行 C</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'table'], function(){
|
||||||
|
var table = layui.table;
|
||||||
|
|
||||||
|
var $ = layui.$, active = {
|
||||||
|
parseTable: function(){
|
||||||
|
table.init('parse-table-demo', { //转化静态表格
|
||||||
|
//height: 'full-500'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$('.test-table-btn .layui-btn').on('click', function(){
|
||||||
|
var type = $(this).data('type');
|
||||||
|
active[type] ? active[type].call(this) : '';
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
78
dist/views/component/table/totalRow.html
vendored
Normal file
78
dist/views/component/table/totalRow.html
vendored
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>开启合计行 - 数据表格</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>数据表格</cite></a>
|
||||||
|
<a><cite>开启合计行</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">开启合计行</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<table class="layui-hide" id="test-table-totalRow" lay-filter="test-table-totalRow"></table>
|
||||||
|
|
||||||
|
<script type="text/html" id="test-table-totalRow-toolbarDemo">
|
||||||
|
<div class="layui-btn-container">
|
||||||
|
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
|
||||||
|
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
|
||||||
|
<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
|
||||||
|
</div>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'table'], function(){
|
||||||
|
var admin = layui.admin
|
||||||
|
,table = layui.table;
|
||||||
|
|
||||||
|
table.render({
|
||||||
|
elem: '#test-table-totalRow'
|
||||||
|
,url:'./json/table/demo.js'
|
||||||
|
,toolbar: '#test-table-totalRow-toolbarDemo'
|
||||||
|
,title: '用户数据表'
|
||||||
|
,totalRow: true
|
||||||
|
,cols: [[
|
||||||
|
{type: 'checkbox', fixed: 'left'}
|
||||||
|
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计'}
|
||||||
|
,{field:'username', title:'用户名', width:120, edit: 'text'}
|
||||||
|
,{field:'experience', title:'积分', width:80, sort: true, totalRow: true}
|
||||||
|
,{field:'sex', title:'性别', width:80, edit: 'text', sort: true}
|
||||||
|
,{field:'logins', title:'登入次数', width:100, sort: true, totalRow: true}
|
||||||
|
,{field:'sign', title:'签名'}
|
||||||
|
]]
|
||||||
|
,page: true
|
||||||
|
});
|
||||||
|
|
||||||
|
//头工具栏事件
|
||||||
|
table.on('toolbar(test-table-totalRow)', function(obj){
|
||||||
|
var checkStatus = table.checkStatus(obj.config.id);
|
||||||
|
switch(obj.event){
|
||||||
|
case 'getCheckData':
|
||||||
|
var data = checkStatus.data;
|
||||||
|
layer.alert(JSON.stringify(data));
|
||||||
|
break;
|
||||||
|
case 'getCheckLength':
|
||||||
|
var data = checkStatus.data;
|
||||||
|
layer.msg('选中了：'+ data.length + ' 个');
|
||||||
|
break;
|
||||||
|
case 'isAll':
|
||||||
|
layer.msg(checkStatus.isAll ? '全选': '未全选');
|
||||||
|
break;
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
188
dist/views/component/tabs/index.html
vendored
Normal file
188
dist/views/component/tabs/index.html
vendored
Normal file
@ -0,0 +1,188 @@
|
|||||||
|
|
||||||
|
<title>选项卡组件</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>选项卡</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 这段样式只是用于演示 */
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="layui-fluid" id="component-tabs">
|
||||||
|
<div class="layui-row">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">默认风格</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div class="layui-tab">
|
||||||
|
<ul class="layui-tab-title">
|
||||||
|
<li class="layui-this">网站设置</li>
|
||||||
|
<li>用户管理</li>
|
||||||
|
<li>权限分配</li>
|
||||||
|
<li>商品管理</li>
|
||||||
|
<li>订单管理</li>
|
||||||
|
</ul>
|
||||||
|
<div class="layui-tab-content">
|
||||||
|
<div class="layui-tab-item layui-show">
|
||||||
|
1. 高度默认自适应，也可以随意固宽。
|
||||||
|
<br>2. Tab进行了响应式处理，所以无需担心数量多少。
|
||||||
|
</div>
|
||||||
|
<div class="layui-tab-item">内容2</div>
|
||||||
|
<div class="layui-tab-item">内容3</div>
|
||||||
|
<div class="layui-tab-item">内容4</div>
|
||||||
|
<div class="layui-tab-item">内容5</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">简洁风格</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div class="layui-tab layui-tab-brief" lay-filter="component-tabs-brief">
|
||||||
|
<ul class="layui-tab-title">
|
||||||
|
<li class="layui-this">网站设置</li>
|
||||||
|
<li>用户管理</li>
|
||||||
|
<li>权限分配</li>
|
||||||
|
<li>商品管理</li>
|
||||||
|
<li>订单管理</li>
|
||||||
|
</ul>
|
||||||
|
<div class="layui-tab-content">
|
||||||
|
<div class="layui-tab-item layui-show">
|
||||||
|
你也可以监听 tab 事件
|
||||||
|
</div>
|
||||||
|
<div class="layui-tab-item">内容2</div>
|
||||||
|
<div class="layui-tab-item">内容3</div>
|
||||||
|
<div class="layui-tab-item">内容4</div>
|
||||||
|
<div class="layui-tab-item">内容5</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">卡片风格</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div class="layui-tab layui-tab-card">
|
||||||
|
<ul class="layui-tab-title">
|
||||||
|
<li class="layui-this">网站设置</li>
|
||||||
|
<li>用户管理</li>
|
||||||
|
<li>权限分配</li>
|
||||||
|
<li>商品管理</li>
|
||||||
|
<li>订单管理</li>
|
||||||
|
</ul>
|
||||||
|
<div class="layui-tab-content">
|
||||||
|
<div class="layui-tab-item layui-show">默认宽度是相对于父元素100%适应的，你也可以固定宽度。</div>
|
||||||
|
<div class="layui-tab-item">2</div>
|
||||||
|
<div class="layui-tab-item">3</div>
|
||||||
|
<div class="layui-tab-item">4</div>
|
||||||
|
<div class="layui-tab-item">5</div>
|
||||||
|
<div class="layui-tab-item">6</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">动态操作</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div class="layui-tab" lay-filter="demo" lay-allowclose="true">
|
||||||
|
<ul class="layui-tab-title">
|
||||||
|
<li class="layui-this" lay-id="11">网站设置</li>
|
||||||
|
<li lay-id="22">用户管理</li>
|
||||||
|
<li lay-id="33">权限分配</li>
|
||||||
|
<li lay-id="44">商品管理</li>
|
||||||
|
<li lay-id="55">订单管理</li>
|
||||||
|
</ul>
|
||||||
|
<div class="layui-tab-content">
|
||||||
|
<div class="layui-tab-item layui-show">内容1</div>
|
||||||
|
<div class="layui-tab-item">内容2</div>
|
||||||
|
<div class="layui-tab-item">内容3</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-btn-container">
|
||||||
|
<button class="layui-btn site-demo-active" data-type="tabAdd">新增一个项</button>
|
||||||
|
<button class="layui-btn site-demo-active" data-type="tabDelete">删除：用户管理</button>
|
||||||
|
<button class="layui-btn site-demo-active" data-type="tabChange">切换到：权限分配</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">记录状态</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div class="layui-tab layui-tab-brief" lay-filter="component-tabs-hash">
|
||||||
|
<ul class="layui-tab-title">
|
||||||
|
<li class="layui-this" lay-id="11">网站设置</li>
|
||||||
|
<li lay-id="22">用户管理</li>
|
||||||
|
<li lay-id="33">权限分配</li>
|
||||||
|
<li lay-id="44">商品管理</li>
|
||||||
|
<li lay-id="55">订单管理</li>
|
||||||
|
</ul>
|
||||||
|
<div class="layui-tab-content" style="height: 165px;">
|
||||||
|
<div class="layui-tab-item layui-show">
|
||||||
|
点击该Tab的任一标题，观察地址栏变化，再刷新页面。选项卡将会自动定位到上一次切换的项
|
||||||
|
</div>
|
||||||
|
<div class="layui-tab-item">内容2</div>
|
||||||
|
<div class="layui-tab-item">内容3</div>
|
||||||
|
<div class="layui-tab-item">内容4</div>
|
||||||
|
<div class="layui-tab-item">内容5</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin'], function(){
|
||||||
|
var $ = layui.$
|
||||||
|
,admin = layui.admin
|
||||||
|
,element = layui.element
|
||||||
|
,router = layui.router();
|
||||||
|
|
||||||
|
element.render();
|
||||||
|
|
||||||
|
element.on('tab(component-tabs-brief)', function(obj){
|
||||||
|
layer.msg(obj.index + '：' + this.innerHTML);
|
||||||
|
});
|
||||||
|
|
||||||
|
/* 触发事件 */
|
||||||
|
var active = {
|
||||||
|
tabAdd: function(){
|
||||||
|
/* 新增一个Tab项 */
|
||||||
|
element.tabAdd('demo', {
|
||||||
|
title: '新选项'+ (Math.random()*1000|0) /* 用于演示 */
|
||||||
|
,content: '内容'+ (Math.random()*1000|0)
|
||||||
|
,id: new Date().getTime() /* 实际使用一般是规定好的id，这里以时间戳模拟下 */
|
||||||
|
})
|
||||||
|
}
|
||||||
|
,tabDelete: function(othis){
|
||||||
|
/* 删除指定Tab项 */
|
||||||
|
element.tabDelete('demo', '22');
|
||||||
|
othis.addClass('layui-btn-disabled');
|
||||||
|
}
|
||||||
|
,tabChange: function(){
|
||||||
|
/* 切换到指定Tab项 */
|
||||||
|
element.tabChange('demo', '33');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
$('#component-tabs .site-demo-active').on('click', function(){
|
||||||
|
var othis = $(this), type = othis.data('type');
|
||||||
|
active[type] ? active[type].call(this, othis) : '';
|
||||||
|
});
|
||||||
|
|
||||||
|
/* Hash地址的定位 */
|
||||||
|
var layid = router.hash.replace(/^#layid=/, '');
|
||||||
|
layid && element.tabChange('component-tabs-hash', layid);
|
||||||
|
|
||||||
|
element.on('tab(component-tabs-hash)', function(elem){
|
||||||
|
location.hash = '/'+ layui.router().path.join('/') + '#layid=' + $(this).attr('lay-id');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
121
dist/views/component/timeline/index.html
vendored
Normal file
121
dist/views/component/timeline/index.html
vendored
Normal file
@ -0,0 +1,121 @@
|
|||||||
|
|
||||||
|
<title>时间线</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>时间线</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* 这段样式只是用于演示 */
|
||||||
|
#LAY-component-timeline .layui-card-body{padding: 15px;}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="layui-fluid" id="LAY-component-timeline">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">常规时间线</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
|
||||||
|
<ul class="layui-timeline">
|
||||||
|
<li class="layui-timeline-item">
|
||||||
|
<i class="layui-icon layui-timeline-axis"></i>
|
||||||
|
<div class="layui-timeline-content layui-text">
|
||||||
|
<h3 class="layui-timeline-title">12月28日</h3>
|
||||||
|
<p>
|
||||||
|
一直以来，layui 秉承无偿开源的初心，虔诚致力于服务各层次前后端 Web 开发者，在商业横飞的当今时代，这一信念从未动摇。即便身单力薄，仍然重拾决心，埋头造轮，以尽可能地填补产品本身的缺口。在过去的一段的时间，我一直在寻求持久之道，已维持你眼前所见的一切。而 layuiAdmin 是我们尝试解决的手段之一。我相信真正有爱于 layui 生态的你，定然不会错过这一拥抱吧。
|
||||||
|
</p>
|
||||||
|
<p><br>子曰：君子不用防，小人防不住。请务必通过官网正规渠道，获得 <a href="http://www.layui.com/admin/" target="_blank">layuiAdmin</a>！</p>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="layui-timeline-item">
|
||||||
|
<i class="layui-icon layui-timeline-axis"></i>
|
||||||
|
<div class="layui-timeline-content layui-text">
|
||||||
|
<h3 class="layui-timeline-title">12月25日</h3>
|
||||||
|
<p>又是一年 <em>“圣诞节”</em>，2018 向我们正在走来</p>
|
||||||
|
<ul>
|
||||||
|
<li>叮叮当，叮叮当，铃儿响叮当</li>
|
||||||
|
<li>今晚滑雪多快乐，我们坐在雪橇上</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="layui-timeline-item">
|
||||||
|
<i class="layui-icon layui-timeline-axis"></i>
|
||||||
|
<div class="layui-timeline-content layui-text">
|
||||||
|
<h3 class="layui-timeline-title">12月24日</h3>
|
||||||
|
<p>
|
||||||
|
美丽的夜晚，都是祈祷的人们。<br>他们等待着第二天，收到圣诞老人的礼物。<br><br>
|
||||||
|
</p>
|
||||||
|
<blockquote class="layui-elem-quote">平安夜，天赐平安。愿真善美的事物都能永恒。</blockquote>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="layui-timeline-item">
|
||||||
|
<i class="layui-icon layui-timeline-axis"></i>
|
||||||
|
<div class="layui-timeline-content layui-text">
|
||||||
|
<div class="layui-timeline-title">过去</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">简约时间线</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
|
||||||
|
<ul class="layui-timeline">
|
||||||
|
<li class="layui-timeline-item">
|
||||||
|
<i class="layui-icon layui-timeline-axis"></i>
|
||||||
|
<div class="layui-timeline-content layui-text">
|
||||||
|
<div class="layui-timeline-title">
|
||||||
|
2018年，layui 5.0 发布，并发展成为中国最受欢迎的前端 UI 框架（期望）
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="layui-timeline-item">
|
||||||
|
<i class="layui-icon layui-timeline-axis"></i>
|
||||||
|
<div class="layui-timeline-content layui-text">
|
||||||
|
<div class="layui-timeline-title">2017年，layui 里程碑版本 2.0 发布</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="layui-timeline-item">
|
||||||
|
<i class="layui-icon layui-timeline-axis"></i>
|
||||||
|
<div class="layui-timeline-content layui-text">
|
||||||
|
<div class="layui-timeline-title">2016年，layui 首个版本发布</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="layui-timeline-item">
|
||||||
|
<i class="layui-icon layui-timeline-axis"></i>
|
||||||
|
<div class="layui-timeline-content layui-text">
|
||||||
|
<div class="layui-timeline-title">2015年，layui 孵化</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="layui-timeline-item">
|
||||||
|
<i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>
|
||||||
|
<div class="layui-timeline-content layui-text">
|
||||||
|
<div class="layui-timeline-title">更久前，轮子时代。维护几个独立组件：layer等</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin'], function(){
|
||||||
|
var $ = layui.$
|
||||||
|
,admin = layui.admin
|
||||||
|
,element = layui.element
|
||||||
|
,router = layui.router();
|
||||||
|
|
||||||
|
});
|
||||||
|
</script>
|
||||||
185
dist/views/component/transfer/index.html
vendored
Normal file
185
dist/views/component/transfer/index.html
vendored
Normal file
@ -0,0 +1,185 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>穿梭框组件</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>穿梭框组件</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">基础效果</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-transfer-demo1"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">定义标题及数据源</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-transfer-demo2"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">初始右侧数据集合</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-transfer-demo3"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">显示搜索框</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-transfer-demo4"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">数据格式解析</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-transfer-demo5"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">穿梭时的回调</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-transfer-demo6"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">实例调用</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div class="layui-btn-container">
|
||||||
|
<button type="button" class="layui-btn" lay-demotransferactive="getData">获取右侧数据</button>
|
||||||
|
<button type="button" class="layui-btn" lay-demotransferactive="reload">重载实例</button>
|
||||||
|
</div>
|
||||||
|
<div id="test-transfer-demo7"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'transfer', 'layer', 'util'], function(){
|
||||||
|
var $ = layui.$
|
||||||
|
,transfer = layui.transfer
|
||||||
|
,layer = layui.layer
|
||||||
|
,util = layui.util;
|
||||||
|
|
||||||
|
//模拟数据
|
||||||
|
var data1 = [
|
||||||
|
{"value": "1", "title": "李白"}
|
||||||
|
,{"value": "2", "title": "杜甫"}
|
||||||
|
,{"value": "3", "title": "苏轼"}
|
||||||
|
,{"value": "4", "title": "李清照"}
|
||||||
|
,{"value": "5", "title": "鲁迅", "disabled": true}
|
||||||
|
,{"value": "6", "title": "巴金"}
|
||||||
|
,{"value": "7", "title": "冰心"}
|
||||||
|
,{"value": "8", "title": "矛盾"}
|
||||||
|
,{"value": "9", "title": "贤心"}
|
||||||
|
]
|
||||||
|
|
||||||
|
,data2 = [
|
||||||
|
{"value": "1", "title": "瓦罐汤"}
|
||||||
|
,{"value": "2", "title": "油酥饼"}
|
||||||
|
,{"value": "3", "title": "炸酱面"}
|
||||||
|
,{"value": "4", "title": "串串香", "disabled": true}
|
||||||
|
,{"value": "5", "title": "豆腐脑"}
|
||||||
|
,{"value": "6", "title": "驴打滚"}
|
||||||
|
,{"value": "7", "title": "北京烤鸭"}
|
||||||
|
,{"value": "8", "title": "烤冷面"}
|
||||||
|
,{"value": "9", "title": "毛血旺", "disabled": true}
|
||||||
|
,{"value": "10", "title": "肉夹馍"}
|
||||||
|
,{"value": "11", "title": "臊子面"}
|
||||||
|
,{"value": "12", "title": "凉皮"}
|
||||||
|
,{"value": "13", "title": "羊肉泡馍"}
|
||||||
|
,{"value": "14", "title": "冰糖葫芦", "disabled": true}
|
||||||
|
,{"value": "15", "title": "狼牙土豆"}
|
||||||
|
]
|
||||||
|
|
||||||
|
//基础效果
|
||||||
|
transfer.render({
|
||||||
|
elem: '#test-transfer-demo1'
|
||||||
|
,data: data1
|
||||||
|
})
|
||||||
|
|
||||||
|
//定义标题及数据源
|
||||||
|
transfer.render({
|
||||||
|
elem: '#test-transfer-demo2'
|
||||||
|
,title: ['候选文人', '获奖文人'] //自定义标题
|
||||||
|
,data: data1
|
||||||
|
//,width: 150 //定义宽度
|
||||||
|
,height: 210 //定义高度
|
||||||
|
})
|
||||||
|
|
||||||
|
//初始右侧数据
|
||||||
|
transfer.render({
|
||||||
|
elem: '#test-transfer-demo3'
|
||||||
|
,data: data2
|
||||||
|
,value: ["1", "3", "5", "7", "9", "11"]
|
||||||
|
})
|
||||||
|
|
||||||
|
//显示搜索框
|
||||||
|
transfer.render({
|
||||||
|
elem: '#test-transfer-demo4'
|
||||||
|
,data: data1
|
||||||
|
,title: ['文本墨客', '获奖文人']
|
||||||
|
,showSearch: true
|
||||||
|
})
|
||||||
|
|
||||||
|
//数据格式解析
|
||||||
|
transfer.render({
|
||||||
|
elem: '#test-transfer-demo5'
|
||||||
|
,parseData: function(res){
|
||||||
|
return {
|
||||||
|
"value": res.id //数据值
|
||||||
|
,"title": res.name //数据标题
|
||||||
|
,"disabled": res.disabled //是否禁用
|
||||||
|
,"checked": res.checked //是否选中
|
||||||
|
}
|
||||||
|
}
|
||||||
|
,data: [
|
||||||
|
{"id": "1", "name": "李白"}
|
||||||
|
,{"id": "2", "name": "杜甫"}
|
||||||
|
,{"id": "3", "name": "贤心"}
|
||||||
|
]
|
||||||
|
,height: 150
|
||||||
|
})
|
||||||
|
|
||||||
|
//穿梭时的回调
|
||||||
|
transfer.render({
|
||||||
|
elem: '#test-transfer-demo6'
|
||||||
|
,data: data1
|
||||||
|
,onchange: function(obj, index){
|
||||||
|
var arr = ['左边', '右边'];
|
||||||
|
layer.alert('来自 <strong>'+ arr[index] + '</strong> 的数据：'+ JSON.stringify(obj)); //获得被穿梭时的数据
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
//实例调用
|
||||||
|
transfer.render({
|
||||||
|
elem: '#test-transfer-demo7'
|
||||||
|
,data: data1
|
||||||
|
,id: 'key123' //定义唯一索引
|
||||||
|
})
|
||||||
|
//批量办法定事件
|
||||||
|
util.event('lay-demoTransferActive', {
|
||||||
|
getData: function(othis){
|
||||||
|
var getData = transfer.getData('key123'); //获取右侧数据
|
||||||
|
layer.alert(JSON.stringify(getData));
|
||||||
|
}
|
||||||
|
,reload:function(){
|
||||||
|
//实例重载
|
||||||
|
transfer.reload('key123', {
|
||||||
|
title: ['文人', '喜欢的文人']
|
||||||
|
,value: ['2', '5', '9']
|
||||||
|
,showSearch: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
432
dist/views/component/tree/index.html
vendored
Normal file
432
dist/views/component/tree/index.html
vendored
Normal file
@ -0,0 +1,432 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<title>树形组件</title>
|
||||||
|
|
||||||
|
<div class="layui-card layadmin-header">
|
||||||
|
<div class="layui-breadcrumb" lay-filter="breadcrumb">
|
||||||
|
<a lay-href="">主页</a>
|
||||||
|
<a><cite>组件</cite></a>
|
||||||
|
<a><cite>树形组件</cite></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layui-fluid">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md12">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">基本演示</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div class="layui-btn-container">
|
||||||
|
<button type="button" class="layui-btn layui-btn-sm" lay-demo="getChecked">获取选中节点数据</button>
|
||||||
|
<button type="button" class="layui-btn layui-btn-sm" lay-demo="setChecked">勾选指定节点</button>
|
||||||
|
<button type="button" class="layui-btn layui-btn-sm" lay-demo="reload">重载实例</button>
|
||||||
|
</div>
|
||||||
|
<div id="test-tree-demo1"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">常规用法</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-tree-demo2"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">无连接线风格</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-tree-demo3"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">仅节点左侧图标控制收缩</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-tree-demo4"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">手风琴模式</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-tree-demo5"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">点击节点新窗口跳转</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-tree-demo6"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">开启复选框</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-tree-demo7"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-header">开启节点操作图标</div>
|
||||||
|
<div class="layui-card-body">
|
||||||
|
<div id="test-tree-demo8"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
layui.use(['admin', 'tree', 'util'], function(){
|
||||||
|
var tree = layui.tree
|
||||||
|
,layer = layui.layer
|
||||||
|
,util = layui.util
|
||||||
|
|
||||||
|
//模拟数据
|
||||||
|
,data = [{
|
||||||
|
title: '一级1'
|
||||||
|
,id: 1
|
||||||
|
,field: 'name1'
|
||||||
|
,checked: true
|
||||||
|
,spread: true
|
||||||
|
,children: [{
|
||||||
|
title: '二级1-1 可允许跳转'
|
||||||
|
,id: 3
|
||||||
|
,field: 'name11'
|
||||||
|
,href: 'https://www.layui.com/'
|
||||||
|
,children: [{
|
||||||
|
title: '三级1-1-3'
|
||||||
|
,id: 23
|
||||||
|
,field: ''
|
||||||
|
,children: [{
|
||||||
|
title: '四级1-1-3-1'
|
||||||
|
,id: 24
|
||||||
|
,field: ''
|
||||||
|
,children: [{
|
||||||
|
title: '五级1-1-3-1-1'
|
||||||
|
,id: 30
|
||||||
|
,field: ''
|
||||||
|
},{
|
||||||
|
title: '五级1-1-3-1-2'
|
||||||
|
,id: 31
|
||||||
|
,field: ''
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
},{
|
||||||
|
title: '三级1-1-1'
|
||||||
|
,id: 7
|
||||||
|
,field: ''
|
||||||
|
,children: [{
|
||||||
|
title: '四级1-1-1-1 可允许跳转'
|
||||||
|
,id: 15
|
||||||
|
,field: ''
|
||||||
|
,href: 'https://www.layui.com/doc/'
|
||||||
|
}]
|
||||||
|
},{
|
||||||
|
title: '三级1-1-2'
|
||||||
|
,id: 8
|
||||||
|
,field: ''
|
||||||
|
,children: [{
|
||||||
|
title: '四级1-1-2-1'
|
||||||
|
,id: 32
|
||||||
|
,field: ''
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
},{
|
||||||
|
title: '二级1-2'
|
||||||
|
,id: 4
|
||||||
|
,spread: true
|
||||||
|
,children: [{
|
||||||
|
title: '三级1-2-1'
|
||||||
|
,id: 9
|
||||||
|
,field: ''
|
||||||
|
,disabled: true
|
||||||
|
},{
|
||||||
|
title: '三级1-2-2'
|
||||||
|
,id: 10
|
||||||
|
,field: ''
|
||||||
|
}]
|
||||||
|
},{
|
||||||
|
title: '二级1-3'
|
||||||
|
,id: 20
|
||||||
|
,field: ''
|
||||||
|
,children: [{
|
||||||
|
title: '三级1-3-1'
|
||||||
|
,id: 21
|
||||||
|
,field: ''
|
||||||
|
},{
|
||||||
|
title: '三级1-3-2'
|
||||||
|
,id: 22
|
||||||
|
,field: ''
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
},{
|
||||||
|
title: '一级2'
|
||||||
|
,id: 2
|
||||||
|
,field: ''
|
||||||
|
,spread: true
|
||||||
|
,children: [{
|
||||||
|
title: '二级2-1'
|
||||||
|
,id: 5
|
||||||
|
,field: ''
|
||||||
|
,spread: true
|
||||||
|
,children: [{
|
||||||
|
title: '三级2-1-1'
|
||||||
|
,id: 11
|
||||||
|
,field: ''
|
||||||
|
},{
|
||||||
|
title: '三级2-1-2'
|
||||||
|
,id: 12
|
||||||
|
,field: ''
|
||||||
|
}]
|
||||||
|
},{
|
||||||
|
title: '二级2-2'
|
||||||
|
,id: 6
|
||||||
|
,field: ''
|
||||||
|
,children: [{
|
||||||
|
title: '三级2-2-1'
|
||||||
|
,id: 13
|
||||||
|
,field: ''
|
||||||
|
},{
|
||||||
|
title: '三级2-2-2'
|
||||||
|
,id: 14
|
||||||
|
,field: ''
|
||||||
|
,disabled: true
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
},{
|
||||||
|
title: '一级3'
|
||||||
|
,id: 16
|
||||||
|
,field: ''
|
||||||
|
,children: [{
|
||||||
|
title: '二级3-1'
|
||||||
|
,id: 17
|
||||||
|
,field: ''
|
||||||
|
,fixed: true
|
||||||
|
,children: [{
|
||||||
|
title: '三级3-1-1'
|
||||||
|
,id: 18
|
||||||
|
,field: ''
|
||||||
|
},{
|
||||||
|
title: '三级3-1-2'
|
||||||
|
,id: 19
|
||||||
|
,field: ''
|
||||||
|
}]
|
||||||
|
},{
|
||||||
|
title: '二级3-2'
|
||||||
|
,id: 27
|
||||||
|
,field: ''
|
||||||
|
,children: [{
|
||||||
|
title: '三级3-2-1'
|
||||||
|
,id: 28
|
||||||
|
,field: ''
|
||||||
|
},{
|
||||||
|
title: '三级3-2-2'
|
||||||
|
,id: 29
|
||||||
|
,field: ''
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
|
||||||
|
//模拟数据1
|
||||||
|
,data1 = [{
|
||||||
|
title: '江西'
|
||||||
|
,id: 1
|
||||||
|
,children: [{
|
||||||
|
title: '南昌'
|
||||||
|
,id: 1000
|
||||||
|
,children: [{
|
||||||
|
title: '青山湖区'
|
||||||
|
,id: 10001
|
||||||
|
},{
|
||||||
|
title: '高新区'
|
||||||
|
,id: 10002
|
||||||
|
}]
|
||||||
|
},{
|
||||||
|
title: '九江'
|
||||||
|
,id: 1001
|
||||||
|
},{
|
||||||
|
title: '赣州'
|
||||||
|
,id: 1002
|
||||||
|
}]
|
||||||
|
},{
|
||||||
|
title: '广西'
|
||||||
|
,id: 2
|
||||||
|
,children: [{
|
||||||
|
title: '南宁'
|
||||||
|
,id: 2000
|
||||||
|
},{
|
||||||
|
title: '桂林'
|
||||||
|
,id: 2001
|
||||||
|
}]
|
||||||
|
},{
|
||||||
|
title: '陕西'
|
||||||
|
,id: 3
|
||||||
|
,children: [{
|
||||||
|
title: '西安'
|
||||||
|
,id: 3000
|
||||||
|
},{
|
||||||
|
title: '延安'
|
||||||
|
,id: 3001
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
|
||||||
|
//模拟数据2
|
||||||
|
,data2 = [{
|
||||||
|
title: '早餐'
|
||||||
|
,id: 1
|
||||||
|
,children: [{
|
||||||
|
title: '油条'
|
||||||
|
,id: 5
|
||||||
|
},{
|
||||||
|
title: '包子'
|
||||||
|
,id: 6
|
||||||
|
},{
|
||||||
|
title: '豆浆'
|
||||||
|
,id: 7
|
||||||
|
}]
|
||||||
|
},{
|
||||||
|
title: '午餐'
|
||||||
|
,id: 2
|
||||||
|
,checked: true
|
||||||
|
,children: [{
|
||||||
|
title: '藜蒿炒腊肉'
|
||||||
|
,id: 8
|
||||||
|
},{
|
||||||
|
title: '西湖醋鱼'
|
||||||
|
,id: 9
|
||||||
|
},{
|
||||||
|
title: '小白菜'
|
||||||
|
,id: 10
|
||||||
|
},{
|
||||||
|
title: '海带排骨汤'
|
||||||
|
,id: 11
|
||||||
|
}]
|
||||||
|
},{
|
||||||
|
title: '晚餐'
|
||||||
|
,id: 3
|
||||||
|
,children: [{
|
||||||
|
title: '红烧肉'
|
||||||
|
,id: 12
|
||||||
|
,fixed: true
|
||||||
|
},{
|
||||||
|
title: '番茄炒蛋'
|
||||||
|
,id: 13
|
||||||
|
}]
|
||||||
|
},{
|
||||||
|
title: '夜宵'
|
||||||
|
,id: 4
|
||||||
|
,children: [{
|
||||||
|
title: '小龙虾'
|
||||||
|
,id: 14
|
||||||
|
,checked: true
|
||||||
|
},{
|
||||||
|
title: '香辣蟹'
|
||||||
|
,id: 15
|
||||||
|
,disabled: true
|
||||||
|
},{
|
||||||
|
title: '烤鱿鱼'
|
||||||
|
,id: 16
|
||||||
|
}]
|
||||||
|
}];
|
||||||
|
|
||||||
|
//基本演示
|
||||||
|
tree.render({
|
||||||
|
elem: '#test-tree-demo1'
|
||||||
|
,data: data
|
||||||
|
,showCheckbox: true //是否显示复选框
|
||||||
|
,id: 'test-tree-demoId1'
|
||||||
|
,isJump: true //是否允许点击节点时弹出新窗口跳转
|
||||||
|
,click: function(obj){
|
||||||
|
var data = obj.data; //获取当前点击的节点数据
|
||||||
|
layer.msg('状态：'+ obj.state + '<br>节点数据：' + JSON.stringify(data));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//按钮事件
|
||||||
|
util.event('lay-demo', {
|
||||||
|
getChecked: function(othis){
|
||||||
|
var checkedData = tree.getChecked('test-tree-demoId1'); //获取选中节点的数据
|
||||||
|
|
||||||
|
layer.alert(JSON.stringify(checkedData), {shade:0});
|
||||||
|
console.log(checkedData);
|
||||||
|
}
|
||||||
|
,setChecked: function(){
|
||||||
|
tree.setChecked('test-tree-demoId1', [12, 16]); //勾选指定节点
|
||||||
|
}
|
||||||
|
,reload: function(){
|
||||||
|
//重载实例
|
||||||
|
tree.reload('test-tree-demoId1', {
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
//常规用法
|
||||||
|
tree.render({
|
||||||
|
elem: '#test-tree-demo2' //默认是点击节点可进行收缩
|
||||||
|
,data: data1
|
||||||
|
});
|
||||||
|
|
||||||
|
//无连接线风格
|
||||||
|
tree.render({
|
||||||
|
elem: '#test-tree-demo3'
|
||||||
|
,data: data1
|
||||||
|
,showLine: false //是否开启连接线
|
||||||
|
});
|
||||||
|
|
||||||
|
//仅节点左侧图标控制收缩
|
||||||
|
tree.render({
|
||||||
|
elem: '#test-tree-demo4'
|
||||||
|
,data: data1
|
||||||
|
,onlyIconControl: true //是否仅允许节点左侧图标控制展开收缩
|
||||||
|
,click: function(obj){
|
||||||
|
layer.msg(JSON.stringify(obj.data));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
//手风琴模式
|
||||||
|
tree.render({
|
||||||
|
elem: '#test-tree-demo5'
|
||||||
|
,data: [{
|
||||||
|
title: '优秀'
|
||||||
|
,children: [{
|
||||||
|
title: '80 ~ 90'
|
||||||
|
},{
|
||||||
|
title: '90 ~ 100'
|
||||||
|
}]
|
||||||
|
},{
|
||||||
|
title: '良好'
|
||||||
|
,children: [{
|
||||||
|
title: '70 ~ 80'
|
||||||
|
},{
|
||||||
|
title: '60 ~ 70'
|
||||||
|
}]
|
||||||
|
},{
|
||||||
|
title: '要努力奥'
|
||||||
|
,children: [{
|
||||||
|
title: '0 ~ 60'
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
,accordion: true
|
||||||
|
});
|
||||||
|
|
||||||
|
//点击节点新窗口跳转
|
||||||
|
tree.render({
|
||||||
|
elem: '#test-tree-demo6'
|
||||||
|
,data: data
|
||||||
|
,isJump: true //link 为参数匹配
|
||||||
|
});
|
||||||
|
|
||||||
|
//开启复选框
|
||||||
|
tree.render({
|
||||||
|
elem: '#test-tree-demo7'
|
||||||
|
,data: data2
|
||||||
|
,showCheckbox: true
|
||||||
|
});
|
||||||
|
|
||||||
|
//开启节点操作图标
|
||||||
|
tree.render({
|
||||||
|
elem: '#test-tree-demo8'
|
||||||
|
,data: data1
|
||||||
|
,edit: ['add', 'update', 'del'] //操作节点的图标
|
||||||
|
,click: function(obj){
|
||||||
|
layer.msg(JSON.stringify(obj.data));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user