快捷導(dǎo)航

jQuery下的幾個(gè)你可能沒用過的功能

更新時(shí)間：2010年08月29日 22:59:09 作者：

用jQuery好久了，都做了兩個(gè)項(xiàng)目了。今兒晚上喝咖啡喝多了，這都兩點(diǎn)多了睡不著，給大家分享下我在項(xiàng)目中用到的一些用jQuery實(shí)現(xiàn)的一些比較好的功能。希望對(duì)一些新手有點(diǎn)用。。。高手們可以拍磚哈。。。。我頭很硬不怕疼。。。呵呵。

一.創(chuàng)建一個(gè)自己的dropdownlist
說到dropdown list,在html中你會(huì)想到

復(fù)制代碼代碼如下:

 
<select> 
<option>hello 1</option> 
</select> 

但是它的顯示會(huì)不大好看，我們可以使用div+ul來自己做一個(gè)drop down list，而且有很苦的slidedown和slideup功能。

在IE8下的效果對(duì)比：

首先說說思路，很簡單的思路，

a. 需要用一個(gè)Div來代替drop down list中選中記錄顯示的那個(gè)容器，通過offset來得到這個(gè)Div應(yīng)該顯示的位置,offtset.top和offset.left。

b. 通過一個(gè)UL以及它的孩子們li來模擬下拉框。這里需要注意幾個(gè)問題，

i:一定要把UL放在一個(gè)新建好的Div里面，而且這個(gè)Div的位置距離top的數(shù)據(jù)上一步中的Div(我們叫它iDiv)的top+iDiv.height;

ii:每次在點(diǎn)擊一個(gè)li元件后一定要清空它，不然你的drop down list會(huì)越來越長。。。

iii:當(dāng)鼠標(biāo)在別的地方點(diǎn)擊時(shí)，一點(diǎn)要隱藏掉dropdown list。

下面我來一步一步結(jié)合代碼來給說明如何實(shí)現(xiàn)這個(gè)功能：

1.創(chuàng)建iDiv來作為drop down list選中值的容器。
在創(chuàng)建iDiv之前我們需要先來得到要顯示這個(gè)drop down list的位置：

復(fù)制代碼代碼如下:

 
// get the select list 's position using offset,width and height 
var offset = $(".select_css").offset(); 
var width = $(".select_css").width(); 
var height = $(".select_css").height(); 

接下來是創(chuàng)建iDivb并使用css()方法來為iDiv添加格式。

復(fù)制代碼代碼如下:

 
var iDiv = $("<Div id='iDiv' class='iDiv'>").css({ 
'top': offset.top, 
'left': offset.left, 
'width': width, 
'height': height, 
'border': '1px solid #aaaaaa', 
'fontSize': '12px', 
'textIndent': '4px', 
'cursor': 'default' }).text("hello")； 

iDiv也給加了個(gè)class='iDiv'，本來不需要的，但是后來我發(fā)現(xiàn)jQuery的css()無法去搞定背景圖片的no-repeat 屬性，google了半天老外也沒有例子，所以只有通過這個(gè)clas='iDiv'來設(shè)定：

復(fù)制代碼代碼如下:

 
.iDiv 
{ 
background-image:url('images/select_right.gif'); 
background-position:right; 
background-repeat:no-repeat; 
} 

效果如下;

2.在iDiv發(fā)生點(diǎn)擊事件時(shí)，來創(chuàng)建一個(gè)下拉框，并使用slidedown效果。
首先我們需要?jiǎng)?chuàng)建一個(gè)cDiv并把它添加到html的body,它的位置剛好是在iDiv的下面，所以需要cDiv的創(chuàng)建如下：

復(fù)制代碼代碼如下:

 
var cDiv = $("<div id='cDiv'>").css({ 
'position': 'absolute', 
'width': width, 
'top': offset.top + 22, 
'left': offset.left, 
'background': '#f7f7f7', 
'border': '1px solid silver' 
}).hide(); 

而且默認(rèn)我們要它隱藏掉。

有了這個(gè)cDiv，我們只需要在iDiv發(fā)生Click事件時(shí)創(chuàng)建一個(gè)UL列表，并把它append倒cDiv。

復(fù)制代碼代碼如下:

 
var UL = $("<ul style='list-style:none;margin:0;padding:0;'></ul>").appendTo(cDiv); 
for (var i = 1; i < 10; i++) { 
$("<li style='testIndent:4px;height:20px;lineheight:20px; cursor:pointer;'>").appendTo(UL).text("hello" + i).mouseover(function () { 
$(this).css( 
{ 
'color': 'white', 
'background': 'gray' 
} 
); 
}).mouseout(function () { 
$(this).css( 
{ 
'color': 'black', 
'background': 'white' 
}); 
}).click(function () { 
// disvisualble the cDiv and set the selected crrent li's text as iDiv's text 
$("#cDiv").slideUp().hide(); 
$("#iDiv").html($(this).html()); 
}); 
} 
// slide show the cDiv now 
$("#cDiv").slideDown('slow'); 

