jQuery下的幾個你可能沒用過的功能

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

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

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

復制代碼代碼如下:

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

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

在IE8下的效果對比：

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

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

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

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

ii:每次在點擊一個li元件后一定要清空它，不然你的drop down list會越來越長。。。

iii:當鼠標在別的地方點擊時，一點要隱藏掉dropdown list。

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

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

復制代碼代碼如下:

 
// 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添加格式。

復制代碼代碼如下:

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

復制代碼代碼如下:

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

效果如下;

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

復制代碼代碼如下:

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

而且默認我們要它隱藏掉。

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

復制代碼代碼如下:

 
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記錄時都為它添加了mouseover,mouseout和click事件。

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

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

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

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

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

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

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

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

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

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

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

復制代碼代碼如下:

 
$("#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實現(xiàn)header和footer功能。
在php,asp.net中都有header和footer這種控件，php中用include,而在asp.net中我們用master或者是ascx都行。

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

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

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

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

然后在服務器端我們只需要創(chuàng)建一個header.html和一個footer.html。

在頁面加載時我們會用jquery的load方法來loadheader.html和footer.html。

代碼：

復制代碼代碼如下:

 
$("#header").load("controls/header.html", function (response, status, xhr) { 
if (status == "error") { 
var msg = "服務器數(shù)據(jù)傳輸錯誤,請刷新頁面"; 
// $("#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 = "服務器數(shù)據(jù)傳輸錯誤,請刷新頁面"; 
// $("#error").html(msg + xhr.status + " " + xhr.statusText); 
alert(msg); 
} 
}); 