lhgDialog彈窗提示窗口組件

在頁面head引入lhgdialog(如果項目採用jQuery作爲框架,則引用jQuery的庫)。

<script type="text/javascript" src="lhgdialog.min.js"></script>

 

配置全局默認參數(可選):

(function(config){
    config['extendDrag'] = true; // 注意,此配置參數只能在這裏使用全局配置,在調用窗口的傳參數使用無效
    config['lock'] = true;
    config['fixed'] = true;
    config['okVal'] = 'Ok';
    config['cancelVal'] = 'Cancel';
    // [more..]
})($.dialog.setting);

// 如果只設置一個或少量全局配置也可這樣:
$.dialog.setting.extendDrag = true;

 

快速入門

一、使用傳統的參數
$.dialog(content,ok,cancel)

$.dialog('簡單愉悅的接口,強大的表現力,優雅的內部實現', function(){alert('yes');});

二、使用字面量傳參
$.dialog(options)

var dialog = $.dialog({title: '歡迎',content: '歡迎使用lhgdialog對話框組件!',icon: 'succeed',ok: function(){
        this.title('警告').content('請注意lhgdialog兩秒後將關閉!').lock().time(2);
        return false;
    }
});

 

窗口lhgdialog.min.js文件的url參數

參數形式爲:<script type="text/javascript" src="lhgdialog.min.js?self=true&skin=chrome"></script>

  1. self:指定彈出窗口的頁面

    類型:String
    默認:'false'
    說明:此參數只用在框架頁面中,如果不寫此參數或值爲false時則窗口跨框架彈出在框架最頂層頁面,如果值爲true則不跨框架,而在當前面頁彈出。
  2. skin:多皮膚共享CSS文件名

    類型:String
    默認:'default'
    說明:不寫此參數則值爲default。如果你想在同一頁面使用不同皮膚的窗口,此處的值就爲多皮膚共存的CSS的文件名

url參數不需要設定的就可以不寫,不寫時就使用默認值。

初始化參數列表

內容相關

  1. title:窗口的標題文本

    類型:String|Boolean
    默認:'視窗'
    說明:窗口標題的文件字符,如果值爲false時就會隱藏標題欄
  2. content:窗口中加載的內容

    類型:String
    默認:'loading...'
    說明:1.如果想加載單獨的頁面,只要在字符前加'url:'字符即可,如:content:'url:content.html'
         2.如果沒有設定content的值則會有loading的動畫

按鈕相關

  1. ok:確定按鈕回調函數

    類型:Function|Boolean
    默認:null
    說明:函數如果返回false將阻止對話框關閉;函數this指針指向內部api;如果傳入true表示只顯示有關閉功能的按鈕
  2. cancel:取消按鈕回調函數

    類型:Function|Boolean
    默認:null
    說明:1.函數如果返回false將阻止對話框關閉;函數this指針指向內部api;
         2.如果傳入true表示只顯示有關閉功能的按鈕,標題欄的關閉按鈕其實就是取消按鈕,點擊同樣觸發cancel事件
         3.如果值爲false時則隱藏標題欄右邊的關閉按鈕
  3. okVal:確定按鈕文字

    類型:String
    默認:確定
  4. cancelVal:取消按鈕文字

    類型:String
    默認:取消
  5. min:是否顯示最小化按鈕

    類型:Boolean
    默認:true
  6. max:是否顯示最大化按鈕

    類型:Boolean
    默認:true
  7. button:自定義按鈕

    類型:Array
    默認:null
    說明:
    配置參數成員:
    name —— 按鈕名稱
    callback —— 按下後執行的函數
    focus —— 是否聚焦點
    disabled —— 是否標記按鈕爲不可用狀態(後續可使用擴展方法讓其恢復可用狀態)
    示例:
    參數如:[{name: '登錄', callback: function () {}}, {name: '取消'}] 。注意點擊按鈕默認會觸發按鈕關閉動作,需要阻止觸發關閉請讓回調函數返回false

尺寸相關

  1. width:指定窗口的寬度

    類型:Number|String
    默認:'auto'
    說明:1. 設置窗口的寬度,可以帶單位。一般不需要設置此,對話框框架會自己適應內容
         2.如果設置爲百分值單位,將會以根據瀏覽器可視範圍作爲基準,此時如果瀏覽器窗口大小被改變其也會進行相應的調整
  2. height:指定窗口的高度

    類型:Number|String
    默認:'auto'
    說明:1.設置窗口的高度,可以帶單位。
         2.如果設置爲百分值單位,將會以根據瀏覽器可視範圍作爲基準,此時如果瀏覽器窗口大小被改變其也會進行相應的調整
  3. minWidth:最小寬度限制

    類型:Number
    默認:96
    說明:此參數值只能爲數字
  4. minHeight:最小高度限制

    類型:Number
    默認:32
    說明:此參數值只能爲數字

