ymPrompt消息提示組件4.0

---

組件調(diào)用方式1(傳統(tǒng)參數(shù)傳入方式)：示例調(diào)用方法

?	ymPrompt.alert('http://www.qq.com',null,null,'確認(rèn)要提交嗎?',handler)
?	ymPrompt.succeedInfo(document.getElementById('txt').innerHTML,400,260,null,handler2)
?	ymPrompt.errorInfo('操作失敗！',null,null,null,handler)
?	ymPrompt.confirmInfo('信息確認(rèn)框功能測(cè)試',null,null,null,handler)
?	ymPrompt.win('<div class=\'myContent\'>普通彈出窗口</div>',300,200,'普通彈窗測(cè)試')
?	ymPrompt.win('http://www.qq.com',500,300,'騰訊QQ官方網(wǎng)站',handler,null,null,{id:'a'})

組件調(diào)用方式2(JSON方式)：示例源碼

?	ymPrompt.alert({message:'http://www.qq.com',title:'確認(rèn)要提交嗎?',handler:handler})
?	ymPrompt.succeedInfo({ message:document.getElementById('txt').innerHTML,width:400,height:260,handler:handler2 })
?	ymPrompt.errorInfo({message:'操作失敗！',handler:handler})
?	ymPrompt.confirmInfo({message:'信息確認(rèn)框功能測(cè)試',handler:handler})
?	ymPrompt.win({ message:'<div class=\'myContent\'>普通彈出窗口</div>',width:300,height:200,title:'普通彈窗測(cè)試' })
?	ymPrompt.win({ message:'http://www.qq.com',width:500,height:300,title:'騰訊QQ官方網(wǎng)站',handler:handler,iframe:true })

其他使用方式演示：示例源碼

?	ymPrompt.alert()
?	ymPrompt.alert('消息內(nèi)容')
?	ymPrompt.alert({title:'我的標(biāo)題',message:'我的內(nèi)容'})
?	ymPrompt.win({title:'iframe模式',fixPosition:true,iframe:{id:'myId',name:'myName',src:'http://www.baidu.com'}})
?	ymPrompt.alert({title:'fixPosition使用演示',message:'我會(huì)隨滾動(dòng)條一起滾動(dòng)',fixPosition:true})
?	ymPrompt.alert({title:'dragOut使用演示',message:'我不能拖出到窗口可見區(qū)域以外',dragOut:false})
?	ymPrompt.alert({title:'autoClose使用演示',message:'程序控制關(guān)閉',autoClose:false,handler:autoClose})
?	ymPrompt.win({message:'<br><center>無(wú)標(biāo)題欄</center>',handler:noTitlebar,btn:[['關(guān)閉我']],titleBar:false})
?	ymPrompt.alert({message:'不顯示遮罩',title:'不顯示遮罩',showMask:false})
?	ymPrompt.alert({message:'右下角彈出',title:'右下角彈出',winPos:'rb'})
?	ymPrompt.alert({message:'自定義彈出位置',title:'右下角彈出',winPos:[200,1000]})
?	ymPrompt.win({message:'自定義按鈕',title:'自定義按鈕測(cè)試',handler:testHd,btn:[['是','yes'],['否','no'],['取消','cancel']]})
?	ymPrompt.alert({message:'拖動(dòng)窗體時(shí)的透明度為0.5',title:'自定義按鈕測(cè)試',winAlpha:0.5})

組件方式及屬性調(diào)用演示：示例源碼

?	ymPrompt.win('<div class=fmt>版本號(hào)：'+ymPrompt.version+'<br>發(fā)布日 期：'+ymPrompt.pubDate+'<br>組件當(dāng)前配置信 息：'+json2str(ymPrompt.cfg)+'</div>',250,450)
?	ymPrompt.win({message:'iframe.html',width:500,height:300,title:'getPage測(cè)試',handler:handlerIframe,autoClose:false,iframe:true})
?	ymPrompt.alert({message:'一秒鐘后我的大小改為[400,300]',height:200,width:250}); setTimeout(function(){ymPrompt.resizeWin(400,300)},1000);
?	ymPrompt.alert({message:'兩秒鐘后自動(dòng)點(diǎn)擊確定按鈕',handler:handler}); setTimeout(function(){ymPrompt.doHandler('ok')},1000);
?	ymPrompt.alert({message:'點(diǎn)擊確定顯示按鈕的內(nèi)容',autoClose:false,btn:[['是','yes'],['否','no']],handler:getButtons})
?	ymPrompt.alert({message:'懸浮右下角，模擬qq',fixPosition:true,winPos:'rb',showMask:false})
?	ymPrompt.alert({message:'英文化成功',handler:en})
?	ymPrompt.alert({message:'中文化成功',handler:cn})

---

調(diào)用方法及參數(shù)說明

