JS彈出窗、彈出層組件,ymPrompt V4.0使用簡介(轉)


ymPrompt從最簡單的1.0版本到現在的4.0版本,代碼共經歷了四次較大的改動,組件在功能上有了很大的改進,應用靈活 度更大,可應用環境的環境更加廣泛,特別在4.0版本中加入對遮罩顯示隱藏、按鈕/圖標的自定義、組件語言的控制、窗口懸浮位置等控制功能,更加的增強了 組件的應用范圍,使其不僅僅可以使用到模擬alert彈出之類的應用中,更可實現類似qq消息提示,登陸窗口,進度條等效果。

但是,任何的 事情都具有其兩面性,隨着功能的增多,組件的使用的復雜度也在逐步增加,好在組件每次更新都努力在兼容之前版本的基礎上做修改,這使得你可以以很簡單的方 式定制簡單的彈出框,也可以以較復雜的參數來定制更加強大的彈出框。不要被demo及使用說明中的一堆參數和方法所嚇倒,很多參數也許我們可能並不會用 到,找到我們真正需要的那一兩個參數就足夠了。

本打算在年前發布4.0版,但由於一些功能的實現一直不太穩定,加上年前工作的原因,推遲到 年后才發布,該版本的代碼在3.0的基礎上做了比較大的改動,修正了之前版本的一些問題,增加了幾個功能,不少是網友對我提出的,在此感謝。在完善和改進 組件的同時,盡管我一直在努力保持組件的代碼的最小化,任何一個字節的代碼能省則省,但限於個人能力,因此代碼可能仍然不是最簡潔的,如果哪位大俠有好的 改進意見,請不吝指教!

其中主要改進內容如下:

4.0版演示地址:http://tech.cncms.com/demo/js/ymPrompt4.0/demo.html

4.0版下載地址:ymPrompt-4.0-B-20090302.rar

覆蓋Frameset示例:http://tech.cncms.com/demo/js/ymPrompt4.0/frameset.html


ymPrompt 調用方法及參數說明

  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'})

    組件的默認配置(對於沒有設定的項將采用該配置項的默認值):
    {
      message: '內容', //消息框按鈕
      width: 300, //寬
      height: 185, //高
      title: '標題', //消息框標題
      handler: function() {}, //回調事件
      maskAlphaColor: '#000', //遮罩透明色
      maskAlpha: 0.1, //遮罩透明度

      iframe: false, //iframe模式
      icoCls: '', //圖標的樣式
      btn: null, //按鈕配置
      autoClose: true, //點擊關閉、確定等按鈕后自動關閉
      fixPosition: true, //隨滾動條滾動
      dragOut: false, //不允許拖出窗體范圍
      titleBar: true, //顯示標題欄
      showMask: true, //顯示遮罩
      winPos: 'c', //在頁面中間顯示
      winAlpha:0.8, //拖動窗體時窗體的透明度
      closeBtn:true, //是否顯示關閉按鈕
      showShadow:false, //不顯示陰影,只對IE有效
      useSlide:false, //不使用淡入淡出
      slideCfg:{increment:0.3,interval:50}, //淡入淡出配置

      //按鈕文本,可通過自定義這些屬性實現本地化
      closeTxt: '關閉',
      okTxt:' 確 定 ',
      cancelTxt:' 取 消 ',
      msgCls:'ym-content' //消息內容的樣式
      minBtn:false, //不顯示最小化按鈕
      minTxt:'最小化',
      maxBtn:false, //不顯示最大化按鈕
      maxTxt:'最大化'
      allowSelect:false, //是否允許選擇消息框內容,默認不允許
      allowRightMenu:false //是否允許在消息框使用右鍵,默認不允許
    }
  4. 根據您的需要調用相應的消息函數(兩種參數傳入方式):
    • ymPrompt.alert(參數) //消息提示類型
    • ymPrompt.succeedInfo(參數) //成功信息類型
    • ymPrompt.errorInfo(參數) //錯誤信息類型
    • ymPrompt.confirmInfo(參數) //詢問消息類型

       
    • ymPrompt.win(參數) //自定義窗口類型

    參數傳入方式包含兩種:
    • 第一種即傳統的參數傳入,按照順序傳入相應的參數值即可(一定要按照順序),對於不需要設定的值請傳入null。如ymPrompt.alert('內容',null,null,'標題')
      參數順序上面的默認配置中參數順序一致

       
    • (推薦)第二種即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(顯示)。

       
    • showShadow:是否啟用彈出框陰影效果(IE Only),默認為false
    • useSlide:f是否啟用彈出框的漸顯漸隱效果,默認為false
    • slideCfg:漸變效果的配置信息,參數格式為object,屬性包括incerment:透明度每次增加的值,interval:變化的速度。例如:{incerment:0.3,interval:50}。該參數僅在useSlide為true時有效

      //以下參數可用於對組件語言本地化,如用於英文等系統中
    • okTxt:確定按鈕的文本描述,默認為“確定”
    • cancelTxt:取消按鈕的文本描述,默認為“取消”
    • closeTxt:關閉按鈕的文本描述(鼠標放在關閉按鈕上時顯示),默認為“關閉”
    • minTxt:最小化按鈕的文本描述,默認為“最小化”
    • maxTxt:最大化按鈕的文本描述,默認為“最大化”

       
    • minBtn:是否顯示最小化按鈕,默認為false
    • maxBtn:是否顯示最大化按鈕,默認為false

       
    • allowSelect:是否允許選擇消息框內容,默認為false
    • allowRightMenu:是否允許在消息框中使用右鍵,默認為false
  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()


    max():最大化彈出窗口。


    min():最小化彈出窗口


    normal():窗口普通彈出狀態

  6. 其他說明:如果覺得“對象.方法”的調用方式比較麻煩,可以采用如下方式簡化調用:
    在調用之前設定var Alert=ymPrompt.alert。之后就可以使用Alert()的方式進行調用
轉載自:http://www.ddhbb.com/post/807.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM