开发笔记 第763页

Flex IOC 框架概览PDF完整版及配套源码下载地址：http://download.csdn.net/source/1634071

有时候在工作的时候需要将某些文字单独的插入到fckeditor编辑器中，但这时如果修改了fckeditor的源文件的话，再想插入其它的东西就还要再修改一次，很不方便 。于是搜了很久，但没有结果，于是柠檬园主给出了解决方案，在此谢谢柠檬园主。
看代码：
     function InsertHTML(e,inStr)
    {
     var oEditor = FCKeditorAPI.GetInstance(e) ;
     if ( oEditor.EditMode == FCK_EDITMODE_WYSIWYG )
     {
      // Insert the desired HTML.
      oEditor.InsertHtml( inStr ) ;
     }
     else
      alert( 'You must be on WYSIWYG mode!' ) ;
    }
    function ExecuteCommand( commandName,e )
    {
     var oEditor = FCKeditorAPI.GetInstance(e) ;
     oEditor.Commands.GetCommand( commandName ).Execute() ;
    }
调用代码：
  <a href="JavaScript:InsertHTML('obj','>>>>>>>>>& gt;Pagination<<<<<<<<<<');">FCK有API可以用， 可以直接在当前FCK编辑域的光标处执行动作的。</a>
‘下面的那个命令没有用到，应该是某些JS命令，在此没有用到。
对编辑器FCKeditor进行赋值：
var sString = '';
var oEditor = FCKeditorAPI.GetInstance('editor' );
oEditor.SetHTML(sString);

最近在做一个用户注册登录的页面，资料查寻过程中发现了一个非常不错的客户端验证的极品－JQuery.validate。
它是著名的JavaScript包JQuery的一个插件，其实它还有其它的一些插件应该都爽，有待慢慢来学习
官方地址：http://bassistance.de/JQuery-plugins/jQuery-plugin-validation/
jQuery用户手册：http://jQuery.org.cn/visual/cn/index.xml
开发使用起来非常简单明了，
我的代码：

