基于jquery的layui的layer彈層架構

例對應代碼layui.code

<script type="text/javascript" src="/admin/layer/layer.js"></script>
           

特别說明：事件需自己綁定，以下隻展現調用代碼。

//初體驗

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

    ,shift: 4 //動畫類型

  });

});

//捕獲頁

layer.open({

  type: 1,

  shade: false,

  title: false, //不顯示标題

  content: $('.layer_notice'), //捕獲的元素

  cancel: function(index){

    layer.close(index);

    this.content.show();

    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, //不顯示關閉按鈕

  shift: 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: 'http://layer.layui.com/mobile/' //iframe的url

}); 

//iframe窗

layer.open({

  type: 2,

  title: false,

  closeBtn: 0, //不顯示關閉按鈕

  shade: [0],

  area: ['340px', '215px'],

  offset: 'rb', //右下角彈出

  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: ['893px', '600px'],

      content: 'http://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 //prompt風格，支援0-2

}, function(pass){

  layer.prompt({title: '随便寫點啥，并确認', formType: 2}, function(text){

    layer.msg('示範完畢！您的密碼：'+ pass +' 您最後寫下了：'+ 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文檔手冊頁

    ,shift: 5 //0-6的選擇，指定彈出圖檔動畫類型，預設随機

  });

});

在list頁面點選時，彈出form彈出層，list.js：

$(".add_category,.update").click(function(){
        //彈出框
        var doMain = $('.domain_name').val();
        layer.open({
            shade: [0.5, '#000', false],
            type: 2,
            area: ['900px', '530px'],
            fix: false, //不固定
            maxmin: true,
            title: ['添加或修改使用者類型', false],
            content: doMain+"/Stat/QueryUserCategoryForm.action?adminUserCategory.id="+$(this).val()
        });
    });
           

 在點選form彈出層的“儲存”按鈕時，如果儲存資料成功，則關閉彈出層，并且重新整理list頁面：

form.js：

submitHandler: function (form){
            $.post(
                $('.domain_name').val()+"/Stat/AddOrUpdateUserCategory.action",
                $(form).serialize(),
                function(data){
                    var result = eval("("+data+")");
                    if(!result.status){
                        alert(result.message);
                    }else{
                        //添加資料成功，關閉彈出窗之前，重新整理清單頁面的資料
                        parent.window.location.href=$('.domain_name').val()+"/Stat/QueryUserCategoryListStat.action";
                        var index = parent.layer.getFrameIndex(window.name); //擷取視窗索引
                        parent.layer.close(index);
                    }
                }
            );
        }