龍行天下

            政 博
          隨筆 - 23, 文章 - 0, 評論 - 12, 引用 - 0
          數(shù)據(jù)加載中……

          2006年5月10日

          FckEditor中文配置手冊詳細(xì)說明

          javascript調(diào)用方式:
          ------------------------------------
          <script. type=”text/javascript” src=”FCKeditor/fckeditor.js”></scrīpt>
          <textarea name=”content” cols=”80″ rows=”4″>
          </textarea>
          <script. type=”text/javascript”>
          var FCKeditor = new FCKeditor(”content”);
          oFCKeditor.BasePath = “FCKeditor/”;
          oFCKeditor.Height = 400;
          oFCKeditor.ToolbarSet = “Default”;
          oFCKeditor.ReplaceTextarea();
          </script>
          ------------------------------------
          如果想要使用從數(shù)據(jù)庫讀來的文本數(shù)據(jù)或者是后臺來自文件的txt/html文本數(shù)據(jù)。
          只要在
          ------------------------------------
          <textarea name=”content” cols=”80″ rows=”4″>
          </textarea>
          ------------------------------------
          中加入自己的顯示內(nèi)容的formbean對應(yīng)字段即可
          ------------------------------------
          <textarea name=”content” cols=”80″ rows=”4″>
          <c:out value=”${contentData}” />
          </textarea>
          ------------------------------------
          這樣內(nèi)容就會(huì)被顯示在FCKeditor編輯框中了,點(diǎn)擊提交按鈕以后就可以在后臺的相應(yīng)java action中得到content參數(shù)中的內(nèi)容就是頁面上FCKeditor中的內(nèi)容數(shù)據(jù)了??梢栽趕truts/jsf中使用。
          ====================================
          由于給FCKeditor瘦身,所以常會(huì)報(bào)缺少對象支持等錯(cuò)誤,只要在FCKeditor/editor/lang中加上相應(yīng)的js語言文件即可。如果加載頁面失?。‵CKeditor未定義)還有一個(gè)可能就是引用FCKeditor/fckeditor.js文件路徑不對!
          關(guān)于FCKeditor瘦身要點(diǎn)如下:
          1.將FCKeditor目錄下及子目錄下所有以“_”下劃線開頭的文件夾刪除
          2.FCKeditor根目錄下只保留fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml,其余全部刪除
          3.將editor/filemanager/upload目錄下文件及文件夾清空
          4.將/editor/filemanager/browser/default/connectors/下的所有文件刪除
          5.還可以將editor/skins目錄下的皮膚文件刪除,只留下default一套皮膚(如果你不需要換皮膚的話)
          6.還可以將editor/lang目錄下文件刪除,只保留en.js, fcklanguagemanager.js, zh-cn.js, zh.js文件
          7.如果你是使用javascrīpt來調(diào)用加載FCKeditor,那么就不需要在web.xml中配置fckeditor的tag文件。
          8.還有一個(gè)問題剛開始使用FCKeditor的人常會(huì)遇到就怎么控制它的toolbar的大小和元素排列,其實(shí)很簡單。
          在fckconfig.js中用這樣的標(biāo)簽[]來劃分每行的元素的多少,這樣就可以控制toolbar的長短和大小了,具體示例參看:fckconfig.js中的toolbarset[”Default”]
          ====================================
          用fckconfig.js中的一些選項(xiàng)來控制toolbarset中控件的功能,實(shí)現(xiàn)功能裁剪:
          1):取消超鏈接中的瀏覽服務(wù)器和上傳功能,方法如下:
          ------------------------------------
          FCKConfig.LinkBrowser = true;
          FCKConfig.LinkUpload = true;
          改為:
          FCKConfig.LinkBrowser = false;
          FCKConfig.LinkUpload = false;
          ------------------------------------
          2):取消圖片鏈接中的瀏覽服務(wù)器和上傳功能,方法如下:
          ------------------------------------
          FCKConfig.ImageUpload = true;
          FCKConfig.ImageBrowser = true;
          改為:
          FCKConfig.ImageUpload = false;
          FCKConfig.ImageBrowser = false;
          ------------------------------------
          3):Dlg Button中取消高級功能,方法如下:
          FCKConfig.LinkDlgHideAdvanced = false ;
          FCKConfig.ImageDlgHideAdvanced = false ;
          改為:
          FCKConfig.ImageDlgHideAdvanced = true ;
          FCKConfig.LinkDlgHideTarget = true ;
          ------------------------------------
          下一篇介紹FCKeditor的上傳和瀏覽服務(wù)器功能,以及如何在里面實(shí)現(xiàn)動(dòng)態(tài)
          超連接,轉(zhuǎn)發(fā)到servlet經(jīng)過filter以后去調(diào)用服務(wù)器的action
          如何實(shí)現(xiàn)對應(yīng)用戶瀏覽自己的圖片的列表實(shí)現(xiàn)!
          ====================================
          FCKeditor集成java servlet可以實(shí)現(xiàn)文件的上傳和服務(wù)器端列表讀取功能FCKeditor自己提供了兩個(gè)servlet來分別實(shí)現(xiàn)上傳文件功能,和讀取服務(wù)器端文件列表功能,這兩個(gè)servlet分別為:
          com.fredck.FCKeditor.connector.ConnectorServlet(讀取文件列表)
          com.fredck.FCKeditor.uploader.SimpleUploaderServlet(實(shí)現(xiàn)文件上傳)
          1.瀏覽服務(wù)器端文件列表
          ------------------------------------
          web.xml文件中,比如:ConnectorServlet中的配置選項(xiàng):
          <init-param>
          <param-name>baseDir</param-name>
          <param-value>/UserFiles/</param-value>
          </init-param>
          意思是在瀏覽服務(wù)器上的baseDir配置指定里面的所有文件及其目錄結(jié)構(gòu)列表。
          如果你的baseDir沒有配置,Connector將會(huì)自動(dòng)創(chuàng)建一個(gè)默認(rèn)的文件夾
          UserFiles,對應(yīng)的ConnectorServlet中init()方法中代碼如下:
          ------------------------------------
          baseDir = getInitParameter(”baseDir”);
          if (baseDir == null)
          baseDir = “/UserFiles/”;
          ------------------------------------
          還想說一下的是,F(xiàn)CKeditor的client調(diào)用server的servlet方法采用的是Ajax思想來實(shí)現(xiàn)。當(dāng)你點(diǎn)擊瀏覽服務(wù)器(browser server)的時(shí)候就會(huì)觸發(fā)一個(gè)異步的javascrīpt + xmlhttp的調(diào)用響應(yīng),后臺的servlet會(huì)去完成你要請求的事件,然后數(shù)據(jù)以xml方式返回給client來解析。很明顯,你要實(shí)現(xiàn)去數(shù)據(jù)庫或者其他的文件系統(tǒng)請求列表,你只要修改
          ConnectorServlet中兩個(gè)私有方法:getFolders 和 getFiles
          讓它去你指定的地方得到文件列表即可,這樣你的文件可以放在任何你指定目錄下。多說一句,很多人都想知道個(gè)人blog系統(tǒng)中怎么實(shí)現(xiàn)上傳文件以后對應(yīng)用戶瀏覽自己的列表的,我的做法很簡單,建立你用戶名的文件夾,你上傳只能上傳到你的目錄夾,瀏覽可以通過程序指定瀏覽對應(yīng)用戶下的文件夾即可,這個(gè)時(shí)候你要修改Connectorservlet中的路徑即可!
          ------------------------------------
          2.超連接重定位問題
          ------------------------------------
          FCKeditor可以插入超連接,實(shí)現(xiàn)對文件的預(yù)覽功能,只要我們稍微改變我們可以使FCKeditor編輯器支持對任意文件系統(tǒng)下的任意文件的客戶端瀏覽和下載保存!FCKeditor本來提供的是相對URL超鏈接,只要我們修改ConnectorServlet中傳遞給客戶端的地址的時(shí)候,把它改寫成絕對URL然后再通過我們自己的filter的servlet實(shí)現(xiàn)重定向去一個(gè)下載/瀏覽文件的struts的action方法就可以實(shí)現(xiàn)在客戶端對超連接文件的下載和瀏覽!說一下具體做法吧:
          1):修改ConnectorServlet傳遞給客戶端javascrīpt的路徑,代碼如下:
          String currentUrl = “http://” + request.getserver +request.getServerPort + request.getContextPath + resourcePath;
          以上代碼請?jiān)贑onnectorServlet的doGet()里面拼裝!在調(diào)用CreateCommonXml()私有方法的時(shí)候參數(shù)傳入:
          myEl.setAttribute(”path”,currentPath);
          myEl.setAttribute(”url”,currentUrl);
          提醒一下resourcePath為在web.xml配置文件中ConnectorServlet中的一個(gè)初始化參數(shù)配置,等一下利用filter實(shí)現(xiàn)對超連接的重定位就提取URL中的這個(gè)配置參數(shù)來判斷,配置如下:
          <init-param>
          <param-name>resourcePath</param-name>
          <param-value>/fileSystem/</param-value>
          </init-param>
          2):建立你的filter servlet,實(shí)現(xiàn)對URL的截獲,對符合要求的URL進(jìn)行重定位到你的對應(yīng)action中去即可
          3):實(shí)現(xiàn)你的對應(yīng)action來實(shí)現(xiàn)文件的上傳和下載功能即可!
          4):擴(kuò)展功能-實(shí)現(xiàn)對URL的加密,對連接的URL中加上一串字符,最后幾位作為算法校驗(yàn),對不符合要求的URL連接,filter將會(huì)拒絕重定位到指定action。此外利用自己寫的擴(kuò)展類還可以實(shí)現(xiàn)對超連接的文件類型進(jìn)行限制,比如你只能超連接JPG|GIF|DOC|TXT|HTML等幾種后綴名的文件,對其他文件即使你指定超連接也讓你瀏覽和下載,這些都可以在web.xml中通過修改對應(yīng)servlet的配置文件的初始化參數(shù)實(shí)現(xiàn)。
          3.頁面javascrīpt修改
          ------------------------------------
          瀏覽服務(wù)器的功能對應(yīng)的html/javascrīpt相關(guān)的文件為:browser.html和frmresourcelist.html對應(yīng)你想傳遞的信息你可以append在文件名的字符串后面,在GetFileRowHtml()的javascrīpt函數(shù)中實(shí)現(xiàn)對文件名的截取,這樣client只會(huì)顯示文件名,而你可以得到文件的數(shù)據(jù)庫唯一標(biāo)識,任何你想要的信息你都可以通過修改ConnectorServlet中的私有方法getFiles()來實(shí)現(xiàn),只要修改頁面frmresurcelist.html中的GetFileRowHtml()中傳入變量fileName即可。你還可以在點(diǎn)擊選中文件的時(shí)候?qū)崿F(xiàn)一個(gè)你自己的Ajax調(diào)用,一切取決你的項(xiàng)目需要!
          4.我不是一個(gè)javascrīpt高手,其實(shí)如果我對javascrīpt了解多一些也許對客戶端的代碼修改以后做出更眩的功能。可以更好的完成對FCKeditor裁剪。
          -------------------------------------
          5.注意點(diǎn)
          -------------------------------------
          無論怎么修改別人的東西,請一定尊重開源精神!
          很多人配置好了FCKeditor的上傳功能以后常會(huì)遇到xmlhttp request 404 error,后面是一串路徑,其實(shí)就是你的servlet-mapping中的路徑不對,你只要把xmlhttp request errot 404 后面跟的路徑,copy到你的web.xml中對應(yīng)紅色文字的位置,如下:
          <servlet-mapping>
          <servlet-name>Connector</servlet-name>
          <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
          </servlet-mapping>
          別忘了SimpleUploader的servlet-mapping也要做同樣的修改!
          還有一個(gè)錯(cuò)誤就是http 500錯(cuò)誤,這個(gè)可能是你的URL請求不對,應(yīng)該和FCKeditor沒關(guān)系的!
          ======================================
          fckconfig.js總配置文件,可用記錄本打開,修改后將文件存為utf-8 編碼格式。找到:
          --------------------------------------
          FCKConfig.TabSpaces = 0;
          改為:
          FCKConfig.TabSpaces = 1;
          即在編輯器域內(nèi)可以使用Tab鍵。
          如果你的編輯器還用在網(wǎng)站前臺的話,比如說用于留言本或是日記回復(fù)時(shí),那就不得不考慮安全了,
          在前臺千萬不要使用Default的toolbar,要么自定義一下功能,要么就用系統(tǒng)已經(jīng)定義好的Basic,
          也就是基本的toolbar,找到:
          --------------------------------------
          FCKConfig.ToolbarSets[”Basic”] = [
          [’Bold’,'Italic’,'-’,'OrderedList’,'UnorderedList’,'-’,/*’Link’,*/’Unlink’,'-’,'Style’,'FontSize’,'TextColor’,'BGColor’,'-’,
          ‘Smiley’,'SpecialChar’,'Replace’,'Preview’] ];
          這是改過的Basic,把圖像功能去掉,把添加鏈接功能去掉,因?yàn)閳D像和鏈接和flash和圖像按鈕添加功能都能讓前臺頁直接訪問和上傳文件, fckeditor還支持編輯域內(nèi)的鼠標(biāo)右鍵功能。
          FCKConfig.ContextMenu = [’Generic’,/*’Link’,*/’Anchor’,/*’Image’,*/’Flash’,'Select’,'Textarea’,'Checkbox’,'Radio’,'TextField’,'HiddenField’,
          /*’ImageButton’,*/’Button’,'BulletedList’,'NumberedList’,'TableCell’,'Table’,'Form’];
          這也是改過的把鼠標(biāo)右鍵的“鏈接、圖像,F(xiàn)LASH,圖像按鈕”功能都去掉。
          找到:
          FCKConfig.FontNames = ‘Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana’;
          加上幾種我們常用的字體
          FCKConfig.FontNames = ‘宋體;黑體;隸書;楷體_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana’;
          添加文件 /TestFCKeditor/test.jsp:
          ----------------------------------------
          <%@ page language=”java” import=”com.fredck.FCKeditor.*” %>
          <%@ taglib uri=”/TestFCKeditor” prefix=”FCK” %>
          <script. type=”text/javascript” src=”/TestFCKeditor/FCKeditor/fckeditor.js”></script>
          <%–
          三種方法調(diào)用FCKeditor
          1.FCKeditor自定義標(biāo)簽 (必須加頭文件 <%@ taglib uri=”/TestFCKeditor” prefix=”FCK” %> )
          2.script腳本語言調(diào)用 (必須引用 腳本文件 <script. type=”text/javascript” src=”/TestFCKeditor/FCKeditor/fckeditor.js”></script> )
          3.FCKeditor API 調(diào)用 (必須加頭文件 <%@ page language=”java” import=”com.fredck.FCKeditor.*” %> )
          –%>
          <%–
          <form. action=”show.jsp” method=”post” target=”_blank”>
          <FCK:editor id=”content” basePath=”/TestFCKeditor/FCKeditor/”
          width=”700″ height=”500″ skinPath=”/TestFCKeditor/FCKeditor/editor/skins/silver/”
          toolbarSet = “Default”>
          內(nèi)容
          </FCK:editor>
          <input type=”submit” value=”Submit”>
          </form>
          –%>
          <form. action=”show.jsp” method=”post” target=”_blank”>
          <table border=”0″ width=”700″>
          <tr>
          <td>
          <textarea id=”content” name=”content” style=”WIDTH: 100%; HEIGHT: 400px”>input</textarea>
          <script. type=”text/javascript”>
          var FCKeditor = new FCKeditor(’content? ;
          oFCKeditor.BasePath = “/TestFCKeditor/FCKeditor/” ;
          oFCKeditor.Height = 400;
          oFCKeditor.ToolbarSet = “Default” ;
          oFCKeditor.ReplaceTextarea();
          </script>
          <input type=”submit” value=”Submit”>
          </td>
          </tr>
          </table>
          </form>
          <%–
          <form. action=”show.jsp” method=”post” target=”_blank”>
          <%
          FCKeditor oFCKeditor ;
          oFCKeditor = new FCKeditor( request, “content” ) ;
          oFCKeditor.setBasePath( “/TestFCKeditor/FCKeditor/” ) ;
          oFCKeditor.setValue( “input” );
          out.println( oFCKeditor.create() ) ;
          %>
          <br>
          <input type=”submit” value=”Submit”>
          </form>
          –%>
          添加文件/TestFCKeditor/show.jsp:
          <%
          String content = request.getParameter(”content”);
          out.print(content);
          %>
          ====================================
          1、適時(shí)打開編輯器
          ------------------------------------
          很多時(shí)候,我們在打開頁面的時(shí)候不需要直接打開編輯器,而在用到的時(shí)候才打開,這樣一來有很好的用戶體驗(yàn),另一方面可以消除FCK在加載時(shí)對頁面打開速度的影響,點(diǎn)擊“Open Editor”按鈕后才打開編輯器界面。
          實(shí)現(xiàn)原理:
          使用JAVASCRIPT版的FCK,在頁面加載時(shí)(未打開FCK),創(chuàng)建一個(gè)隱藏的TextArea域,這個(gè)TextArea
          的name和ID要和創(chuàng)建的FCK實(shí)例名稱一致,然后點(diǎn)擊”Open Editor”按鈕時(shí),通過調(diào)用一段函數(shù),使用
          FCK的ReplaceTextarea()方法來創(chuàng)建FCKeditor,代碼如下:
          ------------------------------------
          <script. type=”text/javascript”>
          <!–
          function showFCK(){
          var FCKeditor = new FCKeditor( ‘fbContent’ ) ;
          oFCKeditor.BasePath = ‘/FCKeditor/’ ;
          oFCKeditor.ToolbarSet = ‘Basic’ ;
          oFCKeditor.Width = ‘100%’ ;
          oFCKeditor.Height = ‘200′ ;
          oFCKeditor.ReplaceTextarea() ;
          }
          //–>
          </script>
          <textarea name=”fbContent” id=”fbContent”></textarea>
          2、使用FCKeditor 的 API
          -------------------------------------
          FCKeditor編輯器,提供了非常豐富的API,用于給End User實(shí)現(xiàn)很多想要定制的功能,比如最基本的數(shù)據(jù)驗(yàn)證,如何在提交的時(shí)候用JS判斷當(dāng)前編輯器區(qū)域內(nèi)是否有內(nèi)容,F(xiàn)CK的API提供了GetLength()方法;
          再比如如何通過腳本向FCK里插入內(nèi)容,使用InsertHTML()等;
          還有,在用戶定制功能時(shí),中間步驟可能要執(zhí)行FCK的一些內(nèi)嵌操作,那就用ExecuteCommand()方法。
          詳細(xì)的API列表,請查看FCKeditor的Wiki。而常用的API,請查看FCK壓縮包里的_samples/html/sample08.html。此處就不貼代碼了。
          3、外聯(lián)編輯條(多個(gè)編輯域共用一個(gè)編輯條)
          --------------------------------------
          這個(gè)功能是2.3版本才開始提供的,以前版本的FCKeditor要在同一個(gè)頁面里用多個(gè)編輯器的話,得一個(gè)個(gè)創(chuàng)建,現(xiàn)在有了這個(gè)外聯(lián)功能,就不用那么麻煩了,只需要把工具條放在一個(gè)適當(dāng)?shù)奈恢?,后面就可以無限制的創(chuàng)建編輯域了。
          要實(shí)現(xiàn)這種功能呢,需要先在頁面中定義一個(gè)工具條的容器:<div id=”xToolbar”></div>,然后再根據(jù)這個(gè)容器的id屬性進(jìn)行設(shè)置。
          JAVASCRIPT實(shí)現(xiàn)代碼:
          --------------------------------------
          <div id=”xToolbar”></div>
          FCKeditor 1:
          <script. type=”text/javascript”>
          <!–
          // Automatically calculates the editor base path based on the _samples directory.
          // This is usefull only for these samples. A real application should use something like this:
          // oFCKeditor.BasePath = ‘/fckeditor/’; // ‘/fckeditor/’ is the default value.
          var sBasePath = document.location.pathname.substring(0,document.location.pathname.lastIndexOf(’_samples’));
          var FCKeditor = new FCKeditor( ‘FCKeditor_1′ );
          oFCKeditor.BasePath = sBasePath;
          oFCKeditor.Height = 100;
          oFCKeditor.Config[ ‘ToolbarLocation’ ] = ‘Out:parent(xToolbar)’;
          oFCKeditor.Value = ‘This is some <strong>sample text</strong>. You are using FCKeditor.’;
          oFCKeditor.Create();
          //–>
          </script>
          <br />
          FCKeditor 2:
          <script. type=”text/javascript”>
          <!–
          FCKeditor = new FCKeditor( ‘FCKeditor_2′ );
          oFCKeditor.BasePath = sBasePath;
          oFCKeditor.Height = 100;
          oFCKeditor.Config[ ‘ToolbarLocation’ ] = ‘Out:parent(xToolbar)’;
          oFCKeditor.Value = ‘This is some <strong>sample text</strong>. You are using FCKeditor.’;
          oFCKeditor.Create();
          //–>
          </script>
          -------------------------------------
          此部分的詳細(xì)DEMO請參照_samples/html/sample11.html,_samples/html/sample11_frame.html
          4、文件管理功能、文件上傳的權(quán)限問題
          -------------------------------------
          一直以來FCKeditor的文件管理部分的安全是個(gè)值得注意,但很多人沒注意到的地方,雖然FCKeditor在各個(gè)Release版本中一直存在的一個(gè)功能就是對上傳文件類型進(jìn)行過濾,但是她沒考慮過另一個(gè)問題:到底允許誰能上傳?到底誰能瀏覽服務(wù)器文件?
          之前剛開始用FCKeditor時(shí),我就出現(xiàn)過這個(gè)問題,還好NetRube(FCKeditor中文化以及FCKeditor ASP版上傳程序的作者)及時(shí)提醒了我,做法是去修改FCK上傳程序,在里面進(jìn)行權(quán)限判斷,并且再在fckconfig.js里把相應(yīng)的一些功能去掉。但隨之FCK版本的不斷升級,每升一次都要去改一次配置程序fckconfig.js,我發(fā)覺厭煩了,就沒什么辦法能更好的控制這種配置么?事實(shí)上,是有的。
          在fckconfig.js里面,有關(guān)于是否打開上傳和瀏覽服務(wù)器的設(shè)置,在創(chuàng)建FCKeditor時(shí),通過程序來判斷是否創(chuàng)建有上傳瀏覽功能的編輯器。首先,我先在fckconfig.js里面把所有的上傳和瀏覽設(shè)置全設(shè)為false,接著我使用的代碼如下:
          JAVASCRIPT版本:
          -------------------------------------
          <script. type=”text/javascript”>
          var FCKeditor = new FCKeditor( ‘fbContent’ );
          <% if power = powercode then %>
          oFCKeditor.Config[’LinkBrowser’] = true;
          oFCKeditor.Config[’ImageBrowser’] = true;
          oFCKeditor.Config[’FlashBrowser’] = true;
          oFCKeditor.Config[’LinkUpload’] = true;
          oFCKeditor.Config[’ImageUpload’] = true;
          oFCKeditor.Config[’FlashUpload’] = true;
          <% end if %>
          oFCKeditor.ToolbarSet = ‘Basic’;
          oFCKeditor.Width = ‘100%’;
          oFCKeditor.Height = ‘200′;
          oFCKeditor.Value = ‘’;
          oFCKeditor.Create();
          </script>
          -------------------------------------
          在按鈕旁邊加文字
          -------------------------------------
          打開 editor/js/ 兩個(gè)js文件
          fckeditorcode_gecko.js
          fckeditorcode_ie.js
          第一個(gè)是支持非ie瀏覽器的
          第二個(gè)文件是支持ie瀏覽器的
          搜索 FCKToolbarButton,可以看到許多類似這樣的語句:
          case ‘Save’:B = new FCKToolbarButton(’Save’, FCKLang.Save, null, null, true, null, 3); break;
          ‘Save’是按鈕英文名字
          FCKToolbarButton 的四個(gè)參數(shù)分別是:
          按鈕命令名稱,按鈕標(biāo)簽文字,按鈕工具提示,按鈕樣式,按鈕是否在源代碼模式可見,按鈕下拉菜單其中將第4項(xiàng)參數(shù)設(shè)置為 FCK_TOOLBARITEM_ICONTEXT 即可使按鈕旁邊出現(xiàn)文字,注意沒有引號。
          例如:
          case ‘Preview’:B = new FCKToolbarButton(’Preview’, FCKLang.Preview, null, FCK_TOOLBARITEM_ICONTEXT, true, null, 5);
          這樣我們就可以將 我們經(jīng)常用的3種模式源代碼、預(yù)覽、全屏編輯按鈕都加上文字了。
          解釋fck樣式的工作原理
          -------------------------------------
          fck的樣式設(shè)置涉及到了兩個(gè)文件,一個(gè)是你定義好的樣式表文件.css,另一個(gè)是告訴fck樣式表如何使用的xml文件,兩個(gè)文件確一不可。
          css文件的位置是不做要求的,但是需要你在應(yīng)用的編輯器的頁面上插入樣式表文件的鏈接。這樣才能顯示出來樣式。
          fckstyles.xml 在與editor目錄同級的目錄下。該文件定義了那些樣式可以使用在那些標(biāo)簽里面。
          這就是fck自帶的樣式xml定義:
          <?xml version=”1.0″ encoding=”utf-8″ ?>
          <Styles>
          <Style name=”Image on Left” element=”img”>
          <Attribute name=”style” value=”padding: 5px; margin-right: 5px” />
          <Attribute name=”border” value=”2″ />
          <Attribute name=”align” value=”left” />
          </Style>
          <Style name=”Image on Right” element=”img”>
          <Attribute name=”style” value=”padding: 5px; margin-left: 5px” />
          <Attribute name=”border” value=”2″ />
          <Attribute name=”align” value=”right” />
          </Style>
          <Style name=”Custom Bold” element=”span”>
          <Attribute name=”style” value=”font-weight: bold;” />
          </Style>
          <Style name=”Custom Italic” element=”em” />
          <Style name=”Title” element=”span”>
          <Attribute name=”class” value=”Title” />
          </Style>
          <Style name=”Code” element=”span”>
          <Attribute name=”class” value=”Code” />
          </Style>
          <Style name=”Title H3″ element=”h3″ />
          <Style name=”Custom Ruler” element=”hr”>
          <Attribute name=”size” value=”1″ />
          <Attribute name=”color” value=”#ff0000″ />
          </Style>
          </Styles>
          每一個(gè)<style>將來會(huì)生成一個(gè)樣式的菜單項(xiàng)。name名稱就是顯示在菜單里的文字;element定義了該樣式可以應(yīng)用在那種html標(biāo)簽上,<Attribute>的 name 指定了將會(huì)修改標(biāo)簽的哪個(gè)屬性來應(yīng)用樣式,value則是修改成的值。
          看這個(gè):
          <Style name=”Title” element=”span”>
          <Attribute name=”class” value=”Title” />
          </Style>
          如果你在fck選定了文字 “經(jīng)典論壇 》 前臺制作與腳本專欄 》 FCKeditor 實(shí)戰(zhàn)技巧 - 1 》 編輯帖子” 應(yīng)用該樣式 則原來文字就會(huì)變成<span class=”Title”>經(jīng)典論壇 》 前臺制作與腳本專欄 》 FCKeditor 實(shí)戰(zhàn)技巧 - 1 》 編輯帖子</span>
          注意:如果編輯器呈整頁編輯狀態(tài),那么整頁里面也需要插入樣式表鏈接才能顯示出來樣式。
          ============================================
          FCKeditor JavaScript. API(翻譯整理)
          原文地址:http://wiki.fckeditor.net/Developer%27s_Guide/Javascript_API
          --------------------------------------------
          FCK 編輯器加載后,將會(huì)注冊一個(gè)全局的 FCKeditorAPI 對象。
          FCKeditorAPI 對象在頁面加載期間是無效的,直到頁面加載完成。如果需要交互式地知道 FCK 編輯器已經(jīng)加載完成,可使用“FCKeditor_OnComplete”函數(shù)。
          <script. type=”text/javascript”>
          function FCKeditor_OnComplete(editorInstance) {
          FCKeditorAPI.GetInstance(’FCKeditor1′).Commands.GetCommand(’FitWindow’).Execute();
          }
          </script>
          在當(dāng)前頁獲得 FCK 編輯器實(shí)例:
          var Editor = FCKeditorAPI.GetInstance(’InstanceName’);
          從 FCK 編輯器的彈出窗口中獲得 FCK 編輯器實(shí)例:
          var Editor = window.parent.InnerDialogLoaded().FCK;
          從框架頁面的子框架中獲得其它子框架的 FCK 編輯器實(shí)例:
          var Editor = window.FrameName.FCKeditorAPI.GetInstance(’InstanceName’);
          從頁面彈出窗口中獲得父窗口的 FCK 編輯器實(shí)例:
          var Editor = opener.FCKeditorAPI.GetInstance(’InstanceName’);
          獲得 FCK 編輯器的內(nèi)容:
          oEditor.GetXHTML(formatted); // formatted 為:true|false,表示是否按HTML格式取出
          也可用:
          oEditor.GetXHTML();
          設(shè)置 FCK 編輯器的內(nèi)容:
          oEditor.SetHTML(”content”, false); // 第二個(gè)參數(shù)為:true|false,是否以所見即所得方式設(shè)置其內(nèi)容。此方法常用于“設(shè)置初始值”或“表單重置”操作。
          插入內(nèi)容到 FCK 編輯器:
          oEditor.InsertHtml(”html”); // “html”為HTML文本
          檢查 FCK 編輯器內(nèi)容是否發(fā)生變化:
          oEditor.IsDirty();
          在 FCK 編輯器之外調(diào)用 FCK 編輯器工具條命令:
          命令列表如下:
          --------------------------------------------
          DocProps, Templates, Link, Unlink, Anchor, BulletedList, NumberedList, About, Find, Replace, Image, Flash, SpecialChar, Smiley, Table, TableProp, TableCellProp, UniversalKey, Style, FontName, FontSize, FontFormat, Source, Preview, Save, NewPage, PageBreak, TextColor, BGColor, PasteText, PasteWord, TableInsertRow, TableDeleteRows, TableInsertColumn, TableDeleteColumns, TableInsertCell, TableDeleteCells, TableMergeCells, TableSplitCell, TableDelete, Form, Checkbox, Radio, TextField, Textarea, HiddenField, Button, Select, ImageButton, SpellCheck, FitWindow, Undo, Redo
          --------------------------------------------
          使用方法如下:
          --------------------------------------------
          oEditor.Commands.GetCommand(’FitWindow’).Execute();
          --------------------------------------------

          posted @ 2008-01-09 12:52 feingto 閱讀(2998) | 評論 (0)編輯 收藏

          FCKEditor的賦值和取值操作

          1、獲取編輯器中HTML內(nèi)容

          function getEditorHTMLContents(EditorName)

              
          var oEditor = FCKeditorAPI.GetInstance(EditorName); 
              
          return(oEditor.GetXHTML(true)); 
          }


          2、獲取編輯器中文字內(nèi)容(在博客發(fā)布時(shí)獲取無html代碼摘要使用)

          function getEditorTextContents(EditorName)

              
          var oEditor = FCKeditorAPI.GetInstance(EditorName); 
              
          return(oEditor.EditorDocument.body.innerText); 
          }


          3、設(shè)置編輯器中內(nèi)容

          function SetEditorContents(EditorName, ContentStr)

              
          var oEditor = FCKeditorAPI.GetInstance(EditorName) ; 
              oEditor.SetHTML(ContentStr) ; 
          }

          posted @ 2008-01-09 12:51 feingto 閱讀(2086) | 評論 (1)編輯 收藏

          Script.aculo.us開發(fā)系列(八):使用DropDrag定義拖拽行為

           

          在不同的瀏覽器上默認(rèn)的拖拽能解決的問題相當(dāng)少,所以有很多的框架都能實(shí)現(xiàn)這么個(gè)功能.使用拖拽行為能很好的改善用戶體驗(yàn),尤其是在購物的時(shí)候能讓用戶感到很新奇和體面.Script.aculo.us使用了三個(gè)類實(shí)現(xiàn)拖拽和排序,它們是Draggable,Droppable,Sortable.要實(shí)現(xiàn)一個(gè)完整的拖拽行為,需要Draggable,和Droppable的配合使用,由于這連個(gè)類的方法比較多,我只選取比較實(shí)用的幾個(gè)方法進(jìn)行介紹.還是老規(guī)矩,先看看Demo:http://www1.qcxy.hb.cn/qphy/Script_Aculo_Us/DragDrop.html

          Draggable

          new Draggable("DraggableId"[,options])

          主要選項(xiàng)

          • snap:推拽的最小單位,默認(rèn)為false,可以是數(shù)組或者函數(shù),將這個(gè)屬性設(shè)置為[50,50],意味著最小的位移單位是50px,50px,如果設(shè)置為一個(gè)函數(shù),這個(gè)函數(shù)的參數(shù)為(x,y),這個(gè)x,y指示當(dāng)前的絕對坐標(biāo),函數(shù)應(yīng)該返回二維數(shù)組,上面的例子中的Drag(UnAcceptable)推拽到頁面的左上角是就會(huì)"吸附"上去,就是因?yàn)楹瘮?shù)的作用,詳細(xì)見源碼
          • revert:推拽完畢之后是否回到原來的位置,默認(rèn)為false,也可以是一個(gè)函數(shù),這個(gè)函數(shù)必須返回true/false
          • handle:"提手",移動(dòng)整個(gè)塊的時(shí)候通常不需要在整個(gè)塊的區(qū)域都可以拖拽,比如移動(dòng)一個(gè)欄目,通常只需要拖拽標(biāo)題(比如Google的個(gè)性化主頁),將該屬性設(shè)置為標(biāo)題的Id
          • ghosting:推拽的過程中是否顯示"影子",默認(rèn)為false
          • constraint:限制能拖動(dòng)的方向,默認(rèn)的兩個(gè)方向都可以,可以設(shè)置為"vertical","horizontal"的任意
          • zindex:"影子"的z-Index屬性
          • scroll:拖拽出視圖范圍是否顯示自動(dòng)滾動(dòng)
          • scrollSensitivity/scrollSpeed:默認(rèn)值分為為20/15,控制滾動(dòng)的敏感度和滾動(dòng)速度
          • delay:拖拽前的延時(shí),開始拖拽后經(jīng)過這個(gè)時(shí)間才"回過神來"

          這里需要說明的是并非所有的標(biāo)簽都支持該行為,詳細(xì)的情況請參閱官方文檔

          API

          • onStart:開始拖拽調(diào)用該函數(shù),接受兩個(gè)參數(shù)(obj,oEvent)前者是$(DraggableId),后者是當(dāng)前事件的event對象
          • onDrag:在拖拽過程中反復(fù)的調(diào)用該函數(shù),同樣接受兩個(gè)參數(shù)(obj,oEvent)
          • change:在onDrag后調(diào)用,也會(huì)反復(fù)調(diào)用
          • onEnd:拖拽行為結(jié)束調(diào)用,即鼠標(biāo)彈起時(shí)激發(fā)
          • destroy():該方法銷毀元素的拖拽行為

          Droppables

          Droppables(注意是復(fù)數(shù)形式)是一個(gè)抽象類,不能被實(shí)例化,只有一些靜態(tài)方法,常用的方法有add和move,分別增加可放置元素,和去除可放置元素

          add方法:Dropables.add("ContainerId"[,options]),常用的選項(xiàng)

          • accept: 數(shù)組或者字符串,表示該容器接受的元素的className的集合,默認(rèn)的任何元素都接收
          • hoverclass:當(dāng)符合接受要求的元素拖至容器上時(shí),其className
          • onDrop():被拖拽的符合要求的元素在這里放置時(shí)調(diào)用該函數(shù),接受三個(gè)參數(shù)(draggable,droppable,oEvent),draggable是被拖拽元素,droppable是被放置元素,oEvent當(dāng)前事件對象

          remove("ContainerId"),該方法去除容器的放置行為

          (上面例子的源代碼)

          Sortable

          Sortable是一組可以通過拖拽交換位置的元素,可以先看看實(shí)例(

          serialize(sortable)方法:該方法返回當(dāng)前容器內(nèi)元素的次序,但是要求子元素的id必須以"item_"開頭,且返回格式有講究,看下面的例子

          <div id="horizontalSortable" class="item" style="margin-top:20px; height:40px;">
                <div id="item_5">IE</div>
                <div id="item_6">FireFox</div>
                <div id="item_7">Safari</div>
                <div id="item_8">Opera</div>
          </div>

          Sortable.create("horizontalSortable",
          {
               ghosting:true,
               tag:'div',
               constraint:'horizontal',
               hoverclass:'hoverClass2'
          });

          Sortable.serialize('horizontalSortable')
          //-->horizontalSortable[]=5&horizontalSortable[]=6&horizontalSortable[]=7&horizontalSortable[]=8

          最后看一個(gè)例子,前面提到的containment選項(xiàng)在某些情況下很有用,比如要實(shí)現(xiàn)兩個(gè)容器里的元素可以互相交換子元素,即從一個(gè)容器拖至令一個(gè)容器中.來看下面的例子

          <script type="text/javascript">
            Sortable.create('sortUlLeft',{containment:['sortUlLeft','sortUlRight'], dropOnEmpty:
          true,ghosting:true,constraint:false,hoverclass:'hoverClass'});
            Sortable.create('sortUlRight',{containment:['sortUlLeft','sortUlRight'], dropOnEmpty:
          true,ghosting:true,constraint:false,hoverclass:'hoverClass'});

          </script>

          上面的例子可以實(shí)現(xiàn)sortUlLeft,和sortUlRight的子元素互相交換

          posted @ 2008-01-05 14:14 feingto 閱讀(563) | 評論 (0)編輯 收藏

          用script.aculo.us實(shí)現(xiàn)像google suggest自動(dòng)完成功能

           

          實(shí)現(xiàn)像google suggest自動(dòng)完成功能

          首先創(chuàng)建一個(gè)jsp

          <%@ page language="java" pageEncoding="UTF-8"%>

          <html>
          <head>
          <script type="text/javascript" src="js/prototype.js"></script>
          <script type="text/javascript" src="js/effects.js"></script>
          <script type="text/javascript" src="js/controls.js"></script>
          <style>
          div.auto_complete {
            width: 350px;
            background: #fff;
          }
          div.auto_complete ul {
            border:1px solid #888;
            margin:0;
            padding:0;
            width:100%;
            list-style-type:none;
          }
          div.auto_complete ul li {
            margin:0;
            padding:3px;
          }
          div.auto_complete ul li.selected {
            background-color: #ffb;
          }
          div.auto_complete ul strong.highlight {
            color: #800;
            margin:0;
            padding:0;
          }
          </style>

          </head>
          <body>
          <input type="text" id="autocomplete"/>
          <div id="results" class="auto_complete"></div>
          <script type="text/javascript">
           new Ajax.Autocompleter(
            "autocomplete",
            "results",
            "list.html", {
             method: "GET"
            }
           );
          </script>
          </body>
          </html>

           

          list.html

          <ul>
          <li>Aria</li>
          <li>Aaaa</li>
          <li>Afdsa</li>
          <li>bsa</li>
          </ul>

          上面list.html采用靜態(tài)頁面返回列表,讀者可以使用動(dòng)態(tài)頁面返回結(jié)果。

          posted @ 2008-01-03 09:20 feingto 閱讀(1963) | 評論 (3)編輯 收藏

          怎么避免瀏覽器緩存靜態(tài)文件

          對于動(dòng)態(tài)文件,比如 index.asp?id=...  或者 index.aspx?id=... 相信有經(jīng)驗(yàn)的程序員都知道怎樣禁止瀏覽器緩存數(shù)據(jù)了.
          但是對于靜態(tài)文件(css,jpg,gif等等), 在什么場合下面我們需要禁止瀏覽器緩存他們,怎么做?

          本文討論的主題是如何防緩存, 尤其是如何防止靜態(tài)文件被緩存..


          在  RE:對博客園URL的一些調(diào)整建議, 二級域名不利于客戶端瀏覽器緩存 一文中,我提到了怎么最大化的
          利用瀏覽器緩存功能,來提高客戶端瀏覽速度, 減輕服務(wù)器負(fù)擔(dān)的.

          但是事物總是一分為二的,并不是所有的場合都要使用緩存的. 有時(shí)候我們的數(shù)據(jù)被緩存了反而會(huì)給我們帶來麻煩.

          對于動(dòng)態(tài)數(shù)據(jù)(從數(shù)據(jù)庫讀取生成的那些),我們可以通過以下方法來禁止瀏覽器緩存。

          'asp 為例 禁止緩存

          Response.Buffer 
          = True 
          Response.ExpiresAbsolute 
          = Now() - 1 
          Response.Expires 
          = 0 
          Response.CacheControl 
          = "no-cache" 
          Response.AddHeader 
          "Pragma""No-Cache" 

          對于Ajax 的請求(不管是靜態(tài)數(shù)據(jù)還是動(dòng)態(tài)數(shù)據(jù)):

          //以下三種方法使用其中任何一種方法都可以
          xmlhttp.setRequestHeader("Cache-Control","no-cache");  
          //或者
          xmlhttp.setRequestHeader("If-Modified-Since","0");
          //或者
          xmlhttp.Open(url+'?rnd='+Math.random(),....)

          如果使用 prototype.js  , 用類似這樣的代碼 
          new Ajax.Request(url,{method:"get",requestHeaders:["Cache-Control","no-cache"]})
          或者
          new Ajax.Request(url,{method:"get",requestHeaders:["If-Modified-Since","0"]})
           

          什么情況下,要禁止靜態(tài)文件緩存:
          1、經(jīng)??赡芤膭?dòng)的 js, css.
                 比如 一個(gè)html 文件, test.html 在 1.0版本中??赡苁沁@樣
               <script src="common.js"></script>
               修改后  v1.1版本:
           <script src="common.js"></script>
           <script src="foo.js"></script>
             新增加了一個(gè)foo.js  同時(shí),也改動(dòng)了common.js , 在common.js 中定義了新的類,并在foo.js 中使用了common.js. 

          在這種情況下如果以前用戶瀏覽過 1.0版本的 html 文件,那么他的瀏覽器自動(dòng)緩存了 common.js
          當(dāng)他瀏覽新版本的時(shí)候,因?yàn)槭褂玫氖?v1.1的 foo.js 和 v1.0的 common.js ,這樣將導(dǎo)致腳本出錯(cuò)。


          解決方法探討:
            因?yàn)閏ss,js 是通過 <script src=....> 這種方式加載的,所以,很難使用 asp 的那種服務(wù)器端禁止緩存的辦法。也很難使用ajax的通過設(shè)置 http請求頭的辦法禁止使用緩存。

          看來隨機(jī)數(shù)是個(gè)好辦法。

          //方法一:
          document.write("<script src='test.js?rnd="+Math.random()+"'></s"+"cript>")

          //方法二:
          var js=document.createElement("script")
          js.src
          ="test.js"+Math.random()
          document.body.appendChild(js)


          但是,如果采用隨機(jī)數(shù)的話, js文件將永遠(yuǎn)得不到緩存,每次都必須重新從服務(wù)器加載,即使沒有任何更改。
          大家如果經(jīng)常上國外網(wǎng)站的話,可以看到他們通常采用這樣的方式來解決:
          <script src="test.js?ver=113"></script>
          其中 ver=113 的 113就是版本號,一般都是采用 CVS 或其他工具生成的開發(fā)版本號。

          這樣真正做到了應(yīng)該緩存的時(shí)候緩存靜態(tài)文件,當(dāng)版本有更新的時(shí)候從獲取最新的版本,并更新緩存。
          對于圖像 <img src="test.jps?ver=在CVS的版本號"> 來有效利用和更新緩存.


          唉,現(xiàn)在在CSDN的Web版,不知道有多少人在重復(fù)問著同一個(gè)問題。“怎么通過程序刪除清空客戶端的瀏覽器緩存”.........

           

          未完待續(xù):

          下一篇:  利用瀏覽器緩存來改善用戶體驗(yàn)。。。。Ajax模式之預(yù)先加載

          敬請關(guān)注,等我寫完再加上鏈接

          posted @ 2008-01-03 09:19 feingto 閱讀(2570) | 評論 (1)編輯 收藏

          AJAX框架/庫比較和選擇:ECHO2, GWT, DOJO, PROTOTYPE, JQUERY

          看了幾篇中英文的AJAX庫/框架比較文章,為方便選擇使用,特歸納如下:
          首先,要在兩個(gè)類別中選擇,一個(gè)是編譯類,一個(gè)是非編譯類別。
          Echo2/GWT是將JAVA代碼編譯成JAVASCRIPT,乍看很方便,不用掌握J(rèn)S也能做出炫目界面。但這只適于不會(huì)或者不想了解JS的情況,對于還是想完全控制和定制界面的項(xiàng)目就不適合。
          另外,有一種觀點(diǎn)認(rèn)為JAVA->JS轉(zhuǎn)換是一種低級語言向高級語言轉(zhuǎn)換,本身沒有意義。有點(diǎn)像去學(xué)匯編,然后再找個(gè)工具把匯編語言代碼轉(zhuǎn)換成C代碼來用。我雖然沒完全想通這個(gè)觀點(diǎn),不過,我一直用C/C++,這幾年才逐漸發(fā)現(xiàn)JAVA確實(shí)是一種進(jìn)化。沒準(zhǔn)別人說的是對的呢?
          在Echo2和GWT中,GWT大部分工作是在客戶端,盡量少跟SERVER打交道,適合大型網(wǎng)站運(yùn)用;ECHO2信奉“用到才加載”的信條,所以會(huì)有大量向SERVER的訪問,適合企業(yè)應(yīng)用。另外,個(gè)人覺得ECHO2是個(gè)更全面的的一站式框架,界面也非常炫。但它的開發(fā)工具要收費(fèi)。
          再談非編譯類別,它們包括DOJO、PROTOTYPE、JQEURY,下面一一介紹:
          先說PROTOTYPE,它比較輕量極,能讓你的代碼更加簡化。最經(jīng)典莫過于“美圓函數(shù)”:
          document.getElementById(’elementid’) 變成$(’elementid’)
          它加強(qiáng)了JS語言的可開發(fā)性,降低了學(xué)習(xí)JS的門檻。
          DOJO最吸引人的是它的事件系統(tǒng)和豐富的可定制組件。它可以用形如下面的語句為各種HTML元素加入事件:
          dojo.event.connect(someNode, "onclick", doStuff);
          正由于DOJO提供了強(qiáng)大功能,它分成了許多包,可以分別包含使用。
          JQUERY也提供了美圓函數(shù),它的插件系統(tǒng)也提供象DOJO的組件,但它沒有PROTOTYPE那樣簡潔,也沒有DOJO這么多的組件供使用,但它兼收兩家優(yōu)點(diǎn),并且個(gè)頭不大,文檔也算完整,所以說它介乎于前述兩者之間。
          所以,如果你需要非常完整的工具組件請用DOJO,如果你想優(yōu)化你的JS代碼,提高書寫技巧請用PROTOTYPE,如果你想兩者兼顧就用JQUERY。

          posted @ 2007-12-30 20:37 feingto 閱讀(485) | 評論 (0)編輯 收藏

          prototype.js開發(fā)筆記

               摘要: Table of Contents 1. Programming Guide 1.1. Prototype是什么? 1.2. 關(guān)聯(lián)文章 1.3. 通用性方法 1.3.1. 使用 $()方法 1.3.2. 使用$F()方法 1.3.3. 使用$A()方法 1.3.4. 使用$H()方法 1.3.5. 使用$R()方法 1.3.6. 使用Try.these()方...  閱讀全文

          posted @ 2007-12-30 18:07 feingto 閱讀(419) | 評論 (0)編輯 收藏

          Prototype 1.5 Ajax 使用教程

          2.3  Prototype對Ajax的支持

          作為一個(gè)Ajax開發(fā)框架,Prototype對Ajax開發(fā)提供了有力的支持。在Prototype中,與Ajax相關(guān)的類和對象包括:Ajax、Ajax.Responsders、Ajax.Base、Ajax.Request、Ajax. PeriodicalUpdater和Ajax.Updater,圖2-3所示為這些類和對象之間的關(guān)系及其常用屬性和方法,下面分別對這些類和對象進(jìn)行介紹。

          圖2-3  Prototype中Ajax相關(guān)類和對象關(guān)系示意圖

          2.3.1  Ajax對象

          Ajax對象為其他的Ajax功能類提供了最基本的支持,它的實(shí)現(xiàn)如2.2.7節(jié)中例2-10所示,其中包括一個(gè)方法getTransport和一個(gè)屬性activeRequestCount。getTransport方法返回一個(gè)XMLHttpRequest對象,activeRequestCount屬性代表正在處理中的Ajax請求的個(gè)數(shù)。

          2.3.2  Ajax.Base類

          Ajax.Base類是Ajax.Request類和Ajax.PeriodicalUpdater類的基類。它提供了3個(gè)方法:

          l  setOptions:設(shè)置Ajax操作所使用的選項(xiàng)。

          l  responseIsSuccess:判斷Ajax操作是否成功。

          l  responseIsFailure:判斷Ajax操作是否失?。ㄅcresponseIsSuccess相反)。

          Ajax.Base類的主要作用是提取出一些公用的方法,其他類通過繼承的方式使用這些方法,實(shí)現(xiàn)代碼復(fù)用。

          2.3.3  Ajax.Request類

          這是Prototype中最經(jīng)常使用的一個(gè)Ajax相關(guān)類。Ajax.Request類的方法通常是內(nèi)部使用的,因此這里就不一一列舉,有興趣的讀者可以參考Prototype的源代碼。這里重點(diǎn)講講如何使用Ajax.Request類,首先給出一個(gè)最簡單的Ajax.Request類的應(yīng)用示例,如例2-11所示,注意示例中的黑體字。

          例2-11  Ajax.Request類應(yīng)用示例

          Ajax.Request測試頁面:

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

          <html>

              <head>

                  <title>chapter 3</title>

                  <script type="text/javascript" language="javascript"

                   src="prototype.js" ></script>

                  <script type="text/javascript" language="javascript">

                  function test() {

                      // 創(chuàng)建Ajax.Request對象,發(fā)起一個(gè)Ajax請求

                      var myAjax = new Ajax.Request(

                          'data.html', // 請求的URL

                          {

                              method: 'get',  // 使用GET方式發(fā)送HTTP請求

                              onComplete: showResponse // 指定請求成功完成時(shí)需要執(zhí)行的方法

                          }

                      );

                  }

                  function showResponse(response) {

                      $('divResult').innerHTML = response.responseText;

                  }

                  </script>

              </head>

              <body>

              <input type="button" value="click" onclick="test()" />

              <div id="divResult" />

              </body>

          </html>

          data.html

          <input type="text" id="name" />

          <input type="button" value="Click Me" onclick="sayHi()">

          Ajax.Request對象在初始化時(shí)需要提供兩個(gè)參數(shù):第1個(gè)參數(shù)是將要請求頁面的URL,這里使用的data.html是一個(gè)普通的HTML靜態(tài)頁面;第2個(gè)參數(shù)是Ajax操作的選項(xiàng),在Prototype中并沒有專門為Ajax操作選項(xiàng)定義一個(gè)類,通常都是像例2-11這樣,通過匿名對象的方式設(shè)置Ajax操作的參數(shù)。在例2-11中,Ajax操作選項(xiàng)具有兩個(gè)屬性:method表示HTTP請求方式,默認(rèn)是POST方式;onComplete指定了Ajax操作完成以后(即XMLHttpRequest對象的status屬性為4時(shí)),頁面將要執(zhí)行的函數(shù)。當(dāng)然,Ajax操作還包括很多其他選項(xiàng),如表2-1所示。

          表2-1  Ajax操作選項(xiàng)屬性含義

          屬性名稱

          含義

          method

          HTTP請求方式(POST/GET/HEAD)。

          parameters

          在HTTP請求中傳入的URL格式的值列表,即URL串中問號之后的部分。

          asynchronous

          是否做異步XMLHttpRequest請求。

          postBody

          在POST請求方式下,傳入請求體中的內(nèi)容。

          requestHeaders

          和請求一起被傳入的HTTP頭部列表,這個(gè)列表必須含有偶數(shù)個(gè)項(xiàng)目,因?yàn)榱斜碇忻績身?xiàng)為一組,分別代表自定義部分的名稱和與之對應(yīng)的字符串值。

          onXXXXXXXX

          在HTTP請求、響應(yīng)的過程中,當(dāng)XMLHttpRequest對象狀態(tài)發(fā)生變化時(shí)調(diào)用的響應(yīng)函數(shù)。響應(yīng)函數(shù)有5個(gè):onUninitialized、onLoading、onLoaded、onInteractive和onComplete。傳入這些函數(shù)的參數(shù)可以有2個(gè),其中第1個(gè)參數(shù)是執(zhí)行HTTP請求的XMLHttpRequest對象,第2個(gè)參數(shù)是包含被執(zhí)行的X-JSON響應(yīng)的HTTP頭。

          onSuccess

          Ajax操作成功完成時(shí)調(diào)用的響應(yīng)函數(shù),傳入的參數(shù)與onXXXXXXXX相同。

          onFailure

          Ajax操作請求完成但出現(xiàn)錯(cuò)誤時(shí)調(diào)用的響應(yīng)函數(shù),傳入的參數(shù)與onXXXXXXXX相同。

          onException

          Ajax操作發(fā)生異常情況時(shí)調(diào)用的響應(yīng)函數(shù),它可以接收2個(gè)參數(shù),其中第1個(gè)參數(shù)是執(zhí)行HTTP請求的XMLHttpRequest對象,第2個(gè)參數(shù)是異常對象。

          2.3.4  Ajax.Updater類

          例2-11使用Ajax.Request類實(shí)現(xiàn)了頁面的局部刷新效果,而這樣類似的功能在Ajax應(yīng)用中是經(jīng)常使用的。因此,為了簡化這種工作,Prototype框架從Ajax.Requet類中派生出一個(gè)子類——Ajax.Updater。與Ajax.Request相比,Ajax.Updater的初始化多了一個(gè)container參數(shù),該參數(shù)代表將要更新的頁面元素的id。例2-11的功能通過Ajax.Updater的實(shí)現(xiàn),會(huì)變得更加簡單,如例2-12所示。

          例2-12  Ajax.Updater類的應(yīng)用示例

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

          <html>

              <head>

                  <title>chapter 3</title>

                  <script type="text/javascript" language="javascript"

                   src="prototype.js" ></script>

                  <script type="text/javascript" language="javascript">

                  function test() {

                      var myAjax = new Ajax.Updater(

                          'divResult', // 更新的頁面元素

                          'data.html', // 請求的URL

                          {

                              method: 'get'

                          }

                      );

                  }

                  </script>

              </head>

              <body>

              <input type="button" value="click" onclick="test()" />

              <div id="divResult" />

              </body>

          </html>

          此外,Ajax.Updater類還有另外一個(gè)功能,如果請求的頁面內(nèi)容中包括JavaScript腳本,Ajax.Updater類可以執(zhí)行其中的腳本,只需要在Ajax操作選項(xiàng)中增加屬性“evalScripts: true”即可。對例2-11中的data.html進(jìn)行修改,在其中加入JavaScript腳本,如例2-13所示。

          例2-13  data.html

          <script language="javascript" type="text/javascript">

          sayHi = function() {

              alert("Hello, " + $F('name') + "!");

          }

          </script>

          <input type="text" id="name" />

          <input type="button" value="Click Me" onclick="sayHi()">

          調(diào)用Ajax.Updater的JavaScript腳本修改為:

          function test() {

              var myAjax = new Ajax.Updater(

                  'divResult', // 更新的頁面元素

                  'data.html', // 請求的URL

                  {

                      method: 'get',

                      evalScripts: true

                  }

              );

          }

          這樣就可以使用data.html頁面的內(nèi)容更新當(dāng)前頁面中的<div>元素divResult,并且執(zhí)行data.html頁面中包含的JavaScript腳本。

          這里需要注意的是例2-13中sayHi函數(shù)的寫法,如果寫成

          function sayHi() {

              alert("Hello, " + $F('name') + "!");

          }

          或者

          var sayHi = function() {

              alert("Hello, " + $F('name') + "!");

          }

          程序是不能正常運(yùn)行的。這是因?yàn)锳jax.Updater執(zhí)行腳本是通過eval的方式,而不是將腳本內(nèi)容引入到當(dāng)前頁面,直接聲明的function sayHi或者用var聲明的sayHi函數(shù),其作用域只是在這段腳本內(nèi)部,外部的其他腳本不能訪問sayHi函數(shù)。而按照例2-13的方式聲明的函數(shù),其作用域是整個(gè)window。

          2.3.5  Ajax.PeriodicalUpdater類

          和Ajax.Request類相似,Ajax.PeriodicalUpdater類也繼承自Ajax.Base類。在一些Ajax應(yīng)用中,需要周期性地更新某些頁面元素,例如天氣預(yù)報(bào)、即時(shí)新聞等等。實(shí)現(xiàn)這樣的功能通常要使用JavaScript中的定時(shí)器函數(shù)setTimeout、clearTimeout等,而有了Ajax.PeriodicalUpdater類可以很好地簡化這類編碼工作。

          新建一個(gè)Ajax. PeriodicalUpdater類的實(shí)例需要指定3個(gè)參數(shù):

          l  container:將要更新的頁面元素id;

          l  url:請求的URL地址;

          l  options:Ajax操作選項(xiàng)。

          和Ajax.Updater類相似,Ajax.PeriodicalUpdater類也支持動(dòng)態(tài)執(zhí)行JavaScript腳本,只需在Ajax操作選項(xiàng)中增加(evalScripts: true)屬性值即可。

          Ajax.PeriodicalUpdater類支持兩個(gè)特殊的Ajax操作選項(xiàng):frequency和decay。frequency參數(shù)很容易理解,既然是定時(shí)更新頁面元素,或者定時(shí)執(zhí)行腳本,那么多長時(shí)間更新或者執(zhí)行一次呢?frequency指的就是兩次Ajax操作之間的時(shí)間間隔,單位是秒,默認(rèn)值為2秒。

          如果僅指定frequency參數(shù),程序會(huì)按照固定的時(shí)間間隔執(zhí)行Ajax操作。這樣的更新策略合理嗎?答案取決于請求URL中數(shù)據(jù)的更新頻率。如果請求的數(shù)據(jù)會(huì)很有規(guī)律地按照固定頻率改變,那么只要設(shè)置一個(gè)合適的frequency值,就可以很有效地實(shí)現(xiàn)頁面的定時(shí)更新。然而實(shí)際應(yīng)用中的數(shù)據(jù)往往不會(huì)那么理想,例如新聞,可能在一天中只有特定的一段時(shí)間更新頻率會(huì)很高,而在其他時(shí)間則幾乎沒有變化。經(jīng)常遇到這樣的情況該怎么辦呢?Ajax.PeriodicalUpdater類支持的decay屬性就是為了解決這個(gè)問題而產(chǎn)生的。當(dāng)option中帶有decay屬性時(shí),如果請求返回的數(shù)據(jù)與上次相同,那么下次進(jìn)行Ajax操作的時(shí)間間隔會(huì)乘以一個(gè)decay的系數(shù)。

          為了比較明顯地看到decay屬性的效果,在請求的測試頁面中加入記錄時(shí)間的腳本,代碼如例2-14所示。

          例2-14  Ajax.PeriodicalUpdater類應(yīng)用示例

          ex10.html

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

          <html>

              <head>

                  <title>chapter 3</title>

                  <script type="text/javascript" language="javascript"

                   src="prototype.js" ></script>

                  <script type="text/javascript" language="javascript">

                  var str='';

                  var intcount=0;

                  function test() {

                      var myAjax = new Ajax.PeriodicalUpdater(

                          'divResult', // 定時(shí)更新的頁面元素

                          'script1.html', // 請求的URL

                          {

                              method: 'get', // HTTP請求的方式為GET

                              evalScripts: true, // 是否執(zhí)行請求頁面中的腳本

                              frequency: 1, // 更新的頻率

                              decay: 1 // 衰減系數(shù)

                          }

                      );

                  }

                  </script>

              </head>

              <body>

              <input type="button" value="click" onclick="test()" />

              <div id="divResult" ></div>

              <div id="divResult2" ></div>

              </body>

          </html>

          script1.html:

          <script language="javascript" type="text/javascript">

          // Ajax.PeriodicalUpdater調(diào)用函數(shù)計(jì)數(shù)

          // 在<div>元素divResult2中增加一行結(jié)果,并記錄當(dāng)前時(shí)間和

          // Ajax.PeriodicalUpdater的調(diào)用次數(shù)

          intcount++;

          str = $('divResult2').innerHTML;

          $('divResult2').innerHTML = str + "count = " + intcount+ ": " + new Date() + "<br>";

          </script>

          例2-14的運(yùn)行結(jié)果如圖2-4所示。

          圖2-4  Ajax.PeriodicalUpdater類應(yīng)用示例

          可以看到,由于請求返回的數(shù)據(jù)一直沒有發(fā)生變化,每次請求時(shí)間的間隔是上一次的2倍(decay=2)。如果某一次請求返回的數(shù)據(jù)發(fā)生了變化,那么執(zhí)行請求的時(shí)間間隔則恢復(fù)到初始值。

          2.3.6  Ajax.Responders對象

          Ajax.Responders對象維護(hù)了一個(gè)正在運(yùn)行的Ajax對象列表,在需要實(shí)現(xiàn)一些全局的功能時(shí)就可以使用它。例如,在Ajax請求發(fā)出以后需要提示用戶操作正在執(zhí)行中,而操作返回以后則取消提示。利用Ajax.Responders對象就可以實(shí)現(xiàn)這樣的功能,如例2-15所示。

          例2-15  Ajax.Responders對象應(yīng)用示例

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

          <html>

              <head>

                  <title>chapter 3</title>

                  <script type="text/javascript" language="javascript"

                   src="prototype.js" ></script>

                  <script type="text/javascript" language="javascript">

                  function test() {

                      var myAjax = new Ajax.Request(

                          'data.html',

                          {

                              method: 'get',

                              onComplete: showResponse

                          }

                      );

                  }

                  function showResponse(response) {

                      $('divResult').innerHTML = response.responseText;

                  }      

                  var handle = {

                      onCreate: function() {

                          Element.show('loading'); // 當(dāng)創(chuàng)建Ajax請求時(shí),顯示loading

                      },

                      onComplete: function() {

                          // 當(dāng)請求成功返回時(shí),如果當(dāng)前沒有其他正在運(yùn)行中的Ajax請求,隱藏loading

                          if (Ajax.activeRequestCount == 0) {

                              Element.hide('loading');

                          }

                      }

                  };

                  // 將handle注冊到全局的Ajax.Responders對象中,使其生效

                  Ajax.Responders.register(handle);

                  </script>

              </head>

              <body>

              <input type="button" value="click" onclick="test()" />

              <div id="divResult" ></div>

              <div id='loading' style="display:none">

                  <img src="loading.gif">Loading...

              </div>

              </body>

          </html>

          例2-15中定義了一個(gè)handle對象,其中包含onCreate和onComplete函數(shù)。頁面中發(fā)出任何一個(gè)Ajax請求時(shí)都會(huì)調(diào)用onCreate方法,而請求完成時(shí)都會(huì)調(diào)用onComplete方法。例2-15的運(yùn)行結(jié)果如圖2-5所示。

          posted @ 2007-12-30 18:03 feingto 閱讀(568) | 評論 (0)編輯 收藏

          對xml進(jìn)行增、刪、改的很好例子

          rule.hta
          ================

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
          <HTML>
          <HEAD>
          <TITLE>XML Editer</TITLE>
          <HTA:APPLICATION ID="oHTA"
          APPLICATIONNAME="myApp"
          BORDER="thick"
          BORDERSTYLE="normal"
          CAPTION="yes"
          ContextMenu="yes"
          ICON=""
          MAXIMIZEBUTTON="yes"
          MINIMIZEBUTTON="yes"
          scroll="no"
          selection="no"
          SHOWINTASKBAR="yes"
          SINGLEINSTANCE="yes"
          SYSMENU="yes"
          VERSION="1.0"
          WINDOWSTATE="normal"
          >

          <style type="text/css">
          </style>
          </HEAD>

          <script language="javascript">

          // load the xml file
          var xmlDoc = new ActiveXObject("Msxml2.DOMDocument");
          xmlDoc.async = false;
          xmlDoc.resolveExternals = false;
          xmlDoc.load("rule.xml");

          // load the xsl file
          var xslDoc = new ActiveXObject("Msxml2.FreeThreadedDOMDocument");
          xslDoc.async = false;
          xslDoc.resolveExternals = false;
          xslDoc.load("rule.xsl");

          // create the xslt object
          var xslt = new ActiveXObject("Msxml2.XSLTemplate");
          xslt.stylesheet = xslDoc;
          var xslProc = xslt.createProcessor();
          xslProc.input = xmlDoc;

          var checked_count = 0;
          var cur_page = 1;
          var total_page = 1;

          function OutputDocument(number){
          xslProc.addParameter("ename", number);
          xslProc.addParameter("startno", (cur_page - 1)*10);
          xslProc.addParameter("endno", cur_page*10);
          xslProc.transform();

          return xslProc.output;
          }

          function delete_node(node){
          if( node.hasChildNodes() ) { 
          var kids = node.childNodes; 
          for(var i=0;i<kids.length;i++) { 
          delete_node(kids);
          }
          }
          node.parentNode.removeChild(node);
          }

          function delete_rule(id){
          var node = xmlDoc.selectSingleNode("/rules/rule[event/id="+id+"]");
          delete_node(node);
          }

          function modify_node(node){
          node.selectSingleNode("event/id").text = modify_id.value;
          node.selectSingleNode("event/name").text = modify_name.value;
          if( modify_state.checked ) {
          node.selectSingleNode("enable").text = "true";
          } else {
          node.selectSingleNode("enable").text = "false";
          }
          }

          function modify_rule(id){
          var node = xmlDoc.selectSingleNode("/rules/rule[event/id="+id+"]");
          modify_node(node);
          }

          function add_rule(){
          var id = xmlDoc.createElement("id");
          id.appendChild(xmlDoc.createTextNode(add_id.value));
          var name = xmlDoc.createElement("name");
          name.appendChild(xmlDoc.createTextNode(add_name.value));

          var event = xmlDoc.createElement("event");
          event.appendChild(id);
          event.appendChild(name);

          var enable = xmlDoc.createElement("enable");
          if( add_state.checked ) {
          enable.appendChild(xmlDoc.createTextNode("true"));
          } else {
          enable.appendChild(xmlDoc.createTextNode("false"));
          }

          var rule = xmlDoc.createElement("rule");
          rule.appendChild(event);
          rule.appendChild(enable);

          var parent = xmlDoc.selectSingleNode("/rules");
          if( parent.hasChildNodes() ) {
          parent.insertBefore(rule, parent.firstChild);
          } else {
          parent.appendChild(rule);
          }
          }

          function gotoPage(pageno){
          if( pageno < 1 ) {
          cur_page = 1;
          } else if( pageno >= total_page ) {
          cur_page = total_page;
          } else {
          cur_page = pageno;
          }
          Transform();
          }

          function saveXML(){
          xmlDoc.save("rule.xml");
          }

          function protectsubmit(val){
          if( val == 1 ) { //add
          if( add_id.value < 10000 || add_name.value == "" ) {
          window.alert("事件號必須是5位整數(shù)且事件名不能為空");
          } else if( xmlDoc.selectSingleNode("/rules/rule/event/id[. = " + add_id.value + "]") ) {
          window.alert("事件號" + add_id.value + "已經(jīng)存在");
          } else {
          add_rule();
          saveXML();
          Transform();
          }
          } else if( val == 2 ) { //modify
          var id = viewTable.rows[getFirstCheckedLine()].cells[2].innerText;
          if( modify_id.value < 10000 || modify_name.value == "" ) {
          window.alert("事件號必須是5位整數(shù)且事件名不能為空");
          } else if( id != modify_id.value && xmlDoc.selectSingleNode("/rules/rule/event/id[. = " + modify_id.value + "]") ) {
          window.alert("事件號" + modify_id.value + "已經(jīng)存在");
          } else {
          if( confirm("確認(rèn)修改?") ) {
          modify_rule(id);
          saveXML();
          Transform();
          }
          }
          } else if( val == 3 ) { //delete
          if( !confirm("確認(rèn)刪除?") ) {
          return;
          }
          for( var i = 1; i < viewTable.rows.length; i++ ) {
          var id = viewTable.rows.cells[2].innerText;
          if( eval("viewchk_" + id + ".checked") == true ) {
          delete_rule(id)
          }
          }
          saveXML();
          Transform();
          } else if( val == 4 ) { //select all
          checked_count = viewTable.rows.length - 1;
          for( var i = 1; i < viewTable.rows.length; i++ ) {
          var id = viewTable.rows.cells[2].innerText;
          eval("viewchk_" + id + ".checked = true");
          }
          changeState();
          } else if( val == 5 ) { //cancel all
          checked_count = 0;
          for( var i = 1; i < viewTable.rows.length; i++ ) {
          var id = viewTable.rows.cells[2].innerText;
          eval("viewchk_" + id + ".checked = false");
          }
          changeState();
          }
          }

          function getFirstCheckedLine(){
          for( var i = 1; i < viewTable.rows.length; i++ ) {
          var id = viewTable.rows.cells[2].innerText;
          if( eval("viewchk_" + id + ".checked") == true ) {
          return i;
          }
          }
          return 0;
          }

          function checkOVItem(val){
          if( eval("viewchk_" + val+".checked") == true ) {
          checked_count++;
          } else {
          checked_count--;
          }
          changeState();
          }

          function changeState(){
          if( checked_count ) {
          delete_btn.disabled = false;
          cancel_all_btn.disabled = false;
          } else {
          delete_btn.disabled = true;
          cancel_all_btn.disabled = true;
          }
          if( (checked_count + 1) == viewTable.rows.length ) {
          select_all_btn.disabled = true;
          } else {
          select_all_btn.disabled = false;
          }

          if( checked_count == 1 ) {
          modify_btn.disabled = false;
          modify_id.disabled = false;
          modify_name.disabled = false;
          modify_state.disabled = false;
          var id = getFirstCheckedLine();
          modify_id.value = viewTable.rows(id).cells(2).innerText;
          modify_name.value = viewTable.rows(id).cells(3).innerText;
          if( viewTable.rows(id).cells(1).innerText == "有效" ) {
          modify_state.checked = true;
          } else {
          modify_state.checked = false;
          }
          } else {
          modify_btn.disabled = true;
          modify_id.disabled = true;
          modify_name.disabled = true;
          modify_state.disabled = true;
          modify_id.value="請選擇一條規(guī)則";
          modify_name.value="請選擇一條規(guī)則";
          }
          }

          function showPageInfo(){
          if( total_item.value == 0 ) {
          total_page = 1;
          } else {
          total_page = Math.floor((9 + parseInt(total_item.value)) / 10);
          }
          var txt = " 共"+total_item.value+"條記錄";
          var prev_page = cur_page - 1;
          var next_page = parseInt(cur_page) + 1;
          if( cur_page > 1 ) {
          txt += " <input type='button' value='<' onClick='gotoPage(" + prev_page + ")'/>"
          } else {
          txt += " <input type='button' value='<' onClick='gotoPage(" + prev_page + ")' disabled/>"
          }
          if( cur_page < total_page ) {
          txt += " <input type='button' value='>' onClick='gotoPage(" + next_page + ")'/>"
          } else {
          txt += " <input type='button' value='>' onClick='gotoPage(" + next_page + ")' disabled/>"
          }

          txt += " 第<input type='text' id='page_number' size='4' maxlength='4' value='" + cur_page + "' onBlur='gotoPage(this.value)'/>頁 共" + total_page + "頁";
          page_info.innerHTML = txt;
          // window.alert(txt);
          }

          function Transform(){
          var txt = document.getElementById("ename").value;
          var str = OutputDocument(txt);
          rule_list.innerHTML = str;
          checked_count = 0;
          showPageInfo();
          changeState();
          // window.alert(str);
          }
          </script>

          <BODY onLoad="Transform()">

          <table width="550" border="1" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
          <tr>
          <td>
          <table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
          <TR height=5><td colspan=10 style="font-size:0px;"></td></TR>
          <TR height=25>
          <td colspan=3 align=center>事件名包含:</td>
          <td colspan=3 align=center><input type="text" value="" id="ename" size="35" maxlength="16"/></td>
          <td colspan=4><input type="button" value="搜索" onClick="Transform()"/></td>
          </TR>
          <TR height=1><td colspan=10 bgcolor=#2b7297></td></TR>
          <TR height=30>
          <td width=45 align=center><b>添加</b></td>
          <td width=5 align=center><font color=gray>|</font></td>
          <td width=50 align=center>事件號</td>
          <td width=55 align=center><input type="text" name="add_id" value="" size="5" maxlength="5" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"></td>
          <td width=55 align=center>事件名</td>
          <td width=* align=center><input type="text" name="add_name" maxlength="48" value=""></td>
          <td width=70 align=center>是否使用</td>
          <td width=30 align=center>
          <input type='checkbox' name='add_state' checked>
          </td> 
          <td width=5 align=center><font color=gray>|</font></td>
          <td width=70 align=center><input type="button" name="add_btn" value="確定" onClick="protectsubmit(1)"></td>
          </TR>
          <TR height=1><td colspan=10 bgcolor=#2b7297></td></TR>
          <TR height=30>
          <td width=45 align=center><b>修改</b></td>
          <td width=5 align=center><font color=gray>|</font></td>
          <td width=50 align=center>事件號</td>
          <td width=55 align=center>
          <input type="text" name="modify_id" value="<請選擇一條規(guī)則>" size="5" maxlength="5" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" disabled></td>
          <td width=55 align=center>事件名</td>
          <td width=* align=center>
          <input type="text" name="modify_name" maxlength="48" value="<請選擇一條規(guī)則>" disabled></td>
          <td width=70 align=center>是否使用</td>
          <td width=30 align=center>
          <input type='checkbox' name='modify_state' disabled>
          </td> 
          <td width=5 align=center><font color=gray>|</font></td>
          <td width=70 align=center><input type="button" name="modify_btn" value="確定" onClick="protectsubmit(2)"></td>
          </TR>
          <TR height=1><td colspan=10 bgcolor=#2b7297></td></TR>
          <TR height=30>
          <td colspan=5 align=left class=tablefont></td>
          <td align=right><input type="button" name="select_all_btn" value="全部選擇" onClick="protectsubmit(4)"></td>
          <td colspan=2 align=right><input type="button" name="cancel_all_btn" value="全部不選" onClick="protectsubmit(5)" disabled></td>
          <td align=center></td>
          <td align=center><input type="button" name="delete_btn" value="刪除" onClick="protectsubmit(3)" disabled></td>
          </TR>
          <TR height=30><td colspan=4>規(guī)則列表</td><TD colspan=6 align=right><div id="page_info" name="page_info"/></TR>
          <TR>
          <TD colspan=10><div id="rule_list" name="rule_list"/></TD>
          </TR>
          <TR height=5><td colspan=10></td></TR>
          </table>
          </td>
          </tr>
          <tr>
          </tr>
          </table>

          </BODY>
          </HTML>


          rule.xml
          ============
          <?xml version="1.0" encoding="GB2312"?>
          <?xml:stylesheet type="text/xsl" href="rule.xsl"?>
          <rules>
          <rule>
          <event>
          <id>10001</id>
          <name>TFTP下載文件</name>
          </event>
          <enable>false</enable>
          </rule>
          <rule>
          <event>
          <id>10002</id>
          <name>TFTP上傳文件</name>
          </event>
          <enable>false</enable>
          </rule>
          <rule>
          <event>
          <id>10003</id>
          <name>telnet登錄成功</name>
          </event>
          <enable>false</enable>
          </rule>

          </rules>

          rule.xsl
          =============
          <?xml version="1.0" encoding="GB2312"?>
          <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
          <xsl:strip-space elements="*"/>
          <xsl:output method= "html"/>
          <xsl:param name="ename">undefined</xsl:param>
          <xsl:param name="startno">undefined</xsl:param>
          <xsl:param name="endno">undefined</xsl:param>

          <xsl:template match="/">
          <html>
          <body>
          <xsl:apply-templates select="rules"/>
          </body>
          </html>
          </xsl:template>

          <xsl:template match="rules">
          <input type="hidden" name="total_item">
          <xsl:attribute name="value"><xsl:value-of select="count(rule[contains(event/name, $ename)])"/></xsl:attribute>
          </input>
          <TABLE id="viewTable" name="viewTable" width="100%" border="1" bordercolor="#85979f" cellSpacing="0" cellPadding="0" style="border-collapse:collapse;">
          <tr height="25">
          <TD width="10%" align="center">選擇</TD>
          <TD width="10%" align="center">狀態(tài)</TD>
          <TD width="10%" align="center">事件號</TD>
          <TD width="*" align="center">事件名</TD>
          </tr>

          <xsl:for-each select='rule[contains(event/name, $ename)]'>
          <xsl:sort select="event/id"/>
          <xsl:if test="position()> $startno and position()<= $endno">
          <tr>
          <td align="center">
          <input type='checkbox'>
          <xsl:attribute name="name">viewchk_<xsl:value-of select="event/id"/></xsl:attribute>
          <xsl:attribute name="value"><xsl:value-of select="event/id"/></xsl:attribute>
          <xsl:attribute name="onClick">checkOVItem(<xsl:value-of select="event/id"/>)</xsl:attribute>
          </input>
          </td>
          <xsl:choose>
          <xsl:when test="enable[. = 'true']">
          <td align="center">有效</td>
          </xsl:when>
          <xsl:otherwise>
          <td align="center">禁用</td>
          </xsl:otherwise>
          </xsl:choose>
          <td align="center"><xsl:value-of select="event/id"/></td>
          <td><xsl:value-of select="event/name"/></td>
          </tr>
          </xsl:if>
          </xsl:for-each>
          </TABLE>
          </xsl:template>

          </xsl:stylesheet>

          posted @ 2007-12-29 15:44 feingto 閱讀(362) | 評論 (0)編輯 收藏

          prototype.js 1.4版開發(fā)者手冊(強(qiáng)烈推薦)

               摘要: .reference table{border:1px dashed darkblue;} .reference th{border:1px dashed darkblue;color:white;background-color:darkblue;} .reference td{border:1px dashed darkblue;corlor:black;background-color:w...  閱讀全文

          posted @ 2007-12-29 14:59 feingto 閱讀(340) | 評論 (0)編輯 收藏

          showModalDialog/showModelessDialog實(shí)例,父窗口向子窗口傳遞值,子窗口設(shè)置父窗口的值,子窗口關(guān)閉的時(shí)候返回值到父窗口.關(guān)閉刷新父窗口

          下面是showModalDialog/showModelessDialog使用例子,父窗口向子窗口傳遞值,子窗口設(shè)置父窗口的值,子窗口關(guān)閉的時(shí)候返回值到父窗口.關(guān)閉刷新父窗口,希望對象我這樣的WEB開發(fā)的菜鳥有所幫助.

          (一)showModalDialog使用例子,父窗口向子窗口傳遞值,子窗口設(shè)置父窗口的值,子窗口關(guān)閉的時(shí)候返回值到父窗口.


          farther.html
          ---------------------------
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
          <HTML>
          <HEAD>
          <TITLE> New Document </TITLE>
          <META NAME="Generator" CONTENT="EditPlus">
          <META NAME="Author" CONTENT="">
          <META NAME="Keywords" CONTENT="">
          <META NAME="Description" CONTENT="">
          <script language="javascript">
          <!--
          function openChild(){

          var k = window.showModalDialog("child.html",window,"dialogWidth:335px;status:no;dialogHeight:300px");
          if(k != null)
          document.getElementById("txt11").value = k;
          }
          //-->
          </script>
          </HEAD>

          <BODY>
          <br>傳遞到父窗口的值:<input id="txt9" type="text" value="3333333333333"><br>
          返回的值:<input id="txt11" type="text"><br>
          子窗口設(shè)置的值:<input id="txt10" type="text"><br>


          <input type ="button" value="openChild" onclick="openChild()">
          </BODY>
          </HTML>
          ---------------------------------------------------------------
          child.html
          --------
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
          <HTML>
          <HEAD>
          <TITLE> New Document </TITLE>
          <META NAME="Generator" CONTENT="EditPlus">
          <META NAME="Author" CONTENT="">
          <META NAME="Keywords" CONTENT="">
          <META NAME="Description" CONTENT="">
          <meta http-equiv="Expires" CONTENT="0">
          <meta http-equiv="Cache-Control" CONTENT="no-cache">
          <meta http-equiv="Pragma" CONTENT="no-cache">

          </HEAD>

          <BODY>
          <br>父窗口傳遞來的值:<input id="txt0" type="text"><br>
          輸入要設(shè)置父窗口的值:<input id="txt1" type="text"><input type ="button" value="設(shè)置父窗口的值" onclick="setFather()"><br>
          輸入返回的值:<input id="txt2" type="text"><input type ="button" value="關(guān)閉切返回值" onclick="retrunValue()">
          <input type ="button" value="關(guān)閉刷新父窗口" onclick="">

          </BODY>
          </HTML>

          <script language=javascript>
          <!--
          var k=window.dialogArguments;
          //獲得父窗口傳遞來的值
          if(k!=null)
           {
           document.getElementById("txt0").value = k.document.getElementById("txt9").value;
           }
           //設(shè)置父窗口的值
          function setFather()
          {
           k.document.getElementById("txt10").value = document.getElementById("txt1").value
          }
          //設(shè)置返回到父窗口的值
          function retrunValue()
          {
          var s = document.getElementById("txt2").value;
          window.returnValue=s;
          window.close();
          }
          //-->
          </script>

          ----------------------------
          說明:
          由于showModalDialog緩存嚴(yán)重,下面是在子窗口取消客戶端緩存的設(shè)置.也可以在服務(wù)器端取消緩存,參考:
          http://adandelion.cnblogs.com/articles/252137.html
          <meta http-equiv="Expires" CONTENT="0">
          <meta http-equiv="Cache-Control" CONTENT="no-cache">
          <meta http-equiv="Pragma" CONTENT="no-cache">
          ------------------------------------------------------------------------------------------------------------------------
          (二)下面是關(guān)閉刷新父窗口的例

          farther.html
          ---------------------------
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
          <HTML>
          <HEAD>
          <TITLE> New Document </TITLE>
          <META NAME="Generator" CONTENT="EditPlus">
          <META NAME="Author" CONTENT="">
          <META NAME="Keywords" CONTENT="">
          <META NAME="Description" CONTENT="">
          <script language="javascript">
          <!--
          function openChild()
          {

           var k = window.showModalDialog("child.html",window,"dialogWidth:335px;status:no;dialogHeight:300px");
           if(k == 1)//判斷是否刷新
           {
            alert('刷新');
            window.location.reload();
           }
          }
          //-->
          </script>
          </HEAD>

          <BODY>
          <br>傳遞到父窗口的值:<input id="txt9" type="text" value="3333333333333"><br>
          <input type ="button" value="openChild" onclick="openChild()">
          </BODY>
          </HTML>
          ----------------------------------------------------
          child.html
          --------
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
          <HTML>
          <HEAD>
          <TITLE> New Document </TITLE>
          <META NAME="Generator" CONTENT="EditPlus">
          <META NAME="Author" CONTENT="">
          <META NAME="Keywords" CONTENT="">
          <META NAME="Description" CONTENT="">
          <meta http-equiv="Expires" CONTENT="0">
          <meta http-equiv="Cache-Control" CONTENT="no-cache">
          <meta http-equiv="Pragma" CONTENT="no-cache">

          </HEAD>

          <BODY>
          <br>父窗口傳遞來的值:<input id="txt0" type="text"><br>

          <input type ="button" value="關(guān)閉刷新父窗口" onclick="winClose(1)">
          <input type ="button" value="關(guān)閉不刷新父窗口" onclick="winClose(0)">

          </BODY>
          </HTML>

          <script language=javascript>
          <!--
          var k=window.dialogArguments;
          //獲得父窗口傳遞來的值
          if(k!=null)
           {
           document.getElementById("txt0").value = k.document.getElementById("txt9").value;
           }

          //關(guān)閉窗口返回是否刷新的參數(shù).
          function winClose(isRefrash)
          {

          window.returnValue=isRefrash;
          window.close();
          }
          //-->
          </script>

          --------------------------
          說明
          1.下面是取消客戶端緩存的:
          <meta http-equiv="Expires" CONTENT="0">
          <meta http-equiv="Cache-Control" CONTENT="no-cache">
          <meta http-equiv="Pragma" CONTENT="no-cache">
          也可以在服務(wù)器端取消緩存,參考:
          http://adandelion.cnblogs.com/articles/252137.html

          2.向父窗口傳遞闡述在ASP.NET中也可以是用aaa.aspx?id=1的方式傳遞.

          3.不刷新父窗口的話在父窗口中直接這樣一來設(shè)置可以.
          <script>
          window.showModalDialog("child.html",window,"dialogWidth:335px;status:no;dialogHeight:300px");
          </script>
          4.在子窗口中若要提交頁面的話要加入:,這樣就不會(huì)打開新窗口了.
          <head>
          <base target="_self">
          </HEAD>

          本文參考了:http://dev.csdn.net/develop/article/15/15113.shtm ,里面有showModalDialog/showModelessDialog的詳細(xì)使用說明

          posted @ 2007-12-29 14:33 feingto 閱讀(1400) | 評論 (0)編輯 收藏

          制作Javascript彈出窗口技巧九則

                  經(jīng)常上網(wǎng)的朋友可能會(huì)到過這樣一些網(wǎng)站,一進(jìn)入首頁立刻會(huì)彈出一個(gè)窗口,或者按一個(gè)連接或按鈕彈出,通常在這個(gè)窗口里會(huì)顯示一些注意事項(xiàng)、版權(quán)信 息、警告、歡迎光顧之類的話或者作者想要特別提示的信息。其實(shí)制作這樣的頁面效果非常的容易,只要往該頁面的HTML里加入幾段Javascript代碼 即可實(shí)現(xiàn)。下面俺就帶您剖析它的奧秘。

            1、最基本的彈出窗口代碼
            其實(shí)代碼非常簡單:
            < SCRIPT LANGUAGE="javascript">
            < !--
            window.open ("page.html")
            -->
            < /SCRIPT>
            因?yàn)檫@是一段Javascript代碼,所以它們應(yīng)該放在< SCRIPT LANGUAGE="javascript">之間。 < !-- 和 -->是對一些版本低的瀏覽器起作用,在這些老瀏覽器中不會(huì)將標(biāo)簽中的代碼作為文本顯示出來。要養(yǎng)成這個(gè)好習(xí)慣啊。
            window.open ("page.html") 用于控制彈出新的窗口page.html,如果page.html不與主窗口在同一路徑下,前面應(yīng)寫明路徑,絕對路徑(http://)和相對路徑(../)均可。
            用單引號和雙引號都可以,只是不要混用。
            這一段代碼可以加入HTML的任意位置,< head>和< /head>之間可以,< body>間< /body>也可以,越前越早執(zhí)行,尤其是頁面代碼長,又想使頁面早點(diǎn)彈出就盡量往前放。 也可以,越前越早執(zhí)行,尤其是頁面代碼長,又想使頁面早點(diǎn)彈出就盡量往前放。

            2、經(jīng)過設(shè)置后的彈出窗口
            下面再說一說彈出窗口的設(shè)置。只要再往上面的代碼中加一點(diǎn)東西就可以了。我們來定制這個(gè)彈出的窗口的外觀,尺寸大小,彈出的位置以適應(yīng)該頁面的具體情況。
            < SCRIPT LANGUAGE="javascript">
            < !--
            window.open ("page.html", "newwindow", "height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no")
            //寫成一行
            -->
            < /SCRIPT>
            參數(shù)解釋:
            < SCRIPT LANGUAGE="javascript"> js腳本開始;
            window.open 彈出新窗口的命令;
            "page.html" 彈出窗口的文件名;
            "newwindow" 彈出窗口的名字(不是文件名),非必須,可用空"代替;
            height=100 窗口高度;
            width=400 窗口寬度;
            top=0 窗口距離屏幕上方的象素值;
            left=0 窗口距離屏幕左側(cè)的象素值;
            toolbar=no 是否顯示工具欄,yes為顯示;
            menubar,scrollbars 表示菜單欄和滾動(dòng)欄。
            resizable=no 是否允許改變窗口大小,yes為允許;
            location=no 是否顯示地址欄,yes為允許;
            status=no 是否顯示狀態(tài)欄內(nèi)的信息(通常是文件已經(jīng)打開),yes為允許;
            < /SCRIPT> js腳本結(jié)束

            3、用函數(shù)控制彈出窗口
            下面是一個(gè)完整的代碼:
            < html>
            < head>
            < script LANGUAGE="JavaScript">
            < !--
            function openwin() {
            window.open ("page.html", "newwindow", "height=100, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
            //寫成一行
            }
            //-->
            < /script>
            < /head>
            < body onload="openwin()">
            ...任意的頁面內(nèi)容...
            < /body>
            < /html>
            這里定義了一個(gè)函數(shù)openwin(),函數(shù)內(nèi)容就是打開一個(gè)窗口。在調(diào)用它之前沒有任何用途。
            怎么調(diào)用呢?
            方法一:< body onload="openwin()"> 瀏覽器讀頁面時(shí)彈出窗口;
            方法二:< body onunload="openwin()"> 瀏覽器離開頁面時(shí)彈出窗口;
            方法三:用一個(gè)連接調(diào)用:< a href="#" onclick="openwin()">打開一個(gè)窗口< /a>
            注意:使用的"#"是虛連接。
            方法四:用一個(gè)按鈕調(diào)用:< input type="button" onclick="openwin()" value="打開窗口">

            4、同時(shí)彈出2個(gè)窗口
            對源代碼稍微改動(dòng)一下:
            < script LANGUAGE="JavaScript">
            < !--
            function openwin() {
            window.open ("page.html", "newwindow", "height=100, width=100, top=0, left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
            //寫成一行
            window.open ("page2.html", "newwindow2", "height=100, width=100, top=100, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
            //寫成一行
            }
            //-->
            < /script>
            為避免彈出的2個(gè)窗口覆蓋,用top和left控制一下彈出的位置不要相互覆蓋即可。最后用上面說過的四種方法調(diào)用即可。
            注意:2個(gè)窗口的name(newwindows和newwindow2)不要相同,或者干脆全部為空。OK?

            5、主窗口打開文件1.htm,同時(shí)彈出小窗口page.html
            如下代碼加入主窗口< head>區(qū):
            < script language="javascript">
            < !--
            function openwin() {
            window.open("page.html","","width=200,height=200")
            }
            //-->
            < /script>
            加入< body>區(qū):
            < a href="1.htm" onclick="openwin()">open< /a>即可

            6、彈出的窗口之定時(shí)關(guān)閉控制
            下面我們再對彈出的窗口進(jìn)行一些控制,效果就更好了。如果我們再將一小段代碼加入彈出的頁面(注意是加入到page.html的HTML中,可不是主頁面中,否則...),讓它10秒后自動(dòng)關(guān)閉是不是更酷了?
            首先,將如下代碼加入page.html文件的< head>區(qū):
            < script language="JavaScript">
            function closeit() {
            setTimeout("self.close()",10000) //毫秒
            }
            < /script>
            然后,再用< body onload="closeit()"> 這一句話代替page.html中原有的< BODY>這一句就可以了。(這一句話千萬不要忘記寫?。∵@一句的作用是調(diào)用關(guān)閉窗口的代碼,10秒鐘后就自行關(guān)閉該窗口。)

            7、在彈出窗口中加上一個(gè)關(guān)閉按鈕
            < FORM>
            < INPUT TYPE="BUTTON" VALUE="關(guān)閉" onClick="window.close()">
            < /FORM>
            呵呵,現(xiàn)在更加完美了!

            8、內(nèi)包含的彈出窗口---一個(gè)頁面兩個(gè)窗口
            上面的例子都包含兩個(gè)窗口,一個(gè)是主窗口,另一個(gè)是彈出的小窗口。通過下面的例子,你可以在一個(gè)頁面內(nèi)完成上面的效果。
            < html>
            < head>
            < SCRIPT LANGUAGE="JavaScript">
            function openwin()
            {
            OpenWindow=window.open("", "newwin", "height=250, width=250,toolbar=no,scrollbars="+scroll+",menubar=no");
            //寫成一行
            OpenWindow.document.write("< TITLE>例子< /TITLE>")
            OpenWindow.document.write("< BODY BGCOLOR=#ffffff>")
            OpenWindow.document.write("< h1>Hello!< /h1>")
            OpenWindow.document.write("New window opened!")
            OpenWindow.document.write("< /BODY>")
            OpenWindow.document.write("< /HTML>")
            OpenWindow.document.close()
            }
            < /SCRIPT>
            < /head>
            < body>
            < a href="#" onclick="openwin()">打開一個(gè)窗口< /a>
            < input type="button" onclick="openwin()" value="打開窗口">
            < /body>
            < /html>
            看看OpenWindow.document.write()里面的代碼不就是標(biāo)準(zhǔn)的HTML嗎?只要按照格式寫更多的行即可。千萬注意多一個(gè)標(biāo)簽或少一個(gè)標(biāo)簽就會(huì)出現(xiàn)錯(cuò)誤。記得用OpenWindow.document.close()結(jié)束啊。

            9、終極應(yīng)用--彈出的窗口之Cookie控制
            回想一下,上面的彈出窗口雖然酷,但是有一點(diǎn)小毛病(沉浸在喜悅之中,一定沒有發(fā)現(xiàn)吧?)比如你將上面的腳本放在一個(gè)需要頻繁經(jīng)過的頁面里(例如首頁),那么每次刷新這個(gè)頁面,窗口都會(huì)彈出一次,是不是非常煩人?:-(
            有解決的辦法嗎?當(dāng)然有!我們使用cookie來控制一下就可以了。首先,將如下代碼加入主頁面HTML的< HEAD>區(qū):
            < script>
            function openwin(){
            window.open("page.html","","width=200,height=200")
            }
            function get_cookie(Name) {
            var search = Name + "=" var returnvalue = "";
            if (document.cookie.length > 0) {
            offset = document.cookie.indexOf(search)
            if (offset != -1) {
            offset += search.length
            end = document.cookie.indexOf(";", offset);
            if (end == -1)
            end = document.cookie.length;
            returnvalue=unescape(document.cookie.substring(offset, end))
            }
            }
            return returnvalue;
            }
            function loadpopup(){
            if (get_cookie("popped")=="){
            openwin()
            document.cookie="popped=yes"
            }
            }
            < /script>
            然后,用< body onload="loadpopup()">(注意不是openwin而是loadpop啊?。┨鎿Q主頁面中原有的< BODY>這一句即可。你可以試著刷新一下這個(gè)頁面或重新進(jìn)入該頁面,窗口再也不會(huì)彈出了。真正的Pop-Only-Once!
            寫到這里彈出窗口的制作和應(yīng)用技巧基本上算是完成了,俺也累壞了,一口氣說了這么多,希望對正在制作網(wǎng)頁的朋友有所幫助俺就非常欣慰了。
            需要注意的是,JS腳本中的的大小寫最好前后保持一致。 

          posted @ 2007-12-29 14:24 feingto 閱讀(305) | 評論 (0)編輯 收藏

          jsp中的時(shí)間操作

          jsp中的時(shí)間操作

          經(jīng)常看見jsp版里有人問時(shí)間操作的問題,這些問題一般包括:取當(dāng)前時(shí)間,把一個(gè)指定的字符串時(shí)間轉(zhuǎn)化成時(shí)間類型,求兩個(gè)時(shí)間之間的天數(shù),求一段時(shí)間以前的時(shí)間,求一段時(shí)間以后的時(shí)間,在這里就把這些問題匯總一下。
          <%@  page  contentType="text/html;charset=gb2312"%>
          <%@ page import="java.text.*"%>
          <%@ page import="java.util.*"%>
          <%
          //字符串轉(zhuǎn)化成時(shí)間類型(字符串可以是任意類型,只要和SimpleDateFormat中的格式一致即可)
          java.text.SimpleDateFormat sdf = new java.text.SimpleDateFormat("M/dd/yyyy hh:mm:ss a",java.util.Locale.US);
          java.util.Date d = sdf.parse("5/13/2003 10:31:37 AM"); 
          out.println(d);
          out.println("<br>");
          SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
          String mDateTime1=formatter.format(d);
          out.println(mDateTime1);
          out.println("<br>");
          out.println(d.getTime());
          out.println("<br>");
          //當(dāng)前時(shí)間
          Calendar cal  = Calendar.getInstance();
          //  SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd  HH:mm:ss");
          SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd  HH:mm:ss G E D F w W a E F");
          String mDateTime=formatter.format(cal.getTime());
          out.println(mDateTime);
          out.println("<br>");
          //1年前日期
          java.util.Date myDate=new java.util.Date(); 
          long myTime=(myDate.getTime()/1000)-60*60*24*365;
          myDate.setTime(myTime*1000);
          String mDate=formatter.format(myDate);
          out.println(mDate);
          out.println("<br>");
          //明天日期
          myDate=new java.util.Date();
          myTime=(myDate.getTime()/1000)+60*60*24;
          myDate.setTime(myTime*1000);
          mDate=formatter.format(myDate);
          out.println(mDate);
          out.println("<br>");
          //兩個(gè)時(shí)間之間的天數(shù)
          SimpleDateFormat myFormatter = new SimpleDateFormat("yyyy-MM-dd");
          java.util.Date date= myFormatter.parse("2003-05-1");
          java.util.Date mydate= myFormatter.parse("1899-12-30");
          long  day=(date.getTime()-mydate.getTime())/(24*60*60*1000);
          out.println(day);
          out.println("<br>");
          //加半小時(shí)
          SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
          java.util.Date date1 = format.parse("2002-02-28 23:16:00");
          long Time=(date1.getTime()/1000)+60*30;
          date1.setTime(Time*1000);
          String mydate1=formatter.format(date1);
          out.println(mydate1);
          out.println("<br>");
          //年月周求日期
          SimpleDateFormat formatter2 = new SimpleDateFormat("yyyy-MM F E");
          java.util.Date date2= formatter2.parse("2003-05 5 星期五");
          SimpleDateFormat formatter3 = new SimpleDateFormat("yyyy-MM-dd");
          String mydate2=formatter3.format(date2);
          out.println(mydate2);
          out.println("<br>");
          //求是星期幾
          mydate= myFormatter.parse("2001-1-1");
          SimpleDateFormat formatter4 = new SimpleDateFormat("E");
          String mydate3=formatter4.format(mydate);
          out.println(mydate3);
          out.println("<br>");
          %>

          posted @ 2006-05-10 10:41 feingto 閱讀(675) | 評論 (1)編輯 收藏

          主站蜘蛛池模板: 象州县| 清徐县| 凤台县| 鲁山县| 慈溪市| 丹寨县| 横峰县| 龙陵县| 双城市| 桐梓县| 楚雄市| 垣曲县| 遂溪县| 呼伦贝尔市| 江源县| 揭东县| 全州县| 新绛县| 赤壁市| 绿春县| 凌云县| 和政县| 淳化县| 永仁县| 靖江市| 杭锦后旗| 永和县| 河南省| 津南区| 定西市| 云安县| 贵南县| 安阳市| 贵州省| 稷山县| 启东市| 西峡县| 江达县| 宁晋县| 安陆市| 双桥区|