大蕉 » jquery http://daozhao.goflytoday.com 大蕉，一种有益的水果。不过本blog并不是介绍大蕉。哈哈 Tue, 31 Jan 2012 12:56:43 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 jqtouch使用和bug http://daozhao.goflytoday.com/2010/01/jqtouch-use-and-bug/ http://daozhao.goflytoday.com/2010/01/jqtouch-use-and-bug/#comments Wed, 06 Jan 2010 07:33:41 +0000 admin http://daozhao.goflytoday.com/?p=698 发现了一个非常好的jQuery插件jQTouch。这个插件是帮助你方便开发iphone上的浏览器上的web程序。使它的操作像原生的Iphone程序有良好的界面和操作交互。

我使用了他帮朋友搞左个应用，你可以使用iphone或者ipod touch访问 http://www.goflytoday.com 就可以访问到该应用了。如果你没有iphone的话，可以使用Apple Safari浏览器去访问这个网址体验一下效果，其效果基本和iphone差不多，只是有小许细节不一样(google android的手机都可以，我用hero试过，速度比较慢)。其他浏览器就不行。

我使用的是jqtouch-1.0-beta-2-r109.zip这个版本。发现有一个bug。这个bug主要表现是当列表跳转的链接为空的时候，用户点击该链接的时候，连接会成另外一种状态后不会自动恢复原来的状态。

这个bug位于函数 showPageByHref。原来函数写法如下：

function showPageByHref(href, options) {
            var defaults = {
                data: null,
                method: 'GET',
                animation: null,
                callback: null,
                $referrer: null
            };
 
            var settings = $.extend({}, defaults, options);
 
            if (href != '#')
            {
                $.ajax({
                    url: href,
                    data: settings.data,
                    type: settings.method,
                    success: function (data, textStatus) {
                        var firstPage = insertPages(data, settings.animation);
                        if (firstPage)
                        {
                            if (settings.method == 'GET' && jQTSettings.cacheGetRequests && settings.$referrer)
                            {
                                settings.$referrer.attr('href', '#' + firstPage.attr('id'));
                            }
                            if (settings.callback) {
                                settings.callback(true);
                            }
                        }
                    },
                    error: function (data) {
                        if (settings.$referrer) settings.$referrer.unselect();
                        if (settings.callback) {
                            settings.callback(false);
                        }
                    }
                });
            }
            else if ($referrer)
            {
                $referrer.unselect();
            }
        }

需要把把第463行修改成下边的写法就可以了。

            else if (settings.$referrer)
            {
                settings.$referrer.unselect();
            }

这个bug已经向作者反映了。作者告诉我svn最新的版本已经把这个错误修改了。

请看看相关文章

Bookmark and Share
]]> http://daozhao.goflytoday.com/2010/01/jqtouch-use-and-bug/feed/ 2 Dynamically loading Google Maps API V3 by JQuery http://daozhao.goflytoday.com/2009/11/dynamically-loading-google-maps-api-v3-by-jquery/ http://daozhao.goflytoday.com/2009/11/dynamically-loading-google-maps-api-v3-by-jquery/#comments Wed, 25 Nov 2009 10:26:20 +0000 admin http://daozhao.goflytoday.com/?p=663 发觉google的一些应用的javascript接口API的的js文件下载有时候会比较慢，会影响网站的加载。好像Google Map API v3的js下载经常都比较慢，影响整体网页的显示效果。所以今天特别研究动态载入javascript文件。网上搜索了一下，无非都是那几个方法。不过我发现JQuery本身就自带一个动态下载javascript文件的函数，无需用一些插件。
jQuery.getScript( url, [callback] ) 官方说明

非常容易加重js文件，1.2版本之后就可以支持跨域下载javascript文件。

于是我就用了动态加载Google Map API v3的javascripte文件。

1
2
3

$.getScript("http://maps.google.com/maps/api/js?sensor=false",function(){
alert("Script loaded and executed.");
});