$(document).ready(function(){   /* 设置默认属性 */  $.validator.setDefaults({    submitHandler: function(form) { form.submit(); }  });  // 中文字两个字节  jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {    var length = value.length;    for(var i = 0; i < value.length; i++){     if(value.charCodeAt(i) > 127){      length++;     }    }    return this.optional(element) || ( length >= param[0] && length <= param[1] );  }, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)");   /* 追加自定义验证方法 */  // 身份证号码验证  jQuery.validator.addMethod("isIdCardNo", function(value, element) {    return this.optional(element) || isIdCardNo(value);  }, "请正确输入您的身份证号码");   // 字符验证  jQuery.validator.addMethod("userName", function(value, element) {    return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);  }, "用户名只能包括中文字、英文字母、数字和下划线");   // 手机号码验证  jQuery.validator.addMethod("isMobile", function(value, element) {    var length = value.length;    return this.optional(element) || (length == 11 && /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/.test(value));  }, "请正确填写您的手机号码");   // 电话号码验证  jQuery.validator.addMethod("isPhone", function(value, element) {    var tel = /^(\d{3,4}-?)?\d{7,9}$/g;    return this.optional(element) || (tel.test(value));  }, "请正确填写您的电话号码");   // 邮政编码验证  jQuery.validator.addMethod("isZipCode", function(value, element) {    var tel = /^[0-9]{6}$/;    return this.optional(element) || (tel.test(value));  }, "请正确填写您的邮政编码");  $(regFrom).validate({  /* 设置验证规则 */    rules: {     userName: {      required: true,      userName: true,      byteRangeLength: [3,15]     },     password: {      required: true,      minLength: 5     },     repassword: {      required: true,      minLength: 5,      equalTo: "#password"     },     question: {      required: true     },     answer: {      required: true     },     realName: {      required: true     },     cardNumber: {      isIdCardNo: true     },     mobilePhone: {      isMobile: true     },     phone: {      isPhone: true     },     email: {      required: true,      email: true     },     zipCode: {      isZipCode:true     }    },  /* 设置错误信息 */    messages: {     userName: {      required: "请填写用户名",      byteRangeLength: "用户名必须在3-15个字符之间(一个中文字算2个字符)"     },     password: {      required: "请填写密码",      minlength: jQuery.format("输入{0}.")     },     repassword: {      required: "请填写确认密码",      equalTo: "两次密码输入不相同"     },     question: {      required: "请填写您的密码提示问题"     },     answer: {      required: "请填写您的密码提示答案"     },     realName: {      required: "请填写您的真实姓名"     },     email: {      required: "请输入一个Email地址",      email: "请输入一个有效的Email地址"     }    },  /* 错误信息的显示位置 */    errorPlacement: function(error, element) {     error.appendTo( element.parent() );    },  /* 验证通过时的处理 */    success: function(label) {     // set   as text for IE     label.html(" ").addClass("checked");    },  /* 获得焦点时不验证 */    focusInvalid: false,    onkeyup: false  });   // 输入框获得焦点时，样式设置  $('input').focus(function(){    if($(this).is(":text") || $(this).is(":password"))     $(this).addClass('focus');    if ($(this).hasClass('have_tooltip')) {     $(this).parent().parent().removeClass('field_normal').addClass('field_focus');    }  });   // 输入框失去焦点时，样式设置  $('input').blur(function() {    $(this).removeClass('focus');    if ($(this).hasClass('have_tooltip')) {     $(this).parent().parent().removeClass('field_focus').addClass('field_normal');    }  });  });  

网上的资料有人说，它跟prototype包会有冲突，我还没有同时使用过，这点不是很清楚，但我是发现一个问题：
对于最小/大长度的验证方法，作者可能考虑到大家的命名习惯不同，同时做了minLength和minlength（maxLength和 maxlength）方法，应该哪一个都是可以的，但对于用户Message来说，只能够定义针对minlength（maxlength），才能调用用 户自定义的Message，
否则只是调用包的默认Message，但具体原因还没有查清楚。同时，这个插件提供了本地化的消息，但对于我这里初学者来说，怎么使用它还有待摸索！

发表者: 谷歌官方博客与代码博客联合发布

发表于：2009年6月23日 下午 15:55:00

Adobe Technical Service团队今天发布了一个开源的项目，叫做FlexPMD。
FlexPMD主要用来提升Flex/AS3源文件中的代码质量并且检测常见的不好的代码实践，比如无用的代码，效率低的代码片段，过于复杂的代码等等这些都是FlexPMD检测并报告的对象。
作为开发者，现在你也可以完全获得FlexPMD的项目并参与到其中了。
http://opensource.adobe.com/wiki/display/flexpmd/FlexPMD
下载：
http://opensource.adobe.com/wiki/display/flexpmd/Downloads
获取源代码：
http://opensource.adobe.com/wiki/display/flexpmd/Get+Source+Code

 .Net中原生的class或struct，如int，DateTime等都对它进行重写(override)，以让它返回更有价值的值，而不是 类型的名称。合理重写的ToString()方法中编程、调试中给我们很大方便。但终究一个类只有一个ToString()方法，不能满足我们多样化的需 求，很多类都对ToString()进行了重载。如下：

 int、DateTime都实现了ToString(string format)方法，极大方便了我们的使用。

 对于我们自己定义的类型，我们也应该提供一个合理的ToString()重写，如果能够提供再提供一个ToString(string format)，就会令我们后期的工作更加简单。试看以下类型： 

 1     public class People
 2     {
 3         private List<People> friends = new List<People>();
 4 
 5         public int Id { get; set; }
 6         public string Name { get; set; }
 7         public DateTime Brithday { get; set; }
 8         public People Son { get; set; }
 9         public People[] Friends { get { return friends.ToArray(); } }
10 
11         public void AddFriend(People newFriend)
12         {
13             if (friends.Contains(newFriend)) throw new ArgumentNullException("newFriend", "该朋友已添加");
14             else friends.Add(newFriend);
15         }
16         public override string ToString()
17         {
18             return string.Format("Id: {0}, Name: {1}", Id, Name);
19         }
20         
21     }

 一个简单的类，我们给出一个ToString()重写，返回包含Id和Name两个关键属性的字符串。现在我们需要一个ToString(string format)重写，以满足以下应用：

 想想怎么实现吧，记住format是可变的，不定使用了什么属性，也不定进行了怎样的组合…

 也许一个类好办，要是我们定义很多类，几十、几百个怎么办？一一实现ToString(string format)会把人累死的。好在我们有扩展方法，我们对object作一扩展ToString(string format)，.Net中object是所有的基类，对它扩展后所有的类都会自动拥有了。当然已有ToString(string format)实现的不会，因为原生方法的优先级高，不会被扩展方法覆盖掉。

 来看如何实现吧（我们会一步一步改进，为区分各个版本，分别扩展为ToString1、ToString2…分别对应版本一、版本二…）：

 3~5行通过反射获取了公有的、实例的Get属性（如果需要静态的或私有的，修改第5行中即可），7~8行动态生成一个正则表达式来匹配 format，10~16行是匹配成功后的处理。这里用到反射和正则表达式，如果不熟悉不要紧，先调试运行吧，测试一下前面刚提到的应用：

 第一个和我们理想的有点差距，就是日期上，我们应该给日期加上"yyyy-MM-dd"的格式，这个我们稍后改进，我们现在有一个更大的问题：

 如果我们想输出：“People: Id 1, Name 鹤冲天”，format怎么写呢？写成format="People: Id Id, Name Name"，这样没法处理了，format中两个Id、两个Name，哪个是常量，哪个是变量啊？解决这个问题，很多种方法，如使用转义字符，可是属性长 了不好写，如format="\B\r\i\t\h\d\a\y Brithday"。我权衡了一下，最后决定采用类似SQL中对字段名的处理方法，在这里就是给变量加上中括号，如下：

 版本二的实现代码如下：

 调试执行一下：

  与版本一类似，不过这里没有动态构建正则表达式，因为有了中括号，很容易区分常量和变量，所以我们通过“属性名”来找“属性”（对应代码中第 10行）。如果某个属性找不到，我们会将这“[Name]”原样返回（对就第17行）。另一种做法是抛出异常，我不建议抛异常，在 ToString(string format)是不合乎“常理”的。 

 版本二相对版本一效率有很大提高，主要是因为版本二只使用一个简单的正则表达式：@"\[(?<Name>[^\]]+)\]"。而版本一中的如果被扩展类的属性特别多，动态生成的正则表达式会很长，执行起来也会相对慢。
 

 我们现在来解决两个版本中都存在的时间日期格式问题，把时间日期格式"yyyy-MM-dd"也放入中括号中，测试代码如下：

 版本三实现代码：

 测试一下，可OK了:

  对于简单的值类型属性没问题了，但对于复杂一些类型如，如People的属性Son(Son就是儿子，我一开始写成了Sun)，他也是一个People类型，他也有属性的，而且他也可能有Son…

 先看下调用代码吧：

 “鹤冲天”也就是我了，有个儿子叫“鹤小天”，“鹤小天”有个儿子，也就是我的孙子“鹤微天”。哈哈，祖孙三代名字都不错吧（过会先把小天、微天这两个名字注册了）！主要看第4行，format是怎么写的。下面是版本四实现代码，由版本三改进而来：

 为了反射获取属性方法，用到了GetPropertyValue扩展如下（版本三的实现用上这个扩展会更简洁）（考虑性能请在此方法加缓存）：

 先执行，再分析：

 执行正确！ 版本四，8~17行用来层层获取属性。也不太复杂，不多作解释了。说明一下，版本四是不完善的，没有做太多处理。

 我们最后再来看一下更复杂的应用，Peoplee有Friends属性，这是一个集合属性，我们想获取朋友的个数，并列出朋友的名字，如下：

 注意，行4中的Count及Name前都加了个小点，表示是将集合进行操作，这个小点是我看着方便自己定义的。再来看实现代码，到版本五了：

 执行结果：

 比较不可思议吧，下面简单分析一下。行22~行33是对集合进行操作的相关处理，这里只是简单实现了Count，当然也可以实现Min、Max、Sum、Average等等。“.Name”这个表示方法不太好，这里主要是为了展示，大家能明白了就好。 

 就写到这里吧，版本六、版本七…后面还很多，当然一个比一个离奇，不再写了。给出五个版本，版本一存在问题，主要看后三个版本，给出多个版本 是为满足不同朋友的需要，一般来说版本三足够，对于要求比较高，追求新技术的朋友，我推荐版本四、五。要求更高的，就是没给出的六、七…了。

 ToString(string format)扩展带来便利性的同时，也会带来相应的性能损失，两者很难兼得。

 最后重申下，本系列文章，侧重想法，所给的代码仅供演示、参考，没有考虑性能、异常处理等，如需实际使用，请自行完善。 

 本人系列文章《c#扩展方法奇思妙用》，敬请关注！ 

      上一节已经学习了Google Map的基础。首先回顾一下上一节的基本内容
            地图对象的创建：var map = new GMap2(document.getElementById("map"));
            设置map的默认显示形式：map.setMapType(G_HYBRID_MAP);
            设置地图的位置（这是必须的）：map.setCenter(new GLatLng(22.4977,113.9208),19);
            添加一个信息窗口：map.openInfoWindowHtml(map.getCenter(),document.createTextNode("北科创业大厦"));
      以上内容都非常的简单，但是仅仅是显示了一张地图，非常单一。
      这一节，我们主要学习地图中的事件，并且通过事件做一些简单的交互。
  

Google Map的命名空间

      到现在大家可能已经发现了Google Map API中的类都带有一个大写字母G，G是Google Map API的顶级命名空间，它的原型是google.maps.*,比如GMap2也可以写成google.maps.Map2。
 
地图事件
      JavaScript是”事件驱动的“，也就是说JavaScript通过事件来响应交互。比如用户希望在某个DOM元素移动鼠标时，发生一 些什么，那么在这个DOM元素上移动鼠标就是一个事件，我们要做的就是监听这个事件，为这个事件注册监听器，也就是写一个监听函数，用户所希望的东西，我 们都可以在函数中进行表达。
      Google 地图 API 通过为地图 API 对象定义自定义事件而添加到此事件模型中。虽然不同浏览器中的DOM事件不同，但是Google Map API已经帮包含跨浏览器的机制，我们无需再因为用户使用不同浏览器而苦恼了。
 

注册事件监听器

      通过使用GEvent命名空间中的实用工具函数注册事件监听器，来处理Google Map API中的一些事件。每个对象都包含很多已有的事件，例如GMap2对象的click、dbclick事件。
      注册事件的方法很简单：GEvent.addListener(object,event,function)，三个参数分别对象，待监听事件，事件调用函数。例如：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://ditu.google.cn/maps?file=api&v=2">
    </script>
    <script type="text/javascript">
        function load() {
            if (GBrowserIsCompatible()) {
                var px = 30.6562;
                var py = 104.0639;
                var cx = px;
                var cy = py;
                var zoom = 12;
                var map = new GMap2(document.getElementById("map"));
                var point = new GLatLng(px, py);
                map.setCenter(point,zoom);
            }
            /**//*
            获得当前点击的地理坐标
            */
            GEvent.addListener(map, "click", function(marker, point) {
            if (point) {
            px = point.lat();
            py = point.lng();
            zoom = map.getZoom();
            document.getElementById("lat").value = px;
            document.getElementById("lng").value = py;           
            }
            });
            /**//*
            zoomend地图到达新的缩放级别时会触发此事件。事件处理程序接收先前的缩放级别和新缩放级别作为参数。
            */
            GEvent.addListener(map, "zoomend", function() {
                zoom = map.getZoom();
                //document.getElementById("zoom").value = zoom;
            });
            /**//*
            moveend结束地图视图的更改时会触发此事件。拖动或放大/缩小都会触发此事件
            */
            GEvent.addListener(map, "moveend", function() {
                var center = map.getCenter();
                cx = center.lat();
                cy = center.lng();
                document.getElementById("lat").value = cx;
                document.getElementById("lng").value = cy;
                document.getElementById("centerLat").value = cx;
                document.getElementById("centerLng").value = cy;
                document.getElementById("zoom").value = zoom;
            });
            document.getElementById("lat").value = px;
            document.getElementById("lng").value = py;
            document.getElementById("centerLat").value = cx;
            document.getElementById("centerLng").value = cy;
            document.getElementById("zoom").value = zoom;
        }
        window.onload = load;
    </script>
</head>
<body>
    <div>
    当前经度：<input type="text" id="lat"/><br />
    当前纬度：<input type="text" id="lng"/><br />
    中心经度：<input type="text" id="centerLat"/><br />
    中心纬度：<input type="text" id="centerLng"/><br />
    当前倍率：<input type="text" id="zoom"/>
    </div>
    <div style="width:500px; height:500px;" id="map"></div>
</body>
</html>

(如果在IE下出现GMap2未定义的错误，请刷新一遍，火狐下是正常的)
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAA35MvS7AnL0cjW_AmAJjW7BQQxUWGaJxgL6MJAQ51I1vKwWJYtxROqcWbldYkZFdMcEwKzaganeiujA"> </script> <script type="text/javascript"> function load() { if (GBrowserIsCompatible()) { var px = 30.6562; var py = 104.0639; var cx = px; var cy = py; var zoom = 12; var map = new GMap2(document.getElementById("map")); var point = new GLatLng(px, py); map.setCenter(point,zoom); } /* 获得当前点击的地理坐标 */ GEvent.addListener(map, "click", function(marker, point) { if (point) { px = point.lat(); py = point.lng(); zoom = map.getZoom(); document.getElementById("lat").value = px; document.getElementById("lng").value = py; } }); /* zoomend地图到达新的缩放级别时会触发此事件。事件处理程序接收先前的缩放级别和新缩放级别作为参数。 */ GEvent.addListener(map, "zoomend", function() { zoom = map.getZoom(); //document.getElementById("zoom").value = zoom; }); /* moveend结束地图视图的更改时会触发此事件。拖动或放大/缩小都会触发此事件 */ GEvent.addListener(map, "moveend", function() { var center = map.getCenter(); cx = center.lat(); cy = center.lng(); document.getElementById("lat").value = cx; document.getElementById("lng").value = cy; document.getElementById("centerLat").value = cx; document.getElementById("centerLng").value = cy; document.getElementById("zoom").value = zoom; }); document.getElementById("lat").value = px; document.getElementById("lng").value = py; document.getElementById("centerLat").value = cx; document.getElementById("centerLng").value = cy; document.getElementById("zoom").value = zoom; } window.onload = load; </script> </head> <body> <div> 当前经度：<input type="text" id="lat"/><br /> 当前纬度：<input type="text" id="lng"/><br /> 中心经度：<input type="text" id="centerLat"/><br /> 中心纬度：<input type="text" id="centerLng"/><br /> 当前倍率：<input type="text" id="zoom"/> </div> <div style="width:500px; height:500px;" id="map"></div> </body> </html>

将事件绑定到对象方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script type="text/javascript" src="http://ditu.google.cn/maps?file=api&v=2">
    </script>

    <script type="text/javascript">
        function MyApplication() {  
            this.counter = 0;  
            this.map = new GMap2(document.getElementById("map"));  
            this.map.setCenter(new GLatLng(39.9493, 116.3975), 13);  
            GEvent.bind(this.map, "click", this, this.onMapClick);
        }
        MyApplication.prototype.onMapClick = function() {
            this.counter++;
            alert("这是您第" + this.counter + " " + "次点击");
        }
        window.onload = function(){
            var application = new MyApplication();
        }
    </script>

</head>
<body>
    <div id="map" style="width:500px; height:500px;"></div>
</body>
</html>

(如果在IE下出现GMap2未定义的错误，请刷新一遍，火狐下是正常的)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAA35MvS7AnL0cjW_AmAJjW7BQQxUWGaJxgL6MJAQ51I1vKwWJYtxROqcWbldYkZFdMcEwKzaganeiujA"> </script> <script type="text/javascript"> function MyApplication() { this.counter = 0; this.map = new GMap2(document.getElementById("map")); this.map.setCenter(new GLatLng(39.9493, 116.3975), 13); GEvent.bind(this.map, "click", this, this.onMapClick); } MyApplication.prototype.onMapClick = function() { this.counter++; alert("这是您第" + this.counter + " " + "次点击"); } window.onload = function(){ var application = new MyApplication(); } </script> </head> <body> <div id="map" style="width:500px; height:500px;"></div> </body>

监听DOM事件

       Google地图API事件模型创建并管理自己的自定义事件。但是，DOM也会根据当前使用的特定浏览器事件模型创建和调度自己的事件。如果你希望捕获这 些事件，Google地图API提供的独立于浏览器的包装器可以监听和绑定DOM事件而不需要自定义代码。

      GEvent.addDomListener()方法为DOM节点上的DOM注册事件处理程序。同样，GEvent.bindDom()方法允许你给类实例上的DOM事件注册事件处理程序。

删除事件监听器  

      不再需要事件监听器时，应将其删除。甚至在事件只需触发一次的情况下，也可能需要删除。删除闭包内的匿名函数所定义的事件监听器可能很困难。但是，addListener()、addDomListener()、bind() 和 bindDom() 函数会返回 GEventListener 句柄，可用来最终取消注册处理程序。

      下面的示例通过在地图上放置标记来响应点击。任何后续点击都可删除事件监听器。请注意，这会导致不再执行 removeOverlay() 代码。另请注意，您甚至可以从事件监听器自身内部删除事件监听器。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://ditu.google.cn/maps?file=api&v=2">
    </script>
    <script type="text/javascript">
        function MyApplication(){
            this.counter = 0;
            this.map = new GMap2(document.getElementById("map"));  
            this.map.setCenter(new GLatLng(39.9493, 116.3975), 13);
            var myEventListener = GEvent.bind(this.map, "click", this, function(overlay, latlng) {    
                if (this.counter == 0) {      
                    if (latlng) {        
                    this.map.addOverlay(new GMarker(latlng))        
                    this.counter++;      
                    } 
                    else if (overlay instanceof GMarker) {        
                    this.removeOverlay(marker);      
                    }    
                } 
                else {      
                GEvent.removeListener(myEventListener);    
                }  
            }); 
        }
        window.onload = function(){
            var application = new MyApplication();
        }
    </script>
</head>
<body onunload = "GUnload()">
    <div id="map" style="width:500px; height:500px;">
    </div>
</body>
</html>

(如果在IE下出现GMap2未定义的错误，请刷新一遍，火狐下是正常的)

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="http://ditu.google.cn/maps?file=api&v=2&key=ABQIAAAA35MvS7AnL0cjW_AmAJjW7BQQxUWGaJxgL6MJAQ51I1vKwWJYtxROqcWbldYkZFdMcEwKzaganeiujA"> </script> <script type="text/javascript"> function MyApplication(){ this.counter = 0; this.map = new GMap2(document.getElementById("map")); this.map.setCenter(new GLatLng(39.9493, 116.3975), 13); var myEventListener = GEvent.bind(this.map, "click", this, function(overlay, latlng) { if (this.counter == 0) { if (latlng) { this.map.addOverlay(new GMarker(latlng)) this.counter++; } else if (overlay instanceof GMarker) { this.removeOverlay(marker); } } else { GEvent.removeListener(myEventListener); } }); } window.onload = function(){ var application = new MyApplication(); } </script> </head> <body onunload = "GUnload()"> <div id="map" style="width:500px; height:500px;"> </div> </body> </html>

Google地图API

1、 什么是Google地图API

　　Google地图API是一种通过JavaScript将Google地图嵌入到您的网页的API。它提供了很多处理地图的功能（类似网页http://ditu.google.cn/上的那些功能）和向地图添加内容的服务，让您能够在您的网站上创建功能全面的地图应用。

一个地图API密钥只对一个“目录”或域有效（你必须有Google 帐户才能获得地图API密钥，并且API密钥会和你的Google账户联系）。

2、 地图基础知识

Google地图的“Hello World”

开始学习Google地图API最简单的方式是看一个简单的示例。线面的网页显示以北京的故宫博物院为中心的500*500的地图。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GoogleMapDemo.aspx.cs" Inherits="GoogleMap.GoogleMapDemo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://ditu.google.cn/maps?file=api&amp;v=2&amp;key=abcdefg&sensor=true_or_false"
            type="text/javascript">
    </script>
     <script type="text/javascript">
        function intialize(){
            if(GBrowserIsCompatible()){
                var map = new GMap2(document.getElementById("map_canvas"));
                map.setCenter(new GLatLng(39.9493, 116.3975),13);
            }
        }
     </script>   
</head>
<body onload="intialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 500px; height: 500px;"></div>
</body>
</html>

即使在此简单的示例中，也需要注意五点：
        1、使用script标签包含Google地图API
        2、创建名为"map_canvas"的div元素来包含地图。
        3、编写JavaScript函数创建"map"对象。
        4、将地图的中心设置为制定的地理点。
        5、从body标签的onload事件初始化地图对象。

下面说明了这些步骤。
 

加载Google地图API

<script type="text/javascript"
src="http://ditu.google.cn/maps?file=api&amp;v=2&amp;key=abcdefg&sensor=true_or_false"> 
</script>
      http://ditu.google.cn/maps?file=api&v=2&key=abcdefg网址指向包含使用 Google 地图 API 所需所有符号和定义的 JavaScript 文件的位置。您的页面必须包含指向此网址的 script 标签，使用注册 API 时收到的密钥。在此示例中，该密钥显示为“abcdefg”。

    请注意，我们也传递 sensor 参数以指明此应用程序是否使用传感器来确定用户位置。在此示例中，我们将其设为变量“true_or_false”以强调您必须显式地将此值设置为 true 或 false。

地图DOM元素

<div id="map_canvas" style="width: 500px; height: 500px;"></div>

Gmap2-基本对象

var map = new GMap2(document.getElementById("map_canvas"));

Gmap2类是表示地图的JavaScript类。此类的对象在页面上定义单个地图。（可以创建此类的多个实例，每个对象将在页面上定义一个不同的地图。）

当创建新的地图实例时，在页面中指定一个DOM节点（通常是div元素）作为地图的容器，通过document.getElementById()方法获得该元素的引用。

构造函数

说明

GMap2(container, opts?)

在通常是一个 DIV 元素的指定 HTML container 内创建新地图。您也可以通过 opts 参数传递 GMap2Options 类型的可选参数

请注意因为JavaScript是松散型语言，我们可以不填写构造函数的任何可选参数。

初始化地图

map.setCenter(new GLatLng(39.9493, 116.3975),13);

通过Gmap2构造函数创建地图后，我们需要再做一件事：将其初始化。初始化通过地图的setCenter()方法完成。SetCenter()方法要求有GlatLng坐标和缩放级别，而且必须先发送此方法，然后再在地图上执行其他任何操作，包括设置地图本身的其他任何属性。

加载地图

<body onload="intialize()" onunload="GUnload()">

GUnload()函数是用来防止内存泄漏的实用工具函数。

经度和纬度

既然已经有地图了，我们还需要一种方法来引用地图上的位置。在Google地图API中，GLatLng对象提供了此类机制。可以构造一个GLatLng对象，按照制图学的惯例{经度，纬度}的顺序传递参数：

var myGeographicCoordinates = new GLatLng(myLatitude, myLongitude)

注意：将“地址”转变为地理点的过程称为“地址解析”。

就像它可用于轻松地引用地理点一样，它可用于对象的地理边界。例如，地图在称为视口的窗口内显示整个世界的当前“窗口”。此视口可以通过四个角上的巨型点来定义。GLatLngBounds对象提供了这个功能，通过使用分别表示边界框的西南角和东北角的两个GLatLng对象定义一个矩形区域的实现。 

GLatLng对象在Google地图API中用途广泛。例如，GMarker对象在其构造函数中具有GLatLng，并在地图上的制定地理位置放置标记叠加层。

下面的示例使用getBounds()放回当前视口，然后在地图上的这些边界内随机放置10个标记：
 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo2.aspx.cs" Inherits="GoogleMap.Demo2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>  
    <title>Demo2</title>
    <script type="text/javascript" src="http://maps.google.com/maps?file=api&v1=&key=abcdefg"></script>
    <script type="text/javascript">
        function initialize() {
      var map = new GMap2(document.getElementById("map_canvas"));
      map.setCenter(new GLatLng(39.9493, 116.3975), 13);
      // Add 10 markers to the map at random locations
      var bounds = map.getBounds();
      var southWest = bounds.getSouthWest();
      var northEast = bounds.getNorthEast();
      var lngSpan = northEast.lng() - southWest.lng();
      var latSpan = northEast.lat() - southWest.lat();
      for (var i = 0; i < 10; i++) {
        var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
            southWest.lng() + lngSpan * Math.random());
        map.addOverlay(new GMarker(point));
      }
    }
    </script>
</head>
<body onload="initialize()" onunload="GUnload()">
    <div style="width:500px; height:500px;" id="map_canvas">     
    </div>
</body>

   注意：有关 GMarker 对象的详细信息位于叠加层部分中。

地图属性

默认情况下，在Google地图API中，地图使用标准的“绘制”图块显示。但是，Google地图API也支持其他地图类型。以下是标准地图类型：

l G_NORMAL_MAP                   默认视图

l G_SATELLITE_MAP               显示Google地球卫星图像

l G_HYBRID_MAP                    混合显示普通视图和卫星视图

l G_DEFAULT_MAP_TYPES         这三个类型的数组，在需要重复处理的情况下非常有用

可以使用GMap2对象的setMapType()方法设置地图类型。例如，下面的代码将地图设置为使用Google地球的卫星视图：

var map =new GMap2(document.getElementById("map_canvas"));
map.setMapType(G_SATELLITE_MAP);

地图还包含对了解情况非常有用的大量属性。例如，要了解当前视口的尺寸，可使用GMap2对象的getBounds()方法来返回GLatLngBounds值。 

每个地图还包含一个“缩放级别”，用于定义当前视图的分辨率。在普通地图视图内，可以使用0（最低缩放级别，在都吐上可以看到整个世界）到19（最高缩放级别，可以看到独立建筑）之间的缩放级别。缩放级别因所查看地区而异，因为地球上某些地区的数据比其他地区更详细。在卫星视图中可以使用多达20个缩放级别。 

可以通过使用GMap2对象的getZoom()方法检索地图当前使用的缩放级别。

关于缩放级别、地图图块以及创建自己的自定义地图类型的更多信息，请参阅图块叠加层部分。

 
  地图交互

既然现在有了GMap2对象，就可以与之进行交互了。基本地图对象的外观和行为与您在Google地图网站上交互的地图非常相似，并带有大量的内置行为。GMap2对象还提供了大量配置方法来改变地图本身的行为。 

默认情况下，和在 http://ditu.google.cn 上一样，地图对象会对用户的活动做出反应。但您可以使用大量实用工具方法改变此行为。例如，GMap2.disableDragging() 方法禁止了点击并拖拽地图到新位置的功能。

您还可以通过编程与地图交互。GMap2 对象支持可以直接改变地图状态的大量方法。例如，setCenter()、panTo 和 zoomIn() 方法通过编程来操作地图，而不是通过用户交互来操作地图。

下面的示例显示一个地图，等待两秒钟，然后平移到新中心点。panTo 方法将地图中心设置在指定点处。如果指定点位于地图的可见部分，则地图会平稳地平移到该点，否则会跳至该点。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo3.aspx.cs" Inherits="GoogleMap.Demo3" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Demo3</title>
    <script type="text/javascript" src="http://ditu.google.cn/maps?file=api&amp;v=2&amp;key=abcdefg"></script>
    <script type="text/javascript">
    function initialize(){
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(39.9493, 116.3975), 19);
        window.setTimeout(function(){
            map.panTo(new GLatLng(39.927, 116.407));
        },2000);
    }
    </script>
