日韩黑丝制服一区视频播放|日韩欧美人妻丝袜视频在线观看|九九影院一级蜜桃|亚洲中文在线导航|青草草视频在线观看|婷婷五月色伊人网站|日本一区二区在线|国产AV一二三四区毛片|正在播放久草视频|亚洲色图精品一区

搜索
分享

extjs 彈出框，消息框

 實(shí)力決定地位 2011-11-21
  • title: 標(biāo)題
  • msg: 提示內(nèi)容
  • fn: 提示框關(guān)閉之后自動(dòng)調(diào)用的回調(diào)函數(shù)
  • scope: 作用域，用于指定this指向哪里

   例如：
Js代碼  
  1.      
  2.  ExtJsAlert = function(){   
  3.     Ext.MessageBox.alert("提示框"，"這是一個(gè)提示框");   
  4.   }   
  5.  or   
  6.  ExtJsAlert = function(){   
  7.    Ext.MessageBox.alert("提示框"，"這是一個(gè)提示框",function(){   
  8.      alert("提示框關(guān)閉")   
  9. });    
  10. }  
  1.     
  2.  ExtJsAlert = function(){  
  3.     Ext.MessageBox.alert("提示框"，"這是一個(gè)提示框");  
  4.   }  
  5.  or  
  6.  ExtJsAlert = function(){  
  7.    Ext.MessageBox.alert("提示框"，"這是一個(gè)提示框",function(){  
  8.      alert("提示框關(guān)閉")  
  9. });   
  10. }  

如果要將上面的代碼運(yùn)行，則要將改源碼保存JS，然后導(dǎo)入頁面中，增加
Html代碼  
  1. <input type="button" value="點(diǎn)擊" onclick="ExtJsAlert();"/>  
  1. <input type="button" value="點(diǎn)擊" onclick="ExtJsAlert();"/>  


2. ExtJs 之輸入框
  語法：Ext.MessageBox.prompt(String title, String msg,Function fn,Object scope,Boolean/Number multiline);
  參數(shù)定義：
  • title: 標(biāo)題
  • msg: 提示內(nèi)容
  • fn: 提示框關(guān)閉之后自動(dòng)調(diào)用的回調(diào)函數(shù)
  • scope: 作用域，用于指定this指向哪里
  • Boolean/Number:如果為true或?yàn)閿?shù)字，則表示允許輸入多行或者指定默認(rèn)高度

例如：
Js代碼  
  1.  ExtJsPrompt = function(){   
  2.    Ext.MessageBox.prompt("輸入框","請輸入名字：",function(bu,txt){   
  3.      Ext.MessageBox.alert("Result","你點(diǎn)擊的是"+bu+"按鈕,<br> 輸入的內(nèi)容為："+txt);   
  4. });   
  5. }   
  6. or   
  7.  ExtJsPrompt = function(){   
  8.    Ext.MessageBox.prompt("輸入框","請輸入名字：",function(bu,txt){   
  9.      Ext.MessageBox.alert("Result","你點(diǎn)擊的是"+bu+"按鈕,<br> 輸入的內(nèi)容為："+txt);   
  10. },this,300);   
  11. }  
  1.  ExtJsPrompt = function(){  
  2.    Ext.MessageBox.prompt("輸入框","請輸入名字：",function(bu,txt){  
  3.      Ext.MessageBox.alert("Result","你點(diǎn)擊的是"+bu+"按鈕,<br> 輸入的內(nèi)容為："+txt);  
  4. });  
  5. }  
  6. or  
  7.  ExtJsPrompt = function(){  
  8.    Ext.MessageBox.prompt("輸入框","請輸入名字：",function(bu,txt){  
  9.      Ext.MessageBox.alert("Result","你點(diǎn)擊的是"+bu+"按鈕,<br> 輸入的內(nèi)容為："+txt);  
  10. },this,300);  
  11. }  


3.ExtJs之確認(rèn)框
語法：
  Ext.MessageBox.confirm(String title, String msg,Function fn, Object scope);
  參數(shù)定義：
  
  • title: 標(biāo)題
  • msg: 提示內(nèi)容
  • fn: 提示框關(guān)閉之后自動(dòng)調(diào)用的回調(diào)函數(shù)
  • scope: 作用域，用于指定this指向哪里
