layer彈出框外掛引數及方法介紹
阿新 • • 發佈：2021-12-01
layerui下載:http://www.layui.com
更多引數請閱讀開發文件：http://www.layui.com/doc/modules/layer.html
Layui 是一款採用自身模組規範編寫的情懷型前端UI框架，遵循原生HTML/CSS/JS的書寫與組織形式，門檻極低，拿來即用。其外在極簡，卻又不失飽滿的內在，體積輕盈，元件豐盈，從核心程式碼到API的每一處細節都經過精心雕琢，非常適合介面的快速開發
1.引入js 和css
| 1 2 3 |
<scripttype="text/javascript" src="jquery-1.9.0.min.js"></script>
<scripttype="text/javascript" src="layui.all.js"></script>
<linkrel="stylesheet" href="css/layui.css">
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 |
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>layer</title>
<scripttype="text/javascript" src="jquery-1.9.0.min.js"></script>
<scripttype="text/javascript" src="layui.all.js"></script>
<linkrel="stylesheet" href="css/layui.css"></head>
<body>
<divid="one">
<inputtype="button" value="確定">
<inputid="b3" type="button" value="確定">
</div>
<script>
// layer.msg('hello');
// layer.msg('不開心。。', {icon: 5});
// layer.confirm('納尼？', {//自定義彈出框
// btn: ['按鈕一', '按鈕二', '按鈕三'] //可以無限個按鈕
// , btn3: function (index, layero) {
// //按鈕【按鈕三】的回撥
// alert(333)
// }
// }, function (index, layero) {
// //按鈕【按鈕一】的回撥
// alert(111)
// }, function (index) {
// //按鈕【按鈕二】的回撥
// alert(222)
// });
$('input').click(function () {
layer.open({
id:0,//用於控制彈層唯一標識
area: ['600px', '400px'],
// offset: 'lt',//設定彈出框的位置
type:2,//layer提供了5種層型別。可傳入的值有：0（資訊框，預設）1（頁面層）2（iframe層）3（載入層）4（tips層）。 若你採用layer.open({type: 1})方式呼叫，則type為必填項（資訊框除外）
closeBtn:1,//設定關閉按鈕預設1 可設定引數0 1 2
shade:0.3,//遮罩 ：0.3
shadeClose:false,//是否點選遮罩關閉 ,預設false
// time:5000,//自動關閉所需毫秒 預設：0 預設不會自動關閉。當你想自動關閉時，可以time: 5000，即代表5秒後自動關閉，
anim:0,//彈出動畫目前anim可支援的動畫型別有0-6 如果不想顯示動畫，設定 anim: -1 即可。另外需要注意的是，3.0之前的版本用的是 shift 引數
isOutAnim:true,//關閉動畫 （layer 3.0.3新增） 預設情況下，關閉層時會有一個過度動畫。如果你不想開啟，設定 isOutAnim: false 即可
maxmin:false,//該引數值對type:1和type:2有效。預設不顯示最大小化按鈕。需要顯示配置maxmin: true即可
fixed:true,//即滑鼠滾動時，層是否固定在可視區域。如果不想，設定fixed: false即可
resize:false,//預設情況下，你可以在彈層右下角拖動來拉伸尺寸。如果對指定的彈層遮蔽該功能，設定 false即可。該引數對loading、tips層無效
scrollbar:true,//是否允許瀏覽器出現滾動條 預設允許瀏覽器滾動，如果設定scrollbar: false，則遮蔽
maxWidth:500,//預設：360 請注意：只有當area: 'auto'時，maxWidth的設定才有效。
maxHeight:800,// 預設：無 請注意：只有當高度自適應時，maxHeight的設定才有效。
zIndex:19891014,//預設：19891014 一般用於解決和其它元件的層疊衝突。
move:'.layui-layer-title',// 觸發拖動的元素 預設：'.layui-layer-title' 預設是觸發標題區域拖拽。如果你想單獨定義，指向元素的選擇器或者DOM即可。如move: '.mine-move'。你還配置設定move: false來禁止拖拽
// yes:function (index, layero) {//確定按鈕回撥方法 該回調攜帶兩個引數，分別為當前層索引、當前層DOM物件。如：
// alert("確定後要做的事情");
// layer.close(index); //如果設定了yes回撥，需進行手工關閉
// },
cancel:function (index, layero) {//右上角關閉按鈕觸發的回撥 該回調攜帶兩個引數，分別為：當前層索引引數（index）、當前層的DOM物件（layero），預設會自動觸發關閉。如果不想關閉，return false即可
if(confirm('確定要關閉麼')){ //只有當點選confirm框的確定時，該層才會關閉 設定 type:2 closeBtn:2,
layer.close(index)
}
return false;
},
resizing:function () {
alert(111111)
},
title: "檢視文章",
content: 'user.html',//這裡content是一個URL，如果你不想讓iframe出現滾動條，你還可以content:
// success:function () {//層彈出後的成功回撥方法
// alert("視窗彈出成功了！");
// }
});
});
//方法大全
//layer.open(options) - 原始核心方法
//-----------------------------------------------------------------------------------------------------
//1.layer.alert(content, options, yes) - 普通訊息框 它的彈出似乎顯得有些高調，一般用於對使用者造成比較強烈的關注，類似系統alert，
// 但卻比alert更靈便。它的引數是自動向左補齊的。通過第二個引數，可以設定各種你所需要的基礎引數，但如果你不需要的話，直接寫回調即可
// layer.alert('有了回撥', function(index){
// //do something
// alert(1111);
// layer.close(index);
// });
//-----------------------------------------------------------------------------------------------------
//2.layer.confirm(content, options, yes, cancel) - 詢問框 類似系統confirm，但卻遠勝confirm，
// 另外它不是和系統的confirm一樣阻塞你需要把互動的語句放在回撥體中。同樣的，它的引數也是自動補齊的。
// layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){
// //do something
//
// layer.close(index);
// });
//-----------------------------------------------------------------------------------------------------
//3. layer.msg(content, options, end) - 提示框 我們在原始碼中用了相對較大的篇幅來定製了這個msg，
// 目的是想將其打造成露臉率最高的提示框。而事實上我的確也在大量地使用它。
// 因為它簡單，而且足夠得自覺，它不僅佔據很少的面積，而且預設還會3秒後自動消失所有這一切都決定了我對msg的愛。
// 因此我賦予了它許多可能在外形方面，它堅持簡陋的變化，在作用方面，它堅持零使用者操作。而且它的引數也是自動補齊的。
//eg1
// layer.msg('只想弱弱提示');
//eg2
// layer.msg('有表情地提示', {icon: 6});
//eg3
// layer.msg('關閉後想做些什麼', function(){
// //do something
// });
//eg
// layer.msg('同上', {
// icon: 1,
// time: 2000 //2秒關閉（如果不配置，預設是3秒）
// }, function(){
// //do something
// });
//-----------------------------------------------------------------------------------------------------
//4.layer.load(icon, options) - 載入層 type:3的深度定製。load並不需要你傳太多的引數，但如果你不喜歡預設的載入風格，
// 你還有選擇空間。icon支援傳入0-2如果是0，無需傳。另外特別注意一點：load預設是不會自動關閉的，因為你一般會在ajax回撥體中關閉它。
//eg1
// var index = layer.load();
//eg2
// var index = layer.load(1); //換了種風格
//eg3
// var index = layer.load(2, {time: 10*1000}); //又換了種風格，並且設定最長等待10秒
//關閉
// layer.close(index);
//-----------------------------------------------------------------------------------------------------
//layer.tips(content, follow, options) - tips層 type:4的深度定製。也是我本人比較喜歡的一個層型別，
// 因為它擁有和msg一樣的低調和自覺，而且會智慧定位，即靈活地判斷它應該出現在哪邊。預設是在元素右邊彈出
//eg1
// layer.tips('只想提示地精準些', '#b3');
//eg 2
// $('#b3').on('click', function(){
// var that = this;
// layer.tips('只想提示地精準些', that); //在元素的事件回撥體中，follow直接賦予this即可
// });
//eg 3
// layer.tips('在上面', '#b3', {
// tips: 1
// });
//-----------------------------------------------------------------------------------------------------
//layer.prompt(options, yes) - 輸入層 prompt的引數也是向前補齊的。options不僅可支援傳入基礎引數，還可以傳入prompt專用的屬性。當然，
// 也可以不傳。yes攜帶value 表單值index 索引elem 表單元素
// layer.prompt(function(value, index, elem){
// alert(value); //得到value
// layer.close(index);
// });
//-----------------------------------------------------------------------------------------------------
//layer.tab(options) - tab層 tab層只單獨定製了一個成員，即tab: []，例子
// layer.tab({
// area: ['600px', '300px'],
// tab: [{
// title: 'TAB1',
// content: '內容1'
// }, {
// title: 'TAB2',
// content: '內容2'
// }, {
// title: 'TAB3',
// content: '內容3'
// }]
// });
//-----------------------------------------------------------------------------------------------------
//layer.setTop(layero) -置頂當前視窗 非常強大的一個方法，雖然一般很少用。但是當你的頁面有很多很多layer視窗，
// 你需要像Window窗體那樣，點選某個視窗，該窗體就置頂在上面，那麼setTop可以來輕鬆實現。它採用巧妙的邏輯，以使這種置頂的效能達到最優
// layer.open({
// type: 2,
// shade: false,
// area: '500px',
// maxmin: true,
// content: 'http://www.layui.com',
// zIndex: layer.zIndex, //重點1
// success: function(layero){
// layer.setTop(layero); //重點2
// }
// });
</script>
</body>
</html>
|