</head>
<body onload = "initialize()" onunload = "GUnload()">
    <div id="map_canvas" style="width:500px; height:500px;">
    </div>
</body>
</html>

  信息窗口

所有使用Google 地图API的地图都有可能显示类型为GInfoWindow的单个”信息窗口”，该窗口上地图上端以浮动窗口显示HTML内容。信息窗口有点像漫画书上的文字气球；它有一个内容区域的锥形引线，引线的头在地图的指定地点上。点击Google地图上的标记可以看到活动的信息窗口。 

GInfoWindow对象没有构造函数。当创建地图时，会自动创建一个信息窗口并将其附加到地图上。对于指定的地图，一次不能显示多个信息窗口，但可以移动信息窗口并可以改变其内容（如果需要）。

GMap2对象提供了openInfoWindow()方法，该方法将一个节点和一个HTML DOM元素作为参数。HTML DOM元素附加到信息窗口容器中，信息窗口的尖端固定在制定点上。

GMap2的openInfoWindowHtml()方法相似，但是它使用HTML字符串最为其第二个参数而不是DOM元素。

要创建信息窗口，请调用openInfoWindow方法，并向其传递位置和要显示的DOM元素。下面的示例代码显示了一个信息窗口，该窗口锚定在地图中心，内容为一条简单消息”Hello,  world”。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Demo4.aspx.cs" Inherits="GoogleMap.Demo4" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Demo4</title>
    <script type="text/javascript" src="http://ditu.google.cn/maps?file=api&amp;v=2&amp;key=abcdefg"></script>
    <script type="text/javascript">
    function initialize(){
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(39.9493, 116.3975), 13);
        map.openInfoWindow(map.getCenter(),
        document.createTextNode("Hello, world"));
    }
    </script>
