- Java Web開發實例大全(基礎卷) (軟件工程師開發大系)
- 軟件開發技術聯盟
- 1229字
- 2021-03-26 13:01:25
5.5 窗口與對話框
在網站開發過程中,經常需要對網站的某個功能的操作給出提示信息的對話框或者彈出一個固定大小窗口,以便于用戶正確地使用網站。
實例151 彈出提示對話框并重定向網頁
光盤位置:光盤\MR\05\151
初級
實用指數:
實例說明
彈出提示對話框是網站中經常用到的,為了便于維護,可以將彈出對話框的JavaScript代碼封裝到JavaBean中。在本實例中,當用戶提交注冊信息表單時,會彈出相應的提示對話框,運行效果如圖5.26所示。

圖5.26 彈出提示對話框并重定向網頁
關鍵技術
本實例主要通過JavaBean將整個彈出對話框以及頁面重定向的JavaScript代碼封裝在一個字符串中,然后在頁面中通過<jsp:useBean>動作導入JavaBean,使用<jsp:setProperty>動作設置彈出消息以及重定向的頁面鏈接,最后通過<jsp:getProperty>動作獲得定義彈出對話框代碼的屬性值。
設計過程
(1)新建名為PopDialog的JavaBean類,該類用于封裝彈出對話框的信息并重定向頁面,關鍵代碼如下:
public class PopDialog { private String dialogStr; //彈出對話框的代碼 private String message; //彈出的提示消息 private String url; //重定向的鏈接地址 public String getDialogStr() { dialogStr = "<script language ='javascript'>\r\n\t"; dialogStr+="alert('"+message+"'); \r\n\t"; //彈出對話框 dialogStr+="window.location.href='"+url+"'; \r\n"; //頁面重定向 dialogStr += "</script>"; return dialogStr; } …… //此處省略了其他屬性的get和set方法 }
(2)在彈出對話框的頁面引用以上定義的JavaBean,關鍵代碼如下:
<jsp:useBean id="popdialog"class="com.lh.bean.PopDialog"></jsp:useBean> <jsp:setProperty property="message"name="popdialog" value="注冊成功!"/> <jsp:setProperty property="url" name="popdialog"value="index.jsp"/> <jsp:getProperty property="dialogStr"name="popdialog"/>
秘笈心法
由于在JSP中并沒有提供彈出提示對話框的函數,但在程序開發時經常需要彈出提示對話框,并在確定后重定向頁面,因此實現本實例的功能是有必要的。
實例152 打開指定大小的新窗口
光盤位置:光盤\MR\05\152
初級
實用指數:
實例說明
在實際開發過程中經常會用到彈出的窗口,為了便于維護管理以及提高代碼的重用性,可以將彈出窗口的JavaScript代碼封裝在JavaBean中。本實例將講解如何將彈出窗口的JavaScript代碼封裝到JavaBean中,其運行效果如圖5.27所示。

圖5.27 彈出指定大小的窗口
關鍵技術
使用JavaScript打開一個彈出窗口,可以使用window對象的open()方法或showModalDialog()方法完成。showModalDialog()方法的示例代碼如下:
var url="window1.jsp";
window.showModalDialog(url, 'window', 'status=no; dialogWidth=560px; dialogHeight=190px; center=yes; help=no; location=no; ');
open()方法的示例代碼如下:
var url="window1.jsp";
window.open(url, 'window', 'status=no, width=500px, height=100px, center=yes, help=no, location=no, menubar=no, toolbar=no');
設計過程
(1)新建名為ShowWindow的JavaBean類,用于封裝JavaScript代碼的打開指定大小的窗口的方法,關鍵代碼如下:
public class ShowWindow { private String url; //打開窗口的鏈接地址 private String openWindowStr=""; //用于保存打開窗口的JavaScript代碼 private int width; //打開窗口的寬度 private int height; //打開窗口的高度 private String functionName; //打開窗口的JavaScript函數名 public String getOpenWindowStr() { StringBuffer sb = new StringBuffer(openWindowStr); sb.append("<script language='javascript'>"); sb.append("\r\n\t"); //添加換行縮進 sb.append("function"+this.functionName+"(){"); //添加函數名 sb.append("\r\n\t\t"); //打開一個窗口時,返回一個window類型的對象returnObj,可以根據此對象來調整窗口的位置 sb.append("var returnObj = window.open('"+this.url+"', 'window', 'width="+this.width+"px, height="+this.height+"px'); "); sb.append("\r\n\t\t"); //screen對象表示屏幕,此處設置相對于屏幕的x坐標 sb.append("var x=(screen.width-"+width+")/2; "); //此處設置相對于屏幕的x坐標 sb.append("\r\n\t\t"); sb.append("var y=(screen.height-"+height+")/2; "); //此處設置相對于屏幕的y坐標 sb.append("\r\n\t\t"); sb.append("returnObj.moveTo(x, y); "); //調用moveTo()方法改變窗口位置 sb.append("\r\n\t}"); sb.append("\r\n"); sb.append("</script>"); return sb.toString(); } …… //此處省略了其他屬性的get和set方法 }
(2)新建index.jsp頁,在該頁中使用<jsp:useBean>導入打開窗口的JavaBean對象,然后使用<jsp:set Property>動作為該JavaBean對象中的屬性賦值,最后通過<jsp:getProperty>動作獲得打開窗口的屬性值,關鍵代碼如下:
<! -- 導入打開窗口的JavaBean類 --> <jsp:useBean id="myWindow"class="com.lh.bean.ShowWindow"></jsp:useBean> <! -- 設置打開窗口的JavaScript函數名 --> <jsp:setProperty property="functionName"name="myWindow"value="openWindow1"/> <! -- 設置打開窗口的url地址 --> <jsp:setProperty property="url"name="myWindow"value="window.jsp"/> <! -- 設置打開窗口的寬度 --> <jsp:setProperty property="width"name="myWindow"value="200"/> <! -- 設置打開窗口的高度 --> <jsp:setProperty property="height"name="myWindow"value="100"/> <! -- 獲得打開窗口的JavaScript函數字符串 --> <jsp:getProperty property="openWindowStr" name="myWindow"/> <form action="window.jsp"method="post"> <input type="button"value="打開窗口"onclick="openWindow1()"/> </form>
秘笈心法
使用showModalDialog()方法彈出的窗口是模態窗口,不能最小化,只有關閉當前彈出的模態窗口才能操作其他頁面。而使用open()方法彈出的更像是一個頁面,此時對操作其他頁面沒有影響,但是在彈出該頁面之前會首先彈出一個警告對話框,從而會給網頁瀏覽者帶來不必要的操作。所以讀者可以根據實際需求來選擇使用這兩個方法。
- Boost.Asio C++ Network Programming(Second Edition)
- 大話PLC(輕松動漫版)
- 數據庫系統原理及MySQL應用教程
- AngularJS深度剖析與最佳實踐
- 數據結構(C語言)
- PHP+MySQL+Dreamweaver動態網站開發實例教程
- 劍指Java:核心原理與應用實踐
- Creating Stunning Dashboards with QlikView
- 51單片機C語言開發教程
- OpenCV with Python By Example
- Deep Learning with R Cookbook
- 現代CPU性能分析與優化
- 計算機應用基礎案例教程(第二版)
- Elasticsearch搜索引擎構建入門與實戰
- Google Maps JavaScript API Cookbook