ymPrompt消息提示元件 2.0,4.0

​

元件名稱：ymPrompt消息提示元件 4.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()的方式進行