BlogJava-wayne's space-文章分类-JavaScript

加入Google Maps到你的网站

wayne woo — Sat, 03 Dec 2011 14:02:00 GMT

1.引入Google Maps的外部Javascript文件：

1 <script src="http://maps.google.com/maps/api/js?sensor=false">script>

2.引入JQuery文件：

1 <script src="js/jquery-1.6.3.min.js">script>
2 <script src="js/jquery.gomap-1.3.2.min.js">script>

3.在网页中加入

对，作为Maps的容器:

1 <div id="map">
2
3 div>

并通过CSS设置其大小等属性：

1 #map{
2 width: 760px;
3 height: 400px;
4 }

4.调用goMap插件的goMap()函数：

1 $(document).ready(function() {
2 $('#map').goMap();
3 });

接下来就是一些设置地图center point之类的事了，使用latitude和longitude来设置当前地图所指向的区域：

1 $(document).ready(function() {
2    $('#map').goMap({
3    latitude : 45.53940,
4   longitude : -122.59025
5   }); // end goMap
6  }); // end ready

关于latitude和longitude可以进入此网站：http://itouchmap.com/latlong.html 在搜索框中输入你想要定位的地址，然后点击”Go”按钮，就会出现相应的值。
当然，goMap()函数同样可以直接使用地址来定位：

1 $('#map').goMap({
2 address : '某某地址'
3 }); // end goMap

也可以设定缩放级别：

1  $('map').goMap({
2       zoom:15
3     });

一些常用的设置选项：

maptype: 'TERRAIN'

scaleControl : true

navigationControl : false

navigationControl: false

scrollwheel: false

disableDoubleClickZoom: true

mapTypeControl : false

...

5.增加标记(Marker)：

1 $('#map').goMap({
2     markers : [
3   {
4     latitude : 45.53940,
5     longitude : -122.59025,
6     title : 'Marker 1'
7   }
8 ]
9 }); // end goMap

如果你想动态的添加标记，则可以使用如下方法：

1 $.goMap.createMarker({
2      latitude : 45.53940,
3      longitude : -122.59025,
4      title : 'Marker 1'
5 });

相反的使用：$.goMap.clearMarkers()或者

$.goMap.removeMarker('marker1') 来去掉标记。

wayne woo 2011-12-03 22:02 发表评论

JQuery的常用函数

wayne woo — Fri, 02 Dec 2011 16:05:00 GMT

JQuery函数众多，避免学过又忘记，慢慢积累，慢慢更新：

1.prepend(): 在element的开始位置加入内容

1  function processData(data){
2      if(data == 'pass'){
3       $('#content').html('

You have successfully logged on!

');
4 }else{
5 $('#formwrapper').prepend('Incorrect login information. Please try again

');
6 }}
7 }

2.$.getJSON():获取JSon对象，语法$.getJSON('xxx.php',data,callback);

1 $.getJSON('contacts.php','limit=2',processContacts);
2 function processContacts(data){
3    var infoHTML = '';
4    //loop through each object in the JSON data
5    $.each(data,function(contact,contactInfo){
6      infoHTML += '

Contact: ' + contactInfo.firstName;
7 infoHTML += ' ' + contactInfo.lastName + '';
8 infoHTML += 'Phone: ' + contactInfo.phone + '

';
9 });
10
11 $('#info').html(infoHTML);

wayne woo 2011-12-03 00:05 发表评论

JQuery get()与post()

wayne woo — Fri, 02 Dec 2011 15:40:00 GMT

JQuery中Ajax交互主要是使用两个函数：get()与post()，即对应的Get和Post请求。
先说get()函数，通常情况下，这个函数有三个参数：1.请求URL 2.数据 3.处理函数，即：get('xxx.php',formData,processData);
接下来说说formData，显然，data不可能总是一个简单的key-value，很可能是一个表单中的一组数据，这是JQuery也提供了一个很方便的函数：var formData = $(this).serialize();
然后，在处理函数中，processData有两个参数：1.数据 2.状态(success,error) 即 processData(formData,status);

post()方法和get()方法在语法上大致相同，而他们的区别就在于Get请求和Post请求本质上的区别，而对两者的使用也是根据具体情况和两者的本质来取舍。

wayne woo 2011-12-02 23:40 发表评论

JQuery Ajax读取Server传回的XML格式内容

wayne woo — Fri, 02 Dec 2011 15:16:00 GMT

用JQuery可以很简单的使用Ajax技术，其中处理Server传回的XML格式数据也只需要很简单的代码：
比如，Server传回的内容为：

1 xml version="1.0" ?>
2 <message id="234">
3 <from>Bobfrom>
4 <to>Janetteto>
5 <subject>Hi Janettesubject>
6 <content>Janette, let's grab lunch today.
7 content>
8 message>

则，JQuery的处理方式简单的来说可以像下面这样（使用find('xxx').text()来获取想要取得的部分内容）：

1 $.get('xml.php','id=234',processXML);
2 function processXML(data) {
3 var messageContent=$(data).
4 find(‘content’).text();
5 }

加入处理错误函数： $.get('xml.php','id=234',processXML).error(errorResponse); function errorResponse(){};

wayne woo 2011-12-02 23:16 发表评论

Improve your Images

wayne woo — Thu, 01 Dec 2011 12:11:00 GMT

1.Preloading your Images(预加载图片):

在相应一个action时，大多数人肯定是希望图片立即显示的，为了避免延迟，预加载必不可少:

var preloadImages = ['images/roll.png',
2                       'images/flower.png',
3                       'images/cat.jpg'];
4   var imgs = [];
5   for (var i=0; i<preloadImages.length;i++) {
6     imgs[i] = new Image();
7     imgs[i].src = preloadImages[i];
8   }

记录一下，方便以后查找。

wayne woo 2011-12-01 20:11 发表评论