1. 程式人生 > >使用layer.open時content屬性傳值記錄

使用layer.open時content屬性傳值記錄

  最近在做一個後臺專案,正好碰上了要使用layer.open,就順手記錄一下,方便以後遇到了有個參考 - 2016/11/7

  layer 這個是一個web彈層元件,挺好用的…然後專案框架是SSM…

  layer.open主要是用來彈出來一個iframe彈窗,然後用來展示資料也行,用來修改也行,這次記錄的主要是展示,展示我想要展示的資料,我需要的頁面…

複製程式碼
layer.open({
     type: 1,
     title: '賬戶資訊詳情',
     shadeClose: true,
     shade: false,
     maxmin: true, //開啟最大化最小化按鈕
area: ['893px', '600px'], content: xxxxxxxxx });
複製程式碼

其他的不看,單看content,因為content的內容就是需要展示的內容

第一種方法,很簡單,我想要看一個已經存在的頁面,比如說百度,或者專案中某個頁面 直接寫地址

複製程式碼
layer.open({
      type: 2,
      title: '很多時候,我們想最大化看,比如像這個頁面。',
      shadeClose: true,
      shade: false,
      maxmin: true, //開啟最大化最小化按鈕
      area: ['893px', '600px'],
      content: 
'http://fly.layui.com/' }); ----------------------------------------------------------------------- layer.open({ type: 2, title: '使用者資訊。', shadeClose: true, shade: false, maxmin: true, //開啟最大化最小化按鈕 area: ['893px', '600px'], content: '/test/user/info' + uid });
複製程式碼

 後面的uid可能是你需要傳遞的某些引數之類的…具體的根據你controller來定

第二種方法,將需要的內容寫到頁面上,然後在使用的時候呼叫

jsp頁面:

<div id='info' style = "display : none">
        我是內容
</div>

然後在js裡面呼叫

複製程式碼
layer.open({
           type: 1,
           title: '賬戶資訊詳情',
           shadeClose: true,
           shade: false,
           maxmin: true, //開啟最大化最小化按鈕
           area: ['893px', '600px'],
           content: $("#info").html()
});
複製程式碼

第三種方法,直接在js裡面拼接…好凶殘…

複製程式碼
var html = "<div class='wrapper' id='detailsinfo'>" +
           "<div class='detailsdiv'>" +
           "<p><label>帳號:</label>" + '測試帳號' +"</p>" +
           "</div></div>"

layer.open({
    type: 1,
    title: '賬戶資訊詳情',
    shadeClose: true,
    shade: false,
    maxmin: true, //開啟最大化最小化按鈕
    area: ['893px', '600px'],
    content: html
});
複製程式碼

我現在使用的就是這三種方法,也許還有更好的方法,以後發現了再記錄

對於方法一:因為是使用已經存在的controller和頁面,所以傳值什麼都比較方便,需要什麼值就獲取什麼值傳遞什麼值…但是有些頁面可能我不想讓別人通過url直接就訪問到…那就可以用第二種和第三種…所需的資料直接通過ajax從後臺獲取到,然後再放到具體的位置,然後再展示~~