1. 程式人生 > >layer 彈窗 載入層 選擇框

layer 彈窗 載入層 選擇框

首先依賴jquery

1.alert

layer.alert("顯示資訊"); // 最基本的

layer.alert("顯示資訊", {
    icon: 0 , // 0~6
    title: "標題", // 文字、 、false
    closeBtn: 1 // 右上角關閉x 0:無 1:有 2:有(略醜)
});

layer.alert("顯示資訊", {
    title: "標題"
}, function (index) {
    // 點選確定按鈕,執行程式碼塊,不會關閉當前提示

    layer.close(index); // 關閉當前提示
});

2.confirm

layer.confirm("請確認",{
    title: false,
    btn: ['確定','取消']
},function(){
    layer.alert("確定");
},function(){
    layer.alert("取消");
});

3.資訊框(最常用)

layer.msg("最常用的提示",{
    title: false,
    closeBtn: 0,
    time: 3*1000, // 3秒後關閉
    shadeClose: true, // 點選其他位置關閉
    scrollbar: false // 鎖定滾動條
});

var layerMsg = layer.msg("載入中"
, { title: false, icon: 16 // 載入圖示 }); layer.close(layerMsg); // 關閉單個 layer.closeAll(); // 關閉所有

4.頁面層

layer.open({
    type: 1, 
    content: '隨意標籤或者文字'
});

5.載入層

var layerMsg = layer.load(1,{ // 此處1沒有意義,隨便寫個東西
    icon: 0, // 0~2 ,0比較好看
    shade: [0.5,'black'] // 黑色透明度0.5背景
});
layer.close(layerMsg); // 關閉單個
layer.closeAll(); // 關閉所有

常用屬性

// 座標 , y z
offset: ['100px', '50px']
offset: '100px' // 設定垂直座標,水平自適應
offset: 't' // 頂部
offset: 'r' // 靠右
offset: 'b' // 底部
offset: 'l' // 靠左
offset: 'lt' // 左上
offset: 'lb' // 左下
offset: 'rt' // 右上
offset: 'rb' // 右下

// 寬高
area: ['100px', '100px']
area: '100px' // 定義寬度,高度自適應

style: class // 定義一個樣式