关于layui】的更多相关文章

很好用的一个ui组件,弹出,分页等 http://layer.layui.com/ 1 带叉叉的弹窗 layer.open({ type: , title: false, //不显示标题 content: 'hehe', //捕获的元素 area: ['400px', '200px'], //宽高 //scrollbar: false, cancel: function(index) { layer.close(index); } });…
SugarSite一个前端支持移动端的企业网站,目前只支持了简单功能,后续还会加上论坛等. 源码GIT地址: https://github.com/sunkaixuan/SugarSite 技术介绍 Layui 个人而言不喜欢引用一堆东西,越简洁越好,layui正好能够满足我的这种需求,它是一款轻量级UI,JS部分都是采用模块化设计(AMD) ,对移动端支持比较不错. 唯 一不足是目前支持的组件有些少,需要有一定前端扩展能力的人才可以顺心使用. 用法: 例如我想用form.js和uploda.j…
<!doctype html> <html> <head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge…
全部参数 一.核心方法:laydate(options); options是一个对象,它包含了以下key: '默认值' { elem: '#id', //需显示日期的元素选择器 event: 'click', //触发事件 format: 'YYYY-MM-DD hh:mm:ss', //日期格式 istime: false, //是否开启时间选择 isclear: true, //是否显示清空 istoday: true, //是否显示今天 issure: true, 是否显示确认 festi…
之前用layer用了很长时间,感觉很好用,最近看到了layui的发布很想尝试尝试. 加入了挺多的功能,比如编辑器,上传,form表单等等.…
<link rel="stylesheet" href="<%=path%>/layui/css/layui.css" type="text/css"></link> <script type="text/javascript" src="<%=path%>/layui/layui.js"></script> <script>…
Layui 经典模块化前端框架 由职业前端倾情打造,面向所有层次的前后端程序猿,中国最容易使用的前端UI解决方案 Layui 出蛋于2016年金秋,是一款带着浓烈情怀的国产前端UI框架,她追求极简,又不失丰盈的内在,说她是史上最轻量的结晶,似乎并不为过.一切都源自于她对原生态的执着,对前端社区的那些噪杂声音的过滤,以及她本身的精心雕琢. 官网地址:http://www.layui.com/…
SugarSite一个前端支持移动端的企业网站,目前只支持了简单功能,后续还会加上论坛等. 源码GIT地址: https://github.com/sunkaixuan/SugarSite 技术介绍 Layui 个人而言不喜欢引用一堆东西,越简洁越好,layui正好能够满足我的这种需求,它是一款轻量级UI,JS部分都是采用模块化设计(AMD) ,对移动端支持比较不错. 唯 一不足是目前支持的组件有些少,需要有一定前端扩展能力的人才可以顺心使用. 用法: 例如我想用form.js和uploda.j…
可以了解下jQuery组件layer layui开始使用Layui兼容除IE6/7以外的全部浏览器,并且绝大多数结构支持响应式 弹出层如果你使用的是Layui,那么你直接在官网下载layui框架即可,无需引入jQuery和layer.js,但需要引入layui.css和layui.js基础参数:layer.open({content: ''})layer.msg('', {time: 3}) type参数:layer提供了5种层类型.可传入的值有:0(信息框,默认)1(页面层)2(iframe层…
示例地址 http://www.layui.com/demo/ 下载地址 http://www.layui.com/ 示例代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>演示/教程 - layui</title> <meta name="renderer" content="webkit"&g…
1.项目业务改动,在一个弹窗页面加图片上传. 2.页面使用angular框架,图片上传使用layui的文件上传组件. js: layui.upload({ url: '/test/upload.json' ,elem: '#test' //指定原始元素,默认直接查找class="layui-upload-file" ,method: 'get' //上传接口的http类型 ,success: function(res){ LAY_demo_upload.src = res.url; }…
首先声明这是个人的一点理解,如有不对之处请指正,以下的例子有在官网上看到的,有的是自己写的.还是老规矩最后会附上官网的,如有不明白之处,请查看文档或留言. 既然说Layui,当然要简单的介绍以下什么是layui啊!下面是官方的解释: Layui 是一款采用自身模块规范编写的国产前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用.其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到API的每一处细节都经过精心雕琢,非常适合界面的快速开发.layui还很年轻…
注意:代码的所有功能都没有导入layui的css样式 一,分页功能 layui框架分页使用,其实layui分页非常简单只需要传入一个总页数就可以很好运用这个功能 下面就看一下我对layui框架分页的介绍, 注意:传入的是页数不是数据库查询的条数 laypage的使用: <div id="demo1"></div>//界面容器 <script src="//res.layui.com/layui/build/layui.js" chars…
前言 在网站找了一大圈都是问题没有答案,记录记录谨防踩坑 layui版本:layui-v1.0.9_rls a(https://github.com/devbridge/jQuery-Autocomplete)[jQuery-Autocomplete] 版本:1.4.1 示例 demo地址:http://runjs.cn/detail/jzararyv Autocomplete插件官方示例:http://devbridge.github.io/jQuery-Autocomplete/ 整合步骤…
一.layUI介绍 Layui 是一款采用自身模块规范编写的国产前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用.内置了一些常用元素和组件的UI框架. 下载地址为http://www.layui.com/,下载后引入项目中. <link rel="stylesheet" href="${pageContext.request.contextPath}/css/layui/css/layui.css"> <script…
LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ©Copyright 蕃薯耀 2017年8月1日 http://www.cnblogs.com/fanshuyao/ 效果图: 一.引用js依赖…
接着 上一篇 继续完善我们的demo,这次我们加一个搜索按钮 搜索 在table标签的上方,加入这样一组html <div class="demoTable"> 搜索商户: <div class="layui-inline"> <input class="layui-input" name="keyword" id="demoReload" autocomplete="…
LayUI是一款免费,开源,轻量级的前端cms框架,适用于企业后端,能快速上手开发,集成了常用的组件,还有完善的文档和社区. 点击查看 文档地址 下载框架 使用: 1.把这个5个文件项都拷贝到项目中 2.到layui官网 地址 将后台布局的代码考过来,做一个左侧导航,右侧显示主内容的格局 3.代码复制到我们自己项目新建的home.html页面后, 根据代码上的提示,将远程地址替换成本地,直接删除css引用和js引用,从自己的项目中将这2个文件拖到html页面上 4.完成左侧菜单跳转右侧显示 点击…
用什么封装?自然是TagHelper啊,是啥?自己瞅文档去 在学习使用TagHelper的时候,最希望的就是能有个Demo能够让自己作为参考 怎么去封装一个组件? 不同的情况怎么去实现? 有没有更好更高效的方法? 找啊找啊找,最后跑去看了看mvc中的TagHelpers,再好好瞅了瞅TagHelper的文档 勉强折腾了几个组件出来,本来想一个组件一个组件写文章的,但是发现国庆已经结束了~ Demo效果预览 代码仅供参考,有不同的意见也忘不吝赐教 Checkbox复选框组件封装 标签名称:cl-c…
下拉框的显示样式: 针对下拉框的绑定等操作时,在最后务必调用一次 form.render(); 1.基本定义: <div class="layui-form-item"> <label class="layui-form-label"><span class="f_orange">*</span>控件类型</label> <div class="layui-input-b…
一.普通输入框 input <div class="layui-form-item"> <label class="layui-form-label"><span class="f_orange">*</span>字段编号</label> <div class="layui-input-block width_250 pos-r"> <input t…
注意事项: layui 中提交按钮是基于"监听"机制实现的. form.on() 的调用需置于 layui.use 的回调函数中. 末尾的 'return false' 不可或缺,以确保不会触发页面刷新.注意必须是 'return false',而不能简单写成 'return'. 抓取表单数据可按四步来实现: 禁用按钮.防止用户连续点击,需注意,在 Ajax 请求结束后(complete)再次显式启用按钮. 整合表单数据.很多时候,除了要获取正式表单的数据,还需要额外追加一些数据. 确…
网盘系统   大家应该都会注册过致命的一些网盘~如百度云.百科介绍:网盘,又称网络U盘.网络硬盘,是由互联网公司推出的在线存储服务,服务器机房为用户划分一定的磁盘空间,为用户免费或收费提供文件的存储.访问.备份.共享等文件管理等功能,并且拥有高级的世界各地的容灾备份. 我也一直在用网盘..但是有一个特别让人无语的是你不开他家的会员,就给你限速.那下载速度简直跟乌龟似得~~ 周末在家无聊突发奇想~自己用Layui这款前端框架配合PHP做了一个简易版的网盘.后续也有想法继续去更新完善它,大家有什么想…
1.需要把jfinal的环境配置好 2.导入相关的库文件 layui的库文件 就是这两个文件需要导入到自己的页面 注意:jfinal总会把路径拦截,所以需要静态文件处理.本人不太懂.就网上找了下,说webRoot就是根目录,所以引入的时候,一定要在路径最开始加上 "/"          作为根目录路径. 3. 接下来就是前端和后台的编写了. 前端可以直接从layui的官网上查看相关文档,就是复制粘贴,改改就可以了 <!DOCTYPE html> <html>…
网盘系统2.0   上周,我做了第一版的“私人网盘系统”,http://www.cnblogs.com/sunlizheng/p/7822036.html 没看过的朋友可以去看一下,这周在家升级做了第二版,算是升级版,相比较第一版增加了图片上传功能,以及美观度的改变,和一些小bug的修复,也感谢上次有几个朋友在评论里留言提的意见,也欢迎朋友们,对这次的更新提出宝贵的意见,下次继续更新~~~废话不多说来吧~~~ 末尾附仓库地址~     登录页面   上周因为第一版偷懒直接用以前用bootstra…
表单控件样式没生效, 因为没引入form. layui.use('form', function(){ var form = layui.form; }); radio改变事件没生效, 需要手动filter, 因为样式是美化后的 form.on('radio(layout)', function(data){ var layoutValue = data.value; }); 数据表格如何展示图片, 需要使用templet layui.use('table', function(){ var t…
为什么表单不显示?当你使用表单时,Layui会对select.checkbox.radio等原始元素隐藏,从而进行美化修饰处理.但这需要依赖于form组件,所以你必须加载 form,并且执行一个实例.值得注意的是:导航的Hover效果.Tab选项卡等同理(它们需依赖 element 模块) layui.use('form', function(){ var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功 //-- //但是,如果你的HTML是动态生成的,…
TagHelper+Layui封装组件之Radio单选框 标签名称:cl-radio 标签属性: asp-for:绑定的字段,必须指定 asp-items:绑定单选项 类型为:IEnumerable<SelectListItem> 太简单了,直接上代码了 RadioTagHelper代码 using System; using System.Collections.Generic; using Microsoft.AspNetCore.Mvc.Rendering; using Microsof…
这几天碰到了layui中的日期与时间这个,本以为很简单的,可是又一个需求是这样的,有两个日期选择框,第一个日期选择框要求最小日期不得小于当前日期,第二个日期选择框要求最小日期为第一个日期选择框的选中日期,最大日期须在24小时内,本以为不会很难. 于是按照惯例,先渲染第一个日期选择框,然后渲染第二个日期选择框,结果后来发现这样行不通.还是直接上具体的代码吧. <!DOCTYPE html> <html lang="en"> <head> <met…
这几天在学习layui,感觉这框架挺好用的,前后端都适用,许多原本比较复杂的东西用该框架很容易就能实现. 今天看了table里的事件监听这个知识点. 语法:table.on('event(filter)', callback);  注:event为内置事件名,filter为容器lay-filter设定的值 默认情况下:事件所监听的是整个table模块容器,但如果只想监听某一个容器,使用事件过滤器即可 例如:我现在要监听复选框事件.刚开始怎么也实现不了预期的效果,都要崩溃了,后来发现原来是这样用的…