企业官方网站应该怎么样建设,陕西建设工程合同备案网站,百度 特定网站搜索,海南百度推广seo元素功能的开启只需要加载element模块即会自动完成#xff0c;譬如tab选项卡切换、导航菜单滑动切换效果、面包屑导航、进度条等#xff0c;使用这些小交互功能的前提就是#xff1a;拥有符合这些小功能的所需正确的HTML结构#xff0c;以及加载element模块#xff1b;如下…元素功能的开启只需要加载element模块即会自动完成譬如tab选项卡切换、导航菜单滑动切换效果、面包屑导航、进度条等使用这些小交互功能的前提就是拥有符合这些小功能的所需正确的HTML结构以及加载element模块如下tab选项卡的使用示例网站设置商品管理订单管理内容1内容2内容3加载element模块使得tab选项卡切换生效layui.use(element, function(){var element layui.element;//一些事件监听element.on(tab(demo), function(data){console.log(data);});});通过自定义元素属性来作为元素的功能参数他们一般配置在容器外层如…..........element模块支持的元素如下表属性名可选值说明lay-filter任意字符事件过滤器(公用属性)主要用于事件的精确匹配跟选择器是比较类似的。lay-allowClosetrue针对于Tab容器是否允许选项卡关闭。默认不允许即不用设置该属性lay-separator任意分隔符针对于面包屑容器基础方法允许你在外部主动对元素发起一起操作目前element模块提供的方法如下方法名描述var element layui.element;element模块的实例返回的element变量为该实例的对象携带一些用于元素操作的基础方法element.on(filter, callback);用于元素的一些事件监听element.tabAdd(filter, options);用于新增一个Tab选项参数filtertab元素的 lay-filtervalue 过滤器的值(value)参数options设定可选值的对象目前支持的选项如下述示例element.tabAdd(demo, {title: 选项卡的标题,content: 选项卡的内容 //支持传入html,id: 选项卡标题的lay-id属性值});element.tabDelete(filter, layid);用于删除指定的Tab选项参数filtertab元素的 lay-filtervalue 过滤器的值(value)参数layid选项卡标题列表的 属性 lay-id 的值element.tabDelete(demo, xxx); //删除 lay-idxxx 的这一项element.tabChange(filter, layid);用于外部切换到指定的Tab项上参数同上如element.tabChange(demo, layid); //切换到 lay-idyyy 的这一项element.tab(options);用于绑定自定义 Tab 元素(即非 layui 自带的 tab 结构)。该方法为 layui 2.1.6 新增参数options设定可选值的对象目前支持的选项如下述示例//HTML标题1标题2标题3内容1内容2内容4//JavaScriptelement.tab({headerElem: #tabHeaderli //指定tab头元素项,bodyElem: #tabBody.xxx //指定tab主体元素项});element.progress(filter, percent);用于动态改变进度条百分比element.progress(demo, 30%);跟表单元素一样很多时候你的页面元素可能是动态生成的这时element的相关功能将不会对其有效你必须手工执行 element.init(type, filter) 方法即可。注意2.1.6 开始可以用 element.render(type, filter); 方法替代第一个参数type为表单的type类型可选。默认对全部类型的表单进行一次更新。可局部刷新的type如下表参数(type)值描述tab重新对tab选项卡进行初始化渲染nav重新对导航进行渲染breadcrumb重新对面包屑进行渲染progress重新对进度条进行渲染collapse重新对折叠面板进行渲染element.init(); //更新全部 2.1.6 可用 element.render() 方法替代element.render(nav); //重新对导航进行渲染。注layui 2.1.6 版本新增//……第二个参数filter为元素的 lay-filter 的值。你可以借助该参数完成指定元素的局部更新。【HTML】……【JavaScript】//比如当你对导航动态插入了二级菜单这时你需要重新去对它进行渲染element.render(nav, test1); //对 lay-filtertest1 所在导航重新渲染。注layui 2.1.6 版本新增//……语法element.on(event(过滤器值), callback);element模块在Layui事件机制中注册了element模块事件所以当你使用layui.onevent()自定义模块事件时请勿占用element名。目前element模块所支持的事件如下表event描述tab监听Tab选项卡切换事件默认情况下事件所监听的是全部的元素但如果你只想监听某一个元素使用事件过滤器即可。如element.on(tab(test), function(data){console.log(data);});Tab选项卡点击切换时触发回调函数返回一个object参数携带两个成员element.on(tab(filter), function(data){console.log(this); //当前Tab标题所在的原始DOM元素console.log(data.index); //得到当前Tab的所在下标console.log(data.elem); //得到当前的Tab大容器});Tab选项卡被删除时触发回调函数返回一个object参数携带两个成员element.on(tabDelete(filter), function(data){console.log(this); //当前Tab标题所在的原始DOM元素console.log(data.index); //得到当前Tab的所在下标console.log(data.elem); //得到当前的Tab大容器});注该事件为 layui 2.1.6 新增当点击导航父级菜单和二级菜单时触发回调函数返回所点击的菜单DOM对象element.on(nav(filter), function(elem){console.log(elem); //得到当前点击的DOM对象});当折叠面板点击展开或收缩时触发回调函数返回一个object参数携带三个成员element.on(collapse(filter), function(data){console.log(data.show); //得到当前面板的展开状态true或者falseconsole.log(data.title); //得到当前点击面板的标题区域DOM对象console.log(data.content); //得到当前点击面板的内容区域DOM对象});你肯定不仅仅是满足于进度条的初始化显示通常情况下你需要动态改变它的进度值element模块提供了这样的基础方法element.progress(filter, percent);。上述是一个已经设置了过滤器(lay-filterdemo)的进度条现在你只需要在某个事件或者语句中执行方法element.progress(demo, 50%);即可改变进度
