layer和layui的用法
来源:互联网 发布:linux中telnet命令 编辑:程序博客网 时间:2024/05/17 04:18
layer的话先引入jq1.8以上版本,然后引入layer文件,就可以去官网找想要的样式复制用了,layer:open之类的。
layui加载他的css文件就好,手机号,邮箱,身份证验证什么都有,复制过去就能用。导航栏也还能看。
动态选项卡。
进度条这个好像很好玩。
<link rel="stylesheet" href="//res.layui.com/layui/build/css/layui.css" media="all">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend>动态改变进度</legend>
</fieldset>
<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo">
<div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
</div>
<div class="site-demo-button" 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>
<script>
layui.use('element', function(){
var $ = layui.jquery
,element = layui.element(); //Tab的切换功能,切换事件监听等,需要依赖element模块
//触发事件
var active = {
setPercent: function(){
//设置50%进度
element.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);
}
layui.element().progress('demo', n+'%');
}, 300+Math.random()*1000);
othis.addClass(DISABLED);
}
};
$('.site-demo-active').on('click', function(){
var othis = $(this), type = $(this).data('type');
active[type] ? active[type].call(this, othis) : '';
});
});
</script>
这个表格很好看,以后显示数据就用他了
- layer和layui的用法
- [Layer] layui的弹出层用法记录
- layer-layui
- 关于layer以及layui的使用心得
- iOS中View和layer的区别以及layer用法
- 基于jquery的layui的layer弹层框架
- layui-layer弹出层使用
- layui弹出层(layer)
- layer的用法
- Layer 用法的总结
- layer-list的用法
- Layer 弹窗加传参 的用法
- layer-list的用法
- shape和selector和layer-list的用法
- shape和selector和layer-list的用法
- Layui Layer在open弹出层中异步加载数据和form表单radio、checkbox、select不渲染,不可点击的解决办法
- 关于shape和layer-list结合使用的一点用法
- layui内置模块(layer弹出层)
- mysql光标的创建
- Java学习笔记_02
- NYOJ712_探寻宝藏
- 关于编码unicode
- LeetCode 83. Remove Duplicates from Sorted List
- layer和layui的用法
- 用matlab计算M,N,R,r。
- 【设计模式】 代理模式(Proxy Pattern)- 最易懂的设计模式解析
- 310. Minimum Height Trees
- maven多模块项目SpringMVC简单实例
- strlen,strcpy,strcat,strstr,strcmp,strchr函数的使用和注意事项
- 【设计模式】 建造者模式(Builder Pattern)- 最易懂的设计模式解析
- hadoop的dw-hive安装配置---hadoop安装系列之三
- 页面跳转与重定向总结