seo做子网站,淘宝关键词排名是怎么做的,网站开发语言有什么,旅游电子商务网络营销的概念html主页框架 前言功能说明效果使用初始化配置菜单加载主题修改回调 其他非iframe页面内容使用方式iframe页面内容使用方式 前言
这是一个基于layui、jquery实现的html主页架构 平时写的系统后台可以直接套用此框架 由本人整合编写实现#xff0c;简单上手#xff0c;完全免… html主页框架 前言功能说明效果使用初始化配置菜单加载主题修改回调 其他非iframe页面内容使用方式iframe页面内容使用方式 前言
这是一个基于layui、jquery实现的html主页架构 平时写的系统后台可以直接套用此框架 由本人整合编写实现简单上手完全免费使用代码放到gitee上面了
功能说明
兼容iframe和非iframe模式兼容移动端模式默认最小宽度1100开始支持21种主题更换可开启/关闭标签页设定点击左侧菜单是否需要刷新当前页以及页面显示动画效果自定义标签页开启后超出将会自动定位当前标签页位置可操作左右切换显示标签页可关闭其他、左 边、右边标签页刷新当前支持菜单搜索
效果
PC端效果 移动端效果 使用
使用简单下载下来就可以用 兼容layui2.6.8版本及以上版本 码云下载https://gitee.com/yuanyongqiang/lay-menu
初始化配置
设置layui的版本号和一些参数 默认是非iframe模式的如果需要iframe模式则需要设置为true 还有回调顶部、主题样式初始化设置等
configObj.init({scrollTop: true, // 回到顶部layui: 2.6.8, // 请根据使用版本修改此处//iframe: false, // 是否开启iframe容器//theme: {theme: 0, page: false, refresh: false, anim: 2}, // 主题设置内容
});菜单加载
参数一是容器参数二是数据
configObj.showMenu(.lay-left-menu, data);data数据格式如下
[{mid:101,mname:首页,url: page/home.html,icon:i classlayui-icon#xe68e;/i,children:[]},{mid:102,mname:用户管理,url: page/user.html,icon:i classlayui-icon#xe66f;/i,children:[]},{mid:103,mname:系统管理,url: ,icon:i classlayui-icon#xe716;/i,children:[{mid:10301,mname:角色管理,url: page/role.html,icon:i classlayui-icon#xe60a;/i,children:[]},{mid:10302,mname:结果页面,url: ,icon:i classlayui-icon#xe60a;/i,children:[{mid:1030201,mname:成功页面,url: page/success.html,icon:i classlayui-icon#xe60a;/i,children:[]},{mid:1030202,mname:失败页面,url: page/fail.html,icon:i classlayui-icon#xe60a;/i,children:[]}]}]}
]主题修改回调
每次修改主题时就好触发这个回调操作
configObj.themeCallback function(data){console.log(主题设置, JSON.stringify(data));
}以上就可以了简简单单
其他
非iframe页面内容使用方式
每个页面不需要引入重复的文件
meta charsetutf-8
style.layui-fluid,.layui-card {padding: 15px;}
/style
div classlayui-fluiddiv classlayui-cardform classlayui-form actiondiv classlayui-form-itemlabel classlayui-form-label单行输入框/labeldiv classlayui-input-blockinput typetext nametitle lay-verifytitle autocompleteoff placeholder请输入标题 classlayui-input/div/divdiv classlayui-form-itemlabel classlayui-form-label验证必填项/labeldiv classlayui-input-blockinput typetext nameusername lay-verifyrequired lay-reqtext用户名是必填项岂能为空 placeholder请输入 autocompleteoff classlayui-input/div/divdiv classlayui-form-itemdiv classlayui-input-blockbutton typesubmit classlayui-btn lay-submit lay-filterdemo1立即提交/buttonbutton typereset classlayui-btn layui-btn-primary重置/button/div/div/form/div
/div
script typetext/javascriptform.render();// 当前模块对象var userObj {select: function(){},add: function(){},edit: function(){},}// 添加调用//userObj.add();//...
/scriptiframe页面内容使用方式
需要每个页面都要引入重复的文件
!DOCTYPE html
htmlheadmeta charsetutf-8titleLayui/titlemeta namerenderer contentwebkitmeta http-equivX-UA-Compatible contentIEedge,chrome1meta nameviewport contentwidthdevice-width, initial-scale1, maximum-scale1link relstylesheet href../layui/css/layui.css mediaall!-- 注意如果你直接复制所有代码到本地上述css路径需要改成你本地的 --/headstyle.layui-fluid,.layui-card {padding: 15px;}/stylebodydiv classlayui-fluiddiv classlayui-cardform classlayui-form actiondiv classlayui-form-itemlabel classlayui-form-label单行输入框/labeldiv classlayui-input-blockinput typetext nametitle lay-verifytitle autocompleteoff placeholder请输入标题 classlayui-input/div/divdiv classlayui-form-itemlabel classlayui-form-label验证必填项/labeldiv classlayui-input-blockinput typetext nameusername lay-verifyrequired lay-reqtext用户名是必填项岂能为空 placeholder请输入 autocompleteoff classlayui-input/div/divdiv classlayui-form-itemdiv classlayui-input-blockbutton typesubmit classlayui-btn lay-submit lay-filterdemo1立即提交/buttonbutton typereset classlayui-btn layui-btn-primary重置/button/div/div/form/div/divscript src../layui/layui.js charsetutf-8/scriptscript typetext/javascript// 当前模块对象var userObj {select: function() {},add: function() {},edit: function() {},}// 添加调用//userObj.add();//.../script/body/html
