DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 封裝的dialog插件 基於bootstrap模態對話框的簡單擴展
封裝的dialog插件 基於bootstrap模態對話框的簡單擴展
編輯:關於JavaScript     

在使用bootstrap 模態對話框時需要在頁面寫對話框html,如果一個頁面有許多地方需要對話框,那意味著需要寫多個,感覺很麻煩,平時不太習慣bootstrap 模態對話框這種方式,所以做了個簡單封裝及擴展,增加了自定義標題,寬度和高度,並根據寬高居中顯示。

默認屬性:
id:"modal",//彈窗id
title:"dialog",//彈窗標題
width:"600",//彈窗寬度,暫時不支持%
height:"500",//彈窗高度,不支持%
backdrop:true,//是否顯示遮障,和原生bootstrap 模態框一樣
keyboard:true,//是否開啟esc鍵退出,和原生bootstrap 模態框一樣
remote:"",//加載遠程url,和原生bootstrap 模態框一樣
openEvent:null,//彈窗打開後回調函數
closeEvent:null,//彈窗關閉後回調函數
okEvent:null//單擊確定按鈕回調函數
使用方法:
1.通過html data-*屬性定義
復制代碼 代碼如下:<a class="mzDialog" href="#" data-remote="test.html" data-mtitle="modal1" data-id="m1" data-width="600" data-okEvent="ok()">彈窗demo</a>
2.通過js初始化
$(".mzDialog").mzDialog();
不完善的地方及bug,這裡只是學習參考,自己可以修改完善
1、bootstrap-mzDialog 插件暫時只有2個按鈕,取消和確定,暫不支持自定義按鈕,自己可以修改源代碼添加此功能。
2、只能使用html data-*方式定義,不支持js初始化時配置參數,自己可以修改源碼擴展此功能。
3、寬度和高度建議不要使用百分比
4、注意這裡回調函數必需是字符串格式,如okEvent:”ok()” 這裡ok函數式自己定義的函數,切記要帶();
js源碼:

/*------------------------------------------------------
 *封裝的dialog插件,基於bootstrap模態窗口的簡單擴展
 *


                    

						
						
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved