layer-v2.4弹层组件使用示例
生活随笔
收集整理的這篇文章主要介紹了
layer-v2.4弹层组件使用示例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
彈出層layer的使用
Intro
layer是一款web彈層組件，致力于服務各個水平段的開發人員。layer官網：http://layer.layui.com/
layer側重于用戶靈活的自定義，為不同人的使用習慣提供動力。其意義在于，可以讓您的頁面擁有更豐富與便捷的操作體驗，而您只需在調用時簡單地配置相關參數，即可輕松實現。
layer.msg
語法：layer.msg(content[, options][, end]) 提示框
layer.msg('這里是msg內容');layer.msg('這里是msg內容',{icon:1});layer.msg('關閉后想做些什么', function(){//do something});layer.msg('同上', {icon: 1,time: 2000 //2秒關閉（如果不配置，默認是3秒）}, function(){//do something});layer.alert
語法：layer.alert(content[, options][, yes]) 普通信息框
//eg1layer.alert('只想簡單的提示'); //eg2layer.alert('加了個圖標', {icon: 1}); //這時如果你也還想執行yes回調，可以放在第三個參數中。//eg3layer.alert('有了回調', function(index){//do somethinglayer.close(index);});layer.confirm
語法：layer.confirm(content[, options], yes[, cancel]) 詢問框
//eg1layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){//do somethinglayer.close(index);});//eg2layer.confirm('is not?', function(index){//do somethinglayer.close(index);});layer.propmt
語法：layer.prompt([options,] yes) 輸入層/詢問層
//prompt層新定制的成員如下{formType: 1, //輸入框類型，支持0（文本）默認1（密碼）2（多行文本）value: '', //初始時的值，默認空字符maxlength: 140, //可輸入文本的最大長度，默認500}//例子1layer.prompt(function(value, index, elem){alert(value); //得到valuelayer.close(index);});//例子2layer.prompt({formType: 2,value: '初始值',title: '這里是title'}, function(value, index, elem){alert(value); //得到valuelayer.close(index);});layer.open
語法：layer.open(options) 原始核心方法
基本上是露臉率最高的方法，不管是使用哪種方式創建層，都是走layer.open()，創建任何類型的彈層都會返回一個當前層索引，上述的options即是基礎參數，另外，該文檔統一采用options作為基礎參數的標識
layer.load
語法：layer.load(icon, options) 加載層
icon支持傳入0-2,如果是0，無需傳。另外特別注意一點：load默認是不會自動關閉的，因為你一般會在ajax回調體中關閉它。
layer.tab
語法：layer.tab(options) tab層
layer.tab({area: ['600px', '300px'],tab: [{title: 'TAB1', content: '內容1'}, {title: 'TAB2', content: '內容2'}, {title: 'TAB3', content: '內容3'}]});demo.html
<!doctype html> <html><head><meta charset="utf-8"><title>layer-更懂你的web彈窗解決方案</title><script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script><script src="layer/layer.js"></script><script src="layer/extend/layer.ext.js"></script></head><body><script>function func1() {layer.alert('內容');}function func2() {layer.alert('內容', {icon: 1,skin: 'layer-ext-moon' });}function func3() {//詢問框layer.confirm('您是如何看待前端開發？', {btn: ['重要', '奇葩'] //按鈕}, function() {layer.msg('的確很重要', { icon: 1 });}, function() {layer.msg('也可以這樣', {time: 2000, //2s后自動關閉btn: ['明白了', '知道了']});});}function func4() {//提示層layer.msg('玩命提示中');}function func5() {//墨綠深藍風layer.alert('墨綠風格，點擊確認看深藍', {skin: 'layui-layer-molv' //樣式類名,closeBtn: 0}, function() {layer.alert('偶吧深藍style', {skin: 'layui-layer-lan',closeBtn: 0,shift: 4 //動畫類型});});}function func6() {//捕獲頁layer.open({type: 1,shade: false,title: false, //不顯示標題content: $('.layer_notice'), //捕獲的元素cancel: function(index) {layer.close(index);this.content.show();layer.msg('捕獲就是從頁面已經存在的元素上，包裹layer的結構', { time: 2000, icon: 6 });}});}function func7() {//頁面層layer.open({type: 1,skin: 'layui-layer-rim', //加上邊框area: ['420px', '240px'], //寬高content: 'html內容'});}function func8() {//自定頁layer.open({type: 1,skin: 'layui-layer-demo', //樣式類名closeBtn: 0, //不顯示關閉按鈕shift: 2,area: ['420px', '240px'], //寬高shadeClose: true, //開啟遮罩關閉content: '內容'});}function func9() {//tips層layer.tips('Hi，我是tips', $("#tips"));}function func10() {//iframe層layer.open({type: 2,title: 'layer mobile頁',shadeClose: true,shade: 0.8,area: ['380px', '90%'],content: 'http://m.baidu.com' //iframe的url});}function func11() {//iframe窗layer.open({type: 2,title: false,closeBtn: 0, //不顯示關閉按鈕shade: [0],area: ['340px', '215px'],offset: 'auto', //右下角彈出time: 2000, //2秒后自動關閉shift: 2,content: ['test/guodu.html', 'no'], //iframe的url，no代表不顯示滾動條end: function() { //此處用于演示layer.open({type: 2,title: '百度一下，你就知道',shadeClose: true,shade: false,maxmin: true, //開啟最大化最小化按鈕area: ['1150px', '650px'],content: 'http://www.baidu.com'});}});}function func12() {//加載層var index = layer.load(0, { shade: false }); //0代表加載的風格，支持0-2}function func13() {//loading層var index = layer.load(1, {shade: [0.1, '#fff'] //0.1透明度的白色背景});}function func14() {//小tipslayer.tips('我是另外一個tips，只不過我長得跟之前那位稍有些不一樣。', $('#tips2'), {tips: [1, '#3595CC'],time: 4000});}function func15() {//prompt層layer.prompt({title: '輸入任何口令，并確認',formType: 1 //prompt風格，支持0-2}, function(pass) {layer.prompt({ title: '隨便寫點啥，并確認', formType: 2 }, function(text) {layer.msg('演示完畢！您的口令：' + pass + ' 您最后寫下了：' + text);});});}function func16() {//tab層layer.tab({area: ['600px', '300px'],tab: [{title: 'TAB1',content: '內容1'}, {title: 'TAB2',content: '內容2'}, {title: 'TAB3',content: '內容3'}]});}function openpage() {layer.config({extend: 'extend/layer.ext.js'});//頁面一打開就執行，放入ready是為了layer所需配件（css、擴展模塊）加載完畢layer.ready(function() {//官網歡迎頁layer.open({type: 2,skin: 'layui-layer-lan',title: 'layer彈層組件',fix: false,shadeClose: true,maxmin: true,area: ['1000px', '500px'],content: 'https://www.baidu.com'});layer.msg('歡迎使用layer');});}</script><div class="layer_notice">hello,i'm layer!</div><button id="tips">tips</button><button id="tips2">tips2</button><button id="func1" onclick=" func1(); ">初體驗</button><button id="func2" onclick=" func2(); ">皮膚</button><button id="func3" onclick=" func3(); ">詢問框</button><button id="func4" onclick=" func4(); ">提示層</button><button id="func5" onclick=" func5(); ">藍色風格</button><button id="func6" onclick=" func6(); ">捕捉頁</button><button id="func7" onclick=" func7(); ">頁面層</button><button id="func8" onclick=" func8(); ">自定義</button><button id="func9" onclick=" func9(); ">tips層</button><button id="func10" onclick=" func10(); ">iframe層</button><button id="func11" onclick=" func11(); ">iframe窗</button><button id="func12" onclick=" func12(); ">加載層</button><button id="func13" onclick=" func13(); ">loading層</button><button id="func14" onclick=" func14(); ">小tips</button><button id="func15" onclick=" func15(); ">prompt層</button><button id="func16" onclick=" func16(); ">tab層</button><button id="openpage" onclick=" openpage(); ">openpage</button></body> </html>運行結果如圖:
總結
以上是生活随笔為你收集整理的layer-v2.4弹层组件使用示例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 找不到该项目 请确认该项目的位置_裕同拟
- 下一篇： 曾国藩的正面和侧面