[ymPrompt訊息提示組件]3.1版發布

來源:互聯網
上載者:User
新增配置項:
新增fixPosition參數設定是否當頁面滾動時使彈出框始終浮動在螢幕的固定位置。
新增dragOut參數設定是否允許彈出框拖動到頁面範圍以外。
新增autoClose參數設定是否當使用者點擊按鈕後自動關閉彈出框。

公開的屬性和方法介面:

屬性:
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); //觸發確定按鈕的點擊事件,並且執行完回呼函數後不關閉視窗

close():關閉當前彈出的視窗 如:ymPrompt.close()

具體使用及介紹請查看壓縮包中的readme.txt或者查看demo示範。

ymPrompt3.1下載地址:ymPrompt-3.1-R-20081212.rar

ymPrompt3.1示範地址:http://www.ajaxbbs.net/test/ymPrompt3.1/demo.html

ymPrompt3.0詳細介紹頁面:http://old.ajaxbbs.net/ymPrompt3.0/
======================================================
     自ymPrompt1.0和2.0發布以來,得到不少web開發朋友的支援和鼓勵,也得到不少的寶貴建議。也正是大家一直的支援,使我這個比較懶散的人能堅持把這個組件完善更新下去。在很多朋友的建議下,我對2.0又做了一些完善和調整,在瀏覽器安全色性和功能上都有所增強。

    本次更新內容如下:
1、完美相容各大主流瀏覽器,在IE6.0+、FF1.5+、Opear9+、Safari3.1、Google Chrome 0.3.154等瀏覽器均測試通過。
2、支援自訂按鈕,可配置不顯示按鈕或者顯示多個按鈕。
3、支援自訂表徵圖樣式,可配置不顯示表徵圖。
4、增加setDefaultCfg方法,用於設定組件的預設屬性。
5、對組件內部代碼結構做了大的改動,效能有所提升。
6、支援普通表單模式(沒有表徵圖和按鈕)和iframe表單模式(傳入url即可)。

7、解決之前版本存在當組件寬度設定過寬時標題背景顯示不全的問題。
8、解決在頁面onload之前調用組件不論用那個方法都顯示alert表徵圖的問題。

9、在功能增加和改善的同時,程式比以前更精簡,壓縮後的檔案僅比2.0大了0.13kb,目前3.0壓縮後的js是5.1KB。

10、增加了一個win方法,用於實現自訂的彈出框。

示範地址: http://www.ajaxbbs.net/test/ymPrompt3.0/demo.html

組件下載:http://www.ajaxbbs.net/ymPrompt3.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'})
   
   組件的預設配置(對於沒有設定的項將採用該配置項的預設值):
   {
  maskAlphaColor:'#000',  //遮罩透明色
  maskAlpha:0.1,  //遮罩透明度
  title: '標題', //訊息框標題
  message: '內容', //訊息框按鈕
  width: 300, //寬
  height: 185, //高
  iframe:false,
  btn:null,
  icoCls:'',
  handler: function(){}  //回調事件
   }
4、根據您的需要調用相應的訊息函數:
  ymPrompt.alert(參數) //訊息提示類型
  ymPrompt.succeedInfo(參數) //成功資訊類型
  ymPrompt.errorInfo(參數) //錯誤資訊類型
  ymPrompt.confirmInfo(參數) //詢問訊息類型

  ymPrompt.win(參數) //自訂視窗類別型

  參數傳入方式包含兩種:

  第一種即傳統的參數傳入,按照順序傳入相應的參數值即可(一定要按照順序),對於不需要設定的值請傳入null。如ymPrompt.alert('內容',null,null,'標題')
    參數順序:message,width,height,title,handler,maskAlphaColor,maskAlpha,url,iframe,icoCls
  
  第二種即JSON的傳入方式,需要指定欄位名,沒有順序,根據需要設定相關屬性。如ymPrompt({title:'標題',message:'內容'})


  五個方法的參數個數及意義完全相同(所有參數均為可選,不傳入則使用預設參數值):

   message:訊息組件要顯示的內容,預設為“內容”。
   width:訊息框的寬度,預設為300。
   height:訊息框的高度,預設為185。
   title:訊息組件標題,預設為“標題”
   handler:回呼函數。當確定/取消/關閉按鈕被點擊時會觸發該函數並傳入點擊的按鈕標識。如ok代表確定,cancel代表取消,close代表關閉
   maskAlphaColor:遮罩的顏色,預設為黑色。
   maskAlpha:遮罩的透明度,預設為0.1。

  //以下三個參數主要用於win方法(當然你也可以通過設定這些覆蓋前面四個訊息類型的預設屬性)。
   iframe:是否使用iframe方法載入內容,該屬性如果為true,組件則嘗試將message內容作為url進行載入。預設為false。
   icoCls:表徵圖類型。傳入的內容為className,具體寫法可以參考ymprompt.css中對表徵圖的定義方式。預設為空白。
   btn:按鈕定義。傳入的是數組形式。每個按鈕的格式為['按鈕文本','按鈕標識'],如[['確定','ok'],['取消','cancel'],['關閉','close']]等。
          注意單個按鈕應該是這樣的:[['確定','ok']]

5、其他說明:如果覺得“對象.方法”的調用方式比較麻煩,可以採用如下方式簡化調用:
在調用之前設定var Alert=ymPrompt.alert。之後就可以使用Alert()的方式進行調用。


相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。