<rp id="ulz1c"><object id="ulz1c"></object></rp>

        <dd id="ulz1c"><pre id="ulz1c"></pre></dd>
        <li id="ulz1c"></li>

        <span id="ulz1c"></span>
      1. <tbody id="ulz1c"></tbody>

          Layer For Mobile

          layer mobile是為移動設備(手機、平板等webkit內核瀏覽器/webview)量身定做的彈層UI。由于是采用原生 JavaScript編寫,所有并不依賴任何第三方庫。layer mobile完全獨立于PC版的layer,您需要按照場景選擇使用。layer mobile正致力于成為您WebApp開發過程中彈出交互的不二選擇。GitHub

          為了精確體驗,您可通過Chrome設備模式瀏覽。或通過手機掃二維碼進入

          小試牛刀

          信息框 提示 詢問框 底部對話框 底部提示 自定義標題風格 頁面層 loading層 loading帶文字

            /** 以下是小試牛刀的調用代碼(此處不展示事件綁定)*/
          
            //信息框
            layer.open({
              content: '移動版和PC版不能同時存在同一頁面'
              ,btn: '我知道了'
            });
            
            //提示
            layer.open({
              content: 'hello layer'
              ,skin: 'msg'
              ,time: 2 //2秒后自動關閉
            });
            
            //詢問框
            layer.open({
              content: '您確定要刷新一下本頁面嗎?'
              ,btn: ['刷新', '不要']
              ,yes: function(index){
                location.reload();
                layer.close(index);
              }
            });
            
            //底部對話框
            layer.open({
              content: '這是一個底部彈出的詢問提示'
              ,btn: ['刪除', '取消']
              ,skin: 'footer'
              ,yes: function(index){
                layer.open({content: '執行刪除操作'})
              }
            });
            
            //底部提示
            layer.open({
              content: '一個沒有任何按鈕的底部提示'
              ,skin: 'footer'
            });
            
            //自定義標題風格
            layer.open({
              title: [
                '我是標題',
                'background-color: #FF4351; color:#fff;'
              ]
              ,content: '標題風格任你定義。'
            });
            
            //頁面層
            layer.open({
              type: 1
              ,content: '可傳入任何內容,支持html。一般用于手機頁面中'
              ,anim: 'up'
              ,style: 'position:fixed; bottom:0; left:0; width: 100%; height: 200px; padding:10px 0; border:none;'
            });
            
            //loading層
            layer.open({type: 2});
            
            //loading帶文字
            layer.open({
              type: 2
              ,content: '加載中'
            });
          

          功能說明

          一個在底部彈出的完整對話框:

          layer.open({
            title: [
              '我是標題',
              'background-color:#8DCE16; color:#fff;'
            ]
            ,anim: 'up'
            ,content: '展現的是全部結構'
            ,btn: ['確認', '取消']
          });
          運行
            

          設置3秒自動關閉:

          layer.open({
            content: '通過style設置你想要的樣式'
            ,style: 'background-color:#09C1FF; color:#fff; border:none;' //自定風格
            ,time: 3
          });
          運行
            

          設置不允許點遮罩關閉:

          layer.open({
            content: '不允許點擊遮罩關閉',
            btn: '我知道了',
            shadeClose: false,
            yes: function(){
              layer.open({
                content: '好的'
                ,time: 2
                ,skin: 'msg'
              });
            }
          });
          運行
          

          自定義一個全屏的頁面層:

          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;'
          });
          運行
          

          結語

          請恕我們無法為您一一演示,我們更希望你認真去閱讀文檔,那里列舉了layer所有的接口,它們會幫助你完成形形色色的展現形式。

          文檔 更新日志 layer PC版

          layui.com出品

          亚美AV,影音先锋下载,影音先锋5566,在线视频,高清盛宴尽在亚美AV