在頁(yè)面中引入ymPrompt.js。如：<script type="text/javascript" src="ymPrompt.js"></script>

在頁(yè)面中引入對(duì)應(yīng)的皮膚文件的CSS，如：<link rel="stylesheet" type="text/css" href="skin/qq/ymPrompt.css" />

自定義組件的默認(rèn)配置信息（此步驟可選，該方法可以在任意時(shí)間調(diào)用）
頁(yè)面的js中通過ymPrompt.setDefaultCfg(cfg)方法修改組件部分或全部的默認(rèn)屬性。
如：ymPrompt.setDefaultCfg({maskAlpha:0.2,maskAlphaColor:'#00f'})

組件的默認(rèn)配置（對(duì)于沒有設(shè)定的項(xiàng)將采用該配置項(xiàng)的默認(rèn)值）：
{
???titleBar:true, //顯示標(biāo)題欄
???fixPosition:false, //不隨滾動(dòng)條浮動(dòng)
???dragOut:true, //允許拖出頁(yè)面
???autoClose:true, //點(diǎn)擊按鈕后自動(dòng)關(guān)閉頁(yè)面
???maskAlphaColor:'#000', //遮罩透明色
???maskAlpha:0.1, //遮罩透明度
???winAlpha:0.8, //拖動(dòng)窗體時(shí) 窗體的透明度，默認(rèn)為0.8

???title: '標(biāo)題', //消息框標(biāo)題
???message: '內(nèi)容', //消息框按鈕

???width: 300, //寬
???height: 185, //高
???iframe:false,
???btn:null,
???icoCls:'',
???handler: function(){} //回調(diào)事件

???showMask: true, //是否顯示遮罩
???winPos: 'c', //彈出窗口默認(rèn)位置

???//按鈕文本，可通過自定義這些屬性實(shí)現(xiàn)本地化
???closeTxt: '關(guān)閉',
???okTxt:' 確 定 ',
???cancelTxt:' 取 消 '
}

根據(jù)您的需要調(diào)用相應(yīng)的消息函數(shù)(兩種參數(shù)傳入方式)：

• ymPrompt.alert(參數(shù)) //消息提示類型
• ymPrompt.succeedInfo(參數(shù)) //成功信息類型
• ymPrompt.errorInfo(參數(shù)) //錯(cuò)誤信息類型
• ymPrompt.confirmInfo(參數(shù)) //詢問消息類型
  
  
• ymPrompt.win(參數(shù)) //自定義窗口類型

參數(shù)傳入方式包含兩種：

• 第一種即傳統(tǒng)的參數(shù)傳入，按照順序傳入相應(yīng)的參數(shù)值即可（一定要按照順序），對(duì)于不需要設(shè)定的值請(qǐng)傳入null。如ymPrompt.alert('內(nèi)容',null,null,'標(biāo)題')
  
  參數(shù)順序：message,width,height,title,handler,maskAlphaColor,maskAlpha,
  iframe,icoCls,btn,autoClose,fixPosition,dragOut,titleBar,showMask,winPos,winAlpha
  
  
• (推薦)第二種即JSON的傳入方式，需要指定字段名,沒有順序，根據(jù)需要設(shè)定相關(guān)屬性。如ymPrompt.alert({title:'標(biāo)題',message:'內(nèi)容'})

五個(gè)方法的參數(shù)意義完全相同(所有參數(shù)均為可選，不傳入則使用默認(rèn)參數(shù)值),具體含義如下：

• message：消息組件要顯示的內(nèi)容，默認(rèn)為“內(nèi)容”。
• width：消息框的寬度，默認(rèn)為300。
• height：消息框的高度，默認(rèn)為185。
• title：消息組件標(biāo)題，默認(rèn)為“標(biāo)題”
• handler：回調(diào)函數(shù)。當(dāng)確定/取消/關(guān)閉按鈕被點(diǎn)擊時(shí)會(huì)觸發(fā)該函數(shù)并傳入點(diǎn)擊的按鈕標(biāo)識(shí)。如ok代表確定，cancel代表取消，close代表關(guān)閉
• maskAlphaColor：遮罩的顏色，默認(rèn)為黑色。
• maskAlpha：遮罩的透明度，默認(rèn)為0.1。
  
  
• fixPosition：設(shè)定是否彈出框隨滾動(dòng)條一起浮動(dòng)，保持在屏幕的固定位置，默認(rèn)為false
• dragOut：設(shè)定是否允許拖出屏幕范圍，默認(rèn)為true。
• autoClose：設(shè)定用戶點(diǎn)擊窗口中按鈕后自動(dòng)關(guān)閉窗口，默認(rèn)為true（設(shè)定為false后程序中可以通過調(diào)用close方法關(guān)閉）。
• titleBar：是否顯示標(biāo)題欄，默認(rèn)顯示。注意，如果沒有標(biāo)題欄需要自己在程序中控制關(guān)閉。
• showMask：是否顯示遮罩層，默認(rèn)為true
• winPos：彈出窗口的位置，支持8種內(nèi)置位置（c,l,t,r,b,lt,rt,lb,rb）及自定義窗口坐標(biāo),默認(rèn)為c。
  ??各參數(shù)意義：c:頁(yè)面中間,l:頁(yè)面左側(cè),t:頁(yè)面頂部,r:頁(yè)面右側(cè),b:頁(yè)面頂部,lt:左上角,rt:右上角,lb:左下角,rb:右下角
