moxunpw
/
layui_toolnb


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
							

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>镜像站@layer弹层组件移动版</title>
  <meta name="description" content="">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"> 
  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <link href="demo.css" tppabs="http://www.layui.com/layer/mobile/demo.css" type="text/css" rel="stylesheet">
  <script src="../../../res.layui.com/layui/release/layer/dist/mobile/layer.js" tppabs="http://res.layui.com/layui/release/layer/dist/mobile/layer.js"></script>
</head>
<body>
<header>
  <div class="main">
    <h1>Layer For Mobile<code><script>document.write(layer.v)</script></code></h1>
    <nav>
      <a href="http://www.layui.com/mobile/">首页</a>
      <a href="../../index.html" tppabs="http://www.layui.com/">PC 版</a>
    </nav>
  </div>
</header>

<div class="main">
  <p>和 layer PC 版不同的是，我们只提供一个核心调用方法，即：layer.open(options)。各类型的层你可以借助下面高度灵活的参数接口对 layer.open 进行二次封装。</p>
</div>

<div class="main api">
  <h2 style="padding:10px 0 5px;">参数</h2>
  <p>即核心接口：<strong>layer.open(options)</strong> 中的options：</p>
  
  <div style="margin-top: 20px;">
    <p><strong>type</strong>  - 设置弹层的类型</p>
    <p>类型：Number</p>
    <p>默认：0 （0表示信息框，1表示页面层，2表示加载层）</p>
  </div>
  
  <div>
    <p><strong>content</strong> - 设置弹层内容</p>
    <p>类型：String</p>
    <p>必选参数</p>
  </div>
  
  <div>
    <p><strong>title</strong> - 设置弹层标题</p>
    <p>类型：String或Array</p>
    <p>默认：空，值可以为字符串或者数组。，为空则不显示</p>
    <pre>
title: '标题'
//或者
title: ['标题', 'background-color: #eee;'] //第二个参数可以自定义标题的样式    
    </pre>
  </div>
  
  <div>
    <p><strong>time</strong> - 控制自动关闭层所需秒数</p>
    <p>类型：Number</p>
    <p>默认不开启，支持整数和浮点数</p>
  </div>
  
  <div>
    <p><strong>style</strong> - 自定义层的样式</p>
    <p>类型：String</p>
    <p>非常实用，如</p>
        <pre>
<span id="demo3">layer.open({
  style: 'border:none; background-color:#78BA32; color:#fff;',
  content:'内容'
})</span>
<a href="javascript:;"  class="button" onclick="new Function(demo3.innerHTML)();">运行</a>  
</pre>
  </div>
  
  <div>
    <p><strong>skin</strong> - 设定弹层显示风格</p>
    <p>类型：String</p>
    <p>目前支持配置 footer（即底部对话框风格）、msg（普通提示） 两种风格。</p>
  </div>
  
  <div>
    <p><strong>className</strong> - 自定义一个css类</p>
    <p>类型：String</p>
    <p>用于自定义样式。如</p>
    <pre>
<span>layer.open({
  className: 'popuo-login', //这样你就可以在css里面控制该弹层的风格了
  content:'内容'
})</span>
    </pre>
  </div>
  
  <div>
    <p><strong>btn</strong> - 按钮</p>
    <p>类型：String/Array</p>
    <p>不设置则不显示按钮。如果只需要一个按钮，则btn: '按钮'，如果有两个，则：btn: ['按钮一', '按钮二']。</p>
  </div>
  
  <div>
    <p><strong>anim</strong> - 动画类型</p>
    <p>类型：String/Boolean</p>
    <p>可支持的支持动画配置：scale（默认）、up（从下往上弹出），如果不开启动画，设置false即可</p>
  </div>
  
  <div>
    <p><strong>shade</strong> - 控制遮罩展现</p>
    <p>类型：String/Boolean</p>
    <p>默认：true，该参数可允许你是否显示遮罩，并且定义遮罩风格</p>
    <pre>
shade: false //不显示遮罩
或者
shade: 'background-color: rgba(0,0,0,.3)' //自定义遮罩的透明度    
    </pre>
  </div>
  
  <div>
    <p><strong>shadeClose</strong></p>
    <p>类型：Boolean</p>
    <p>默认：true，是否点击遮罩时关闭层</p>
  </div>
  
  <div>
    <p><strong>fixed</strong> - 是否固定层的位置</p>
    <p>类型：Boolean</p>
    <p>默认：true</p>
  </div>
  
  <div>
    <p><strong>top</strong> - 控制层的纵坐标</p>
    <p>类型：Number</p>
    <p>默认：无，一般情况下不需要设置，因为层会始终垂直水平居中，只有当fixed: false时top才有效。</p>
  </div>
  
  <div>
    <p><strong>success</strong> - 层成功弹出层的回调</p>
    <p>类型：Function</p>
    <p>该回调参数返回一个参数为当前层元素对象</p>
    <pre>
success: function(elem){
  console.log(elem);
}    
</pre>
  </div>
  
  <div>
    <p><strong>yes</strong></p>
    <p>类型：Function</p>
    <p>点确定按钮触发的回调函数，返回一个参数为当前层的索引</p>
    <pre>
yes: function(index){
  alert('点击了是')
  layer.close(index)
}    
</pre>
  </div>
  
  <div>
    <p><strong>no</strong></p>
    <p>类型：Function</p>
    <p>点取消按钮触发的回调函数</p>
  </div>
  
  <div>
    <p><strong>end</strong></p>
    <p>类型：Function</p>
    <p>层彻底销毁后的回调函数</p>
  </div>
  
  <h2 style="line-height: 50px; padding:10px 0 5px; border-bottom:1px solid #ccc;">其它内置方法/属性</h2>
  <div>
    <p><strong>layer.v</strong></p>
    <p>返回当前使用的layer mobile版本号</p>
  </div>
  
  <div>
    <p><strong>layer.close(index)</strong></p>
    <p>用于关闭特定层，index为该特定层的索引</p>
  </div>
  
  <div>
    <p><strong>layer.closeAll()</strong></p>
    <p>关闭页面所有layer的层</p>
  </div>

  <p style="padding:50px 0; text-align:center; color:#999;">layui 开源组件</p>

</div>

<script src="demo.js" tppabs="http://www.layui.com/layer/mobile/demo.js"></script>


</body>
</html>