ymPrompt.js訊息提示元件

阿新 • • 發佈：2018-11-20

轉載：https://www.cnblogs.com/linzheng/archive/2010/11/15/1878058.html

使用說明：

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