例如：
Js代碼  
  1.   ExtJsComfirm = function(){   
  2.    Ext.MessageBox.confirm("確認(rèn)"，"請點(diǎn)擊下面的按鈕作出選擇",function(btn{   
  3.         Ext.MessageBox.alert("你單擊的按鈕是："+btn);   
  4.     });   
  5. }  
  1.   ExtJsComfirm = function(){  
  2.    Ext.MessageBox.confirm("確認(rèn)"，"請點(diǎn)擊下面的按鈕作出選擇",function(btn{  
  3.         Ext.MessageBox.alert("你單擊的按鈕是："+btn);  
  4.     });  
  5. }  

4. ExtJs之自定義消息框
  語法：
    Ext.MessageBox.show(Object config);  config屬性說明：
  • title : 消息框標(biāo)題欄
  • msg:消息內(nèi)容
  • width:消息框的寬度
  • multiline: 是否顯示多行文本
  • closable:是否顯示關(guān)閉按鈕
  • buttons:按鈕
  • icon:圖標(biāo)
  • fn:回調(diào)函數(shù)
例如
Js代碼  
  1. ExtJsCustom = function(){   
  2.   var config ={   
  3.     title:"自定義對話框",   
  4.     msg:"這是一個(gè)自定義對話框",   
  5.     width:400,   
  6.     multiline:true,   
  7.     closable:false,   
  8.     buttons:Ext.MessageBox.YESNOCANCEL,   
  9.     icon:Ext.MessageBox.QUESTION,   
  10.     fn:  function(btn,txt){   
  11.    Ext.MessageBox.alert("Result","你點(diǎn)擊了'yes'按鈕<br>,輸入的值是："+txt);   
  12.   
  13.  };   
  14. Ext.MessageBox.show(config);   
  15. }  
  1. ExtJsCustom = function(){  
  2.   var config ={  
  3.     title:"自定義對話框",  
  4.     msg:"這是一個(gè)自定義對話框",  
  5.     width:400,  
  6.     multiline:true,  
  7.     closable:false,  
  8.     buttons:Ext.MessageBox.YESNOCANCEL,  
  9.     icon:Ext.MessageBox.QUESTION,  
  10.     fn:  function(btn,txt){  
  11.    Ext.MessageBox.alert("Result","你點(diǎn)擊了'yes'按鈕<br>,輸入的值是："+txt);  
  12.   
  13.  };  
  14. Ext.MessageBox.show(config);  
  15. }  

注意： 在ExtJs.MessageBox中已經(jīng)定義了buttons的取值.如下
引用

OK：只有"確定"按鈕
CANCEL:只有"取消"按鈕
OKCANCEL:有"確定"和"取消"按鈕
YESNO: 有"是"和"否"按鈕
YESNOCANCEL：有"是"、"否"和"取消"按鈕

icons取值如下
引用

  INFO:信息圖標(biāo)
  WARNING:警告圖標(biāo)
  QUESTION:詢問圖標(biāo)
  ERROR:錯(cuò)誤圖標(biāo)

5.ExtJs之進(jìn)度條對話框
    進(jìn)度條對話框也是自定義消息框的一種，只是在配置Config時(shí)添progress=true即可,同時(shí)在設(shè)置其他相關(guān)信息，比如進(jìn)度提示。
下面看看代碼：
Js代碼  
  1. ExtJsProgress = function(){   
  2.     Ext.MessageBox.show({   
  3.        title:'請等待片刻',   
  4.        msg:'正在加載項(xiàng)目....',   
  5.        progressText:'正在初始化...',   
  6.        Width:300,   
  7.        progress:true,   
  8.        closable:false  
  9.    });   
  10.   var f = function(v){   
  11.       return function(){   
  12.         if(v == 12){   
  13.             Ext.MessageBox.hide();   
  14.             Ext.MessageBox.alert('完成','所有項(xiàng)目加載完成!');   
  15.          }else{   
  16.              var i = v/11;   
  17.             Ext.MessageBox.updateProgress(i,Math.round(100*i)+'%以完成');   
  18.           }   
  19.       };   
  20.  };   
  21.   for(var i=0; i<13;i++){   
  22.     setTimeout(f(i),i*500);   
  23.   }   
  24.  }  
  1. ExtJsProgress = function(){  
  2.     Ext.MessageBox.show({  
  3.        title:'請等待片刻',  
  4.        msg:'正在加載項(xiàng)目....',  
  5.        progressText:'正在初始化...',  
  6.        Width:300,  
  7.        progress:true,  
  8.        closable:false  
  9.    });  
  10.   var f = function(v){  
  11.       return function(){  
  12.         if(v == 12){  
  13.             Ext.MessageBox.hide();  
  14.             Ext.MessageBox.alert('完成','所有項(xiàng)目加載完成!');  
  15.          }else{  
  16.              var i = v/11;  
  17.             Ext.MessageBox.updateProgress(i,Math.round(100*i)+'%以完成');  
  18.           }  
  19.       };  
  20.  };  
  21.   for(var i=0; i<13;i++){  
  22.     setTimeout(f(i),i*500);  
  23.   }  
  24.  }  

解析上述代碼中ProgressText屬性是進(jìn)度條滾動(dòng)之前最初的文本，滾動(dòng)進(jìn)程由updateProgress(Number value,String progressText)方法來定義,參數(shù)value是從0-1之間的小數(shù)，表示進(jìn)度百分比;progressText則表示進(jìn)度條滾動(dòng)過程中的文本提示信息。

6.ExtJs之消息框動(dòng)畫效果
  直接看代碼
Js代碼  
  1. ExtJsAnimal = funciton(){   
  2.     var config = {   
  3.        title:"飛出的消息框",   
  4.        msg:"這是一個(gè)自定義對話框，是飛出來的哦",   
  5.        width:400,   
  6.        multiline:true,   
  7.        closable:false,   
  8.        buttons:Ext.MessageBox.YESNOCANCEL,   
  9.        icon:Ext.MessageBox.QUESTION,   
  10.        animEl:"fly"  
  11.      };   
  12.      Ext.MessageBox.show(config);   
  13.  }  
  1. ExtJsAnimal = funciton(){  
  2.     var config = {  
  3.        title:"飛出的消息框",  
  4.        msg:"這是一個(gè)自定義對話框，是飛出來的哦",  
  5.        width:400,  
  6.        multiline:true,  
  7.        closable:false,  
  8.        buttons:Ext.MessageBox.YESNOCANCEL,  
  9.        icon:Ext.MessageBox.QUESTION,  
  10.        animEl:"fly"  
  11.      };  
  12.      Ext.MessageBox.show(config);  
  13.  }  

在html代碼中加入
Html代碼  
  1. <input type="button" value="Animal" id="fly" onclick="ExtJsAnimal();"/>  
  2. =fly就是animEL的值 

    本站是提供個(gè)人知識管理的網(wǎng)絡(luò)存儲空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花（0）

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多