layer的使用

4.24更新:注意:layer现在有旧版1.8.5版本和新版本3.0版本的,对应引入的JQ也要不同,相对应的JQ引入1.1和3.1,否则JQ会出问题

4.21更新; 

  解答4-19的问题:采用红色字  

4,19日更新问题

  在老版本中(1.7)版中遇到的问题;问题补充:准确的说是,在移动端中所出现的问题,

   layer.confirm()     //在运行时会报错,是什么原因呢?    

    原因:在移动端中,其实是不支持,layer.alert(),layer.confirm(),layer.msg()等方法的,只支持 layer.open() ;参数根据相关文档去配置就好了;

   layer.open({content:'你确定删除吗?',btn:['确定’,'取消']})  //显示的确定在右边,并且调用函数是错的?

    原因:移动端本来就是与PC相反的,是为了符合用户习惯。所以在移动端书写时正常书写就好,只有2个按钮时,确定回掉用yes:function(){},取消回掉用no:function(){};有多个按钮时;确定按钮会在最右侧,确定也是用yes:function(){};其他按钮用,btn2:function(){},btn3:fubction(),...    

   if(!layer.open({content:'你确定删除吗?',btn:['确定’,'取消']}))  return false ; //第一次显示正常,第二次就不执行了,直接执行后面的语句,导致内容删除掉?

    原因:采用上题的方法就不会出现问题;

    改成:

  1. layer.open({
  2. content:'测试',
  3. btn: ['确定', '取消'],
  4. yes:function(index, layero) {
  5. console.log('确定');
  6. },
  7. no:function(index, layero) {
  8.       //点击取消时,弹出框就没了
  9. }
  10. })

  

简介:web弹层组件;更少的代码展现更强健的功能;永久性提供无偿服务;

使用:

  1,下载layer.zip,解压;

  2,引入jquery.js和 layer.js;这是一个独立于layui的组件,不需要依赖什么;

  3,demo:

  1. <script src="jquery-1.8.2.min.js" type="text/javascript" charset="utf-8"></script>
  2. <script src="layer/layer.js" type="text/javascript" charset="utf-8"></script>
  3. <script type="text/javascript">

  4. //layer.alert('hello world!');

  layer.alert('hello', {
  icon: 1,
  skin: 'layer-ext-moon'
  })

 </script>

可以看出:只是将单单的alert换成了layer.alert,其他同理;后面可跟参数来设置显示的样式;你以为仅仅只是这样吗,前面只是简单的用法,然并卵;正确的打开方式这..这样子的

  1. layer.open({
  2. type: 1,
  3. content: '传入任意的文本或html'
  4. })

  4,基础参数:

    1,(层类型)  type:   layer提供了5种层类型。可传入的值有:

          0(信息框,默认)  包括(alert,confirm,msg)

          1(页面层)

          2(iframe层)

          3(加载层)

          4(tips层)

      若你采用layer.open({type: 1})方式调用,则type为必填项(信息框除外)

  1. layer.open({
  2. type: 1,
  3. content: '我是页面层'
  4. });

    2,(标题)  title:  3种类型:String/Array/Boolean,默认:'信息'

    3,(内容)  content:  3种类型:String/DOM/Array,默认:'' 

   4,(皮肤) skin:        类型:String,默认:''   

  1. //单个使用
  2. layer.open({
  3. skin: 'demo-class'
  4. });
  5. //全局使用。即所有弹出层都默认采用,但是单个配置skin的优先级更高
  6. layer.config({
  7. skin: 'demo-class'
  8. })
  9. //CSS
  10. body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}
  11. body .demo-class .layui-layer-btn{border-top:1px solid #E9E7E7}
  12. body .demo-class .layui-layer-btn a{background:#333;}
  13. body .demo-class .layui-layer-btn .layui-layer-btn1{background:#999;}

  14. // 加上body是为了保证优先级。你可以借助Chrome调试工具,定义更多样式控制层更多的区域。

扩展:layer皮肤制作说明。

【第一步】:命名文件夹
在layer的skin目录建立一个文件夹,假设您将该文件夹命名为:yourskin
【第二步】:创建样式等文件
在yourskin文件夹下建立一个单独的样式文件,务必命名为:style.css。并且你可能用到的图片也要存放在该文件夹下
【第三步】:书写样式
/*
通过body前缀,是为了确保你皮肤的优先级
你可以通过调试工具重置更多样式
*/
body .layer-ext-yourskin .layui-layer-title{}
body .layui-ext-yourskin .layui-layer-btn{}
body .layui-ext-yourskin .layui-layer-btn a{}
【第四步】:调试
通过全局配置看看你的皮肤定义的如何:
layer.config({
extend: 'myskin/style.css', //加载您的扩展样式
skin: 'layer-ext-yourskin'
});
layer.alert('layer皮肤-Yourskin');
【最后一步】:发布
1. 现在你已经成功制作了一个皮肤了,如果你觉得它很美,你可以共享出更多的人使用。
2. 那么你应该制作一个简单的页面来介绍你的皮肤,提供尽可能简单的使用说明(就像这个:layer.seaning.com)。
3. 然后将你的皮肤主题页网址通过任意渠道发给贤心(比如可以通过邮箱:xu@sentsin.com)

------------------------------------and more-----参考官方文档--------------------------------------------------------- 

   

area宽高

offset坐标

icon提示图标

btn提示按钮

btnAlign按钮排列

closeBtn右上关闭

shade遮罩

shadeClose

time自动关闭

id唯一id

anim动画

isOutAnim关闭动画

maxmin最大小化

fixed是否固定

resize是否允许拉伸

resizing正在拉伸

scrollbar屏蔽滚动

maxWidth最大宽

zIndex层叠值

move拖拽元素

moveOut拖出

moveEnd回调

tipsTips参数

tipsMore允许多tips

success弹出后回调

yes确定回调

cancel关闭回调

end销毁后回调

full/min/restore

内置方法

config全局设置

ready就绪

open核心方法

alert弹框

confirm询问

msg提示

load加载

tips吸附

close关闭层

closeAll关闭全部

style

title重置标题

getChildFrame

getFrameIndex

iframeAuto

iframeSrc

setTop多层置顶

full/min/restore

其他内置层

prompt输入层

tab选项卡层

photos图片层

 

  

layer —— 一个简单的jQuery弹出层插件的更多相关文章

  1. webui-popover 一个轻量级的jquery弹出层插件

    该提示框插件可以和Bootstrap完美结合,但是并不一定需要和Bootstrap一起使用.它支持IE7以上的浏览器. 首先要引入需要的css  js  文件 <link rel="s ...

  2. 效果非常好的 Jquery弹出层插件 jQuery Sweet alert

    介绍款交互性非常不错的jquery弹出层插件,支持消息提示.错误提示.确认框提示等. 交互式体验感非常不错,比如咱们现在体验非常不错的微信支付.支付宝等完成后的效果. 不过本插件至少支持IE9+ Jq ...

  3. jQuery弹出层插件popbox

    都什么年代了,还自己写弹出层插件!是的,①自己写的自己好控制②可定制性高③兼容低版本IE 本插件有以下特性: 样式分离,可定制,纯净无图片 可自定义按钮及按钮的样式.点击事件 可指定选择器选择页面元素 ...

  4. 分享一个JQuery弹出层插件

    JQuery插件TipsWindown 1.1 一个基于jQuery的弹出层.支持拖拽,支持内容为文字,图片,URL等!至于兼容性.在IE6下,弹出对像无法绝对固定.其他应该没啥大问题: 最新更新:( ...

  5. layer官方演示与讲解(jQuery弹出层插件)

    1. 使用layer遇到困难?Fly社区虔诚为您解惑 2. layer 2.0 发布,以独立形式呈现的最后一个版本 3. Fork layer on Github,爱她,就给她加个星啵 当前版本:2. ...

  6. 一个简单的div弹出层的小例子

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  7. 转 js一个简单实用的弹出层

      关闭 点击查看 >> <html> <head> <title>新文件标题</title> <script type=" ...

  8. jQuery弹出层插件大全

    1.thickbox 目前用的比较多的,最新版本是thickbox3.1 下载地址:http://jquery.com/demo/thickbox/#examples 2.colorBox 官方网站: ...

  9. layer (jQuery弹出层插件)使用

    $(".delete").click(function(){ var work_name = $(this).data('name'); var item_id = $(this) ...

随机推荐

  1. python文本读写数据

    # 写方法1 f = open('tmp.txt','w') f.write('hello world') f.close() # 写方法2 with open('tmp.txt','w') as f ...

  2. webpack 安装 打包

    一, 下载node.js  https://nodejs.org/zh-cn/ 二, //全局安装 npm install -g webpack //npm init 刷新webpack.json 文 ...

  3. javaweb中的乱码问题(初次接触时写)

    javaweb中的乱码问题 在初次接触javaweb中就遇到了乱码问题,下面是我遇到这些问题的解决办法 1. 页面乱码(jsp) 1. 在页面最前方加上 <%@ page language=&q ...

  4. css 图片置灰

    .filterGray{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(10 ...

  5. java实现文章敏感词过滤检测

    SensitivewordFilter.java import java.util.HashSet; import java.util.Iterator; import java.util.Map; ...

  6. gvim 技巧

    1.对齐 很多时候想对齐括号和“=”号,行数很多的时候就是体力活了.使用3条命令就可以完成对齐 :set ts=16                    ##将tab设置为16 :%s/(/\t(/ ...

  7. jenkins测试配置

  8. Linux命令 df du

    df: 列出文件系统的整体磁盘使用量 du: 评估文件系统的磁盘使用量 $ df [-ahikHTm] [目录或文件名] 参数: -a: 列出所有的文件系统,包括系统特有的/proc 等文件系统 -k ...

  9. 华大单片机开发板HC32L13X上手入门

    HC32L136开发板(如下图所示)分为板载调试模块(左半部分)和MCU开发电路(右半部分).二者中间通过邮票孔相连,如果将板子从中间掰开,板载调试模块就可以当一个CMSIS-DAP的仿真器来使用.此 ...

  10. direction: rtl;

    这个属性,有点无语,费了点时间. <style type="text/css"> .hao {direction: rtl;}</style> <se ...