使用layui框架实现水平导航（layui框架教程）
本文目录一览：
layui前端框架表格如何进行屏幕适配
标签：js代码 .com 效果 click .text jquer 参考 定义 html
项目中需要弹出层效果，使用了layui前端框架，主要使用了里面的弹出层特效（可以移动）
html代码
要给这个标签绑定click方法
1 a href=‘javascript:;‘ data-method=‘offset‘ data-type=‘auto‘ class=‘showMean‘显示/a
点击以后，显示这个页面
1 div class="035d-13cb-a110-8b5c con-no-ma displayNo" id="con-no-ma"
2 显示页面
3 /div
js代码
function showMean() {
layui.use(‘layer‘,function () {
var $ = layui.jquery, layer = layui.layer;
//触发事件,这个相当于设置参数
var active = {
offset: function(othis){
var type = othis.data(‘type‘)
,text = othis.text();
layer.open({
title:"数据关联",
type: 1,
offset: type, //具体配置参考：
id: ‘LAY_demo‘+type, //防止重复弹出
content: $("#con-no-ma"), //在页面新定义，然后通过id绑定到这
btn: ‘关闭全部‘,
area: [‘1000px‘, ‘500px‘],
btnAlign: ‘c‘, //按钮居中
shade: 0, //不显示遮罩
//btn的方法
yes: function(){
layer.closeAll();
},
//右上角关闭按钮的方法
cancel: function(){
layer.closeAll();
}
});
}
};
//给指定标签绑定click事件
$(‘ .showMean‘).on(‘click‘, function(){
var othis = $(this), method = othis.data(‘method‘);
active[method] ? active[method].call(this, othis) : ‘‘;
});
})
}
layui框架有几个核心文件
layui框架有10个核心文件。
轻量快捷的移动端UI框架。基于手Q样式规范，选取最常用的组件，做成手Q公用离线包减少请求，升级方式友好，文档完善，目前全面应用在腾讯手Q增值业务中。
YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高;使用 Flex 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局;实现强大的屏幕适配布局，等比例适配所有屏幕。
layui的元素由以下组成：
布局（栅格、后台布局）、颜色、字体图标、动画、按钮、表单、导航条、面包屑、选项卡、进度条、面板、静态表格、徽章、时间线、辅助元素等。
layui提供了丰富的内置模块，他们皆可通过模块化的方式按需加载，其中包括：layer、layDate、layPage、laytpl、table、form、upload、element、tree、layeditor、rate、carousel、flow、util、code等。
layui如何左侧点击，右侧显示内容？
首先引入layui的样式代码。 2、然后创建html代码，添加上layui的导航样式，layui-nav。 3、运行页面，这时就可以看到一个美观的导航菜单了。 4、现在的菜单右边有很多空白的地方，可以添加样式，为导航栏条目添加长度，让其布满页面