可以看到在添加每條li記錄時(shí)都為它添加了mouseover,mouseout和click事件。

在click事件發(fā)生時(shí)，我們不僅要把cDiv給slideUp還需要把它隱藏掉，并且在下次點(diǎn)擊iDiv之前先清空cDiv。這兩點(diǎn)非常重要。你可以試試不做這兩點(diǎn)時(shí)會(huì)出現(xiàn)什么效果。

在click li時(shí)別忘了把當(dāng)前l(fā)i的html內(nèi)容復(fù)制給iDiv，不然我們的控件就沒實(shí)際作用啦。。。。。

3.使用Ajax從服務(wù)器獲取下拉列表的值。
很多時(shí)候我們需要?jiǎng)討B(tài)的從服務(wù)器獲取下拉列表的值，這樣就需要在點(diǎn)擊iDiv時(shí)先通過jQuey的ajax方法(或者其他的ajax方法)從服務(wù)器load數(shù)據(jù)，在數(shù)據(jù)load完成時(shí)我們才開始創(chuàng)建UL列表。

我這里使用的是WCF Servece作為ajax請(qǐng)求的數(shù)據(jù)源。

為了增加用戶友好型，在從服務(wù)器取數(shù)據(jù)時(shí)，我們讓iDiv顯示為一個(gè)load的圖片。。。。。。。。。。。。

代碼下載：http://xiazai.jb51.net/201008/yuanma/jQueryAJAXCallWCFService.rar

二.使用jQuery的append功能來無刷新切換播放的視頻文件(flash或Silverlight播放器)。

之前有個(gè)minisite需要用到這個(gè)東西。我就試著研究了下，還真行的通。

http://haokan.lafaso.com/pretty.html 大家可以看一下。我這個(gè)不算做廣告吧，大家基本都是男的基本上不會(huì)看這個(gè)的。呵呵。只是這個(gè)方法我覺得你說不定以后可以用到的。

由于這些播放器都是一個(gè)embed控件，所以我們可以通過替換embed的src屬性來播放不同的視頻。例如：

使用jQuery的append()方法我們來個(gè)偷梁換柱，就可以把embed的src給換掉，并重新把div1的html給換掉，在頁面上就像是使用ajax技術(shù)。

復(fù)制代碼代碼如下:

 
$("#div1 embed").empty(); 
var placeHolder = $("<div />"); 
var tempParent = $("<div />"); 
var embed = $("#div1 embed"); 
embed.replaceWith(placeHolder); 
tempParent.append(embed); 
embed.attr("src", http://player.ku6.com/refer/DMFZdNYzKDEosiPG/v.swf&auto=1); 
placeHolder.replaceWith(tempParent.html()); 

三.用jQuery來為HTML實(shí)現(xiàn)header和footer功能。
在php,asp.net中都有header和footer這種控件，php中用include,而在asp.net中我們用master或者是ascx都行。

在html中呢？我相信一直沒有。但是客戶要求我們做的頁面必須是html，說是怕用戶太多。。。。。

用footer和header的好處就是當(dāng)需要修改這些部分的內(nèi)容時(shí)，我們只需要修改一個(gè)頁面，所有的頁面就都會(huì)變化。

后來找到個(gè)辦法是使用jquery的load()方法。

首先我們需要在html中添加兩個(gè)Div一個(gè)在<body>的最上面，一個(gè)在最下面，最好是一個(gè)Id='header',一個(gè)id='footer'。

然后在服務(wù)器端我們只需要?jiǎng)?chuàng)建一個(gè)header.html和一個(gè)footer.html。

在頁面加載時(shí)我們會(huì)用jquery的load方法來loadheader.html和footer.html。

代碼：

復(fù)制代碼代碼如下:

 
$("#header").load("controls/header.html", function (response, status, xhr) { 
if (status == "error") { 
var msg = "服務(wù)器數(shù)據(jù)傳輸錯(cuò)誤,請(qǐng)刷新頁面"; 
// $("#error").html(msg + xhr.status + " " + xhr.statusText); 
alert(msg); 
} 
}); 
// load footer from server 
$("#footer").load("controls/footer.html", function (response, status, xhr) { 
if (status == "error") { 
var msg = "服務(wù)器數(shù)據(jù)傳輸錯(cuò)誤,請(qǐng)刷新頁面"; 
// $("#error").html(msg + xhr.status + " " + xhr.statusText); 
alert(msg); 
} 
}); 

后面有可能的話我會(huì)接著總結(jié)點(diǎn)jQuery的技巧和大家分享。。。。。。。。還有那個(gè)下拉框的代碼我稍后給大家提供下載地址。
Cheers
Nic
代碼下載：http://xiazai.jb51.net/201008/yuanma/jQueryAJAXCallWCFService.rar