双节临近,最近加足马力做一个砸金蛋活动,我负责后台,我们通常用到的UI框架有easyUI、bootStrap,而我今天将的这个layer工具更加有针对性,它针对弹框/层等,非常人性化,而且0基础就可上手,只要引入文件,在线调试成功就可以放到我们的代码中,这是它的官网,据了解开发这个工具的是个女生,她自己一个人写出来的,非常牛!给大家推荐一下她的官网:layer官方演示与讲解,还有她的博客:贤心,非常棒,而且群众呼声很高!
下面用一个简单的“加载中”效果来做个演示:
首先,部署:
第二步:引入
你不必去管那些文件是干嘛的,你只需要认准一个文件:layer.js 没错,当你试图在页面呈现layer的时候,你应该这样去做:
第三步:使用
是时候目睹layer的挫样了,由于她是基于jQuery,你可以选择用jQuery的api方式去抒写。当你想弹出一个layer实例的时候,你首先应该绑定事件:
<span style="font-size:14px;">//弹出一个loading层 $('#test4').on('click', function(){ var ii = layer.load(); //此处用setTimeout演示ajax的回调 setTimeout(function(){ layer.close(ii); }, 1000); });</span>
就这样一个加载层的效果就出来了,这里不太方便展示效果,但是layer文档很详细,感兴趣就赶紧看看吧!