ymPrompt從最簡單的1.0版本到現在的4.0版本,代碼共經歷了四次較大的改動,組件在功能上有了很大的改進,應用靈活 度更大,可應用環境的環境更加廣泛,特別在4.0版本中加入對遮罩顯示隱藏、按鈕/圖標的自定義、組件語言的控制、窗口懸浮位置等控制功能,更加的增強了 組件的應用范圍,使其不僅僅可以使用到模擬alert彈出之類的應用中,更可實現類似qq消息提示,登陸窗口,進度條等效果。
但是,任何的 事情都具有其兩面性,隨着功能的增多,組件的使用的復雜度也在逐步增加,好在組件每次更新都努力在兼容之前版本的基礎上做修改,這使得你可以以很簡單的方 式定制簡單的彈出框,也可以以較復雜的參數來定制更加強大的彈出框。不要被demo及使用說明中的一堆參數和方法所嚇倒,很多參數也許我們可能並不會用 到,找到我們真正需要的那一兩個參數就足夠了。
本打算在年前發布4.0版,但由於一些功能的實現一直不太穩定,加上年前工作的原因,推遲到 年后才發布,該版本的代碼在3.0的基礎上做了比較大的改動,修正了之前版本的一些問題,增加了幾個功能,不少是網友對我提出的,在此感謝。在完善和改進 組件的同時,盡管我一直在努力保持組件的代碼的最小化,任何一個字節的代碼能省則省,但限於個人能力,因此代碼可能仍然不是最簡潔的,如果哪位大俠有好的 改進意見,請不吝指教!
其中主要改進內容如下:
4.0版演示地址:http://tech.cncms.com/demo/js/ymPrompt4.0/demo.html
4.0版下載地址:ymPrompt-4.0-B-20090302.rar
覆蓋Frameset示例:http://tech.cncms.com/demo/js/ymPrompt4.0/frameset.html
ymPrompt 調用方法及參數說明
- 在頁面中引入ymPrompt.js。如:<script type="text/javascript" src="ymPrompt.js"></script>
- 在頁面中引入對應的皮膚文件的CSS,如:<link rel="stylesheet" type="text/css" href="skin/qq/ymPrompt.css" />
- 自定義組件的默認配置信息(此步驟可選,該方法可以在任意時間調用)
頁面的js中通過ymPrompt.setDefaultCfg(cfg)方法修改組件部分或全部的默認屬性。
如:ymPrompt.setDefaultCfg({maskAlpha:0.2,maskAlphaColor:'#00f'})
組件的默認配置(對於沒有設定的項將采用該配置項的默認值):
{
message: '內容', //消息框按鈕
width: 300, //寬
height: 185, //高
title: '標題', //消息框標題
handler: function() {}, //回調事件
maskAlphaColor: '#000', //遮罩透明色
maskAlpha: 0.1, //遮罩透明度
iframe: false, //iframe模式
icoCls: '', //圖標的樣式
btn: null, //按鈕配置
autoClose: true, //點擊關閉、確定等按鈕后自動關閉
fixPosition: true, //隨滾動條滾動
dragOut: false, //不允許拖出窗體范圍
titleBar: true, //顯示標題欄
showMask: true, //顯示遮罩
winPos: 'c', //在頁面中間顯示
winAlpha:0.8, //拖動窗體時窗體的透明度
closeBtn:true, //是否顯示關閉按鈕
showShadow:false, //不顯示陰影,只對IE有效
useSlide:false, //不使用淡入淡出
slideCfg:{increment:0.3,interval:50}, //淡入淡出配置
//按鈕文本,可通過自定義這些屬性實現本地化
closeTxt: '關閉',
okTxt:' 確 定 ',
cancelTxt:' 取 消 ',
msgCls:'ym-content' //消息內容的樣式
minBtn:false, //不顯示最小化按鈕
minTxt:'最小化',
maxBtn:false, //不顯示最大化按鈕
maxTxt:'最大化'
allowSelect:false, //是否允許選擇消息框內容,默認不允許
allowRightMenu:false //是否允許在消息框使用右鍵,默認不允許
} - 根據您的需要調用相應的消息函數(兩種參數傳入方式):
- ymPrompt.alert(參數) //消息提示類型
- ymPrompt.succeedInfo(參數) //成功信息類型
- ymPrompt.errorInfo(參數) //錯誤信息類型
- ymPrompt.confirmInfo(參數) //詢問消息類型
- ymPrompt.win(參數) //自定義窗口類型
參數傳入方式包含兩種:- 第一種即傳統的參數傳入,按照順序傳入相應的參數值即可(一定要按照順序),對於不需要設定的值請傳入null。如ymPrompt.alert('內容',null,null,'標題')
參數順序上面的默認配置中參數順序一致
- (推薦)第二種即JSON的傳入方式,需要指定字段名,沒有順序,根據需要設定相關屬性。如ymPrompt.alert({title:'標題',message:'內容'})
五個方法的參數意義完全相同(所有參數均為可選,不傳入則使用默認參數值),具體含義如下:- message:消息組件要顯示的內容,默認為“內容”。
- width:消息框的寬度,默認為300。
- height:消息框的高度,默認為185。
- title:消息組件標題,默認為“標題”
- handler:回調函數。當確定/取消/關閉按鈕被點擊時會觸發該函數並傳入點擊的按鈕標識。如ok代表確定,cancel代表取消,close代表關閉
- maskAlphaColor:遮罩的顏色,默認為黑色。
- maskAlpha:遮罩的透明度,默認為0.1。
- fixPosition:設定是否彈出框隨滾動條一起浮動,保持在屏幕的固定位置,默認為true
- dragOut:設定是否允許拖出屏幕范圍,默認為false。
- autoClose:設定用戶點擊窗口中按鈕后自動關閉窗口,默認為true(設定為false后程序中可以通過調用close方法關閉)。
- titleBar:是否顯示標題欄,默認顯示。注意,如果沒有標題欄需要自己在程序中控制關閉。
- showMask:是否顯示遮罩層,默認為true
- winPos:彈出窗口的位置,支持8種內置位置(c,l,t,r,b,lt,rt,lb,rb)及自定義窗口坐標,默認為c。
各參數意義:c:頁面中間,l:頁面左側,t:頁面頂部,r:頁面右側,b:頁面頂部,lt:左上角,rt:右上角,lb:左下角,rb:右下角 - winAlpha:彈出窗體拖動時的透明度,默認為0.8
//以下三個參數主要用於win方法(當然你也可以通過設定這些覆蓋前面四個消息類型的默認屬性)。 - iframe:是否使用iframe方法加載內容,該屬性如果為true或者object,組件則嘗試將message內容作為url進行加載(如 果屬性值為一個object,則將object的內容添加為iframe的屬性,如iframe: {id:'myId',name:'myName',src:'http://www.baidu.com'}則iframe的id為myId,name 為myName,src為http://www.baidu.com)。默認為false。
- icoCls:圖標類型。傳入的內容為className,具體寫法可以參考ymprompt.css中對圖標的定義方式。默認為空。
- btn:按鈕定義。傳入的是數組形式。每個按鈕的格式為['按鈕文本','按鈕標識'],
如[['確定','ok'],['取消','cancel'],['關閉','close']]等。
注意單個按鈕應該是這樣的:[['確定','ok']] - closeBtn:是否顯示關閉按鈕,默認為true(顯示)。
- showShadow:是否啟用彈出框陰影效果(IE Only),默認為false
- useSlide:f是否啟用彈出框的漸顯漸隱效果,默認為false
- slideCfg:漸變效果的配置信息,參數格式為object,屬性包括incerment:透明度每次增加的值,interval:變化的速度。例如:{incerment:0.3,interval:50}。該參數僅在useSlide為true時有效
//以下參數可用於對組件語言本地化,如用於英文等系統中 - okTxt:確定按鈕的文本描述,默認為“確定”
- cancelTxt:取消按鈕的文本描述,默認為“取消”
- closeTxt:關閉按鈕的文本描述(鼠標放在關閉按鈕上時顯示),默認為“關閉”
- minTxt:最小化按鈕的文本描述,默認為“最小化”
- maxTxt:最大化按鈕的文本描述,默認為“最大化”
- minBtn:是否顯示最小化按鈕,默認為false
- maxBtn:是否顯示最大化按鈕,默認為false
- allowSelect:是否允許選擇消息框內容,默認為false
- allowRightMenu:是否允許在消息框中使用右鍵,默認為false
- 操作接口:
- 屬性:
- version:當前版本號 如:alert(ymPrompt.version)
- pubDate:當前版本的發布日期 如:alert(ymPrompt.pubDate);
- cfg:組件的當前的默認配置
- 方法:
-
setDefaultCfg(cfg):設定組件的默認屬性,設定后的所有彈出均默認采用cfg中的設置。
如:ymPrompt.setDefaultCfg({maskAlpha:0.2,maskAlphaColor:'#00f'}); //設定遮罩層顏色為藍色,透明度0.2
-
-
getPage():在iframe窗口模式下,獲取到iframe的dom對象。
如:alert(ymPrompt.getPage().contentWindow.document.body.outerHTML); //獲取iframe頁面的html內容
-
-
resizeWin(w,h):通過程序動態修改窗口的大小。參數:w:寬度,h:高度
如:ymPrompt.resizeWin(400,300); //修改彈出框寬度為400px,高度為300px
-
-
doHandler(sign,autoClose):模擬觸發某個按鈕的點擊事件。參數sign:傳給回調函數的標識,autoClose:是否自動關閉窗口(默認采用全局配置)
如:ymPrompt.doHandler('ok',false); //觸發確定按鈕的點擊事件,並且執行完回調函數后不關閉窗口
-
-
getButtons():獲取當前彈出窗口的所有按鈕對象,返回結果是一個對象集合(數組)。
如:var btnID=ymPrompt.getButtons()[0].id; //獲取第一個按鈕的id
-
-
close():關閉當前彈出的窗口 如:ymPrompt.close()
-
-
max():最大化彈出窗口。
-
-
min():最小化彈出窗口
-
-
normal():窗口普通彈出狀態
-
- 其他說明:如果覺得“對象.方法”的調用方式比較麻煩,可以采用如下方式簡化調用:
在調用之前設定var Alert=ymPrompt.alert。之后就可以使用Alert()的方式進行調用