位置相關

  1. fixed:開啓靜止定位

    類型:Boolean
    默認:false
    說明:靜止定位是css2.1的一個屬性,它靜止在瀏覽器某個地方不動,也不受滾動條拖動影響
  2. left:相對於可視區域的X軸的座標

    類型:Number|String
    默認:'50%'
    說明:可以使用'0%' ~ '100%'作爲相對座標,如果瀏覽器窗口大小被改變其也會進行相應的調整
  3. top:相對於可視區域的Y軸的座標

    類型:Number|String
    默認:'50%'
    說明:可以使用'0%' ~ '100%'作爲相對座標,如果瀏覽器窗口大小被改變其也會進行相應的調整

視覺相關

  1. lock:開啓鎖屏

    類型:Boolean
    默認:false
    說明:中斷用戶對話框之外的交互,用於顯示非常重要的操作/消息,所以不建議頻繁使用它,它會讓操作變得繁瑣
  2. background:鎖屏遮罩顏色

    類型:String
    默認:'#FFF'
    說明:請注意這是一個會影響到全局的配置,後續出現的對話框的遮罩顏色都和此設置一樣,再設置不再起作用
  3. opacity:鎖屏遮罩透明度

    類型:Number
    默認:.5
    說明:請注意這是一個會影響到全局的配置,後續出現的對話框的遮罩透明度都和此設置一樣,再設置不再起作用
  4. icon:定義消息圖標

    類型:String
    默認:null
    說明:可定義“skins/icons/”目錄下的圖標名作爲參數名(一定要包含後綴名)
  5. titleIcon:標題欄左邊的小圖標

    類型:String
    默認:null
    說明:可定義“skins/icons/”目錄下的圖標名作爲參數名(一定要包含後綴名)
  6. padding:內容與邊界填充邊距(即css padding)

    類型:String
    默認:'15px 10px'
    說明:如果內容頁爲iframe方式加載的則在css裏需要設置爲0,要不在IE6中易出問題
  7. skin:多皮膚共存時指定的皮膚樣式

    類型:String
    默認:''
    說明:指定窗口要使用的皮膚的主類名

交互相關

  1. time:設置對話框顯示時間

    類型:Number
    默認:null
    說明:以秒爲單位
  2. resize:是否允許用戶調節尺寸

    類型:Boolean
    默認:true
  3. drag:是否允許用戶拖動位置

    類型:Boolean
    默認:true
  4. esc:是否允許用戶按Esc鍵關閉對話框

    類型:Boolean
    默認:true
    說明:只有窗口獲得焦點後才能使用此功能
  5. cache:是否緩存iframe方式加載的窗口內容頁

    類型:Boolean
    默認:true
    說明:只有使用iframe方式加載的單獨頁面的內容時此參數纔有效
  6. extendDrag:是否開啓增強拖拽體驗

    類型:Boolean
    默認:true
    說明:1.此屬性爲全局性設置,不能在窗口調用的參數裏設置,只能使用lhgdialog.setting.extendDrag來設置
         2.防止鼠標落入iframe導致不流暢,對超大對話框拖動優化

高級相關

  1. id:設定對話框唯一標識

    類型:String|Number
    默認:null
    說明:1.防止重複彈出
         2.定義id後可以使用this.get(youID)和lhgdialog.list[youID]獲取擴展方法
  2. zIndex:重置全局zIndex初始值

    類型:Number
    默認:1976
    說明:用來改變對話框疊加高度,請注意這是一個會影響到全局的配置,後續出現的對話框疊加高度將重新按此累加。
  3. init:對話框彈出後執行的函數

    類型:Function
    默認:null
    說明:如果是以iframe方式加載的內容頁此函數會在內容頁加載完成後執行
  4. close:對話框關閉前執行的函數

    類型:Function
    默認:null
    說明:函數如果返回false將阻止對話框關閉。請注意這不是關閉按鈕的回調函數,無論何種方式關閉對話框,close都將執行。
  5. parent:打開子窗口的父窗口對象

    類型:Object
    默認:null
    說明:此參數只用在打開多層窗口都使用遮罩層時纔會用到此參數,注意多層窗口鎖屏時一定要加此參數

擴展方法