</head>
<body onload = "initialize()" onunload = "GUnload()">
    <div id="map_canvas" style="width:500px; height:500px;">   
    </div>
</body>
</html>

效果如图： 

关于JQuery Tab插件，比较流行的是JQuery UI Tabs，最近此插件也已经有了更新,地址为http://stilbuero.de/jquery/tabs_3/ ，目前国内很多网站也在使用此插件，希望大家有时间了试用一下。

今天突然发现了一个更加轻量级的，功能更加丰富的 jQuery Tab插件。先展示一下其功能；

1、简单配置一下就可以实现如下效果：

http://flowplayer.org/tools/demos/tabs/index.html

2、扩展CSS样式就可以定做自己的tabs

/* alternate colors: skin2 */ 
ul.skin2 a { 
    background-color:#89a;         
    color:#fff !important; 
} 
 
/* mouSEOver state */ 
ul.skin2 a:hover { 
    background-color:#678; 
} 
 
/* active tab */ 
ul.skin2 a.current { 
    background-color:#4F5C6A; 
    border-bottom:2px solid #4F5C6A;     
} 
 
/* tab pane with background gradient */ 
div.skin2 div { 
    color:#fff; 
    background:#234 url(/img/global/gradient/h300.png) repeat-x scroll 0 -50px; 
    min-height:200px; 
}

