最近在做公司的官网,其中有用到layer这款插件,以前没有接触过,不过学下来觉得好用好学.下面分享一下我的学习心得. layer是web弹出层组件.在官网下载好layer后,把他部署到你的项目文件中(不能去挪动layer里面的文件结构,因为它们是不可拆散的组合).你不用去管其他文件是干嘛的,只需关心layer.js,当然layer是基于jQuery的,你需要在引入layer之前引入jquery1.8或者以上版本. 一.基础参数: 1.type--基础类型层(number类型值,默认0) 0:信息

前言 echarts是百度出品的一款很棒的前端图表控件,被评为"百度少有的良心产品".可以实现散点图.折线图.柱状图.地图.饼图.雷达图.K线图等等几十种常用.不常用的图表,效果酷炫. 示例地址:http://echarts.baidu.com/examples.html 由于近期项目的需要,我开发了一款echarts插件,可以让序列series分组展示,下拉框选择.这样当series较多时,不再被超长的图例legend所困扰,而且可以自带全选功能. 效果 用作示例的数据,产品维度分为

本插件适用于表单按属性分组,可以动态设置显示的列数,每一个表单宽度,表单类型,以及对齐.不同panel之间的表单也是对齐的. 效果: 依赖:jquery ,easyui, 实现过程:整个控件一个panel组成,panel头部放标题及图标,内容放表单,根据传入的参数,有几个组就创建几个panel,panel里面的内容就是一表格,根据传入的列数来创建列,如果传入数据的长度除以列数可以整除,那么行数就等于这个数,如果还有余数,就等于这个数+1,当然如果显示的传入数组长度小于列数,那么就显示一行了. f

http://layer.layui.com 第一节:layer.alert()弹窗的用法 1.解压layer-v2.2.zip压缩包 2.拷贝layer文件夹到实战项目目录 3.注意:layer.js是依赖jquery的,所以需要写上以下两行代码 <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>    <script type="te

今天做调查问卷,又遇到一个蛋疼小问题,记录下. 调查问卷有很多选项是要求必填的,如果不填的话,需要给出友好的提示.用的如下组件:http://layer.layui.com/ 1.之前一直默认用的: <script src="/assets/js/layer/layer.js"></script> function showMessage(msg, domObj) { layer.tips(msg, domObj,{tips:3});//弹出框加回调函数} sh

官方网址: http://layer.layui.com/

function msgShow(getname,getuserid){ layer.open({ type: 1 //此处以iframe举例 ,title: '收件人:'+getname+'(ID:'+getuserid+')' //弹窗的标题部分(按照需求,传入参数并显示) ,area: ['490px', '430px'] ,shade: 0 ,offset: [ //为了演示,随机坐标 ] ,maxmin: true ,content: '<div class="cl pd-20&

复制可下载源代码和自写教程    链接: https://pan.baidu.com/s/1mhHa5Os 密码: j5su

三个参数 <script type="text/javascript"> /* *sclass:设置包裹元素的类 * packages:设置包裹的元素 * row:设置每几个元素一组 * */ $('#iscroll>a').igroup({ sclass:'hi', packages:'li', row:3 }); </script> 代码 (function ( $ ) { var $iscroll=0; var $arr=new Array(); $

引入: <link rel="stylesheet" href="<{$cdnsite}>/default/common/layui/css/layui.css?<{$version}>" /> <script type="text/javascript" src="<{$cdnsite}>/default/js/jquery-1.9.1.min.js?<{$version}&

layer的插件的地址:http://layer.layui.com/简单使用: layer.open({ type: , //page层 area: ['500px', '300px'], title: '你好,layer.', shade: 0.6, //遮罩透明度 moveType: , //拖拽风格,0是默认,1是传统拖动 shift: , //0-6的动画形式,-1不开启 content: '<div style="padding:50px;">这是一个非常普通的

这两天在做抽奖转盘功能,浏览器自带的alert弹出框太low,本人又基本不会前端, 于是借鉴前人用fancybox插件做的效果 结果没看懂其写法(http://www.0101shop.com/goods-2213.html); 后来朋友给了我layer弹窗插件地址让我用这个:   http://layer.layui.com/  ,实际使用证明这个弹窗插件很好用 点赞

在引用layer.js插件进行前端编程的时候,如果报这个错,解决办法只需: 把layer的引用放在有冲突的js库前面就行了

1.jQuery.lazyload 作用:延迟加载网站图片,常用于电商网站.图片展示网站,对于提高网站打开速度比较有效. 2.Owl Carousel 作用:图片滚动特效.响应式传送带插件,特点是支持触屏.ipad.pc,兼容性好. 3.LABjs和RequireJS 作用:动态加载js,管理加载脚本文件的执行顺序. 4.jquery.mloading.js 页面预加载Loading特效插件,该loading预加载特效可以创建一个全屏的遮罩,并生成各种loading动画来模拟页面预加载的过程.

插件概述 插件之于kong,就像Spring中的aop功能.在请求到达kong之后,转发给后端应用之前,你可以应用kong自带的插件对请求进行处理,合法认证,限流控制,黑白名单校验,日志采集等等.同时,你也可以按照kong的教程文档,定制开发属于自己的插件.kong的插件分为开源版和社区版,社区版还有更多的定制功能,但是社区版是要收费的.目前,KONG开源版本一共开放28个插件,如下:acl.aws-lambda.basic-auth.bot-detection.correlation-id.c

layer.js中的loading加载 l本篇主要介绍layerjs中的loading加载在实际项目中的应用 1.使用的技术 前端:HTML5+CSS3+JS+layer.js 后端:.net 2.遇到的问题 在使用layer.js插件中提供的loading时,需要在layer.js中的layer.css找到对应的gif格式动态图,此gif图需要和插件中的loading加载gif图大小尺寸相同  3.layer.js中load()方法介绍 load不需要传太多的参数,根据自己喜欢的风格来设置.方

如果想要制作一个简单的相册,可以采用这个插件的方法.如果你的图片是从后台传过来的json格式里,可以通过ajax加载让图片显示在页面上,然后在使用layer插件,做出点击以后就可以查看大图的效果. 一.通过ajax请求动态获取json,然后在得到json中的图片的地址. 1.页面 <div class="main" id="main"></div> 2.ajax请求 <script> $(document).ready(funct

Jquery UI所有插件下载:http://jqueryui.com/download/all/ Jquery layer灯箱等演示与帮助:http://sentsin.com/jquery/layer/ Jquery formvalidator验证表单官方:http://www.formvalidator.net/ uploadify图片上传:http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html  官方演示:http:/

在设计一个项目中的数据展示页面时.想要设计双X轴,一个轴显示须要的项.一个轴对这些项进行分组.效果如图: Highcharts自带双X轴展示方式.可是效果不是太理想.调整起来也会麻烦些 看到Highcharts上有一个分组插件.grouped-categories.js.稍做改动就可以实现想要的效果,代码例如以下: $(function () { var chart = new Highcharts.Chart({ chart: { renderTo: "container", typ

npm i --save layui-layer 2.在main.js中引入 import layer from "layui-layer"; 3.然后就可以在各个组件中使用layer了 实例: layer.confirm('您是如何看待前端开发?', { btn: ['重要','奇葩'] //按钮 }, function(){ layer.msg('的确很重要', {icon: 1}); }, function(){ layer.msg('也可以这样', { time: 20000,

一.Canvas第三方类库 1.常见的第三方类库 konva.js <style> body{ margin:0; } </style> </head> <body> <div id="box"></div> <script src="../konva/konva.min.js"></script> <script> //创建舞台 var stage=new