虽然显示了警告信息”Script loaded and executed.”， 页面变成了空白页面了，真是不解。开始怀疑JQuery的.getScript的问题，于是试了官方的示范例子，并没有问题。于是修改官方例子动态下载google map api的js。同样页面也变成了空白页。

估计应该是google map api v3的api问题，观看了http://maps.google.com/maps/api/js?sensor=false的源代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

window.google = window.google || {};
google.maps = google.maps || {};
(function() {
 
  function getScript(src) {
    document.write('<' + 'script src="' + src + '"' +
                   ' type="text/javascript"><' + '/script>');
  }
 
  google.maps.Load = function(apiLoad) {
    apiLoad([,[[["http://mt0.google.com/vt/v=ap.114&hl=zh-CN&","http://mt1.google.com/vt/v=ap.114&hl=zh-CN&","http://mt2.google.com/vt/v=ap.114&hl=zh-CN&","http://mt3.google.com/vt/v=ap.114&hl=zh-CN&"],,"ap.114"],[["http://khm0.google.com/kh/v=49&hl=zh-CN&","http://khm1.google.com/kh/v=49&hl=zh-CN&","http://khm2.google.com/kh/v=49&hl=zh-CN&","http://khm3.google.com/kh/v=49&hl=zh-CN&"],,"49"],[["http://mt0.google.com/vt/v=apt.114&hl=zh-CN&imgtp=png32&","http://mt1.google.com/vt/v=apt.114&hl=zh-CN&imgtp=png32&","http://mt2.google.com/vt/v=apt.114&hl=zh-CN&imgtp=png32&","http://mt3.google.com/vt/v=apt.114&hl=zh-CN&imgtp=png32&"],,"apt.114"],[["http://mt0.google.com/vt/v=app.114&hl=zh-CN&","http://mt1.google.com/vt/v=app.114&hl=zh-CN&","http://mt2.google.com/vt/v=app.114&hl=zh-CN&","http://mt3.google.com/vt/v=app.114&hl=zh-CN&"],,"app.114"],"fzwq1Ofu9DMOwRrfzS_9mNjD8hXvTS89l593ng",[[,0,7,7,[[[330000000,1246050000],[386200000,1293600000]],[[366500000,1297000000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&"],,,,"http://www.gmaptiles.co.kr/mapprint"],[,0,8,9,[[[330000000,1246050000],[386200000,1279600000]],[[345000000,1279600000],[386200000,1286700000]],[[348900000,1286700000],[386200000,1293600000]],[[354690000,1293600000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&"],,,,"http://www.gmaptiles.co.kr/mapprint"],[,0,10,18,[[[329890840,1246055600],[386930130,1284960940]],[[344646740,1284960940],[386930130,1288476560]],[[350277470,1288476560],[386930130,1310531620]],[[370277730,1310531620],[386930130,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1.11&hl=zh-CN&"],,,,"http://www.gmaptiles.co.kr/mapprint"],[,3,7,7,[[[330000000,1246050000],[386200000,1293600000]],[[366500000,1297000000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&"]],[,3,8,9,[[[330000000,1246050000],[386200000,1279600000]],[[345000000,1279600000],[386200000,1286700000]],[[348900000,1286700000],[386200000,1293600000]],[[354690000,1293600000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&"]],[,3,10,,[[[329890840,1246055600],[386930130,1284960940]],[[344646740,1284960940],[386930130,1288476560]],[[350277470,1288476560],[386930130,1310531620]],[[370277730,1310531620],[386930130,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt1.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt2.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&","http://mt3.gmaptiles.co.kr/mt/v=kr1p.11&hl=zh-CN&"]]]],["zh-CN","US","google.com",,,"http://google.com/maps","http://maps.gstatic.com/intl/zh_cn/mapfiles/","http://gg.google.com"],["http://maps.gstatic.com/intl/zh_cn/mapfiles/api-3/22a"],[686055407],1], loadScriptTime);
 
  };
  var loadScriptTime = (new Date).getTime();
  getScript("http://maps.gstatic.com/intl/zh_cn/mapfiles/api-3/22a/main.js");
})();

请看getScript()函数，函数内用了document.write来再次插入javascript文件。就是这里搞到页面空白一片。上网搜索了一下解决方法：
在下班的的两个连接内找到了方法
http://august.lilleaas.net/unobtrusive_google_maps_with_jquery
http://code.google.com/intl/zh-CN/apis/maps/articles/static+js.html

原来需要动态加载google map api的时候需要在请求js文件的时候加回调函数作为参数。请求应该是：http://maps.google.com/maps/api/js?sensor=false&callback=map_init
这样请求的时候返回的javascript与原来的是不同的。请留意下边的代码 getScript的函数不再使用document.write了。而且在javascript下载完成后会自动调用map_init()函数，需要自己写一个map_init()函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

window.google = window.google || {};
google.maps = google.maps || {};
(function() {
 
  function getScript(src) {
    var s = document.createElement('script');
 
    s.src = src;
    document.body.appendChild(s);
  }
 
  google.maps.Load = function(apiLoad) {
    apiLoad([,[[["http://mt0.google.com/vt/v=ap.114&amp;hl=zh-CN&amp;","http://mt1.google.com/vt/v=ap.114&amp;hl=zh-CN&amp;","http://mt2.google.com/vt/v=ap.114&amp;hl=zh-CN&amp;","http://mt3.google.com/vt/v=ap.114&amp;hl=zh-CN&amp;"],,"ap.114"],[["http://khm0.google.com/kh/v=49&amp;hl=zh-CN&amp;","http://khm1.google.com/kh/v=49&amp;hl=zh-CN&amp;","http://khm2.google.com/kh/v=49&amp;hl=zh-CN&amp;","http://khm3.google.com/kh/v=49&amp;hl=zh-CN&amp;"],,"49"],[["http://mt0.google.com/vt/v=apt.114&amp;hl=zh-CN&amp;imgtp=png32&amp;","http://mt1.google.com/vt/v=apt.114&amp;hl=zh-CN&amp;imgtp=png32&amp;","http://mt2.google.com/vt/v=apt.114&amp;hl=zh-CN&amp;imgtp=png32&amp;","http://mt3.google.com/vt/v=apt.114&amp;hl=zh-CN&amp;imgtp=png32&amp;"],,"apt.114"],[["http://mt0.google.com/vt/v=app.114&amp;hl=zh-CN&amp;","http://mt1.google.com/vt/v=app.114&amp;hl=zh-CN&amp;","http://mt2.google.com/vt/v=app.114&amp;hl=zh-CN&amp;","http://mt3.google.com/vt/v=app.114&amp;hl=zh-CN&amp;"],,"app.114"],"fzwq2i5W0_vw_-9fFuwYnxkPJjzoLw6PvDzbBw",[[,0,7,7,[[[330000000,1246050000],[386200000,1293600000]],[[366500000,1297000000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1.11&amp;hl=zh-CN&amp;","http://mt1.gmaptiles.co.kr/mt/v=kr1.11&amp;hl=zh-CN&amp;","http://mt2.gmaptiles.co.kr/mt/v=kr1.11&amp;hl=zh-CN&amp;","http://mt3.gmaptiles.co.kr/mt/v=kr1.11&amp;hl=zh-CN&amp;"],,,,"http://www.gmaptiles.co.kr/mapprint"],[,0,8,9,[[[330000000,1246050000],[386200000,1279600000]],[[345000000,1279600000],[386200000,1286700000]],[[348900000,1286700000],[386200000,1293600000]],[[354690000,1293600000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1.11&amp;hl=zh-CN&amp;","http://mt1.gmaptiles.co.kr/mt/v=kr1.11&amp;hl=zh-CN&amp;","http://mt2.gmaptiles.co.kr/mt/v=kr1.11&amp;hl=zh-CN&amp;","http://mt3.gmaptiles.co.kr/mt/v=kr1.11&amp;hl=zh-CN&amp;"],,,,"http://www.gmaptiles.co.kr/mapprint"],[,0,10,18,[[[329890840,1246055600],[386930130,1284960940]],[[344646740,1284960940],[386930130,1288476560]],[[350277470,1288476560],[386930130,1310531620]],[[370277730,1310531620],[386930130,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1.11&amp;hl=zh-CN&amp;","http://mt1.gmaptiles.co.kr/mt/v=kr1.11&amp;hl=zh-CN&amp;","http://mt2.gmaptiles.co.kr/mt/v=kr1.11&amp;hl=zh-CN&amp;","http://mt3.gmaptiles.co.kr/mt/v=kr1.11&amp;hl=zh-CN&amp;"],,,,"http://www.gmaptiles.co.kr/mapprint"],[,3,7,7,[[[330000000,1246050000],[386200000,1293600000]],[[366500000,1297000000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1p.11&amp;hl=zh-CN&amp;","http://mt1.gmaptiles.co.kr/mt/v=kr1p.11&amp;hl=zh-CN&amp;","http://mt2.gmaptiles.co.kr/mt/v=kr1p.11&amp;hl=zh-CN&amp;","http://mt3.gmaptiles.co.kr/mt/v=kr1p.11&amp;hl=zh-CN&amp;"]],[,3,8,9,[[[330000000,1246050000],[386200000,1279600000]],[[345000000,1279600000],[386200000,1286700000]],[[348900000,1286700000],[386200000,1293600000]],[[354690000,1293600000],[386200000,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1p.11&amp;hl=zh-CN&amp;","http://mt1.gmaptiles.co.kr/mt/v=kr1p.11&amp;hl=zh-CN&amp;","http://mt2.gmaptiles.co.kr/mt/v=kr1p.11&amp;hl=zh-CN&amp;","http://mt3.gmaptiles.co.kr/mt/v=kr1p.11&amp;hl=zh-CN&amp;"]],[,3,10,,[[[329890840,1246055600],[386930130,1284960940]],[[344646740,1284960940],[386930130,1288476560]],[[350277470,1288476560],[386930130,1310531620]],[[370277730,1310531620],[386930130,1320034790]]],["http://mt0.gmaptiles.co.kr/mt/v=kr1p.11&amp;hl=zh-CN&amp;","http://mt1.gmaptiles.co.kr/mt/v=kr1p.11&amp;hl=zh-CN&amp;","http://mt2.gmaptiles.co.kr/mt/v=kr1p.11&amp;hl=zh-CN&amp;","http://mt3.gmaptiles.co.kr/mt/v=kr1p.11&amp;hl=zh-CN&amp;"]]]],["zh-CN","US","google.com",,,"http://google.com/maps","http://maps.gstatic.com/intl/zh_cn/mapfiles/","http://gg.google.com"],["http://maps.gstatic.com/intl/zh_cn/mapfiles/api-3/22a"],[4126402443],1], loadScriptTime);
 
    map_init();
  };
  var loadScriptTime = (new Date).getTime();
  getScript("http://maps.gstatic.com/intl/zh_cn/mapfiles/api-3/22a/main.js");
})();

这样就可以成功使用$.getScript动态加载google map api V3的javascript了。

1
2
3
4
5

function map_init()
{
    alert("Script loaded and executed.");
}
$.getScript("http://maps.google.com/maps/api/js?sensor=false&callback=map_init");

请看看相关文章

Bookmark and Share
]]> http://daozhao.goflytoday.com/2009/11/dynamically-loading-google-maps-api-v3-by-jquery/feed/ 0 jquery-ui-1.7.1 new tabs and close tabs by self http://daozhao.goflytoday.com/2009/04/jquery-ui-close-tabs-by-self/ http://daozhao.goflytoday.com/2009/04/jquery-ui-close-tabs-by-self/#comments Tue, 07 Apr 2009 07:49:27 +0000 admin http://daozhao.goflytoday.com/?p=196 最近研究jquery-ui-1.7.1的tabs的使用。之前都有用开ext的tabs的。由于觉得ext的库比较大，而且我不需要ext那么强大的库。我需要简单好用够用就可以了。jquery和它的ui库比较适合我的需求。但是jquery ui的tabs库从开始追踪到现在。tabs的控件都没带上自动关闭按钮。虽然新的api中有remove事件和方法。经过一番研究。经过tabs自身的一些api进行了定制，实现带有关闭按钮的tabs的控件。
思路大概如下：
tabs的有一个属性tabTemplate是设置tab标签头的模板的。在模板中增加一个关闭按钮。然后在tabs的添加（add）的事件中增加该按钮的事件，在事件中关闭本tabs标签。

下边是两个sample测试文件,把文件复制到jquery-ui-1.7.1的示范目录中运行。
test.htm file

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>daozaho jQuery UI Example</title>
		<link type="text/css" href="css/smoothness/jquery-ui-1.7.1.custom.css" rel="stylesheet"/>		
		<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
		<script type="text/javascript" src="test2.js"></script>
		<style>
		.tab-close{ position: relative ; float: left}
		</style>
	</head>
	<body>
 
		<div id="demoHeader"> 
			<h1>Welcome to jQuery UI--Tabs(close by self).</h1>
			<p>Author:daozhao. blog: <a href="http://daozhao.goflytodya.com">daozhao.goflytoday.com</a></p>
			<a id="add" href="#">Add new tabs</a><br>
			<div id="tabs">
				<ul>
					<li><a href="#tabs-1">aaaaaaaaa</a></li>
					<li><a href="#tabs-2">bbbbb</a></li>
					<li><a href="#tabs-3">ccccccccc</a></li>
				</ul>
				<div id="tabs-1">
					aaaaaaaaaaaaaaaaaaaaa
				</div>
				<div id="tabs-2">
					bbbbbbbbbbbbbbbbbbbbbbbbbbbbb
				</div>
				<div id="tabs-3">
					cccccccccccccccccccccccccccc
				</div>
			</div>
		</div>
 
	</body>
</html>

6-7行的css文件和js文件根据自己的测试环境更改。
11行css代码是修正关闭按钮在firefox的显示效果的。ie和chrome浏览器有没有这个css都可以。

test.js 文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

$(function(){
tabid = 1;
tab = $('#tabs').tabs(
		{add: function(event, ui) {
			   $(ui.tab.nextSibling).click(function(){
					var li = $(this).parent();
					var index = $('#tabs li').index(li.get(0));
                                        if(confirm('Are you sure to close "' + li.text() + '" tab?'))
                                        {
						tab.tabs("remove",index );
                                        }
                                        else
                                        {
                    	                     return false;
                                        }
                                        return true;
				});
			 }
		,tabTemplate: '
	<li><a href="#{href}"><span>#{label}</span></a></li>
'
		});
 
$('#add').click(function(){
		tab.tabs("add","#newtab"+tabid,"new tab "+tabid);
		$("#newtab" + tabid ).html("new tabs content tabid:"+tabid);
		tabid++;
	});
 
});

第5行的$(ui.tab.nextSibling)代码是根据tabTemplate的html代码来定的，这个示范例子ui.tab.nextSibling就是代表关闭按钮。如果你的tabTemplate和我的不一样，就需要修改这个，但是不要修改成$(“.tab-close”)，这样的话有一个bug.
你不信，可以修改成下边的代码。

3
4
5
6
7
8
9
10
11
12
13
14

       tab = $('#tabs').tabs(
		{add: function(event, ui) {
			   $(".tab-close").click(function(){
					var li = $(this).parent();
					alert(li.text() + " close button is click");
                    return true;
				});
			 }
		,tabTemplate: '
	<li><a href="#{href}"><span>#{label}</span></a></li>
'
		});

你测试的时候，在网页上点击多几次增加按钮。然后点击每一个tab的关闭按钮。你就知道有什么bug了。

你会发现点击一次tab的关闭按钮，但是会出现几次的alert对话框。最早添加的tab会出现最多次数的alert对话框。最后添加的tab只会出现一次。

请看看相关文章

Bookmark and Share
]]> http://daozhao.goflytoday.com/2009/04/jquery-ui-close-tabs-by-self/feed/ 1