layui的html页面怎样编写,layui实现前端页面功能

• 项目一
• 项目二
• 项目三

• 更多项目方案

  项目四

  项目五

  项目六

• 咨询我们

• 登录

• 注销

• 其他选项

  个人中心

  收藏

  历史记录

查看

编辑

删除

• 演示说明
• 日期
• 分页
• 上传
• 滑块

在这里，你将以最直观的形式体验 layui！

在编辑器中可以执行 layui 相关的一切代码

你也可以点击左侧导航针对性地试验我们提供的示例

如果最左侧的导航的高度超出了你的屏幕

你可以将鼠标移入导航区域，然后滑动鼠标滚轮即可



点击上传，或将文件拖拽到此处

---

$(function () {

/*登录*/

$(".login").on("click",function () {

layer.open({

type:2,

area: ['360px', '270px'],

content:"layui04.html"

})

})

/*注册*/

$(".register").on("click",function () {

layer.open({

type:2,

area: ['400px', '550px'],

content:"layui05.html"

})

})

})

layui.use(['laydate', 'laypage','table', 'carousel', 'upload', 'element', 'slider'], function() {

var laydate = layui.laydate //日期

, laypage = layui.laypage //分页

, table = layui.table //表格

, carousel = layui.carousel //轮播

, upload = layui.upload //上传

, element = layui.element //元素操作

, slider = layui.slider //滑块

/*本地数据*/

table.render({

elem: '#demo'

, height: 460

, fixed: "right"

, align: "center"

, url: '../json/demo1.json'

, toolbar: 'default'

, page: true

, cols: [[

{field: 'id', title: 'ID', width: 100, sort: true, fixed: 'left'}

, {field: 'username', title: '用户名', width: 100}

, {field: 'email', title: '邮箱地址', width: 150}

, {field: 'sex', title: '性别', width: 100, sort: true}

, {field: 'city', title: '城市', width: 100}

, {field: 'sign', title: '签名', width: 255}

, {field: 'experience', title: '积分', width: 80, sort: true}

, {field: 'ip', title: '地址', width: 140, sort: true}

, {field: 'joinTime', title: '工作时间', width: 140}

, {field: 'LAY_CHECKED', title: '财富', width: 135, sort: true}

, {fixed: 'right', width: 165, align: 'center', toolbar: '#barDemo'}

]]

})

//监听头工具栏事件

table.on('toolbar(test)', function(obj){

var checkStatus = table.checkStatus(obj.config.id)

,data = checkStatus.data; //获取选中的数据

switch(obj.event){

case 'add':

layer.open({

type:2,

area: ['1300px', '400px'],

content:"demo01.html"

});

break;

case 'update':

if(data.length === 0){

layer.msg('请选择一行');

} else if(data.length > 1){

layer.msg('只能同时编辑一个');

} else {

layer.alert('编辑 [id]：'+ checkStatus.data[0].id);

}

break;

case 'delete':

if(data.length === 0){

layer.msg('请选择一行');

} else {

layer.msg('删除');

}

break;

};

});

//监听行工具事件

table.on('tool(test)', function(obj){

var data = obj.data,le = obj.event;

if(le === 'detail'){

layer.msg('查看数据');

} else if(le === 'del'){

layer.confirm('确定删除数据

标签：function,field,layer,title,layui,前端,width,页面

来源： https://blog.csdn.net/weixin_51994508/article/details/112427624