最近一個項目主要涉及前端的交互優化，由于UED資源不足，所以一起做了一些前端的工作，
由于各瀏覽器的標準不一樣，如要兼容像ie6,7,8及firefox，樣式調整比較費事，現在css相關
的一些技巧分享一下，希望對大家有所幫助。
1、什么是css hack.
針對不同的瀏覽器去寫不同的CSS，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也
能得到我們想要的頁面效果，這種針對不同的瀏覽器寫不同的CSS code的過程，稱之為CSS hack。
通過下表中的hack code就可以實現不同版本ie瀏覽器間的兼容：
|
hack code |
ie6 |
ie7 |
firefox |
|
_ |
√ |
× |
× |
|
* |
√ |
√ |
× |
|
!import |
× |
√ |
√ |
‘_’ : 只有ie6能識別_，如ie7,8下”width:100px; “的樣式是OK，但ie6不夠寬時，可以在”width:100px”后面增加一段”_width:105px;” 那么ie7,8不會解析_width:105px，但ie6會執行。
‘*’ : ie6,7都能識別*，但firefox不能識別；
‘!import’ : ie 6不能識別，ie7和ie8都能識別；
2、css調試工具
(1). ie8的調試工具，ie8下按F12能呼出開發人員開發工具，如下圖：
選中圖中的箭頭鼠標按鈕，在瀏覽器中選中需要優化的HTML對象，HTML窗口就會
定位到選中HTML對象的代碼上(如上圖左)，則右窗口中則顯示當前對象的所有樣式，
通過對右窗口中的樣式調整，達到預期效果后，找到css文件的class，并作相同修
改。通過這個工具，修改樣式后所見即所得，確定樣式后再修改樣式文件。
(2). Firebug，firefox下可以通過Firebug工具，來定位HTML對象并調試該對象的樣式，如下圖：
]]>
網上搜了很多內容，都沒有找相應的解決方案。后來償試了一下，ie設置重置（工具-Internet選項-高級-重置），刪除所有個性化設置，完成后，重試后該問題不再出現，窗口能正常打開。回想，可能是裝完ie后，ie設置向導中做了某些不當的設置有關，但具體是哪項尚不得而知。
]]>
1、解決窗口底部靠近任務欄時，window.resizeBy 不能調整窗口高度問題；
1、增加寬度自適功能（注：只針對寬度不足，進行擴展的情況；無法調整窗口寬度比實際內容寬的情況）
Ext.util.ResizeWin = function() {
try {
var sh = document.documentElement.scrollHeight
|| document.body.scrollHeight;
var ch = document.documentElement.clientHeight
|| document.body.clientHeight;
var sw = document.documentElement.scrollWidth
|| document.body.scrollWidth
var cw = document.documentElement.clientWidth
|| document.body.scrollWidth;
var xHeight = 55;//任務欄高度(double).
var statHeigth = 30;//狀態欄高度
var maxHeight = window.screen.height - xHeight; //最大可顯示網頁高度
var wHeight = window.screenTop + sh + statHeigth;
if(wHeight > maxHeight){
//窗口位置過底時，向上移動若干象素，使窗口狀態欄在任務欄上面.
var newTop = (window.screenTop - xHeight) + (maxHeight - wHeight);
if(newTop < 0) newTop = 0;
window.moveTo(window.screenLeft, newTop);
}
//寬度調整時，實際內容不夠寬可以適用，過寬無法調整.
window.resizeBy((sw-cw),(sh-ch));
}catch (e){}
};
try {
var sh = document.documentElement.scrollHeight
|| document.body.scrollHeight;
var ch = document.documentElement.clientHeight
|| document.body.clientHeight;
var sw = document.documentElement.scrollWidth
|| document.body.scrollWidth
var cw = document.documentElement.clientWidth
|| document.body.scrollWidth;
var xHeight = 55;//任務欄高度(double).
var statHeigth = 30;//狀態欄高度
var maxHeight = window.screen.height - xHeight; //最大可顯示網頁高度
var wHeight = window.screenTop + sh + statHeigth;
if(wHeight > maxHeight){
//窗口位置過底時，向上移動若干象素，使窗口狀態欄在任務欄上面.
var newTop = (window.screenTop - xHeight) + (maxHeight - wHeight);
if(newTop < 0) newTop = 0;
window.moveTo(window.screenLeft, newTop);
}
//寬度調整時，實際內容不夠寬可以適用，過寬無法調整.
window.resizeBy((sw-cw),(sh-ch));
}catch (e){}
};
以下從網上收集的一些相關資料：
1、關于網頁窗口高、寬示意圖:
2、更多屬性：
網頁可見區域寬：document.body.clientWidth
網頁可見區域高：document.body.clientHeight
網頁可見區域寬：document.body.offsetWidth (包括邊線的寬)
網頁可見區域高：document.body.offsetHeight (包括邊線的寬)
網頁正文全文寬：document.body.scrollWidth
網頁正文全文高：document.body.scrollHeight
網頁被卷去的高：document.body.scrollTop
網頁被卷去的左：document.body.scrollLeft
網頁正文部分上：window.screenTop
網頁正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的寬：window.screen.width
屏幕可用工作區高度：window.screen.availHeight
屏幕可用工作區寬度：window.screen.availWidth
HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 獲取對象的滾動高度。
scrollLeft:設置或獲取位于對象左邊界和窗口中目前可見內容的最左端之間的距離
scrollTop:設置或獲取位于對象最頂端和窗口中可見內容的最頂端之間的距離
scrollWidth:獲取對象的滾動寬度
offsetHeight:獲取對象相對于版面或由父坐標 offsetParent 屬性指定的父坐標的高度
offsetLeft:獲取對象相對于版面或由 offsetParent 屬性指定的父坐標的計算左側位置
offsetTop:獲取對象相對于版面或由 offsetTop 屬性指定的父坐標的計算頂端位置
event.clientX 相對文檔的水平座標
event.clientY 相對文檔的垂直座標
event.offsetX 相對容器的水平坐標
event.offsetY 相對容器的垂直坐標
document.documentElement.scrollTop 垂直方向滾動的值
event.clientX+document.documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量
IE，FireFox 差異如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關)
網頁可見區域寬： document.body.clientWidth
網頁可見區域高： document.body.clientHeight
網頁可見區域寬： document.body.offsetWidth (包括邊線的寬)
網頁可見區域高： document.body.offsetHeight (包括邊線的高)
網頁正文全文寬： document.body.scrollWidth
網頁正文全文高： document.body.scrollHeight
網頁被卷去的高： document.body.scrollTop
網頁被卷去的左： document.body.scrollLeft
網頁正文部分上： window.screenTop
網頁正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的寬： window.screen.width
屏幕可用工作區高度： window.screen.availHeight
屏幕可用工作區寬度： window.screen.availWidt
]]>
在IE、FireFox、Netscape等不同的瀏覽器里，對于document.body 的 clientHeight、offsetHeight 和 scrollHeight 有著不同的含義，比較容易搞混，現整理一下相關的內容：
clientHeight：在上述瀏覽器中, clientHeight 的含義是一致的，定義為網頁內容可視區域的高度，即在瀏覽器中可以看到網頁內容的高度，通常是工具條以下到狀態欄以上的整個區域高度，與具體的網頁頁面內容無關。可以理解為，在屏幕上通過瀏覽器窗口所能看到網頁內容的高度。
offsetHeight：關于offsetHeight，ie和firefox等不同瀏覽中意義有所不同，需要加以區別。在ie中，offsetHeight 的取值為 clientHeight加上滾動條及邊框的高度；而firefox、netscape中，其取值為是實際網頁內容的高度，可能會小于clientHeight。
scrollHeight：scrollHeight都表示瀏覽器中網頁內容的高度，但稍有區別。在ie里為實際網頁內容的高度，可以小于 clientHeight；在firefox 中為網頁內容高度，最小值等于 clientHeight，即網頁實際內容比clientHeight時，取clientHeight。
clientWidth、offsetWidth 和 scrollWidth 的含義與上述內容雷同，不過是高度變成寬度而已。
若希望clientHeight、offsetHeight和scrollHeight三個屬性能取值一致的話，可以通過設置DOCTYPE，啟用不同的解析器，如：<!DOCTYPE HTML PUBLIC "DTD XHTML 1.0 Transitional">，設置DOCTYPE后，這三個屬性都表示實際網頁內容的高度。
通過以下HTML代碼，可以了解一下這三個屬性的含義：
<!DOCTYPE HTML PUBLIC "DTD XHTML 1.0 Transitional"> //設置DOCTYPE
<HTML>
<HEAD>
<TITLE> 測試。 </TITLE>
</HEAD>
<script type='text/javascript'>
window.onload = function(){
var ch = document.body.clientHeight;
var sh = document.body.offsetHeight;
var ssh = document.body.scrollHeight;
alert('clientHeight:'+ch+'; offsetHeight:'+sh+"; scrollHeight:"+ssh);
}
</script>
<BODY style='margin:0px'>
<div style='background-color:#ccc; height:400px; padding:0px'>
text
</div>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> 測試。 </TITLE>
</HEAD>
<script type='text/javascript'>
window.onload = function(){
var ch = document.body.clientHeight;
var sh = document.body.offsetHeight;
var ssh = document.body.scrollHeight;
alert('clientHeight:'+ch+'; offsetHeight:'+sh+"; scrollHeight:"+ssh);
}
</script>
<BODY style='margin:0px'>
<div style='background-color:#ccc; height:400px; padding:0px'>
text
</div>
</BODY>
</HTML>
根據頁面內容調整窗口高度的方法:
Ext.util.ResizeWin = function() {
try {
var sh = document.documentElement.scrollHeight
|| document.body.scrollHeight;
var ch = document.documentElement.clientHeight
|| document.body.clientHeight;
window.resizeBy(0,(sh-ch));
}catch (e){}
};
try {
var sh = document.documentElement.scrollHeight
|| document.body.scrollHeight;
var ch = document.documentElement.clientHeight
|| document.body.clientHeight;
window.resizeBy(0,(sh-ch));
}catch (e){}
};
]]>
2、通過gzip.exe 將js文件壓縮打包成gzjs文件。gzip.exe 下載地址：http://www.gzip.org
相關文件請下載附件：js 壓縮批處理 。
使用方法：
a. 雙擊運行 gzjs.bat ，提示輸入javascript文件名(帶路徑).
b. 輸入待壓縮的js文件，或者拖動js文件到command窗口(可直接在eclipse視圖中拖動js文件到cmd窗口)。
c. 回車后，在js文件所在目錄會生成一個相同文件名的gzjs文件。
批處理文件內容如下：
@echo offif not "%1" == "" ( set JSFILE=%1 goto ZIPING):INPUT_FILENAMEset /P JSFILE=請輸入待壓縮的JS文件名: if "%JSFILE%"=="" ( echo ERROR: JS文件名稱必須指定! goto INPUT_FILENAME):ZIPINGset MINJS_FILENAME=c-ziped.jsif not exist %JSFILE% ( echo ERROR: 文件:%JSFILE%不存在! goto INPUT_FILENAME)rem 壓縮Javascript文件.if exist %MINJS_FILENAME% del %MINJS_FILENAME%CScript /nologo pack.wsf %JSFILE% >> %MINJS_FILENAME%if not "%ERRORLEVEL%"=="0" ( echo ERROR: JS文件壓縮失敗：%JSFILE% goto END)rem 打包js文件為.gzjsgzip -9 %MINJS_FILENAME%for %%i in ("%JSFILE%") do ( set FILENAME=%%~ni set JS_FILEPATH=%%~di%%~pi rem echo %JS_FILEPATH%)rem 壓縮文件名及重命名的文件名.set GZIPED_FILE=%FILENAME%.gzjsset TMP_GZIPED_FILE="%MINJS_FILENAME%.gz"rem 重命名.if exist %GZIPED_FILE% del %GZIPED_FILE%call ren %TMP_GZIPED_FILE% %GZIPED_FILE%if not "%ERRORLEVEL%"=="0" ( echo ERROR: JS壓縮文件打包失敗：%TMP_GZIPED_FILE% goto END)rem 移動壓縮文件到源目錄.set TARGET_GZJS=%JS_FILEPATH%%GZIPED_FILE%call move /Y %GZIPED_FILE% %TARGET_GZJS%echo done. %TARGET_GZJS%:ENDpauseApache配置，以支持gzjs文件格式(http header的Content-Encoding=gzip):
<FilesMatch "\.gzjs$"> Header add Content-Encoding gzip</FilesMatch>]]>
完成聊天室之類的項目時，利用DWR推模式向所有客戶端推送數據，的確是很方便，只要客戶端的訪問頁面確定就可以了。但是，若需要對訪問同一頁面的兩個客戶端（特別是根據用戶身份作不同處理），加以區分，推送不同數據時，就沒這么簡單了。
有兩種方式可以解決這個問題：
a)、服務端不處理，只管往客戶端推送數據，由客戶端對收到的數據進行過濾，然后再顯示出來。但這種方式的缺點很明顯，數據包多且不安全。
b)、對每個客戶端進行單兒標識。DWR中以ScriptSession來代表一個客戶端連接，我們可以通過設置ScriptSession的屬性，來達到標識客戶端的作用。如將sessionid或用戶登錄名保存在相應的ScriptSession屬性中，向客戶端推送數據時，根據這個屬性加以過濾。相應的代碼片段如下：
/**
* 返回有效的ScriptSession.
* @param user
* @return
*/
@SuppressWarnings("unchecked")
private ScriptSession getCurrentSession(String user){
ScriptSession xSession = null;
Collection<ScriptSession> sessions = new HashSet<ScriptSession>();
sessions.addAll(sctx.getScriptSessionsByPage(PAGE_MAIN));
for (ScriptSession session : sessions) {
//查詢與消息接收者相符的客戶端頁面,并輸出消息內容
String xuser = (String)session.getAttribute(SESSION_ATTRNAME_USER);
if(xuser != null && xuser .equals(user)){
xSession = session;
}
}
return xSession;
}
/**
* 清除已有連接, 標識當前連接用戶(登錄或刷新頁面時，進行必要的清理).
* @param user
* @param session
*/
private void cleanDwrConnection(user,ScriptSession session){
String jid = StringUtils.parseBareAddress(user);
ScriptSession oldSession = getCurrentSession(jid);
if(oldSession != null && oldSession != session){
oldSession.invalidate();
oldSession = null;
}
session = WebContextFactory.get().getScriptSession();
session.setAttribute(SESSION_ATTRNAME_USER, jid);
}
* 返回有效的ScriptSession.
* @param user
* @return
*/
@SuppressWarnings("unchecked")
private ScriptSession getCurrentSession(String user){
ScriptSession xSession = null;
Collection<ScriptSession> sessions = new HashSet<ScriptSession>();
sessions.addAll(sctx.getScriptSessionsByPage(PAGE_MAIN));
for (ScriptSession session : sessions) {
//查詢與消息接收者相符的客戶端頁面,并輸出消息內容
String xuser = (String)session.getAttribute(SESSION_ATTRNAME_USER);
if(xuser != null && xuser .equals(user)){
xSession = session;
}
}
return xSession;
}
/**
* 清除已有連接, 標識當前連接用戶(登錄或刷新頁面時，進行必要的清理).
* @param user
* @param session
*/
private void cleanDwrConnection(user,ScriptSession session){
String jid = StringUtils.parseBareAddress(user);
ScriptSession oldSession = getCurrentSession(jid);
if(oldSession != null && oldSession != session){
oldSession.invalidate();
oldSession = null;
}
session = WebContextFactory.get().getScriptSession();
session.setAttribute(SESSION_ATTRNAME_USER, jid);
}
2、使用DWR推模式的實現中，刷新頁面引起長連接丟失問題
最近在做web版即時消息客戶端時，遇到這樣一個問題：為了減少無用的服務連接，只在登錄后才激活長連接（dwr.engine.setActiveReverseAjax(true)，注銷后取消長連接）。登錄客戶端后，用了一段時間后，無法收消息了（消息無法推送到客戶端）。后來調試后，發現ScriptSession實例沒有綁定物理連接信息(conduits:m:root為空)。測試后發現，當刷新頁面后，會產生一個新的ScriptSession實例，而這個ScriptSession的conduits:m:root為空，所以怎么都無法將數據推送到客戶端去了。
客戶端激活長連接后(dwr.engine.setActiveReverseAjax(true);)，對應的ScriptSession實例會綁定物理連接信息，而刷新頁面刷新而不重新激活長連接，新產生的ScriptSession是沒有綁定物理連接信息的，一旦綁定物理連接信息的ScriptSession被銷毀后，就產生了這個問題。
]]>
IE：有window.event對象
FF：沒有window.event對象。可以通過給函數的參數傳遞event對象。如onmousemove=doMouseMove(event)
IE：event.x和event.y。
FF：event.pageX和event.pageY。
通用：兩者都有event.clientX和event.clientY屬性。
IE：event.offsetX和event.offsetY。
FF：event.layerX和event.layerY。
通用：event.clientY+document.documentElement.scrollTop（加垂直滾動條）。
通用：event.clientX+document.documentElement.scrollLeft（加水平滾動條）。
示例：
<script>
function xyzb(xy){
xl = xy.clientX+document.documentElement.scrollLeft;
yr = xy.clientY+document.documentElement.scrollTop;
document.getElementById("xys").innerHTML=xl+","+yr;
}
</script>
<div id="xys" style="width:500px;height:500px;border:1px solid;" onmousemove="xyzb(event);"></div>
function xyzb(xy){
xl = xy.clientX+document.documentElement.scrollLeft;
yr = xy.clientY+document.documentElement.scrollTop;
document.getElementById("xys").innerHTML=xl+","+yr;
}
</script>
<div id="xys" style="width:500px;height:500px;border:1px solid;" onmousemove="xyzb(event);"></div>
IE：有。
FF：沒有。
通用：object.offsetLeft 和 object.offsetTop。
IE：document.body.offsetWidth和document.body.offsetHeight。注意：此時頁面一定要有body標簽。
FF：window.innerWidth和window.innerHegiht，以及document.documentElement.clientWidth和document.documentElement.clientHeight。
通用：document.body.clientWidth和document.body.clientHeight。
IE：element.attachEvent("onclick", func);。
FF：element.addEventListener("click", func, true)。
通用：element.onclick=func。雖然都可以使用onclick事件，但是onclick和上面兩種方法的效果是不一樣的，onclick只有執行一個過程，而attachEvent和addEventListener執行的是一個過程列表，也就是多個過程。例如：element.attachEvent("onclick", func1);element.attachEvent("onclick", func2)這樣func1和func2都會被執行。
IE：如果給標簽div1定義了一個屬性value，可以div1.value和div1["value"]取得該值。
FF：不能用div1.value和div1["value"]取。
通用：div1.getAttribute("value")。
IE：parentElement、parement.children，element.romoveNode(true)。
FF：parentNode、parentNode.childNodes，node.parentNode.removeChild(node)。
IE：VML。
FF：SVG。
IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
IE：不支持圓角。
FF：-moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz-border-radius-bottomright:4px;。
IE：border:2px outset;。
FF：-moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;。
]]>
現將dhtmlxTree 使用樣例記錄如下(包括目錄樹、上下文菜單)：
1、所需js文件
dhtmlxcommon.js
dhtmlxtree.js
dhtmlxtree_json.js
//菜單控件所需的js
dhtmlxprotobar.js
dhtmlxmenubar.js
dhtmlxmenubar.js
dhtmlxtree.js
dhtmlxtree_json.js
//菜單控件所需的js
dhtmlxprotobar.js
dhtmlxmenubar.js
dhtmlxmenubar.js
2、sample.html代碼：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script src="./dhtmlxcommon.js"></script>
<script src="./dhtmlxtree.js"></script>
<script language="JavaScript" src="./extend/dhtmlxtree_json.js"></script>
<script language="JavaScript" src="./dhtmlxprotobar.js"></script>
<script language="JavaScript" src="./dhtmlxmenubar.js"></script>
<script language="JavaScript" src="./dhtmlxmenubar_cp.js"></script>
<link rel="STYLESHEET" type="text/css" href="./dhtmlxtree.css">
<link rel="STYLESHEET" type="text/css" href="./context.css">
<link rel="STYLESHEET" type="text/css" href="./dhtmlxmenu.css">
</head>
<body>
<div id="treeBox" style="width:200;height:200"></div>
<script>
//init menu
aMenu=new dhtmlXContextMenuObject('120',0,"images/");
aMenu.menu.loadXML("./_context.xml");
aMenu.setContextMenuHandler(onMenuClick);
tree=new dhtmlXTreeObject('treeBox',"100%","100%",0);
tree.setImagePath("images/");
tree.enableCheckBoxes(true);
tree.enableDragAndDrop(true);
tree.enableContextMenu(aMenu); //link context menu to tree
tree.loadCSV("./data.txt");//for loading from file
function onMenuClick(id,s){ alert("Menu item "+id+" was clicked"+s); }
</script>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script src="./dhtmlxcommon.js"></script>
<script src="./dhtmlxtree.js"></script>
<script language="JavaScript" src="./extend/dhtmlxtree_json.js"></script>
<script language="JavaScript" src="./dhtmlxprotobar.js"></script>
<script language="JavaScript" src="./dhtmlxmenubar.js"></script>
<script language="JavaScript" src="./dhtmlxmenubar_cp.js"></script>
<link rel="STYLESHEET" type="text/css" href="./dhtmlxtree.css">
<link rel="STYLESHEET" type="text/css" href="./context.css">
<link rel="STYLESHEET" type="text/css" href="./dhtmlxmenu.css">
</head>
<body>
<div id="treeBox" style="width:200;height:200"></div>
<script>
//init menu
aMenu=new dhtmlXContextMenuObject('120',0,"images/");
aMenu.menu.loadXML("./_context.xml");
aMenu.setContextMenuHandler(onMenuClick);
tree=new dhtmlXTreeObject('treeBox',"100%","100%",0);
tree.setImagePath("images/");
tree.enableCheckBoxes(true);
tree.enableDragAndDrop(true);
tree.enableContextMenu(aMenu); //link context menu to tree
tree.loadCSV("./data.txt");//for loading from file
function onMenuClick(id,s){ alert("Menu item "+id+" was clicked"+s); }
</script>
</body>
</html>
3、數據文件data.txt
1,0,node 1
2,1,node 1.1
3,2,node 1.1.1
4,0,node 2
bd2f46a212ffae3b011305afd5eb0108,4,node 2.1
6,1,node 1.2
2,1,node 1.1
3,2,node 1.1.1
4,0,node 2
bd2f46a212ffae3b011305afd5eb0108,4,node 2.1
6,1,node 1.2
4、菜單文件_context.xml
<?xml version='1.0' ?>
<menu absolutePosition="auto" mode="popup" maxItems="8" globalCss="contextMenu" globalSecondCss="contextMenu" globalTextCss="contextMenuItem">
<MenuItem name="Red" src="./images/red.gif" id="edit_Red"/>
<MenuItem name="Green" src="./images/green.gif" id="edit_Green"/>
<MenuItem name="Blue" src="./images/blue.gif" id="edit_Blue"/>
<MenuItem name="Other
" src="" id="outher" width="120px" panelWidth="120">
<MenuItem name="Yellow" src="./images/yellow.gif" id="edit_Yellow"/>
<MenuItem name="White" src="./images/white.gif" id="edit_White"/>
</MenuItem>
</menu>
<menu absolutePosition="auto" mode="popup" maxItems="8" globalCss="contextMenu" globalSecondCss="contextMenu" globalTextCss="contextMenuItem">
<MenuItem name="Red" src="./images/red.gif" id="edit_Red"/>
<MenuItem name="Green" src="./images/green.gif" id="edit_Green"/>
<MenuItem name="Blue" src="./images/blue.gif" id="edit_Blue"/>
<MenuItem name="Other
" src="" id="outher" width="120px" panelWidth="120"><MenuItem name="Yellow" src="./images/yellow.gif" id="edit_Yellow"/>
<MenuItem name="White" src="./images/white.gif" id="edit_White"/>
</MenuItem>
</menu>
注：dhtmlxTree 標準版不支持菜單功能，所以需要對dhtmlxtree.js做些修改，在腳本的最后面加上如下方法：
dhtmlXTreeObject.prototype.enableContextMenu=function(menu)
{
if(menu) this.cMenu=menu
};
{
if(menu) this.cMenu=menu
};
]]>
在Internet Explorer中定義window.open 和 window.showModalDialog以打開一個網頁對話框的時候,在不同版本的Windows和不同版本的IE中,窗口的大小和樣式都是不同的。 在IE7中更是有了很大的不同,狀態欄,主要內容被默認保留(下詳),還加了一個只讀狀態的地址欄.窗口的最小尺寸被限定在了250*150：
如上圖所示：在ie7中，定義的高度僅僅是窗體內容高度，狀態欄及地址欄的高度都不算在內的；而ie6則包含了狀態欄及地址欄的高度。所以，我們需要依據不同的操作系統及ie版本，高度自適應的js代碼如下：
/**
* 模態窗口高度調整.
* 根據操作系統及ie不同版本,重新設置窗口高度,避免滾動條出現.
*/
function resetDialogHeight(){
if(window.dialogArguments == null){
return; //忽略非模態窗口
}
var ua = navigator.userAgent;
var height = document.body.offsetHeight;
if(ua.lastIndexOf("MSIE 6.0") != -1){
if(ua.lastIndexOf("Windows NT 5.1") != -1){
//alert("xp.ie6.0");
var height = document.body.offsetHeight;
window.dialogHeight=(height+102)+"px";
}
else if(ua.lastIndexOf("Windows NT 5.0") != -1){
//alert("w2k.ie6.0");
var height = document.body.offsetHeight;
window.dialogHeight=(height+49)+"px";
}
}
}
* 模態窗口高度調整.
* 根據操作系統及ie不同版本,重新設置窗口高度,避免滾動條出現.
*/
function resetDialogHeight(){
if(window.dialogArguments == null){
return; //忽略非模態窗口
}
var ua = navigator.userAgent;
var height = document.body.offsetHeight;
if(ua.lastIndexOf("MSIE 6.0") != -1){
if(ua.lastIndexOf("Windows NT 5.1") != -1){
//alert("xp.ie6.0");
var height = document.body.offsetHeight;
window.dialogHeight=(height+102)+"px";
}
else if(ua.lastIndexOf("Windows NT 5.0") != -1){
//alert("w2k.ie6.0");
var height = document.body.offsetHeight;
window.dialogHeight=(height+49)+"px";
}
}
}
模態窗口頁面加上如下代碼：
//窗口加載后，判斷系統及其ie版本調整高度
window.onload = resetDialogHeight;
window.onload = resetDialogHeight;
2、ie7中模態窗口提交時新開窗口問題:
IE 7.0對模態窗口<base target='_self'>屬性的放置位置更加嚴格。<base>標簽必須放置在<head>標簽對中，否則提交表單時總是會新開窗口。示例如下 ：
<html>
<head>
<title>標題</title>
<base target="_self"/>
.. .. ..
</head>
<body onload="pageClose();" scroll="no">
.. .. ..
</body>
</html>
<head>
<title>標題</title>
<base target="_self"/>
.. .. ..
</head>
<body onload="pageClose();" scroll="no">
.. .. ..
</body>
</html>
]]>
a.不同的網頁內容多少不一致，導致iframe的高度無法與實現內容或瀏覽器高度相匹配。
b.窗口縮放時，不能iframe不能進行自動調整。
針對這兩個問題，寫了一些js方法，使iframe自動適應內容或瀏覽器高度。
2、js代碼
在主框回頁面中包括如下js方法:
/**
* 內嵌頁面的高度設置
*/
function handleFrameLoad() {
var hDoc = getBodyHeight(document);
var tblmain = document.getElementById('tblMain');
var mFrame = window.mainFrame;
var hFrameDoc = getFrameHeight(mFrame);
var hTable = hDoc-80; //減去該頁面除iframe外其他控件所占的高度.
if(hFrameDoc > hTable) hTable = hFrameDoc;
tblmain.style.height = hTable;
mFrame.height = hTable;
if(window.mainFrame.moduleRight != null){
//表示該內嵌頁，包含內嵌的頁面，頁iframe的id固定為moduleRight。
initFrameHeight(mFrame,hTable);
}
}
/**
* 獲取當前頁面的高度
*/
function getBodyHeight(doc){
if(doc.all) return doc.body.offsetHeight;
else return doc.body.scrollHeight;
}
/**
* 獲取內嵌頁中的高度.
* 若另含子內嵌(moduleRight)頁時,應考慮該頁面的高度.
*/
function getFrameHeight(mFrame){
var h1 = mFrame.document.body.offsetHeight;
var h2 = mFrame.document.body.scrollHeight;
if(mFrame.moduleRight != null){
var h3 = mFrame.moduleRight.document.body.scrollHeight;
if(h3 > h2) h2 = h3;
}
return h2;
}
/**
* 設置子內嵌頁面的高度.
* 通過設置iframe所在table的高度來調整。
*/
function initFrameHeight(frame,hFrame){
var tbl = frame.document.getElementById('tblMainFrame');
tbl.style.height = hFrame;
}
* 內嵌頁面的高度設置
*/
function handleFrameLoad() {
var hDoc = getBodyHeight(document);
var tblmain = document.getElementById('tblMain');
var mFrame = window.mainFrame;
var hFrameDoc = getFrameHeight(mFrame);
var hTable = hDoc-80; //減去該頁面除iframe外其他控件所占的高度.
if(hFrameDoc > hTable) hTable = hFrameDoc;
tblmain.style.height = hTable;
mFrame.height = hTable;
if(window.mainFrame.moduleRight != null){
//表示該內嵌頁，包含內嵌的頁面，頁iframe的id固定為moduleRight。
initFrameHeight(mFrame,hTable);
}
}
/**
* 獲取當前頁面的高度
*/
function getBodyHeight(doc){
if(doc.all) return doc.body.offsetHeight;
else return doc.body.scrollHeight;
}
/**
* 獲取內嵌頁中的高度.
* 若另含子內嵌(moduleRight)頁時,應考慮該頁面的高度.
*/
function getFrameHeight(mFrame){
var h1 = mFrame.document.body.offsetHeight;
var h2 = mFrame.document.body.scrollHeight;
if(mFrame.moduleRight != null){
var h3 = mFrame.moduleRight.document.body.scrollHeight;
if(h3 > h2) h2 = h3;
}
return h2;
}
/**
* 設置子內嵌頁面的高度.
* 通過設置iframe所在table的高度來調整。
*/
function initFrameHeight(frame,hFrame){
var tbl = frame.document.getElementById('tblMainFrame');
tbl.style.height = hFrame;
}
3、其他設置
主頁面(main.jsp)，在加載完畢（onload）、窗口大小調整(onresize)，以及iframe的加載完畢時，需調用:handleFrameLoad，代碼如下:
<html>
<body onload="handleFrameLoad();" onResize="handleFrameLoad();">
<iframe src="" id="mainFrame" name="mainFrame" border=0 width=100% height=100% frameborder="0" marginwidth="0" hspace="0" scrolling="no" onload="handleFrameLoad();"/>
</body>
</html
<body onload="handleFrameLoad();" onResize="handleFrameLoad();">
<iframe src="" id="mainFrame" name="mainFrame" border=0 width=100% height=100% frameborder="0" marginwidth="0" hspace="0" scrolling="no" onload="handleFrameLoad();"/>
</body>
</html
其他內嵌頁如下(注：此處的iframe高度設為100%，其高度由父頁面通過設置table<tblMainFrame>的高度來進行調整)：
<html>
<body class="body" style="overflow:hidden;margin:0px;padding:0px">
<table width="100%" height="100%" id="tblMainFrame" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td id='content' height=100%>
<iframe src="about:blank" width="100%" height="100%" name="moduleRight" id="moduleRight" frameborder="0" hspace="0"/>
</td>
</tr>
</table>
</body>
</html
<body class="body" style="overflow:hidden;margin:0px;padding:0px">
<table width="100%" height="100%" id="tblMainFrame" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td id='content' height=100%>
<iframe src="about:blank" width="100%" height="100%" name="moduleRight" id="moduleRight" frameborder="0" hspace="0"/>
</td>
</tr>
</table>
</body>
</html
4、樣例下載: sample
]]>
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
<param-name>activeReverseAjaxEnabled</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<init-param>
<param-name>activeReverseAjaxEnabled</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
2、client端將 setActiveReverseAjax設為true
dwr.engine.setActiveReverseAjax(true);
使用Reverse AJAX，client端就不用指定call back function，當執行server端的method時，會自動調用client端javascript來執行。
3、Server端通過ScriptSession，找到對到的client端JS方法
//取得當前執行頁面
WebContext wctx = WebContextFactory.get();
String currentPage = wctx.getCurrentPage();
//取得目前執行中的ScriptSession
ScriptSession scriptSession = wctx.getScriptSession();
//或是取得某page開啟中的client ScriptSession
Collection sessions = wctx.getScriptSessionsByPage("/ajax/client.jsp");
//根據ScriptSession來執行client端的 DWRUtil
Util utilThis = new Util(wctx.getScriptSession());
//調用WRUtil，在客戶端生成相應的腳本，實現消息的輸出
utilAll.removeAllOptions("chatlog");
utilAll.addOptions("chatlog", messages, "text");
WebContext wctx = WebContextFactory.get();
String currentPage = wctx.getCurrentPage();
//取得目前執行中的ScriptSession
ScriptSession scriptSession = wctx.getScriptSession();
//或是取得某page開啟中的client ScriptSession
Collection sessions = wctx.getScriptSessionsByPage("/ajax/client.jsp");
//根據ScriptSession來執行client端的 DWRUtil
Util utilThis = new Util(wctx.getScriptSession());
//調用WRUtil，在客戶端生成相應的腳本，實現消息的輸出
utilAll.removeAllOptions("chatlog");
utilAll.addOptions("chatlog", messages, "text");
4、網上的范例
chat.jsp頁面，點擊發送按鈕，調用javascript的sendMessage()方法將消息發送出(注意這里沒有指定call back function。)。
function sendMessage() {
JavaChat.addMessage();
}
JavaChat.addMessage();
}
服務端JavaChat代碼，調用DWRUtil，在客戶端生成腳本，將消息輸出到頁面中。
//JavaChat.java
public void addMessage(String messsage){
Util utilAll = new Util(sessions);
utilAll.addScriptSessions(wctx.getScriptSessionsByPage("/chat.jsp"));
utilAll.removeAllOptions("chatlog");
utilAll.addOptions("chatlog", message, "text");
}
public void addMessage(String messsage){
Util utilAll = new Util(sessions);
utilAll.addScriptSessions(wctx.getScriptSessionsByPage("/chat.jsp"));
utilAll.removeAllOptions("chatlog");
utilAll.addOptions("chatlog", message, "text");
}
]]>
包括樹、菜單、表格、工具條等。。。
]]>
文章地址：http://www.ibm.com/developerworks/cn/java/j-jettydwr/
一些問題：
１、web.xml配配置，DWR使用2.0RC3以下版本時須全用選項：pollAndCometEnabled代替activeReverseAjaxEnabled，如下：
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<!-- 2.0 RC3以上版本使用.
<init-param>
<param-name>activeReverseAjaxEnabled</param-name>
<param-value>true</param-value>
</init-param>
-->
<init-param>
<param-name>pollAndCometEnabled</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>initApplicationScopeCreatorsAtStartup</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<!-- 2.0 RC3以上版本使用.
<init-param>
<param-name>activeReverseAjaxEnabled</param-name>
<param-value>true</param-value>
</init-param>
-->
<init-param>
<param-name>pollAndCometEnabled</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>initApplicationScopeCreatorsAtStartup</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
選項說明（http://getahead.org/dwr/server/servlet 可查詢更多參數的說明）：
1)、activeReverseAjaxEnabled
true 表示激活輪詢和 Comet 功能。2.0 RC3以前版本，參數名為：pollAndCometEnabled。
2)、initApplicationScopeCreatorsAtStartup 通知 DWR 在應用程序啟動時初始化
ReverseAjaxTracker。這將在對 bean 生成第一個請求時改寫延遲初始化（lazy initialization）的常規行為 —— 在本例中這是必須的，因為客戶機不會主動對 ReverseAjaxTracker 調用方法。]]>
http://www.javatang.com/archives/tag/dwr
]]>
a.配置web.xml文件，dwr定義時加入以下參數設置：
<init-param>
<param-name>allowGetForSafariButMakeForgeryEasier</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>crossDomainSessionSecurity</param-name>
<param-value>false</param-value>
</init-param>
<init-param>
<param-name>allowScriptTagRemoting</param-name>
<param-value>true</param-value>
</init-param>
<param-name>allowGetForSafariButMakeForgeryEasier</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>crossDomainSessionSecurity</param-name>
<param-value>false</param-value>
</init-param>
<init-param>
<param-name>allowScriptTagRemoting</param-name>
<param-value>true</param-value>
</init-param>
b.客戶端調用：
//客戶端調用時，須指定調用路徑，否則默認調用的是當前頁面所在服務端的/dwr，而不是實際的/dwr服務。
//故未設置Remote._path時，很可能提示你"dwr/call/plaincall/XXX.ZZZ.dwr"的信息。
//Remote 為dwr.xml中定義的java類對應的jascript名稱
Remote._path = 'http://otherdomain.com/webapp/dwr';
//或:dwr.engine._defaultPath = 'http://otherdomain.com/webapp/dwr';
Remote.someFunction();
//故未設置Remote._path時，很可能提示你"dwr/call/plaincall/XXX.ZZZ.dwr"的信息。
//Remote 為dwr.xml中定義的java類對應的jascript名稱
Remote._path = 'http://otherdomain.com/webapp/dwr';
//或:dwr.engine._defaultPath = 'http://otherdomain.com/webapp/dwr';
Remote.someFunction();
更詳細的說明可參見官網 Remoting Options 章節（http://getahead.org/dwr/browser/engine/options）。
2、DWR的Session支持
DWR通過 WebContext / WebContextFactory 來取得HttpServletRequest、HttpServletResponse、HttpSession、ServletContext、 ServletConfig等對象。（DWR2.0）實現可參見DWR內部腳本，engine.js文件"dwr.engine._getJSessionId"部份代碼。
更多詳細信息見官網API：http://getahead.org/dwr/server/javaapi。
所以SESSION根據jsessionid來確定的，jsessionid存放在cookie中，若客戶端禁止cookie的話，jsessionid每次都新生成，所以無法確保在服務端的SESSION唯一。跨域調用DWR時，瀏覽器默認禁止第三方cookie，所以會有正常使用SESSION功能。設置Internet選項，"隱私"，"高級"，開始對第三方cookie的支持，即可解決這個問題。
]]>
"^((-\\d+)|(0+))$" //非正整數（負整數 + 0）
"^-[0-9]*[1-9][0-9]*$" //負整數
"^-?\\d+$" //整數
"^\\d+(\\.\\d+)?$" //非負浮點數（正浮點數 + 0）
"^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$" //正浮點數
"^((-\\d+(\\.\\d+)?)|(0+(\\.0+)?))$" //非正浮點數（負浮點數 + 0）
"^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$" //負浮點數
"^(-?\\d+)(\\.\\d+)?$" //浮點數
"^[A-Za-z]+$" //由26個英文字母組成的字符串
"^[A-Z]+$" //由26個英文字母的大寫組成的字符串
"^[a-z]+$" //由26個英文字母的小寫組成的字符串
"^[A-Za-z0-9]+$" //由數字和26個英文字母組成的字符串
"^\\w+$" //由數字、26個英文字母或者下劃線組成的字符串
"^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$" //email地址
"^[a-zA-z]+://(\\w+(-\\w+)*)(\\.(\\w+(-\\w+)*))*(\\?\\S*)?$" //url
"^[A-Za-z0-9_]*$"
]]>
* 校驗是否全由數字組成
*/
function isDigit(s)
{
var patrn=/^[0-9]{1,20}$/;
if (!patrn.exec(s)) return false
return true
}
/**
* 校驗登錄名：只能輸入5-20個以字母開頭、可帶數字、“_”、“.”的字串
*/
function isRegisterUserName(s)
{
var patrn=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;
if (!patrn.exec(s)) return false
return true
}
/**
* 校驗用戶姓名：只能輸入1-30個以字母開頭的字串
*/
function isTrueName(s)
{
var patrn=/^[a-zA-Z]{1,30}$/;
if (!patrn.exec(s)) return false
return true
}
/**
* 校驗密碼：只能輸入6-20個字母、數字、下劃線
*/
function isPasswd(s)
{
var patrn=/^(\w){6,20}$/;
if (!patrn.exec(s)) return false
return true
}
/**
* 校驗普通電話、傳真號碼：可以“+”開頭，除數字外，可含有“-”
*/
function isTel(s)
{
var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/;
if (!patrn.exec(s)) return false
return true
}
/**
* 校驗手機號碼：必須以數字開頭，除數字外，可含有“-”
*/
function isMobil(s)
{
var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/;
if (!patrn.exec(s)) return false
return true
}
/**
* 校驗郵政編碼
*/
function isPostalCode(s)
{
var patrn=/^[a-zA-Z0-9 ]{3,12}$/;
if (!patrn.exec(s)) return false
return true
}
/**
* 校驗搜索關鍵字
*/
function isSearch(s)
{
var patrn=/^[^`~!@#$%^&*()+=|\\\][\]\{\}:;'\,.<>/?]{1}[^`~!@$%^&()+=|\\\]
[\]\{\}:;'\,.<>?]{0,19}$/;
if (!patrn.exec(s)) return false
return true
}
/**
* 檢查是否是有效的IP地址
*/
function isIpAddr(addr)
{
var patrn=/^[0-9.]{1,20}$/;
if (!patrn.exec(s)) return false
return true
}
]]>
]]>
* 用途：檢查輸入字符串是否只由英文字母和數字和下劃線組成
* 輸入：s, 字符串
* 返回：如果通過驗證返回true,否則返回false
*/
function isNumberOr_Letter( s ){
var regu = "^[0-9a-zA-Z\_]+$";
var re = new RegExp(regu);
if (re.test(s)) return true;
else return false;
}
/**
* 用途：檢查輸入字符串是否只由英文字母和數字組成
* 輸入：s, 字符串
* 返回：如果通過驗證返回true,否則返回false
*/
function isNumberOrLetter( s ){//判斷是否是數字或字母
var regu = "^[0-9a-zA-Z]+$";
var re = new RegExp(regu);
if (re.test(s)) return true;
else return false;
}
/**
* 用途：檢查輸入字符串是否只由漢字、字母、數字組成
* 輸入：value, 字符串
* 返回：如果通過驗證返回true,否則返回false
*/
function isChinaOrNumbOrLett( s ){
var regu = "^[0-9a-zA-Z\u4e00-\u9fa5]+$";
var re = new RegExp(regu);
if (re.test(s)) return true;
else return false;
}
/**
* 用途：判斷是否是日期
* 輸入：date：日期；fmt：日期格式
* 返回：如果通過驗證返回true,否則返回false
*/
function isDate( date, fmt ) {
if (fmt==null) fmt="yyyyMMdd";
var yIndex = fmt.indexOf("yyyy");
if(yIndex==-1) return false;
var year = date.substring(yIndex,yIndex+4);
var mIndex = fmt.indexOf("MM");
if(mIndex==-1) return false;
var month = date.substring(mIndex,mIndex+2);
var dIndex = fmt.indexOf("dd");
if(dIndex==-1) return false;
var day = date.substring(dIndex,dIndex+2);
if(!isNumber(year)||year>"2100" || year< "1900") return false;
if(!isNumber(month)||month>"12" || month< "01") return false;
if(day>getMaxDay(year,month) || day< "01") return false;
return true;
}
/**
* 用途：獲取每月的最后一天日期值.
* 輸入：date：年份；month：月份
* 返回：如果通過驗證返回true,否則返回false
*/
function getMaxDay(year,month) {
if(month==4||month==6||month==9||month==11)
return "30";
if(month==2)
if(year%4==0&&year%100!=0 || year%400==0)
return "29";
else
return "28";
return "31";
}
/**
* 用途：字符1是否以字符串2結束
* 輸入：str1：字符串；str2：被包含的字符串
* 返回：如果通過驗證返回true,否則返回false
*/
function isLastMatch(str1,str2){
var index = str1.lastIndexOf(str2);
if(str1.length==index+str2.length) return true;
return false;
}
/**
* 用途：字符1是否以字符串2開始
* 輸入：str1：字符串；str2：被包含的字符串
* 返回：如果通過驗證返回true,否則返回false
*/
function isFirstMatch(str1,str2){
var index = str1.indexOf(str2);
if(index==0) return true;
return false;
}
/**
* 用途：字符1是包含字符串2
* 輸入：str1：字符串；str2：被包含的字符串
* 返回：如果通過驗證返回true,否則返回false
*/
function isMatch(str1,str2){
var index = str1.indexOf(str2);
if(index==-1) return false;
return true;
}
/**
* 用途：檢查輸入的起止日期是否正確，規則為兩個日期的格式正確，且結束如期>=起始日期
* 輸入：startDate：起始日期(字符串), endDate：結束如期(字符串)
* 返回：如果通過驗證返回true,否則返回false
*/
function checkTwoDate( startDate,endDate ) {
if( !isDate(startDate) ) {
alert("起始日期不正確!");
return false;
} else if( !isDate(endDate) ) {
alert("終止日期不正確!");
return false;
} else if( startDate > endDate ) {
alert("起始日期不能大于終止日期!");
return false;
}
return true;
}
]]>
/**
* 用途：校驗ip地址的格式
* 輸入：strIP：ip地址
* 返回：如果通過驗證返回true,否則返回false；
*/
function isIP(strIP) {
if (isNull(strIP)) return false;
var re=/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g //匹配IP地址的正則表達式
if(re.test(strIP)){
if( RegExp.$1 <256 && RegExp.$2<256 && RegExp.$3<256 && RegExp.$4<256) return true;
}
return false;
}
/**
* 用途：檢查輸入字符串是否為空或者全部都是空格
* 輸入：str
* 返回：
* 如果全是空返回true,否則返回false
*/
function isNull( str ){
if ( str == "" ) return true;
var regu = "^[ ]+$";
var re = new RegExp(regu);
return re.test(str);
}
/**
* 用途：檢查輸入對象的值是否符合整數格式
* 輸入：str 輸入的字符串
* 返回：如果通過驗證返回true,否則返回false
*/
function isInteger( str ){
var regu = /^[-]{0,1}[0-9]{1,}$/;
return regu.test(str);
}
/**
* 用途：檢查輸入手機號碼是否正確
* 輸入：s, 字符串
* 返回：如果通過驗證返回true,否則返回false
*/
function checkMobile( s ){
var regu =/^[1][3][0-9]{9}$/;
var re = new RegExp(regu);
if (re.test(s)) return true;
else return false;
}
/**
* 用途：檢查輸入字符串是否符合正整數格式
* 輸入：s, 字符串
* 返回：如果通過驗證返回true,否則返回false
*/
function isNumber( s ){
var regu = "^[0-9]+$";
var re = new RegExp(regu);
if (s.search(re) != -1) return true;
else return false;
}
}
/**
* 用途：檢查輸入字符串是否是帶小數的數字格式,可以是負數
* 輸入：s, 字符串
* 返回：如果通過驗證返回true,否則返回false
*/
function isDecimal( str ){
if(isInteger(str)) return true;
var re = /^[-]{0,1}(\d+)[\.]+(\d+)$/;
if (re.test(str)) {
if(RegExp.$1==0&&RegExp.$2==0) return false;
return true;
} else {
return false;
}
}
/**
* 用途：檢查輸入對象的值是否符合端口號格式
* 輸入：str 輸入的字符串
* 返回：如果通過驗證返回true,否則返回false
*/
function isPort( str ){
return (isNumber(str) && str<65536);
}
/**
* 用途：檢查輸入對象的值是否符合E-Mail格式
* 輸入：str 輸入的字符串
* 返回：如果通過驗證返回true,否則返回false
*/
function isEmail( str ){
var myReg = /^[-_A-Za-z0-9]+@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/;
if(myReg.test(str)) return true;
return false;
}
/**
* 用途：檢查輸入字符串是否符合金額格式
* 格式定義為帶小數的正數，小數點后最多三位
* 輸入：s, 字符串
* 返回：如果通過驗證返回true,否則返回false
*/
function isMoney( s ){
var regu = "^[0-9]+[\.][0-9]{0,3}$";
var re = new RegExp(regu);
if (re.test(s)) return true;
else return false;
}
* 用途：校驗ip地址的格式
* 輸入：strIP：ip地址
* 返回：如果通過驗證返回true,否則返回false；
*/
function isIP(strIP) {
if (isNull(strIP)) return false;
var re=/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g //匹配IP地址的正則表達式
if(re.test(strIP)){
if( RegExp.$1 <256 && RegExp.$2<256 && RegExp.$3<256 && RegExp.$4<256) return true;
}
return false;
}
/**
* 用途：檢查輸入字符串是否為空或者全部都是空格
* 輸入：str
* 返回：
* 如果全是空返回true,否則返回false
*/
function isNull( str ){
if ( str == "" ) return true;
var regu = "^[ ]+$";
var re = new RegExp(regu);
return re.test(str);
}
/**
* 用途：檢查輸入對象的值是否符合整數格式
* 輸入：str 輸入的字符串
* 返回：如果通過驗證返回true,否則返回false
*/
function isInteger( str ){
var regu = /^[-]{0,1}[0-9]{1,}$/;
return regu.test(str);
}
/**
* 用途：檢查輸入手機號碼是否正確
* 輸入：s, 字符串
* 返回：如果通過驗證返回true,否則返回false
*/
function checkMobile( s ){
var regu =/^[1][3][0-9]{9}$/;
var re = new RegExp(regu);
if (re.test(s)) return true;
else return false;
}
/**
* 用途：檢查輸入字符串是否符合正整數格式
* 輸入：s, 字符串
* 返回：如果通過驗證返回true,否則返回false
*/
function isNumber( s ){
var regu = "^[0-9]+$";
var re = new RegExp(regu);
if (s.search(re) != -1) return true;
else return false;
}
}
/**
* 用途：檢查輸入字符串是否是帶小數的數字格式,可以是負數
* 輸入：s, 字符串
* 返回：如果通過驗證返回true,否則返回false
*/
function isDecimal( str ){
if(isInteger(str)) return true;
var re = /^[-]{0,1}(\d+)[\.]+(\d+)$/;
if (re.test(str)) {
if(RegExp.$1==0&&RegExp.$2==0) return false;
return true;
} else {
return false;
}
}
/**
* 用途：檢查輸入對象的值是否符合端口號格式
* 輸入：str 輸入的字符串
* 返回：如果通過驗證返回true,否則返回false
*/
function isPort( str ){
return (isNumber(str) && str<65536);
}
/**
* 用途：檢查輸入對象的值是否符合E-Mail格式
* 輸入：str 輸入的字符串
* 返回：如果通過驗證返回true,否則返回false
*/
function isEmail( str ){
var myReg = /^[-_A-Za-z0-9]+@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/;
if(myReg.test(str)) return true;
return false;
}
/**
* 用途：檢查輸入字符串是否符合金額格式
* 格式定義為帶小數的正數，小數點后最多三位
* 輸入：s, 字符串
* 返回：如果通過驗證返回true,否則返回false
*/
function isMoney( s ){
var regu = "^[0-9]+[\.][0-9]{0,3}$";
var re = new RegExp(regu);
if (re.test(s)) return true;
else return false;
}
]]>