• winAlpha：彈出窗體拖動(dòng)時(shí)的透明度，默認(rèn)為0.8
  
  //以下三個(gè)參數(shù)主要用于win方法（當(dāng)然你也可以通過設(shè)定這些覆蓋前面四個(gè)消息類型的默認(rèn)屬性）。
• iframe：是否使用iframe方法加載內(nèi)容，該屬性如果為true或者object，組件則嘗試將message內(nèi)容作為url進(jìn)行加載(如 果屬性值為一個(gè)object，則將object的內(nèi)容添加為iframe的屬性，如iframe: {id:'myId',name:'myName',src:'http://www.baidu.com'}則iframe的id為myId,name 為myName,src為http://www.baidu.com)。默認(rèn)為false。
• icoCls：圖標(biāo)類型。傳入的內(nèi)容為className，具體寫法可以參考ymprompt.css中對(duì)圖標(biāo)的定義方式。默認(rèn)為空。
• btn：按鈕定義。傳入的是數(shù)組形式。每個(gè)按鈕的格式為['按鈕文本','按鈕標(biāo)識(shí)']，
  如[['確定','ok'],['取消','cancel'],['關(guān)閉','close']]等。
  注意單個(gè)按鈕應(yīng)該是這樣的：[['確定','ok']]
  
  //以下參數(shù)可用于對(duì)組件語(yǔ)言本地化，如用于英文等系統(tǒng)中
• okTxt：確定按鈕的文本描述，默認(rèn)為“確定”
• cancelTxt：取消按鈕的文本描述，默認(rèn)為“取消”
• closeTxt：關(guān)閉按鈕的文本描述（鼠標(biāo)放在關(guān)閉按鈕上時(shí)顯示），默認(rèn)為“關(guān)閉”

操作接口：

屬性：

version：當(dāng)前版本號(hào) 如：alert(ymPrompt.version)

pubDate：當(dāng)前版本的發(fā)布日期 如：alert(ymPrompt.pubDate);

???cfg：組件的當(dāng)前的默認(rèn)配置

方法：

setDefaultCfg(cfg)：設(shè)定組件的默認(rèn)屬性，設(shè)定后的所有彈出均默認(rèn)采用cfg中的設(shè)置。
如：ymPrompt.setDefaultCfg({maskAlpha:0.2,maskAlphaColor:'#00f'}); //設(shè)定遮罩層顏色為藍(lán)色，透明度0.2

getPage()：在iframe窗口模式下，獲取到iframe的dom對(duì)象。
如：alert(ymPrompt.getPage().contentWindow.document.body.outerHTML); //獲取iframe頁(yè)面的html內(nèi)容

resizeWin(w,h)：通過程序動(dòng)態(tài)修改窗口的大小。參數(shù)：w：寬度，h:高度
如：ymPrompt.resizeWin(400,300); //修改彈出框?qū)挾葹?00px，高度為300px

doHandler(sign,autoClose)：模擬觸發(fā)某個(gè)按鈕的點(diǎn)擊事件。參數(shù)sign:傳給回調(diào)函數(shù)的標(biāo)識(shí)，autoClose:是否自動(dòng)關(guān)閉窗口（默認(rèn)采用全局配置）
如：ymPrompt.doHandler('ok',false); //觸發(fā)確定按鈕的點(diǎn)擊事件，并且執(zhí)行完回調(diào)函數(shù)后不關(guān)閉窗口

getButtons()：獲取當(dāng)前彈出窗口的所有按鈕對(duì)象，返回結(jié)果是一個(gè)對(duì)象集合(數(shù)組)。
如：var btnID=ymPrompt.getButtons()[0].id; //獲取第一個(gè)按鈕的id

close()：關(guān)閉當(dāng)前彈出的窗口 如：ymPrompt.close()

其他說明：如果覺得“對(duì)象.方法”的調(diào)用方式比較麻煩，可以采用如下方式簡(jiǎn)化調(diào)用：
在調(diào)用之前設(shè)定var Alert=ymPrompt.alert。之后就可以使用Alert()的方式進(jìn)行調(diào)用。

轉(zhuǎn)載于:https://www.cnblogs.com/loveless/p/3886743.html

總結(jié)

以上是生活随笔為你收集整理的ymPrompt的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。