消息提示組件ymPrompt4.0

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()的方式進行

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章