BUI 彈窗加載組件

彈窗加載組件把路由跳轉的頁面直接插入到當前頁, 是組件的第3種表現(xiàn)形式. bui.dialog做的事情是自定義內容提醒, bui.page做的事情除了加載模板,還執(zhí)行了模塊.

初始化

自動加載

var uiPage = bui.page({
  url:"pages/login/login.html",
  param: {}
})

手動加載

var uiPage = bui.page({
  url:"pages/login/login.html",
  param: {},
  autoload: false
})
$(".bui-page").click(function(){
  uiPage.open();
})

參數(shù)說明

重要的幾個參數(shù)說明下, 具體可以查看 bui.page API

• url [string] 跳轉的地址, 可以是模塊名;
• param [object] 跳轉的傳參 {};
• close [boolean] 是否需要關閉的圖標, 默認 false | true;
• autoload [boolean] 自動執(zhí)行 默認 true | false;
• syncHistory [boolean] 是否需要同步歷史記錄, 默認 false | true (如果為true, bui.back會退到上一個頁面, false則跳過上一個頁面);
• cache [boolean] 默認 true(只執(zhí)行一次) | false(每次打開都重新執(zhí)行);
• iframe [boolean] 默認 false | true 是否以iframe 的形式打開, 適合加載遠程地址;
• effect [boolean] 默認 "fadeInRight" 跟路由一樣打開, 還有一些其它效果, 請查看 bui.toggle API;
• beforeClose [function] 關閉前執(zhí)行回調;
• closed [function] 關閉后執(zhí)行回調;
• beforeOpen [function] 打開前執(zhí)行回調;
• opened [function] 打開后執(zhí)行回調;
• loaded [function] 第一次加載后執(zhí)行;

接收參數(shù)

在登錄頁內部如何獲取參數(shù)呢?

bui.history.getParams

pages/login/login.js

loader.define(function(require,export,module){
  // 方法1: 如果不確定該組件會被哪種方式使用, 則可以使用這種方式獲取.
  var params = bui.history.getParams(module.id);
  // 方法2: 獲取以bui.page({url:"",param:{}}) 加載的的參數(shù), 通過以下方式獲取
  var pageParams = bui.history.getParams("page");
})

獲取彈窗加載的實例

獲取到的是加載的登錄頁 login.js 拋出來的實例.

bui.history.getPage

// 可以拿到login實例拋出的方法
var login =  bui.history.getPage("pages/login/login");
// login 等于 login.js 拋出的form對象 { init:function(){} }

pages/login/login.js

loader.define(function(require,export,module){
  var form = {
    init: function(){
      console.log("login init")
    }
  }
  // 執(zhí)行
  form.init();
  return form;
})

獲取彈窗的實例

獲取到的是外部bui.page創(chuàng)建的 dialog的實例. 等于 uiPage ;

pages/login/login.js

loader.define(function(require,export,module){
  var form = {
    init: function(){
      // 內部可以拿到 module.id 來獲取彈窗, 進行彈窗的操作.
      var dialog = bui.history.getPageDialog(module.id);
      // 關閉操作
          // dialog.close();
      console.log(dialog)
    }
  }
  // 執(zhí)行
  form.init();
  return form;
})