效果如下：

http://flowplayer.org/tools/demos/tabs/skins.html

3、只是浏览器的【前进】和【后退】

Code
$(function() {     $("ul.css-tabs").tabs("div.css-panes > div", {history: true}); });

效果如下：

http://flowplayer.org/tools/demos/tabs/history.html

4.通过Ajax调用每个Tab的内容，只有第一次点击Tab按钮的时候 调用Tab页内容

使用非常简单，效果如下：

http://flowplayer.org/tools/demos/tabs/ajax.html

5、Tab向导，比如形成购物车订单过程

完善个人信息->修改购物车商品->查看订单

效果如下：http://flowplayer.org/tools/demos/tabs/wizard.html

此种功能特别有用。

6、其他的还有手风琴效果，自己发掘吧，显示地址如下：

http://flowplayer.org/tools/demos/tabs/accordion-horizontal.html

此插件的下载地址如下：

http://flowplayer.org/tools/download.html

jQuery.tools.min.js是一个UI功能包，还包括其他的一个UI特效

Tooltip ：很不错的提示功能插件

Scrollable ：滚动效果插件

Overlay ：很好用的遮罩层插件

Expose ：背景变暗效果

第一部分：预备知识—-认识itemRenderer

Code
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Script>
        <![CDATA[
            [Bindable]
    public var bookInfo:XML=
            <books>
                <book>
                    <name>手到病自除</name>
                    <price>20.10</price>
                    <writer>杨奕</writer>
                    <image>bookpic/sdbzc.jpg</image>
                    <instore>yes</instore>
                </book>
                <book>
                    <name>好妈妈胜过好老师</name>
                    <price>17.30</price>
                    <writer>尹建莉</writer>
                    <image>bookpic/hmmsghls.jpg</image>
                    <instore>yes</instore>
                </book>
                <book>
                    <name>货币战争</name>
                    <price>26.90</price>
                    <writer>宋鸿兵</writer>
                    <image>bookpic/hbzz.jpg</image>
                    <instore>no</instore>
                </book>
                <book>
                    <name>不抱怨的世界</name>
                    <price>15.4</price>
                    <writer>鲍温</writer>
                    <image>bookpic/bbydsj.jpg</image>
                    <instore>yes</instore>
                </book>
                <book>
                    <name>历史是个什么玩意儿</name>
                    <price>19.60</price>
                    <writer>袁腾飞</writer>
                    <image>bookpic/lsssmwy.jpg</image>
                    <instore>yes</instore>
                </book>
                <book>
                    <name>不生病的智慧</name>
                    <price>17.20</price>
                    <writer>马悦凌</writer>
                    <image>bookpic/bsbdzh.jpg</image>
                    <instore>no</instore>
                </book>
            </books>
        ]]>
    </mx:Script>
    <mx:TileList dataProvider="{bookInfo.book}" width="600" height="600" variableRowHeight="true" x="100" y="0">
        <mx:itemRenderer>
            <mx:Component>
            <mx:VBox width="150" height="200" horizontalAlign="center">
                <mx:Image source="{data.image}"/>
                <mx:Label text="{data.name}"/>
                <mx:Button label="buy"/>
            </mx:VBox>    
            </mx:Component>
        </mx:itemRenderer>
    </mx:TileList>
