日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
Web開發(fā)中的彈出對(duì)話框控件介紹

Web開發(fā)中，目前由于Jquery的大行其道，因此很多彈出對(duì)話框，都用到Jquery技術(shù)，反而原始的彈出對(duì)話框的方式較為少用了。不過(guò)基于JQuery的方式實(shí)現(xiàn)對(duì)話框窗口彈出，也有很多控件可以利用，由于工作需要及業(yè)余興趣所至，我比較了近10種的對(duì)話框控件，其中發(fā)現(xiàn)有一些做得很好的，除了功能強(qiáng)大，而且也支持多種皮膚樣式，甚至有些對(duì)話框的居中都考慮到了，細(xì)節(jié)決定體驗(yàn)，有些真的不錯(cuò)。

創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供東阿網(wǎng)站建設(shè)、東阿做網(wǎng)站、東阿網(wǎng)站設(shè)計(jì)、東阿網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、東阿企業(yè)網(wǎng)站模板建站服務(wù)，十多年東阿做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

1、原始的彈出對(duì)話框?qū)崿F(xiàn)（彈出窗口也可以）

我們知道，以前在沒有應(yīng)用其他javascript庫(kù)（例如各種類型的Jquery庫(kù)）的時(shí)候，一般是通過(guò)window.open或者window.showModalDialog來(lái)彈出非模態(tài)或者模態(tài)的對(duì)話框的，如下腳本所示。

 
 
 
 
    
  
  
  
  
  1. function OpenWin( sURL , sFeatures )  
    2.   
  
  
  
  2. {  
    3.   
  
  
  
  3.     window.open( sURL , null , sFeatures , null)  
    4.   
  
  
  
  4.     //window.open("Sample.htm",null,"height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");  
    5.   
  
  
  
  5.     //window.open( [sURL] [, sName] [, sFeatures] [, bReplace])  
    6.   
  
  
  
  6.     //sName{_blank; _media; _parent; _search; _self; _top}  
    7.   
  
  
  
  7.     //sFeatures{channelmode; directories; fullscreen; height; left; location; menubar; resizable; scrollbars; status; titlebar; toolbar; top; width}   
    8.   
  
  
  
  8. }  
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10. function ShowWin( sURL , sFeatures )  
    11.   
  
  
  
  11. {  
    12.   
  
  
  
  12.     if(sFeatures == null || sFeatures == ""){  
    13.   
  
  
  
  13.         sFeatures = 'dialogHeight:300px;dialogWidth:850px;status:no;scroll:yes;resizable:yes;help:no;center:yes;';  
    14.   
  
  
  
  14.      }  
    15.   
  
  
  
  15.        
    16.   
  
  
  
  16.     var returnValue= window.showModalDialog( sURL , null , sFeatures)  
    17.   
  
  
  
  17.     //window.showModalDialog("Sample.htm",null,"dialogHeight:591px;dialogWidth:650px;")  
    18.   
  
  
  
  18.     //window.showModalDialog([sURL] [, vArguments] [, sFeatures])  
    19.   
  
  
  
  19.     //sFeatures{dialogHeight; dialogLeft; dialogTop; dialogWidth; center; dialogHide; edge; help; resizable; scroll; status; unadorned}  
    20.   
  
  
  
  20.     if(returnValue != undefined)  
    21.   
  
  
  
  21.     {  
    22.   
  
  
  
  22.         return returnValue;  
    23.   
  
  
  
  23.     }  
    24.   
  
  
  
  24.     else 
    25.   
  
  
  
  25.     {  
    26.   
  
  
  
  26.         return "";  
    27.   
  
  
  
  27.     }  
    28.   
  
  
  
  28. } 
    29.

這種是原始方式，好處壞處大家都明白，就不說(shuō)了。

還有一種基于Jquery的原始彈出窗口方式，由于我一般使用的是easy-ui作為界面的基礎(chǔ)組件，因此基于easy-ui的原始彈出窗口方式，只能是彈出內(nèi)部的HTML層內(nèi)容，對(duì)于彈出獨(dú)立的頁(yè)面這種方式支持不夠好。

 
 
 
 
    
  
  
  
  
  1.  
    2.

2、Popup的彈出式對(duì)話框

這個(gè)popup控件彈出的對(duì)話框，它好像把彈出的子頁(yè)面放到了父窗口里面了，感覺是一體化的，所以操作父窗口的對(duì)話框也可以，非常方便。

這個(gè)popup控件，比較容易使用，不過(guò)不好的地方就是不兼容其他瀏覽器如Chrome等，其他瀏覽器顯示層是錯(cuò)位的，不好看，而且樣式也相對(duì)比較簡(jiǎn)單一點(diǎn)了。

但由于在彈出窗口中可以很好操作父窗口的腳本以及使用方便，在我以前的一些項(xiàng)目里面，用的還算比較多。

3、AsyncBox的彈出對(duì)話框

這個(gè)控件感覺做的很不錯(cuò)，而且提供了Chrome、QQBrowser、Ext、ZCMS四種不錯(cuò)的窗體皮膚，適應(yīng)多種需要，通過(guò)修改它們的皮膚圖片，還可以定義適合自己項(xiàng)目的樣式皮膚，如我修改定義了一種黃色調(diào)的樣式例子。

