2.在調(diào)試器下看到IE下不能使用type作為屬性值，先后改用node-type和nodetype，結(jié)果都發(fā)現(xiàn)返回的都是9；心里立刻浮起一個想法：nodetype莫非是瀏覽器保留的內(nèi)部屬性，于是上網(wǎng)搜索；9代表的nodetype 為document;改用其他名稱作為節(jié)點屬性名之后，原先的實現(xiàn)功能就正常了。
]]>
]]>
]]>
個API key,申請API key請到：http://code.google.com/apis/maps/signup.html。這里假設你獲取到的key是：ABQIAA。
關于jquery的獲取不再此處累贅，網(wǎng)上有許多關于jquery的介紹。
接著我們就使用JQuery和Google Maps JavaScript API來結(jié)合表現(xiàn)一下google map的有趣的地圖效果，進而達到熟悉Google Maps JavaScript API的目標。
先來個HelloChina:
(1)在html文件中編寫html代碼:
map.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Google Maps 與 JQuery結(jié)合使用</title> <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAA" type="text/javascript"></script> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="map.js"></script></head><body> <div id="map" style="top:100px;left:300px;width: 600px; height: 400px"></div> <div id="message"></div></body></html>
(2)在js文件中編寫js代碼
map.js
$(document).ready(function()
{
//檢查瀏覽器兼容性
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(36.94, 106.08), 4);//中國的經(jīng)緯度以及地方放大倍數(shù) map.setMapType(G_SATELLITE_MAP); //document卸載時觸發(fā) $(window).unload(function (){ $('.').unbind(); GUnload();
}); }else { alert('你使用的瀏覽器不支持 Google Map!'); }
});(3)在地址欄輸入頁面對應的地址(確定key是和你輸入地址或域名匹配的),查看效果圖，可以看到中國位于地圖的中央。
HolloChina的效果圖
地圖的移動和變換
（1）修改javascript代碼如下：
map.js
$(document).ready(function(){ if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.setCenter(new GLatLng(36.94, 106.08), 4); //4秒后移動 window.setTimeout(function() { map.panTo(new GLatLng(35.746512259918504,78.90625)); }, 4000); $(window).unload(function (){ $('.').unbind(); GUnload(); }); }else { alert('你使用的瀏覽器不支持 Google Map!'); }});地圖中心移動到中國的西部
添加控件并修改地圖類型
修改javascript代碼如下：
map.js
$(document).ready(function(){ if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); //小型伸縮控制器 map.addControl(new GSmallMapControl()); //地圖類型控制器 map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(36.94,106.08),4); //將地圖設置為衛(wèi)星地圖 map.setMapType(G_SATELLITE_MAP);//修改地圖類型 $(window).unload(function (){ $('.').unbind(); GUnload(); }); }else { alert('你使用的瀏覽器不支持 Google Map!'); }});刷新頁面，看到的效果是衛(wèi)星地圖的左上角有一個小的伸縮控件，右上角是地圖選擇的控件
加入控件后的效果圖
添加事件監(jiān)聽器并開啟滾輪伸縮效果
修改javascript代碼：
map.js
$(document).ready(function(){ if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); //開啟滾輪伸縮效果－－鼠標滾輪向前滾放大地圖，反之縮小 map.enableScrollWheelZoom(); //添加moveend事件監(jiān)聽器 GEvent.addListener(map, "moveend", function() { var center = map.getCenter(); //在這個DIV中顯示地圖中心的經(jīng)緯度 $('#message').text(center.toString()); }); map.setCenter(new GLatLng(36.94,106.08),4); $(window).unload(function (){ $('.').unbind(); GUnload(); }); }else { alert('你使用的瀏覽器不支持 Google Map!'); }});
此時的地圖在滾動滾輪的時候會發(fā)生伸縮，而拖動完地圖后，地圖左側(cè)的坐標信息會跟著變。
添加事件監(jiān)聽器和滾輪伸縮的效果圖
后兩篇：
[javascript]google map api 與jquery結(jié)合使用(2) --標注,浮窗
[javascript]google map api 與jquery結(jié)合使用(3) --圖標樣式,使用xml和異步請求
]]>
在ie6下，document中任何一個元素的位置發(fā)生變化的時候都會觸發(fā)onresize事件，今天出現(xiàn)的幾個問題都和ie6的onresize事件有關。
(1):thickbox與flexigrid一起使用的情況下,彈出thickbox時出現(xiàn)卡機現(xiàn)象，CPU使用率在50％以上。
(2):布局器與flexigrid一起使用時，調(diào)整布局器內(nèi)各個區(qū)域的寬度或者高度時出現(xiàn)卡機現(xiàn)象。
以上兩個問題，致使我們放棄在ie6下呈現(xiàn)flexigrid及布局器的自適應效果。
ie6 href="#" onclick="doSomeThing();"
在ie6下使用thickbox裝載頁面，而頁面中有連接類型（即<a/>類型）的按鈕，其href屬性值為#，onclick事件函數(shù)為無返回值的函數(shù)，
出現(xiàn)點擊任何這樣類型的按鈕是出現(xiàn)窗口中元素移位（或者做了更多的事情）的現(xiàn)象。
解決辦法：在事件函數(shù)內(nèi)添加一個返回值false即return false,也可直接加到onclick事件函數(shù)的最后。
ie6 overflow:hidden
在ie6下使用了自己實現(xiàn)的布局器，在調(diào)整寬度或者高度的時候，出現(xiàn)一些奇怪的現(xiàn)象：將一個區(qū)域調(diào)大沒有問題，但是調(diào)小就無效果。
而確定在各個區(qū)域內(nèi)沒有內(nèi)容的情況相調(diào)整寬度和高度是沒有問題的，所以將問題轉(zhuǎn)移到區(qū)域內(nèi)的組件中；最后忙了一圈，才發(fā)現(xiàn)在
各個區(qū)域內(nèi)的css類中添加overflow:hidden的情況下，各個部分調(diào)整寬度和高度都是沒有問題的。
ie6真的很糟糕
有不少頁面在其他瀏覽器或者更高級的ie版本中都是沒有問題的，但是在ie6下面就表現(xiàn)得很奇怪，這里我不得不說ie6真的是做得很糟糕。
期待真的會有一個瀏覽器的統(tǒng)一標準出來，但是我想微軟應該不會輕易放棄自己已經(jīng)掌握的優(yōu)勢！！！
]]>
]]>
]]>
]]>
上篇寫了實現(xiàn)的代碼,在這里給出使用的例子
上篇文章:[Extjs]查詢字段所在區(qū)域時常用的控件
比較數(shù)字
var valueField = new Ext.ux.ComparingField({ fieldLabel : "數(shù)量", name : "value", valueConfig:{ allowBlank:false } });var valueField= new Ext.ux.ComparingField({ fieldLabel : "日期", type:'date', name : "value", valueConfig:{ allowBlank:false } });var valueField= new Ext.ux.ComparingField({ fieldLabel : "時間", type:'time', name : "value", valueConfig:{ allowBlank:false } });比較日期時間
var valueField= new Ext.ux.ComparingField({ fieldLabel : "日期時間", type:'dateTime', name : "value", valueConfig:{ allowBlank:false } });說明:
這里將往服務端發(fā)送兩個相關的參數(shù):
valueSymbol ----前面的操作符號的數(shù)字代號
-2 <
-1 <=
0 =
1 >=
2 >
valueValue ----后面比較的值
IntervalField 的使用例子
限定數(shù)字在一個區(qū)間內(nèi)
var field = new Ext.ux.IntervalField({ fieldLabel : "數(shù)量", name : "field", startConfig:{ allowBlank:false }, endConfig:{ allowBlank:false } });限定日期在一個區(qū)間內(nèi)
var field = new Ext.ux.IntervalField({ fieldLabel : "日期", name : "field", type:'date', startConfig:{ allowBlank:false }, endConfig:{ allowBlank:false } });限定時間在一個區(qū)間內(nèi)
var field= new Ext.ux.IntervalField({ fieldLabel : "時間", name : "field", type:'time', startConfig:{ allowBlank:false }, endConfig:{ allowBlank:false } });限定日期時間在一個區(qū)間內(nèi)
var field = new Ext.ux.IntervalField({ fieldLabel : "日期時間", name : "field", type:'dateTime', startConfig:{ allowBlank:false }, endConfig:{ allowBlank:false } });說明:
* 這里將往服務端發(fā)送兩個相關的參數(shù):
*
* fieldStart----區(qū)間的下界
* fieldEnd----區(qū)間的上界
]]>
]]>
]]>
var Util = { //從表單中移除一個字段 removeField:function(field) { if(field&&field.getEl()){ field.clearInvalid(); field.disable();//令字段不驗證,也不提交數(shù)據(jù) field.hide(); field.getEl().up('.x-form-item').setDisplayed(false); //隱藏字段 } }, //將被移除的字段恢復 recoverField:function(field) { if(field&&field.getEl()){ field.enable(); field.show(); field.getEl().up('.x-form-item').setDisplayed(true); } }, //將字段隱藏,但是會驗證,提交數(shù)據(jù) hideField:function(field) { if(field&&field.getEl()){ field.clearInvalid(); field.hide(); field.getEl().up('.x-form-item').setDisplayed(false); // hide label } }, //將隱藏的字段顯示出來 showField:function(field) { if(field&&field.getEl()){ field.show(); field.getEl().up('.x-form-item').setDisplayed(true); } }, //將字段設置只讀 readOnlyField:function(field) { if(field&&field.el){//rended field.el.dom.readOnly=true; }else if(field)//notRended { field.readOnly=true; } }, //將只讀字段設置成可讀 unReadOnlyField:function(field) {//rended if(field&&field.el){ field.el.dom.readOnly=false; }else if(field)//notRended { field.readOnly=false; } }}
]]>
而且會在firefox中可以顯示出來,在IE中卻沒有顯示出來(通過grid來顯示),最后,我通過在服務端打印響應中的內(nèi)容,
竟然讓我的eclipse都卡住了,等緩過來查看輸出的時候發(fā)現(xiàn),原來是服務端輸出json的時候把圖片的字節(jié)值也一起打印出來了,
所以才會導致eclipse卡住并且即使能輸出也是相當?shù)寐?而且?guī)讞l數(shù)據(jù)的圖片的輸出值就讓IE處理不了!!
所以,如果要在數(shù)據(jù)表內(nèi)存儲圖片(文件)時,不能將圖片的字節(jié)值也當作JSON輸出到客戶端,如果需要顯示還是單獨處理為妙.
]]>
var ua = navigator.userAgent.toLowerCase();2
var isOpera=ua.indexOf("opera") > -1;3
if(!isOpera)4
{5
6
if(isIE)7
{8
var isMaxthod = ua.indexOf("maxthon") > -1;9
if(isMaxthod)10
{11
alert('您使用的瀏覽器是Maxthod,為了順利體驗本系統(tǒng),建議您停用浮動廣告過濾等Maxthod特有功能。');12
}13
}else14
{15
var isFF3 = ua.indexOf("firefox/3") > -1;16
if(isFF3)17
{18
alert('瀏覽器','您使用的瀏覽器是FireFox3,為了順利體驗本系統(tǒng),建議您使用IE6,IE7,Maxthod或FireFox(3.0以下)等瀏覽器。');19
}20
21
}22
23
24
}25
else26
{27
alert('瀏覽器','您使用的瀏覽器是Opera,為了順利體驗本系統(tǒng),建議您使用IE6,IE7,Maxthod或FireFox(3.0以下)等瀏覽器。');28
}
]]>
]]>