顯示具有 [程式設計]--Jquery 標籤的文章。 顯示所有文章
顯示具有 [程式設計]--Jquery 標籤的文章。 顯示所有文章

2009年7月9日 星期四

Jquery livequery應用

我覺得livequery是Jquery的外掛中,最值得使用的一個外掛,
有了livequery,我們可以在DOM元件尚未生成之前就先將其綁定,
這樣就可以操作"未來的DOM元件",
對於常常使用Ajax動態載入頁面的朋友,
無疑是一項很重要的工具。

在底下這個範例中可以清楚的知道livequery的優點:

http://www.cssrain.cn/article.asp?id=964


不過如果是要操作未來的未來的DOM元件,
千萬不要livequery兩層,
這樣會導致相同的DOM元件操作兩次,
並且會發生不可預期的問題。

錯誤示範:

$('#first_data').livequery(function(){
$('#first_link').click(function(){
var $new_data = $(['click me',''].join(''));
$(first_data).append($new_data);
});

$('#second_data').livequery('click',funcont(){
alert($('#first_data').find('#first_subdata').html());

});
});

由上面的這個範例中,我們可以清楚的知道,#first_data是一塊尚未出現的DOM元件。
為了要將其綁定,我們使用了livequery將整個DOM元件預先保留起來,
其中還包括一個#first_link,它的作用是新增一個id為second_data連結。
這裡的second_data連結就是我所謂的"未來的未來的DOM元件"。

現在如果我們想要按下#second_data時,跑起一個警告視窗,內容為#first_data中的#first_subdata的資料,
很自然的,會在和程式的下方多加一個livequery去執行這個動作。
但是這樣的寫法,會導致#second_data連結,被啟動兩次,所以會造成不可預期之動作。

那要怎麼處理未來的未來的DOM元件呢??
其實不用把它想的太難,我只要用livequery綁定一次就OK了。
只是如果livequery之中的function如果有需要用到其他未來的DOM元件,
就必須另外寫一個livequery來處理其他的DOM元件。

所以正確的寫法如下

var first_subdata;
//Part 1
$('#first_data').livequery(function(){
first_subdata = $(this).find('#first_subdata');
$('#first_link').click(function(){
var $new_data = $(['click me',''].join(''));
$(first_data).append($new_data);
});
});
//Part 2
$('#second_data').livequery('click',funcont(){
alert(first_subdata.html());
});


因此,我們必須在Part 1之前,就事先宣告一個first_subdata變數去保留了#first_subdata的資料,然後在Part 2的時候才能使用first_subdata的資料。

2008年10月8日 星期三

利用Google AJAX Libraries API 載入Jquery

之前看到了幾篇評論Google AJAX Libraries API的文章
http://planet.nccucs.org/2008/05/28/266/
http://pctao.org/2008/05/29/235/
http://funp.com/t206281#p=206281

其主要的優點是可以讓使用者不用再重新下載二次函式庫
這樣可以節省流量和增快開啟網頁的速度
所以當要自己試用看看看啦

主要是參考Google code的官方網站:
http://code.google.com/apis/ajaxlibs/
http://code.google.com/apis/ajaxlibs/documentation/index.html#jquery

主要是在head中加入以下幾行

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load JQuery
google.load("jquery", "1.2.6");
google.setOnLoadCallback(function() {

});
</script>


並且用google.setOnLoadCallback 取代 $(document).ready
這樣就不用把jquery的函式庫存在自家的主機上了
Related Posts Plugin for WordPress, Blogger...