您的位置:时时app平台注册网站 > web前端 > jQuery Layer mobile 弹出层,jquerylayer【彩世界网址】

jQuery Layer mobile 弹出层,jquerylayer【彩世界网址】

2019-12-06 23:01

layer 选用 MIT 开源许可证,他们是无需付费使用的。PC端弹窗解决用Lyaer是个不利的取舍,我们能够去下载二个心得一下~~

引入文件

  1. <link href="layer.css" type="text/css" rel="stylesheet">
  2. <script src="layer.js">

复制

彩世界网址 1

使用办法

  1. <a onclick="test(卡塔尔国;" href="javascript:;">点击询问框</a>
  2. <script>
  3. function test() {
  4. layer.open({
  5. content: '你是想确认呢,如故想收回呢?',
  6. btn: ['确认', '取消'],
  7. shadeClose: false,
  8. yes: function() {
  9. layer.open({
  10. content: '你点了确定',
  11. time: 1
  12. });
  13. },
  14. no: function() {
  15. layer.open({
  16. content: '你筛选了撤回',
  17. time: 1
  18. });
  19. }
  20. });
  21. }
  22. </script>

复制


下载

 

Layer mobile 弹出层,jquerylayer layer mobile是为运动道具(手提式有线话机、平板等webkit内核浏览器/webview)量身定做的弹层支撑,采取Native JavaScript编...

 

参谋手册

实例预览 layer弹层组件移动版API

 

jQuery Layer mobile 弹出层,jquerylayer

layer mobile是为活动道具(手提式有线电话机、平板等webkit内核浏览器/webview)量身定做的弹层支撑,接收Native JavaScript编写,完全部独用立于PC版的layer,您须求依照气象选用使用。

 彩世界网址 2

在线实例

实例预览 layer弹层组件移动版演示

实例预览 layer弹层组件移动版在线DEMO

layer.open({
  content: '通过style设置你想要的样式'
  ,style: 'background-color:#09C1FF; color:#fff; border:none;' //自定风格
  ,time: 3
});

 

 

 

借使,你初识layer,你对她慌乱,你以致不知怎么样绑定事件… 那大概你应有用秒做单位,快速认知他呢~~                                                                                                       彩世界网址 3

⑤ iframe层

layer.open({
  type: 2,
  title: false,
  area: ['630px', '360px'],
  shade: 0.8,
  closeBtn: 0,
  shadeClose: true,
  content: '//player.youku.com/embed/XMjY3MzgzODg0'
});

Layer  

 

彩世界网址 4

2

看多少个音讯框实例

 

 

彩世界网址 5

layer.load(1);

 

 

 

彩世界网址 6

 

动用原生 JavaScript编写,全体并不依靠任何第三方库。layer mobile完全部独用立于PC版的layer。

 

 

② 信息框-1

layer.alert('见到你真的很高兴', {icon: 6});


③ 信息框-2

layer.msg('你确定你很帅么?', {
  time: 0 //不自动关闭
  ,btn: ['必须啊', '丑到爆']
  ,yes: function(index){
    layer.close(index);
    layer.msg('雅蠛蝶 O.o', {
      icon: 6
      ,btn: ['嗷','嗷','嗷']
    });
  }
});

 

 

② 能够安装多久自动关闭:

var pageii = layer.open({
  type: 1
  ,content: html //新页面
  ,anim: 'up'
  ,style: 'position:fixed; left:0; top:0; width:100%; height:100%; border: none; -webkit-animation-duration: .5s; animation-duration: .5s;'
});

 

OK!看多少个实例~

 

 

 ③ 自定义几个全屏的页面层:

彩世界网址 7

① 三个在尾巴部分弹出的欧洲经济共同体对话框:

layer mobile是为活动装备(手提式有线电话机、平板等webkit内核浏览器/webview)量身定做的弹层UI。

// 引入好layer.js后,直接用即可
<script src="js/jquery-3.1.1.js"></script>
<script src="layer.js"></script>
<script>
layer.msg('hello'); 
</script>

 ④ 底部对话框

彩世界网址 8

 

 

 

④ 页面层-自定义

③ 带文字的

 layer.open({
    content: '这是一个底部弹出的询问提示'
    ,btn: ['删除', '取消']
    ,skin: 'footer'
    ,yes: function(index){
      layer.open({content: '执行删除操作'})
    }
  });

 

layer.load();

 

3

加载层

 

拿到 layer 文件包后,解压并将 layer 整个文件夹(不要拆分构造) 贮存到你项目标自由目录,使用时,只需引进 layer.js 与 Jquery就可以。 

① 加载层-私下认可风格

 

 

layer.msg('加载中', {
  icon: 16
  ,shade: 0.01
});
layer.open({
  title: [
    '我是标题',
    'background-color:#8DCE16; color:#fff;'
  ]
  ,anim: 'up'
  ,content: '展现的是全部结构'
  ,btn: ['确认', '取消']
});
① 简单弹出一个提示层

 $('#test1').on('click', function(){
    layer.msg('hello');
  });

layer是生机勃勃款近期非常受弘扬的web弹层组件,她享有任何的实施方案,致力于劳动各档案的次序段的开垦人士,您的页面会轻便地有着足够自个儿的操作涉世。

② 旋转样式

在与同类组件的可比中,layer接连几日来能轻巧获胜。她尽量地在以更加少的代码表现更加壮的效劳,且极度青眼质量的提高、易用和实用性!

彩世界网址 9

 

 

 

 

layer.open({
  type: 1,
  title: false,
  closeBtn: 0,
  shadeClose: true,
  skin: 'yourclass',
  content: '自定义HTML内容'
});

 

4

Layer mobile

 

1

初识Layer

彩世界网址 10

本文由时时app平台注册网站发布于web前端,转载请注明出处:jQuery Layer mobile 弹出层,jquerylayer【彩世界网址】

关键词: