<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彈層組件官方演示與講解

          文檔手冊 功能示例 快速上手 layer 移動版
          立即運行
          layuiAdmin
          總大小:45KB,下載數:loading…
          彈層之美
          在線調試 擴展皮膚

          layer是一款近年來備受青睞的web彈層組件,她具備全方位的解決方案,致力于服務各水平段的開發人員,您的頁面會輕松地擁有豐富友好的操作體驗。

          在與同類組件的比較中,layer總是能輕易獲勝。她盡可能地在以更少的代碼展現更強健的功能,且格外注重性能的提升、易用和實用性,正因如此,越來越多的開發者將媚眼投上了layer(已被loading…人次關注)。layer 甚至兼容了包括 IE6 在內的所有主流瀏覽器。她數量可觀的接口,使得您可以自定義太多您需要的風格,每一種彈層模式各具特色,廣受歡迎。當然,這種“王婆賣瓜”的陳述聽起來總是有點難受,因此你需要進一步了解她是否真的如你所愿。

          layer 采用 MIT 開源許可證,將會永久性提供無償服務。因著數年的堅持維護,截至到2017年9月13日,已運用在超過 30萬 家 Web 平臺,其中不乏眾多知名大型網站。目前 layer 已經成為國內乃至全世界最多人使用的 Web 彈層解決方案,并且她仍在與 Layui 一并高速發展。Fly

          先睹為快
          特別說明:事件需自己綁定,以下只展現調用代碼。
          

          //初體驗

          layer.alert('內容')

          //第三方擴展皮膚

          layer.alert('內容', { icon: 1, skin: 'layer-ext-moon' //該皮膚由layer.seaning.com友情擴展。關于皮膚的擴展規則,去這里查閱 })

          //詢問框

          layer.confirm('您是如何看待前端開發?', { btn: ['重要','奇葩'] //按鈕 }, function(){ layer.msg('的確很重要', {icon: 1}); }, function(){ layer.msg('也可以這樣', { time: 20000, //20s后自動關閉 btn: ['明白了', '知道了'] }); });

          //提示層

          layer.msg('玩命提示中');

          //墨綠深藍風

          layer.alert('墨綠風格,點擊確認看深藍', { skin: 'layui-layer-molv' //樣式類名 ,closeBtn: 0 }, function(){ layer.alert('偶吧深藍style', { skin: 'layui-layer-lan' ,closeBtn: 0 ,anim: 4 //動畫類型 }); });

          //捕獲頁

          layer.open({ type: 1, shade: false, title: false, //不顯示標題 content: $('.layer_notice'), //捕獲的元素,注意:最好該指定的元素要存放在body最外層,否則可能被其它的相對元素所影響 cancel: function(){ layer.msg('捕獲就是從頁面已經存在的元素上,包裹layer的結構', {time: 5000, icon:6}); } });

          //頁面層

          layer.open({ type: 1, skin: 'layui-layer-rim', //加上邊框 area: ['420px', '240px'], //寬高 content: 'html內容' });

          //自定頁

          layer.open({ type: 1, skin: 'layui-layer-demo', //樣式類名 closeBtn: 0, //不顯示關閉按鈕 anim: 2, shadeClose: true, //開啟遮罩關閉 content: '內容' });

          //tips層

          layer.tips('Hi,我是tips', '吸附元素選擇器,如#id');

          //iframe層

          layer.open({ type: 2, title: 'layer mobile頁', shadeClose: true, shade: 0.8, area: ['380px', '90%'], content: 'mobile/' //iframe的url });

          //iframe窗

          layer.open({ type: 2, title: false, closeBtn: 0, //不顯示關閉按鈕 shade: [0], area: ['340px', '215px'], offset: 'rb', //右下角彈出 time: 2000, //2秒后自動關閉 anim: 2, content: ['test/guodu.html', 'no'], //iframe的url,no代表不顯示滾動條 end: function(){ //此處用于演示 layer.open({ type: 2, title: '很多時候,我們想最大化看,比如像這個頁面。', shadeClose: true, shade: false, maxmin: true, //開啟最大化最小化按鈕 area: ['893px', '600px'], content: '//fly.layui.com/' }); } });

          //加載層

          var index = layer.load(0, {shade: false}); //0代表加載的風格,支持0-2

          //loading層

          var index = layer.load(1, { shade: [0.1,'#fff'] //0.1透明度的白色背景 });

          //小tips

          layer.tips('我是另外一個tips,只不過我長得跟之前那位稍有些不一樣。', '吸附元素選擇器', { tips: [1, '#3595CC'], time: 4000 });

          //prompt層

          layer.prompt({title: '輸入任何口令,并確認', formType: 1}, function(pass, index){ layer.close(index); layer.prompt({title: '隨便寫點啥,并確認', formType: 2}, function(text, index){ layer.close(index); layer.msg('演示完畢!您的口令:'+ pass +'<br>您最后寫下了:'+text); }); });

          //tab層

          layer.tab({ area: ['600px', '300px'], tab: [{ title: 'TAB1', content: '內容1' }, { title: 'TAB2', content: '內容2' }, { title: 'TAB3', content: '內容3' }] });

          //相冊層

          $.getJSON('test/photos.json?v='+new Date, function(json){ layer.photos({ photos: json //格式見API文檔手冊頁 ,anim: 5 //0-6的選擇,指定彈出圖片動畫類型,默認隨機 }); });
          再試牛刀

          //信息框-例1

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

          //信息框-例2

          layer.msg('你確定你很帥么?', { time: 0 //不自動關閉 ,btn: ['必須啊', '丑到爆'] ,yes: function(index){ layer.close(index); layer.msg('雅蠛蝶 O.o', { icon: 6 ,btn: ['嗷','嗷','嗷'] }); } });

          //信息框-例3

          layer.msg('這是最常用的吧');

          //信息框-例4

          layer.msg('不開心。。', {icon: 5});

          //信息框-例5

          layer.msg('玩命賣萌中', function(){ //關閉后的操作 });

          //頁面層-自定義

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

          //頁面層-佟麗婭

          layer.open({ type: 1, title: false, closeBtn: 0, area: '516px', skin: 'layui-layer-nobg', //沒有背景色 shadeClose: true, content: $('#tong') });

          //iframe層-父子操作

          layer.open({ type: 2, area: ['700px', '450px'], fixed: false, //不固定 maxmin: true, content: 'test/iframe.html' });

          //iframe層-多媒體

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

          //iframe層-禁滾動條

          layer.open({ type: 2, area: ['360px', '500px'], skin: 'layui-layer-rim', //加上邊框 content: ['mobile/', 'no'] });

          //加載層-默認風格

          layer.load(); //此處演示關閉 setTimeout(function(){ layer.closeAll('loading'); }, 2000);

          //加載層-風格2

          layer.load(1); //此處演示關閉 setTimeout(function(){ layer.closeAll('loading'); }, 2000);

          //加載層-風格3

          layer.load(2); //此處演示關閉 setTimeout(function(){ layer.closeAll('loading'); }, 2000);

          //加載層-風格4

          layer.msg('加載中', { icon: 16 ,shade: 0.01 });

          //打醬油

          layer.msg('尼瑪,打個醬油', {icon: 4});

          //tips層-上

          layer.tips('上', '#id或者.class', { tips: [1, '#0FA6D8'] //還可配置顏色 });

          //tips層-右

          layer.tips('默認就是向右的', '#id或者.class');

          //tips層-下

          layer.tips('下', '#id或者.class', { tips: 3 });

          //tips層-左

          layer.tips('左邊么么噠', '#id或者.class', { tips: [4, '#78BA32'] });

          //tips層-不銷毀之前的

          layer.tips('不銷毀之前的', '#id或者.class', { tipsMore: true });

          //默認prompt

          layer.prompt(function(val, index){ layer.msg('得到了'+val); layer.close(index); });

          //屏蔽瀏覽器滾動條

          layer.open({ content: '瀏覽器滾動條已鎖', scrollbar: false });

          //彈出即全屏

          var index = layer.open({ type: 2, content: 'http://layim.layui.com', area: ['320px', '195px'], maxmin: true }); layer.full(index);

          //正上方

          layer.msg('靈活運用offset', { offset: 't', anim: 6 }); //更多例子 layer.msg('Hi');

          倘若 layer 于你有益,歡迎:

          小額贊賞
          美妙之旅
          事實上layer提供的豐富的接口支撐,已經足夠讓你的彈層變得千變萬化,請恕我們無法為您逐一演示。如果您仍覺得文檔和代碼有不當之處,迫切地希望您能反饋,你可以通過Fly社區和加群的方式進入layer的圈子,許多和你一樣的小伙伴將會和你一起,經歷這段美妙的旅程。
          layim
          亚美AV,影音先锋下载,影音先锋5566,在线视频,高清盛宴尽在亚美AV