layer和layui的⽤法
layer的话先引⼊jq1.8以上版本,然后引⼊layer⽂件,就可以去官⽹想要的样式复制⽤了,layer:open之类的。layui加载他的css⽂件就好,⼿机号,邮箱,⾝份证验证什么都有,复制过去就能⽤。导航栏也还能看。
动态选项卡。
进度条这个好像很好玩。
<link rel="stylesheet" href="//res.layui/layui/build/css/layui.css" media="all">
<fieldset class="layui-elem-field layui-field-title" >
<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" >
<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%')jquery是什么有什么作用
}
,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);
}
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>
这个表格很好看,以后显⽰数据就⽤他了
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论