快捷導航

小巧強大的jquery layer彈窗彈層插件

更新時間：2015年12月06日 11:18:08 投稿：hebedich

這篇文章主要介紹了小巧強大的jquery layer彈窗彈層插件的使用方法以及使用范圍，非常詳細，有需要的小伙伴可以參考下。

先去官網(wǎng)下載最新的js http://sentsin.com/jquery/layer/
①引用jquery
②引用layer.min.js

觸發(fā)彈層的事件可自由綁定，如：

$('#id').on('click', function(){ 
  layer.msg('test'); 
});

下面主要貼出上述例子的調(diào)用代碼：

【信息框】：

layer.alert('白菜級別前端攻城師賢心', 8); //風格一 
layer.msg('前端攻城師賢心'); //風格二 
//當然，遠遠不止這兩種風格。

【詢問框】：

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

【頁面層一】

$.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], //去掉默認關(guān)閉按鈕 
  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="">關(guān)閉< /button></div>' 
  } 
}); 
//自設(shè)關(guān)閉 
$('#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秒后右下角窗口自動關(guān)閉，并生成一個新的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('默認沒有關(guān)閉按鈕', 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，以便下次直接讀取內(nèi)存數(shù)據(jù) 
  layer.photos({ 
    html: '這里傳入自定義的html，也可以不用傳入（這意味著不會輸出右側(cè)區(qū)域）。相冊支持左右方向鍵、Esc關(guān)閉', 
    json: json 
  }); 
});

您可能感興趣的文章: