BlogJava-Java Blog for Alex Wan-随笔分类-JavaScript

[javascript]jquery的$.attri函数与IE下type属性及各个浏览器下的node-type/nodetype的冲突

Alexwan — Fri, 26 Jun 2009 07:22:00 GMT

这个冲突纯粹是偶然的发现：
1.使用type作为html节点(li)的一个属性（这个属性是通过javascript写入的，在除IE的浏览器中都能顺利输出这个属性），然后使用jquery的函数获取其属性值：$('somenode').attri('type')自然是获取不到属性值；
2.在调试器下看到IE下不能使用type作为属性值，先后改用node-type和nodetype，结果都发现返回的都是9；心里立刻浮起一个想法：nodetype莫非是浏览器保留的内部属性，于是上网搜索；9代表的nodetype 为document;改用其他名称作为节点属性名之后，原先的实现功能就正常了。

Alexwan 2009-06-26 15:22 发表评论

[javascript]google map api 与jquery结合使用(3) --图标样式,使用xml和异步请求

Alexwan — Tue, 18 Nov 2008 16:22:00 GMT

摘要: 前两篇： [javascript]google map api 与jquery结合使用(1)--控件,监听器 [javascript]google map api 与jquery结合使用(2) --标注,浮窗创建图标 map.js $(document).ready(function() { if&n... 阅读全文

Alexwan 2008-11-19 00:22 发表评论

[javascript]google map api 与jquery结合使用(2) --标注,浮窗

Alexwan — Sun, 16 Nov 2008 16:07:00 GMT

摘要: 前一篇：[javascript]google map api 与jquery结合使用(1) 打开信息浮窗修改javascript代码： map.js $(document).ready(function() { if (GBrowserIsCompatible()) { ... 阅读全文

Alexwan 2008-11-17 00:07 发表评论

[javascript]google map api 与jquery结合使用(1)--控件,监听器

Alexwan — Sun, 16 Nov 2008 15:08:00 GMT

        Google Maps JavaScript API可以让您在自己的网页上使用Google地图.在使用API之前，您应该先申请一
个API key,申请API key请到：http://code.google.com/apis/maps/signup.html。这里假设你获取到的key是：ABQIAA。
        关于jquery的获取不再此处累赘，网上有许多关于jquery的介绍。
        接着我们就使用JQuery和Google Maps JavaScript API来结合表现一下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结合使用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);//中国的经纬度以及地方放大倍数
        map.setMapType(G_SATELLITE_MAP);
        //document卸载时触发
           $(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!');
     }
});

（2）输入对应的地址查看，等上4秒钟，就可以看到地图的中心移动到中国的西部(大概的位置)：

地图中心移动到中国的西部

添加控件并修改地图类型

修改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);
        //将地图设置为卫星地图
    map.setMapType(G_SATELLITE_MAP);//修改地图类型
        $(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.enableScrollWheelZoom();
        //添加moveend事件监听器
        GEvent.addListener(map, "moveend", function() {
        var center = map.getCenter();
                        //在这个DIV中显示地图中心的经纬度
            $('#message').text(center.toString());
        });
        map.setCenter(new GLatLng(36.94,106.08),4);
        $(window).unload(function (){
               $('.').unbind();
               GUnload();
           });
     }else
     {
         alert('你使用的浏览器不支持 Google Map!');
     }
});

此时的地图在滚动滚轮的时候会发生伸缩，而拖动完地图后，地图左侧的坐标信息会跟着变。

添加事件监听器和滚轮伸缩的效果图

后两篇：
[javascript]google map api 与jquery结合使用(2) --标注,浮窗

[javascript]google map api 与jquery结合使用(3) --图标样式,使用xml和异步请求

Alexwan 2008-11-16 23:08 发表评论

[javascript]IE6的 onresize ,href和overflow:hidden

Alexwan — Thu, 13 Nov 2008 16:13:00 GMT

ie6 onresize事件：

在ie6下，document中任何一个元素的位置发生变化的时候都会触发onresize事件，今天出现的几个问题都和ie6的onresize事件有关。
(1):thickbox与flexigrid一起使用的情况下,弹出thickbox时出现卡机现象，CPU使用率在50％以上。
(2):布局器与flexigrid一起使用时，调整布局器内各个区域的宽度或者高度时出现卡机现象。
以上两个问题，致使我们放弃在ie6下呈现flexigrid及布局器的自适应效果。

ie6 href="#" onclick="doSomeThing();"

在ie6下使用thickbox装载页面，而页面中有连接类型（即类型）的按钮，其href属性值为#，onclick事件函数为无返回值的函数，
出现点击任何这样类型的按钮是出现窗口中元素移位（或者做了更多的事情）的现象。
解决办法：在事件函数内添加一个返回值false即return false,也可直接加到onclick事件函数的最后。

ie6 overflow:hidden

在ie6下使用了自己实现的布局器，在调整宽度或者高度的时候，出现一些奇怪的现象：将一个区域调大没有问题，但是调小就无效果。
而确定在各个区域内没有内容的情况相调整宽度和高度是没有问题的，所以将问题转移到区域内的组件中；最后忙了一圈，才发现在
各个区域内的css类中添加overflow:hidden的情况下，各个部分调整宽度和高度都是没有问题的。

ie6真的很糟糕

有不少页面在其他浏览器或者更高级的ie版本中都是没有问题的，但是在ie6下面就表现得很奇怪，这里我不得不说ie6真的是做得很糟糕。
期待真的会有一个浏览器的统一标准出来，但是我想微软应该不会轻易放弃自己已经掌握的优势！！！

Alexwan 2008-11-14 00:13 发表评论

[JQuery]JQuery中获取窗体宽度和高度的通用方法

Alexwan — Tue, 21 Oct 2008 16:00:00 GMT

摘要: 背景:
在我们使用JQuery的过程中,有些时候是需要获取到窗体或者iframe的宽度和高度用来做一些布局上的计算,这里我们需要使用跨浏览器的做法. 阅读全文

Alexwan 2008-10-22 00:00 发表评论

[js]JS释放内存的方法

Alexwan — Mon, 11 Aug 2008 08:38:00 GMT

将函数使用的变量都赋值为null,然后调用方法CollectGarbage()!

Alexwan 2008-08-11 16:38 发表评论

[Extjs]基于Ext2.0的树状选择框(TreeComboBox)

Alexwan — Mon, 11 Aug 2008 01:14:00 GMT

摘要: 背景:有一些时候我们处理的数据本身就是树状的结构,当我们需要在从这些数据中做选择的时候,希望出来的数据也是树状,以方便在逻辑上区分. 实现方法:扩展和树相关的类,使得他们可以用于选择. 实现代码: Ext.ux.OptionTreeNode Ext.ux.OptionTreeNode=function(attributes) { &n... 阅读全文

Alexwan 2008-08-11 09:14 发表评论

[Extjs]查询字段所在区域时常用的控件(续)

Alexwan — Wed, 30 Jul 2008 01:32:00 GMT

上篇写了实现的代码,在这里给出使用的例子
上篇文章:[Extjs]查询字段所在区域时常用的控件
比较数字

var valueField = new Ext.ux.ComparingField({
        fieldLabel : "数量",
        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
        }
    });

说明:

这里将往服务端发送两个相关的参数:

valueSymbol ----前面的操作符号的数字代号
  -2 <
-1 <=
0   =
1   >=
2   >

valueValue ----后面比较的值

IntervalField 的使用例子
限定数字在一个区间内

var field = new Ext.ux.IntervalField({
        fieldLabel : "数量",
        name : "field",
        startConfig:{
            allowBlank:false
        },
        endConfig:{
            allowBlank:false
        }
    });

限定日期在一个区间内

var field = new Ext.ux.IntervalField({
        fieldLabel : "日期",
        name : "field",
        type:'date',
        startConfig:{
            allowBlank:false
        },
        endConfig:{
            allowBlank:false
        }
    });

限定时间在一个区间内

    var field= new Ext.ux.IntervalField({
        fieldLabel : "时间",
        name : "field",
        type:'time',
        startConfig:{
            allowBlank:false
        },
        endConfig:{
            allowBlank:false
        }
    });

限定日期时间在一个区间内

var field = new Ext.ux.IntervalField({
        fieldLabel : "日期时间",
        name : "field",
        type:'dateTime',
        startConfig:{
            allowBlank:false
        },
        endConfig:{
            allowBlank:false
        }
    });

说明:
* 这里将往服务端发送两个相关的参数:
*
* fieldStart----区间的下界
* fieldEnd----区间的上界

Alexwan 2008-07-30 09:32 发表评论

[Extjs]查询字段所在区域时常用的控件

Alexwan — Wed, 30 Jul 2008 01:17:00 GMT

摘要: 背景:我们在查询的时候经常会用到区间查询,比如,要求某个字段的值要大于,小于或等于某个值;又或者要求某个字段的值在我们指定的区间内.那么在填写条件的时候,如何去表达查询的区间更加明确,用户查询时更方便成为一个问题! 方案:实现两个控件,一个用于单值比较(大于,小于或者等于某个值),另一个用于区间比较. 实现代码: Ext.ux.ComparingNumberField Ext.ux.Com... 阅读全文

Alexwan 2008-07-30 09:17 发表评论

[Extjs]基于Extjs2.0日期时间(DateTime)控件的改良版本

Alexwan — Mon, 21 Jul 2008 04:18:00 GMT

摘要: 背景: 在Extjs论坛上找到的日期时间控件()是由Extjs2.0原版的日期控件和时间控件组合而成,在提示验证信息的时候很容易出错,而且验证信息显示位置也不对. 做法: 基于以上背景,我对日期时间控件进行了改进,主要的做法是: (1)重载基础的日期控件和时间控件,用于组合新的日期时间控件 (2)在日期时间控件中添加消息栈,用于存储信息记录代码: Ext.ux.TimeField(... 阅读全文

Alexwan 2008-07-21 12:18 发表评论

[Extjs]Extjs2.0中与字段(Field)相关的常用方法

Alexwan — Sat, 19 Jul 2008 12:13:00 GMT

Alexwan 2008-07-19 20:13 发表评论

[Extjs]输出JSON时图片及文件需要单独处理

Alexwan — Fri, 18 Jul 2008 13:41:00 GMT

[Extjs]输出JSON是图片及文件需要单独处理
今天在使用Extjs开发的后台系统中碰到一个很奇怪的错误,从一个只有很少记录的数据表中查数据出来竟然用了9秒多;
而且会在firefox中可以显示出来,在IE中却没有显示出来(通过grid来显示),最后,我通过在服务端打印响应中的内容,
竟然让我的eclipse都卡住了,等缓过来查看输出的时候发现,原来是服务端输出json的时候把图片的字节值也一起打印出来了,
所以才会导致eclipse卡住并且即使能输出也是相当得慢;而且几条数据的图片的输出值就让IE处理不了!!
所以,如果要在数据表内存储图片(文件)时,不能将图片的字节值也当作JSON输出到客户端,如果需要显示还是单独处理为妙.

Alexwan 2008-07-18 21:41 发表评论

[javaScript]javaScript检测浏览器以及版本的粗略做法

Alexwan — Sat, 12 Jul 2008 14:07:00 GMT

1var ua = navigator.userAgent.toLowerCase();
2var isOpera=ua.indexOf("opera") > -1;
3if(!isOpera)
4    {
5
6        if(isIE)
7        {
8            var isMaxthod =  ua.indexOf("maxthon") > -1;
9            if(isMaxthod)
10            {
11            alert('您使用的浏览器是Maxthod,为了顺利体验本系统,建议您停用浮动广告过滤等Maxthod特有功能。');
12            }
13        }else
14        {
15            var isFF3 =  ua.indexOf("firefox/3") > -1;
16            if(isFF3)
17            {
18            alert('浏览器','您使用的浏览器是FireFox3,为了顺利体验本系统,建议您使用IE6,IE7,Maxthod或FireFox(3.0以下)等浏览器。');
19            }
20
21        }
22
23
24    }
25    else
26    {
27        alert('浏览器','您使用的浏览器是Opera,为了顺利体验本系统,建议您使用IE6,IE7,Maxthod或FireFox(3.0以下)等浏览器。');
28    }

Alexwan 2008-07-12 22:07 发表评论

[ExtJs]基于EXT2的RadioGroup

Alexwan — Fri, 27 Jun 2008 01:40:00 GMT

摘要: 背景: Ext2标准实现的Radio不够用!一方面是布局不太方便,另一方面是事件比较难用.所以我实现了一种以onChange事件为中心的RadioGroup. 实现代码: 1Ext.namespace('Ext.ux'); 2 3Ext.ux.Radio =function(config) &... 阅读全文

Alexwan 2008-06-27 09:40 发表评论