layui 是什么? 有什么功能? 下面本篇文章给大家介绍一下 layui 的主要功能. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
layui 是一款采用自身模块规范编写的前端 UI 框架, 遵循原生 html/CSS/JS 的书写与组织形式, 门槛极低, 拿来即用. 其外在极简, 却又不失饱满的内在, 体积轻盈, 组件丰盈, 从核心代码到 API 的每一处细节都经过精心雕琢, 非常适合界面的快速开发.
一, 分页功能
layui 框架分页使用, 其实 layui 分页非常简单只需要传入一个总页数就可以很好运用这个功能. 下面就看一下我对 layui 框架分页的介绍.
注意: 传入的是页数不是数据库查询的条数
laypage 的使用;
- <div id="demo1"></div>// 界面容器
- <script src="//res.layui.com/layui/build/layui.js" charset="utf-8"></script>
- <!-- 注意: 如果你直接复制所有代码到本地, 上述 js 路径需要改成你本地的 -->
- <script>
- // 加载 layui
- layui.use(['laypage', 'layer'], function(){
- var laypage = layui.laypage
- ,layer = layui.layer;
- laypage({
- cont: 'demo1'// 界面容器 ID
- ,pages:data.number1 // 总页数
- ,groups: 5 // 连续显示分页数
- , jump: function(obj, first){
- // 得到了当前页, 用于向服务端请求对应数据
- var curr = obj.curr;
- // 向服务器发送请求通过当前页数去计算查询条数
- }
- });
- };
- </script>
二, layui 时间日功能
下面的代码的是一个开始结束日期功能
- <label class="layui-form-label"> 时间 </label>
- <div style="width: 100px" class="layui-input-inline">
- <input class="layui-input" placeholder="开始日" id="LAY_demorange_s">
- </div>
- <div style="width: 100px" class="layui-input-inline">
- <input class="layui-input" placeholder="截止日" id="LAY_demorange_e">
- </div>
- <!-- 没有写提交按钮 -->
- <script>
- // 加载 layui
- layui.use(['laydate','paging', 'form'], function() {
- var $ = layui.jQuery,
- paging = layui.paging(),
- layerTips = parent.layer === undefined ? layui.layer : parent.layer, // 获取父窗口的 layer 对象
- layer = layui.layer, // 获取当前窗口的 layer 对象
- form = layui.form();
- var start = {
- min:'1900-01-01 00:00:00'// 设置最小日期
- ,max: '2099-06-16 23:59:59'// 设置最大日期
- ,istoday: false
- ,choose: function(datas){
- end.min = datas; // 开始日选好后, 重置结束日的最小日期
- end.start = datas // 将结束日的初始值设定为开始日
- }
- };
- var end = {
- min:'1900-01-01 00:00:00'// 设置最小日期
- ,max: '2099-06-16 23:59:59'// 设置最大日期
- ,istoday: false
- ,choose: function(datas){
- start.max = datas; // 结束日选好后, 重置开始日的最大日期
- }
- };
- //LAY_demorange_s 日期容器 ID
- document.getElementById('LAY_demorange_s').onclick = function(){
- start.elem = this;
- laydate(start);// 对两个日期进行关联
- }
- //LAY_demorange_e 日期容器 ID
- document.getElementById('LAY_demorange_e').onclick = function(){
- end.elem = this
- laydate(end);// 对两个日期进行关联
- }
- </script>
三, 弹出框功能
layer.open 的使用;
- <script src="//res.layui.com/layui/build/layui.js" charset="utf-8"></script>
- <!-- 注意: 如果你直接复制所有代码到本地, 上述 js 路径需要改成你本地的 -->
- <script>
- // 加载 layui
- layui.use('layer', function(){ // 独立版的 layer 无需执行这一句
- var $ = layui.jQuery, layer = layui.layer; // 独立版的 layer 无需执行这一句
- var addBoxIndex = -1;// 记录是否弹出
- // 获取事件, 点击事件 #add 按钮 id
- $('#add').on('click', function() {
- if(addBoxIndex !== -1)
- return;
- // 本表单通过 Ajax 加载 -- 以模板的形式, 当然你也可以直接写在页面上读取
- //ShiJian-form.HTML 弹出后显示的界面
- $.get('ShiJian-form.html', null, function(form) {
- addBoxIndex = layer.open({
- type: 1,
- title: '添加事件',// 弹出框标题
- content: form,
- btn: ['保存', '取消'],
- shade: false,
- offset: ['100px', '30%'],
- area: ['700px', '600px'],
- zIndex: 19950924,
- maxmin: true,
- yes: function(index) {
- // 确定按钮回调方法
- layer.close(index);// 这块是点击确定关闭这个弹出层
- location.reload(); // 刷新, 对弹出前的页面进行刷新
- setTimeout(function(){
- top.layer.close(index);
- top.Windows[iframeName].frames.location.reload();
- }, 100);// 延时 0.1 秒, 对应 360 7.1 版本 bug
- },
- full: function(elem) {
- // 取消和关闭按钮触发的回调
- var win = Windows.top === Windows.self ? Windows : parent.Windows;
- $(win).on('resize', function() {
- var $this = $(this);
- elem.width($this.width()).height($this.height()).CSS({
- top: 0,
- left: 0
- });
- elem.children('div.layui-layer-content').height($this.height() - 95);
- });
- },
- success: function(layero, index) {
- // 层弹出后的成功回调方法
- },
- end: function() {
- // 层销毁后触发的回调
- addBoxIndex = -1;
- }
- });
- });
- });
- });
- });
- </script>
更多 web 前端 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/framework/layui/17852.html