jQuery layer彈出層插件 http://layer.layui.com/直接上官網學

在許多網站中，經常用到彈出層，有時候為了達到更好的用戶體驗，你將寫繁瑣的css跟js，這款 jquery-layer可以讓你想到即可做到的web彈窗/層js組件。layer側重於用戶靈活的自定義，為不同人的使用習慣提供全方位設計，您的頁 面會因此擁有更豐富、友好的操作體驗，而您只需在調用時簡單地配置相關參數，即可輕松實現各類交互。

 

它的使用方法很簡單，首先，引入jquery庫及layer庫 代碼如下：

<button id="test1">小小提示層</button> <script src="js/jquery-1.8.3.js"></script> <script src="js/layer.min.js"></script> <script> $('#test1').on('click', function () { //2秒后自動關閉，-1代表不顯示圖標 layer.msg('Hello layer', 2, -1); }); </script>

 

作者：廣州-yunny
除非注明， jQuery學習網文章均為原創，轉載時必須以鏈接形式標明本文地址。
本文地址： http://www.jquery001.com/jquery-layer.html

 

 

最近做的一個項目使用了一個叫做layer.js的插件，感覺很不錯，在這里寫下一些使用心得。

官方下載的地址與使用文檔：http://sentsin.com/jquery/layer/

因為官方的使用演示講解的已經非常清楚了，在這里我就講解一下就我在項目中的使用心得。

 

情況一：操作請求在iframe頁面中，但是彈窗希望是在整個頁面中居中，也就是相當於父頁面中的彈窗，也就是所謂的在iframe操作父頁面

方法如下：在當前的iframe頁面中寫JS觸發效果，希望彈窗的的DIV必須放在iframe父頁面中，調用代碼如下

     $("#addBank").click(function(){ var docHeight = document.documentElement.clientHeight; top.$.layer({ type : 1, title : '添加銀行賬號', fix : true, zIndex : 19891014, offset:[(docHeight/2-240)+'px' , ''], area : ['auto','350px'], page : {dom : '#addWrapper'} }); });

其中top.$.layer就是調用的關鍵了，top是瀏覽器的內置對象，表示最頂層容器,這樣一來就是實現了iframe控制父頁面的彈窗效果了，

"#addWrapper"是父頁面中的一個div，id為"addWrapper",其他的參數官方API里面都有詳細介紹，這里我就不再啰嗦了

 

情況二：希望彈窗自定義顯示的文字的樣式，我們可以在接受參數message的時候使用如："<p style='text-align:center;'>你要顯示的文字</p>"的方式來實現

 

 

 

 

/*
先去官網下載最新的js  http://sentsin.com/jquery/layer/
①引用jquery
②引用layer.min.js
*/

觸發彈層的事件可自由綁定，如：
$('#id').on('click', function(){
    layer.msg('test');
});
下面主要貼出上述例子的調用代碼：
【信息框】：
layer.alert('白菜級別前端攻城師賢心', 8); //風格一
layer.msg('前端攻城師賢心'); //風格二
//當然，遠遠不止這兩種風格。

【詢問框】：
$.layer({
    shade: [0],
    area: ['auto','auto'],
    dialog: {
        msg: '您是如何看待前端開發？',
        btns: 2,
        type: 4,
        btn: ['重要','奇葩'],
        yes: function(){
            layer.msg('重要', 1, 1);
        }, no: function(){
            layer.msg('奇葩', 1, 13);
        }
    }
});
//還可用layer.confirm()快捷調用

【頁面層一】
$.layer({
    type: 1,
    shade: [0],
    area: ['auto', 'auto'],
    title: false,
    border: [0],
    page: {dom : '.layer_notice'}
});

【頁面層二】
var pageii = $.layer({
    type: 1,
    title: false,
    area: ['auto', 'auto'],
    border: [0], //去掉默認邊框
    shade: [0], //去掉遮罩
    closeBtn: [0, false], //去掉默認關閉按鈕
    shift: 'left', //從左動畫彈出
    page: {
        html: '<div style="width:420px; height:260px; padding:20px; border:1px solid #ccc; background- color:#eee;"><p>我從左邊來，我自定了風 格。</p><button id="pagebtn" class="btns" onclick="">關閉< /button></div>'
    }
});
//自設關閉
$('#pagebtn').on('click', function(){
    layer.close(pageii);
});

【iframe層一】
$.layer({
    type: 2,
    shadeClose: true,
    title: false,
    closeBtn: [0, false],
    shade: [0.8, '#000'],
    border: [0],
    offset: ['20px',''],
    area: ['1000px', ($(window).height() - 50) +'px'],
    iframe: {src: 'http://f2e.sentsin.com/chat'}
});

【iframe層二】
layer.tips('5秒后右下角窗口自動關閉，並生成一個新的iframe', this, {
    time: 5,
    maxWidth: 260
});
$.layer({
    type: 2,
    closeBtn: false,
    shadeClose: true,
    shade: [0.1, '#fff'],
    border: [0],
    time: 5,
    iframe: {
        src: 'test/guodu.html'
    },
    title: false,
    area: ['300px','250px'],
    shift: 'right-bottom',
    end: function(){
        $.layer({
            type : 2,
            title: '賢心博客 - sentsin.com',
            shadeClose: true,
            maxmin: true,
            fix : false,
            area: ['1024px', 500],
            iframe: {
                src : 'http://sentsin.com/'
            }
        });
    }
});

【加載層一】
layer.load(3);

【加載層二】
layer.load('加載帶文字', 3);

【tips層一】
layer.tips('tips的樣式並非是固定的，您可自定義外觀。', this, {
    style: ['background-color:#78BA32; color:#fff', '#78BA32'],
    maxWidth:185,
    time: 3,
    closeBtn:[0, true]
});

【tips層二】
layer.tips('默認沒有關閉按鈕', this , {guide: 1, time: 2});

【輸入/文件層】
//普通文本
layer.prompt({title: '您的名字？'}, function(name){
    alert(name);
});
//密碼文本
layer.prompt({title: '輸入任何口令，並確認',type: 1}, function(pass){
    alert(pass);
});
//文件上傳
layer.prompt({title: '隨便上傳個東東，並確認',type: 2}, function(file){
    alert(file);
});
//多行文本
layer.prompt({title: '隨便寫點啥，並確認',type: 3}, function(val){
    alert(val);
});

【tab層】
layer.tab({
    area: ['1000px', '500px'],
    data: [
        {title: 'Say', content:'Hi，Main'},
        {title: '無題', content:'支持html傳入'}
    ]
});

【相冊層】
//此處為異步請求模式，具體的json格式，請等待文檔更新。或者你直接通過請求看photos.json
var conf = {};
$.getJSON('ajax地址', {}, function(json){
    conf.photoJSON = json; //保存json，以便下次直接讀取內存數據
    layer.photos({
        html: '這里傳入自定義的html，也可以不用傳入（這意味着不會輸出右側區域）。相冊支持左右方向鍵、Esc關閉',
        json: json
    });
});