前段時間在收集項目素材時發現一個很好用的消息組件ymPrompt,順便收集了圈子里關于這個組件的文章，感覺介紹不是很完善。

廢話少說先看一下演示效果:

演示Demo:? http://www.ajaxbbs.net/test/ymPrompt4.0/demo.html

截取的圖片: Vista樣式

簡短的實現腳本:

--導入腳本Js文件和選擇的皮膚的css文件<script?type="text/javascript"?src="ymPrompt.js"></script><link?rel="stylesheet"?id='skin'?type="text/css"?href="skin/qq/ymPrompt.css"?/>--最簡單引用alert窗口<td><input?type="button"?value="信息提示"?onclick="ymPrompt.alert('http://www.qq.com',null,null,'確認要提交嗎?',handler)"?/></td>--可以設置對話框的標題和內容<td><input?type="button"?value="設置消息和標題"?onclick="ymPrompt.alert({title:'我的標題',message:'我的內容'})"?/></td>--設置對話框彈出的位置<td><input?type="button"?value="右下角彈出"?onclick="ymPrompt.alert({message:'右下角彈出',title:'右下角彈出',winPos:'rb'})"?/></td>

?組件名稱:ymPrompt 4.0 版本【2008-02-16更新】

?組件說明:在web開發中，對于瀏覽器默認的消息提示框(如alert,confirm等)外觀無法控制，為了實現更好的界面效果，于是模擬系統的消息提示框實現了該組件。在外觀上可? 以通過css進行完全的控制

???組件功能介紹:

????? 1、調用方式簡單，直接使用ymPrompt.alert()的方式調用，傳入相應的參數即可。
????? 2、兼容IE6.0+、FF1.5+、Opear9+(在Opear下顯示有一個小缺陷)，兼容HTML4/XHTML1.0頁面渲染模式。
????? 3、完全的CSS皮膚定制功能，所有外觀包括顯示圖標/關閉按鈕等都可以通過css設置。目前提供了五種皮膚，Vista、QQ、dmm-green、ExtBlue和BlackColl。有興趣?? 可 以修改樣式表文件定義新的皮膚。
????? 4、提供四種消息類型。分別為消息提示、成功信息、錯誤信息、詢問信息。
????? 5、彈出消息框時屏蔽頁面其它元素的操作，自動隱藏頁面select及iframe下select(無限級select隱藏)，并遮罩iframe等元素。
????? 6、頁面select控件狀態還原時保持原狀態，即如果原來select就是隱藏的，則消息框彈出并關閉后該select仍保持隱藏狀態，而只顯示原本顯示的select。
????? 7、消息組件彈出時屏蔽除Tab和回車外的幾乎所有鍵盤操作(包括F5)，“消息確認框”支持“tab鍵/左右方向鍵”切換確定/取消焦點。
????? 8、可以頁面加載的任意時間調用，如頁面初始化時調用，頁面加載完成后調用。
????? 9、支持通過JSON和傳統的參數傳入方式。如ymprompt.alert('消息內容',300,200,'消息標題',handler)和 ymprompt.alert({message:'消息內??? 容',width:300,height:200,title:'消息標題',handler:handler})，這兩種寫法是等價的。
???? 10、只需要一個回調函數，可捕獲確定、取消及關鍵按鈕的點擊事件。函數改變了1.0版需要對確定和取消按鈕分別寫回調函數及不支持關閉事件的缺陷，
???? 11、完全的封裝，對外只暴露一個ymPrompt變量，有效防止與使用者程序變量的沖突。
???? 12、程序(js)與樣式(css)的完全分離，取消了1.0中自動加載css的功能，用戶可根據需要加載對應css樣式表單，降低了對樣式配置的復雜度

?組件版本:

????? ?ymPrompt從最簡單的1.0版本到現在的4.0版本，代碼共經歷了四次較大的改動，組件在功能上有了很大的改進，應用靈活度更大，可應用環境的環 境更加廣泛，特別在4.0版本中加入對遮罩顯示隱藏、按鈕/圖標的自定義、組件語言的控制、窗口懸浮位置等控制功能，更加的增強了組件的應用范圍，使其不 僅僅可以使用到模擬alert彈出之類的應用中，更可實現類似qq消息提示，登陸窗口，進度條等效果。
? ? 但是，任何的事情都具有其兩面性，隨著功能的增多，組件的使用的復雜度也在逐步增加，好在組件每次更新都努力在兼容之前版本的基礎上做修改，這使得你可以 以很簡單的方式定制簡單的彈出框，也可以以較復雜的參數來定制更加強大的彈出框。不要被demo及使用說明中的一堆參數和方法所嚇倒，很多參數也許我們可 能并不會用到，找到我們真正需要的那一兩個參數就足夠了。

??? ymPrompt3.1 版本演示地址: http://www.ajaxbbs.net/test/ymPrompt3.1/demo.html

??? ymPrompt3.1 版本下載地址: http://www.ajaxbbs.net/upload/2008/12/ymPrompt-3.1-R-20081217.rar

??? ymPrompt3.1 版本詳細介紹頁面: ?http://www.ajaxbbs.net/post/product/ymPrompt3.1.html

??? ymPrompt4.0版本演示地址:? http://www.ajaxbbs.net/test/ymPrompt4.0/demo.html

??? ymPrompt4.0版本下載地址:? http://www.ajaxbbs.net/upload/2009/2/ymPrompt-4.0-B-20090216.rar

??? ymPrompt4.0版本詳細介紹頁面:? http://www.scriptlover.com/controls/prompt/

總結

以上是生活随笔為你收集整理的分享一个消息组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。