1. 程式人生 > >layer彈出層的使用(一)

layer彈出層的使用(一)

第一步:部署

下載layer後,把它部署到你專案中的任何一個目錄(當然,我們推薦放在前端相關目錄裡),你不能去挪動layer裡面的檔案結構,因為它們是不可拆散的組合。就像這樣:

第二步:引入

親愛的,你不必去管那些檔案是幹嘛的,你只需要認準一個檔案:layer.js 沒錯,當你試圖在頁面呈現layer的時候,你應該這樣去做:

第三步:使用

是時候目睹layer的挫樣了,由於她是基於jQuery,你可以選擇用jQuery的api方式去抒寫。當你想彈出一個layer例項的時候,你首先應該繫結事件,就像上面的那個例子。

彈出一個頁面層
<!doctype html>
<
html> <head> <title>開始使用layer</title> </head> <body> 你必須先引入jQuery1.8或以上版本 <script src="jQuery的路徑"></script> <script src="layer.js的路徑"></script> <script>
//彈出一個頁面層 $('#test2').on('click', function(){ layer.open({ type: 1, area: ['600px', '360px'], shadeClose: true, //點選遮罩關閉 content: '\<\div style="padding:20px;">自定義內容\<\/div>' }); });
彈出一個iframe層
$('#parentIframe').on('click', function(){
  layer.open({
  type: 2,
  title: 'iframe父子操作',
  maxmin: true,
  shadeClose: true, //點選遮罩關閉層
  area : ['800px' , '520px'],
  content: 'test/iframe.html'
  });
});

彈出一個loading層
$('#test4').on('click', function(){
  var ii = layer.load();
  //此處用setTimeout演示ajax的回撥
  setTimeout(function(){
  layer.close(ii);
  }, 1000);
});
彈出一個tips層

彈出一個tips層
$('#test5').on('click', function(){
  layer.tips('Hello tips!', '#test5');
});

文章來自:http://layer.layui.com/

相關推薦

jQuery UI Dialog元件實現簡單的modal

前言 在web專案中經常會用到彈出層/視窗,例如簡單的新增和修改功能,但如果專案的前端沒有引入任何框架,可能就要手動去建立DOM,然後通過js去控制,這樣雖然沒問題,但是樣式和效果等等不易控制

PopupWindow學習之方向

PopupWindow直接繼承於Object,通過WindowManager來新增和移除view; 相對於AlertDialog來說,AlertDialog預設顯示在螢幕中央,PopupWindow需要指定顯示位置。 AlertDialog不阻塞執行緒,Po

layer的使用

第一步:部署 下載layer後,把它部署到你專案中的任何一個目錄(當然,我們推薦放在前端相關目錄裡),你不能去挪動layer裡面的檔案結構,因為它們是不可拆散的組合。就像這樣: 第二步:引入 親愛的,你不必去管那些檔案是幹嘛的,你只需要認準一個檔案:layer.j

layui內建模組layer

        前面我們已經對layui前端框架的頁面元素進行了簡單的學習,但是作為一個可用的程式,僅僅是長的好看,並沒有那個什麼用;在好看的同時還需要實用和酷炫,實用就需要實現我們方便的和後端進行

ASP.NET—013:實現帶控件的

btn script lock 技術分享 trac borde stat -s scroll 在頁面中用到彈出新頁面的情況比較多的,一般來說都是使用JS方法showM

Ajax中用layer並刷新頁面的方法

ble ajax location index window ont tab delet delete $.post("DeleteHandler.ashx", { "table": "Contents", "ID": vals }, fun

深入理解Java虛擬機——java內存區域與內存溢異常

線程 文件的 語言 沒有 虛擬 深入理解java 十倍 並且 周期 Java虛擬機全稱:java virtual machine;是Java開發語言中,用來運行Java字節碼文件的平臺;通俗的講,就是一個程序。它提供對Java字節碼的解釋及運行,從而使Java語言能獨立於各

第三章 數據鏈路

哪裏 還要 發送 數據鏈路層 這一 都是 簡單 包含 封裝成幀       序言         我是一只菜鳥,又來了。開始今天數據鏈路層的學習吧。                                                               

C#導入導Excel

bject gpo tel collect lean type close 表格 excel導入 C#操作Excel導入導出方法一,根據項目要求,對Excel操作有多重方法,有的是類庫自己編程設計格式,有的是JS根據表格的格式樣式直接導出。 現在介紹的是直接下載型: 根據

layer的關閉問題

window 實現 增加用戶 html -s 新的 body var ati 就是在執行添加或修改的時候,需要將數據提交到後臺進行處理,這時候添加成功之後最理想的狀態是關閉彈出層並且刷新列表的數據信息,之前一直想實現這樣,可一直沒有成功,今天決定好好弄一弄,在仔細看過lay

layer的iframe頁面回調

關閉按鈕 PE 開戶 彈出層 復制代碼 getch 銷毀 bsp child $("#ChoiceBank").click(function () { var width = $("#content").css("Width");

jquery Bootstrap Popover顯示html內容,URL,div等

containe inpu lock ext ace src group mar 顯示 實現效果: 其實有個關鍵點: data-container="body" data-html="true" 註意下就可以了 <button type="button" class=

html/css/js-layer的初次使用

func order 鸚鵡 麻煩 bottom content layer document margin   學習前端有時很多時候要用到彈出層,原生的js寫有些麻煩,而且不美觀,基於jQuery的彈出層組件layer應運而生,近些年來備受青睞。官網上有使用教程,但當初用的

layer 使用

點選 彈窗 提示 onclick="javascript:tancc();" 示例程式碼 1. <span style="font-weight:bold;margin-left:25px;" onclick="javascript:tancc();">說明<

layer中表單不起作用的解決方法

var html = '<form class="layui-form" action="">' + '<div class="layui-form-item"><label class="layui-form-label">角色名</label>

自己動手:做個數據庫訪問

       說資料庫是資訊系統裡最重要的部分,應當沒幾個人反對。最簡單的訪問資料庫的方式就是用程式直連資料庫,通過Sql進行操作,相信這也是每個程式設計師最初學的方法。但隨著程式規模的增大,再一條條語句去寫的話開發效率就有些低了,因此才有了很多框架去幫助我們操作資料庫

layer點選關閉按鈕重新整理父頁面

有兩種方法: 1.layer彈出層彈出的方法裡面會有一個end(層銷燬後觸發的回撥),無論是確認還是取消,只要層被銷燬了,end都會執行,不攜帶任何引數。 layer.open({            title:"品類合作模式新增"

最新Layer例項【開箱即用】

最新Layer彈出層例項 程式碼如下,會有意外收穫 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title<

Layer關閉後重新整理父頁面

Layer彈出層關閉後重新整理父頁面 //編輯 $("#edit").on("click", function(){ var id = getIdSelections(); //debugger; var addUrl = 'editCustomer.html?id='+ id la

《劍指offer》系列 棧的壓入、序列Java

連結 牛客:棧的壓入、彈出序列 題目描述 輸入兩個整數序列,第一個序列表示棧的壓入順序,請判斷第二個序列是否可能為該棧的彈出順序。假設壓入棧的所有數字均不相等。例如序列1,2,3,4,5是某棧的壓入順序,序列4,5,3,2,1是該壓棧序列對應的一個彈出序列,但4,3,5,1,