不過(guò)在使用過(guò)程中，發(fā)現(xiàn)這個(gè)控件，對(duì)有些腳本或者Jquery控件有沖突，具體原因未明，總之發(fā)現(xiàn)了和基于Jquery的ZTree運(yùn)行不正常，還有一些Jquery組件使用也不正常，在我的Web權(quán)限管理系統(tǒng)中，本來(lái)想用這個(gè)作為彈出窗口顯示一些設(shè)置信息的，發(fā)現(xiàn)zTree的Node選中值獲取不了，也就相當(dāng)于失效了，非常郁悶，弄了很久，沒有找到具體原因。還有另外一個(gè)問(wèn)題，就是這個(gè)控件的作者不知道什么原因，好像停止了對(duì)該控件的開發(fā)了，連它的官網(wǎng)也下架了。

不過(guò)對(duì)于彈出窗口的使用來(lái)說(shuō)，該控件已經(jīng)很不錯(cuò)了，提供了多種調(diào)用模塊，而我一般傾向于彈出另外一個(gè)頁(yè)面這種方式，當(dāng)然它也支持彈出頁(yè)面內(nèi)部的層或者HTML代碼等等方式。

#p#

4、artDialog彈出對(duì)話框

這個(gè)artDialog彈出對(duì)話框組件，是我覺得相當(dāng)好的一款了，除了支持多種瀏覽器，而且提供的界面效果更多，目前的版本是V4.1.6，好像還有一個(gè)V5.0的Beta版本(https://github.com/aui/artDialog)，但是V5.0的就調(diào)整了不支持通過(guò)art.dialog.open方式彈出獨(dú)立Web頁(yè)面的方式了，要實(shí)現(xiàn)彈出獨(dú)立頁(yè)面，需要使用Iframe的代碼，效果就差了一些，所以我傾向于V4.1.6。

該控件支持自動(dòng)計(jì)算居中位置，我們只需要指定對(duì)話框的大小即可，當(dāng)然它很好支持頁(yè)面內(nèi)的層內(nèi)容的彈出顯示，不過(guò)我更關(guān)注的是獨(dú)立頁(yè)面的彈出對(duì)話框顯示，我在具體的Web權(quán)限管理系統(tǒng)中應(yīng)用的效果如下所示（結(jié)合了ZTree控件，運(yùn)行正常）。

這個(gè)控件提供了很多參數(shù)以及方法，對(duì)實(shí)現(xiàn)調(diào)用非常強(qiáng)大。

 
 
 
 
    
  
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.

首先封裝一個(gè)通用的Javascript函數(shù)

 
 
 
 
    
  
  
  
  
  1. function ShowArtDlg(title, url, width, height, lock)   
    2.   
  
  
  
  2. {  
    3.   
  
  
  
  3.     if (width == null || width == "") {  
    4.   
  
  
  
  4.         width = '90%';  
    5.   
  
  
  
  5.     }  
    6.   
  
  
  
  6.     if (!width.indexOf('px') && !width.indexOf('%')) {  
    7.   
  
  
  
  7.         width = width + 'px';  
    8.   
  
  
  
  8.     }  
    9.   
  
  
  
  9.     if (width.indexOf('px') < 0 && width.indexOf('%') < 0) {  
    10.   
  
  
  
  10.         width = width + 'px';  
    11.   
  
  
  
  11.     }  
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13.     if (height == null || height == "") {  
    14.   
  
  
  
  14.         height = '90%' 
    15.   
  
  
  
  15.     }  
    16.   
  
  
  
  16.     if (height.indexOf('px') < 0 && height.indexOf('%') < 0) {  
    17.   
  
  
  
  17.         height = height + 'px';  
    18.   
  
  
  
  18.     }  
    19.   
  
  
  
  19.  
    20.   
  
  
  
  20.     if (lock == null || lock == "") {  
    21.   
  
  
  
  21.         lock = false;  
    22.   
  
  
  
  22.     }  
    23.   
  
  
  
  23.     art.dialog.open(url, { height: height, width: width, title: title, lock: lock }, false); //打開子窗體  
    24.   
  
  
  
  24. } 
    25.

頁(yè)面里面調(diào)用的代碼如下所示。

 
 
 
 
    
  
  
  
  
  1.   
    2.   
  
  
  
  2.                           
    3.   
  
  
  
  3.                             編輯    
    4.   
  
  
  
  4.                             移除  
    5.   
  
  
  
  5.                           
    6.   
  
  
  
  6.                      
    7.

如果你用5.0+的ArtDialog，調(diào)整了不支持通過(guò)art.dialog.open方式彈出獨(dú)立Web頁(yè)面的方式，但還是可以通過(guò)以下的方法去彈出獨(dú)立頁(yè)面。

 
 
 
 
    
  
  
  
  
  1. art.dialog({title : "選擇***",  
    2.   
  
  
  
  2.             cancel : true,  
    3.   
  
  
  
  3.             width : 600,  
    4.   
  
  
  
  4.             padding : '5px',  
    5.   
  
  
  
  5.             content : '',  
    6.   
  
  
  
  6.             ok : function(){  
    7.   
  
  
  
  7.                 ...  
    8.   
  
  
  
  8.             }  
    9.   
  
  
  
  9.         }); 
    10.

5、還有一些彈出窗口控件，還支持窗口的最大化操作，這個(gè)功能還是不錯(cuò)的。

原文鏈接：http://www.cnblogs.com/wuhuacong/archive/2012/12/02/2797803.html


新聞標(biāo)題：Web開發(fā)中的彈出對(duì)話框控件介紹
網(wǎng)頁(yè)地址：http://m.5511xx.com/article/djcjiee.html