</mx:Application

Code
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" verticalAlign="top">
    <mx:Image source="{data.image}"/>
    <mx:VBox width="100%" height="100%">
        <mx:Label text="{data.name}"/>
        <mx:Label text="{data.price}"/>
        <mx:Button label="buy"/>
    </mx:VBox>
</mx:HBox

Code
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" verticalAlign="top">
<mx:Script>
    <![CDATA[
        [Bindable]
        private var standardPrice:String;
        override public function set data(value:Object):void{
            super.data=value;
            standardPrice=cf.format(Number(data.price));
        }
    ]]>
</mx:Script>
    <mx:Image source="{data.image}"/>
    <mx:VBox width="100%" height="100%">
        <mx:Label text="{data.name}"/>
        <mx:Label text="{standardPrice}"/>
        <mx:Button label="buy"/>
    </mx:VBox>
    <mx:CurrencyFormatter id="cf"/>
</mx:HBox>

Code
package events
{
    import flash.events.Event;
    public class BuyBookEvent extends Event
    {
        public var bookData:Object;
        public function BuyBookEvent(bookData:Object,type:String)
        {
            super(type);
            this.bookData=bookData;
        }
        override public function clone():Event{
            return new BuyBookEvent(bookData,type);
        }
        
    }

Code
package
{
    import events.BuyBookEvent;
    
    import mx.controls.TileList;
    [Event(name="buyBook",type="events.BuyBookEvent")]
    public class MyTileList extends TileList
    {
        public function MyTileList()
        {
            super();
        }
        private var _criteria:int=10;
        public function set criteria(value:int):void{
            _criteria=value;
            invalidateList();
        }
        public function get criteria():int{
            return _criteria;
        }
        public function disPatchBookEvent(bookData:Object):void{
            var e:BuyBookEvent=new BuyBookEvent(bookData,"buyBook");
            this.dispatchEvent(e);
        }
        
    }

Code
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" verticalAlign="top" 
    implements="mx.controls.listClasses.IDropInListItemRenderer">
<mx:Script>
    <![CDATA[
        import mx.controls.listClasses.BaseListData;
        [Bindable]
        private var standardPrice:String;
        override public function set data(value:Object):void{
            super.data=value;
            standardPrice=cf.format(Number(data.price));
        }
        private var _listData:BaseListData;
        public function get listData() : BaseListData
        {
            return _listData;
        }
        public function set listData( value:BaseListData ) : void
        {
               _listData = value;
        }
        
    ]]>
</mx:Script>
    <mx:Image source="{data.image}"/>
    <mx:VBox width="100%" height="100%">
        <mx:Label text="{data.name}"/>
        <mx:Label text="{standardPrice}"/>
        <mx:Button label="buy"/>
    </mx:VBox>
    <mx:CurrencyFormatter id="cf"/>
</mx:HBox