1、在頁面中引入ymPrompt.js。如:<script type="text/javascript" src="ymPrompt.js"></script>
2、在頁面中引入對應的皮膚文件的CSS,如:<link rel="stylesheet" type="text/css" href="skin/qq/ymPrompt.css" />
3、自定義組件的默認配置信息(此步驟可選,該方法可以在任意時間調用)
頁面的js中通過ymPrompt.setDefaultCfg(cfg)方法修改組件部分或全部的默認屬性。
如:ymPrompt.setDefaultCfg({maskAlpha:0.2,maskAlphaColor:'#00f'})
組件的默認配置(對於沒有設定的項將採用該配置項的默認值):
{
titleBar:true, //顯示標題欄
fixPosition:true, //隨滾動條浮動
dragOut:false, //不允許拖出頁面
autoClose:true, //點擊按鈕後自動關閉頁面
maskAlphaColor:'#000', //遮罩透明色
maskAlpha:0.1, //遮罩透明度
winAlpha:0.8, //拖動窗體時 窗體的透明度,默認爲0.8
title: '標題', //消息框標題
message: '內容', //消息框按鈕
width: 300, //寬
height: 185, //高
iframe:false,
btn:null,
icoCls:'',
handler: function(){} //回調事件
showMask: true, //是否顯示遮罩
winPos: 'c', //彈出窗口默認位置
closeBtn:true, //是否顯示關閉按鈕
//按鈕文本,可通過自定義這些屬性實現本地化
closeTxt: '關閉',
okTxt:' 確 定 ',
cancelTxt:' 取 消 '
}
4、根據您的需要調用相應的消息函數(兩種參數傳入方式):
ymPrompt.alert(參數) //消息提示類型
ymPrompt.succeedInfo(參數) //成功信息類型
ymPrompt.errorInfo(參數) //錯誤信息類型
ymPrompt.confirmInfo(參數) //詢問消息類型
ymPrompt.win(參數) //自定義窗口類型
參數傳入方式包含兩種:
第一種即傳統的參數傳入,按照順序傳入相應的參數值即可(一定要按照順序),對於不需要設定的值請傳入null。如ymPrompt.alert('內容',null,null,'標題')
參數順序:message,width,height,title,handler,maskAlphaColor,maskAlpha,
iframe,icoCls,btn,autoClose,fixPosition,dragOut,titleBar,showMask,winPos,winAlpha
(推薦)第二種即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(顯示)。
//以下參數可用於對組件語言本地化,如用於英文等系統中
okTxt:確定按鈕的文本描述,默認爲“確定。
cancelTxt:取消按鈕的文本描述,默認爲“取消”
closeTxt:關閉按鈕的文本描述(鼠標放在關閉按鈕上時顯示),默認爲“關閉”
5、操作接口:
屬性:
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()
6、其他說明:如果覺得“對象.方法”的調用方式比較麻煩,可以採用如下方式簡化調用:
在調用之前設定var Alert=ymPrompt.alert。之後就可以使用Alert()的方式進行