窗口實例對象內部方法

  1. close():關閉對話框

    參數:無
    說明:在需要關閉窗口時可調用此方法
  2. reload(win,url):刷新或跳轉指定的頁面

    參數1:指定的要刷新或跳轉的頁面的window對象
    參數2:要跳轉到的頁面地址
  3. show():顯示對話框

    參數:無
  4. hide():隱藏對話框

    參數:無
  5. title(value):寫入標題

    參數1:標題的文本
    說明:無參數則返回創建的窗口對象實例
  6. content(value):向窗口中寫入內容

    參數1:窗口中的內容
    說明:如果參數的前3個字符爲'url:'參使用iframe方式加載單獨的內容頁,無參數則返回創建的窗口對象實例
  7. button(arguments):插入一個自定義按鈕

    參數1:name -- 按鈕名稱
    參數2:callback -- 按下後執行的函數
    參數3:focus -- 是否聚焦點
    參數4:disabled -- 是否標記按鈕爲不可用狀態(後續可使用擴展方法讓其恢復可用狀態)
    說明:此參數爲多個對象
    示例:
    button({
        name: '登錄',
        focus: true,
        callback: function(){}
    },{
        name: '取消'
    });
  8. position(left,top):重新定位對話框

    參數1:X軸的座標
    參數2:Y軸的座標
    說明:參數可以爲數字或帶單位的字符如:'200px'或使用'0%' ~ '100%'作爲相對座標
  9. size(width,height):重新設定對話框大小

    參數1:窗口的寬度
    參數2:窗口的高度
    說明:參數可以爲數字或帶單位的字符如:'200px'或使用'0%' ~ '100%'百分值單位
  10. max():最大化窗口

    參數:無
  11. min():最小化窗口

    參數:無
  12. lock():鎖屏

    參數:無
  13. unlock():解鎖

    參數:無
  14. time(val,callback):定時關閉(單位秒)

    參數1:數值,以秒爲單位
    參數2:回調函數
    說明:參數2爲窗口關閉前執行的函數
  15. focus() :自動設置窗口中焦點元素

    參數:無
  16. zindex() :置頂窗口

    參數:無
  17. get(id,object) :根據指定id獲取相應的對象

    參數1:窗口的id
    參數2:是否返回的是窗口實例對象
    說明:參數2的值只有爲數字1時才返回指定id的窗口的實例對象
  18. api:內容頁中調用窗口實例對象接口

    說明:此對象屬性是附加在iframe元素的一個屬性,在iframe方式加載的內容頁中通過調用此函數來獲取窗口的實例對象,示例:var api = frameElement.api; 注:此句代碼是加在iframe方式加載的內容頁中的,一定要注意
  19. opener:加載窗口組件頁面的window對象

    說明:此屬性主要用在iframe方式加載的內容頁中,示例:var api = frameElement.api, W = api.opener; 此時的W即爲加載窗口組件頁面的window對象
  20. iframe:iframe方式加載內容的iframe對象

    說明:此屬性主要用於在窗口組件調用頁面操作窗口中的iframe對象
  21. iwin:iframe方式加載內容頁的window對象

    說明:此屬性主要用於在窗口組件調用頁面操作窗口中的window對象,示例:var dg = $.dialog({'url:content.html',init:function(){ if( this.iwin.document.body ) alert('窗口內容頁加載完成'); });

窗口外部方法

  1. $.dialog.focus:獲取焦點的窗口實例對象

    說明:可以使用此屬性獲取兒得焦點的窗口的對象,示例:var dg = $.dialog.focus; 此時的dg就是當前焦點窗口的對象實例
  2. $.dialog.list:所有窗口對象實例的集合

    說明:通過此屬性可獲取所有打開的窗口對象,示例:關閉頁面所有對話框
    var list = $.dialog.list;
    for( var i in list ){
        list[i].close();
    }
  3. $.dialog.top:獲取lhgdialog可用最高層window對象

    說明:這與直接使用window.top不同,它能排除url參數self爲true時定義的頂層頁面爲調用窗口組件頁面或者頂層頁面爲框架集的情況
  4. $.dialog.data(name,value):跨框架數據共享寫入接口

    參數1:存儲的數據名
    參數2:將要存儲的任意數據(無此項則返回被查詢的數據,如果此值爲false就刪除指定名稱的數據)
    說明:框架與框架之間以及與主頁面之間進行數據交換是非常頭疼的事情,常規情況下你必須知道框架的名稱才能進行數據交換,如果是在複雜的多層框架下操作簡直就是噩夢。
    而data方法就是爲了解決這個問題,你完全不用管框架層級問題,它可以寫入任何類型的數據,而做到各個頁面之間數據共享。

擴展的一些提示性的窗口

  1. $.dialog.alert(content,callback):警告消息

    參數1:內容
    參數2:窗口關閉時執行的回調函數
  2. $.dialog.confirm(content,yes,no):確認

    參數1:內容
    參數2:確定按鈕回調函數
    參數3:取消按鈕回調函數
  3. $.dialog.prompt(content,yes,value):提問

    參數1:內容
    參數2:確定按鈕回調函數
    參數3:文本框默認值
  4. $.dialog.tips(content,time,icon,callback):短暫提示

    參數1:內容
    參數2:顯示時間
    參數3:提示圖標
    參數4:提示關閉時執行的函數
  5. $.dialog.load(url,options,cache):Ajax填充內容

    參數1:地址
    參數2:配置參數
    參數3:是否允許緩存. 默認false
發佈了142 篇原創文章 · 獲贊 51 · 訪問量 8萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章