一.需求如下

1：注冊不新開頁面，改成彈出層，

2：新增用戶買房欲望調(diào)查，

3：用戶名自動檢索出推薦的用戶名，

4：出生日期用戶輸入改成控件選擇。

5：盡力提高用戶體驗(yàn)，吸引用戶注冊。

二.無圖無真相

1：簡化后的頁面：

2：浮出文字提示和圓角邊框：

3：支持民意調(diào)查（異步提交）

4：自動檢索推薦用戶名（測試數(shù)據(jù)）

5：數(shù)據(jù)有效性驗(yàn)證

6：日歷

7：支持拖拽

8：滑入顯示

9：over

#p#

三.代碼分析

1.彈出層的制作，

a.先引用這三個：

<script src="jquery-1.4.2.min.js" type="text/javascript" language="javascript"></script>  
 
<script src="jquery-impromptu.3.1.min.js" type="text/javascript" language="javascript"></script>  
 
<link rel="stylesheet" media="all" type="text/css" href="examples.css" />  

b.調(diào)用這個方法$.prompt，實(shí)現(xiàn)彈出。

2.浮出文字

a.先引用這兩個：

<link rel="stylesheet" media="all" type="text/css" href="jquery.tooltip.css" />  
<script src="jquery.tooltip.min.js" type="text/javascript" language="javascript"></script>  

b.調(diào)用下面代碼實(shí)現(xiàn)浮出：

$("#suggest2").tooltip({bodyHandler: function() {return "用戶名必須以字母開頭";},showURL: false});  
$("#cemail").tooltip({bodyHandler: function() {return "建議使用新浪游戲";},showURL: false});  
$("#Text1").tooltip({bodyHandler: function() {return "未成年人請不要注冊";},showURL: false});  

3.投票

a.先引用下面兩個：

<script type="text/javascript" src="jquery.rater.js"></script>  
<link rel="stylesheet" type="text/css" href="rater.css" media="screen" /> 

b.調(diào)用$('#demo2').rater('Handler1.ashx')實(shí)現(xiàn)投票

4.自動檢索推薦用戶名（自動完成）

a.先引用下面兩個

<script src="jquery.autocomplete.min.js" type="text/javascript" language="javascript"></script>  
<link rel="stylesheet" media="all" type="text/css" href="jquery.autocomplete.css" />  
<script src="localdata.js" type="text/javascript" language="javascript"></script>  

b.調(diào)用  $("#suggest2").focus().autocomplete(cities);實(shí)現(xiàn)自動檢索，（用的是localdata.js里面的本地測試數(shù)據(jù)）

5.數(shù)據(jù)校驗(yàn)

a.先引用這 

<script src="jquery.validate.js" type="text/javascript" language="javascript"></script>  

再寫如下CSS:

<style type="text/css">   
#commentForm { width: 500px; }  
#commentForm label { width: 500px; }  
#commentForm label.error, #commentForm input.submit { margin-left: 0px;color: red;   }  
</style>  
 

(commentForm 為form的ID)

b.調(diào)用這個$("#commentForm").validate()實(shí)現(xiàn)驗(yàn)證;form里面的class和一些屬性配置好，一切驗(yàn)證全自動。

如：郵箱<input  id="cemail" name="email" class="required email" />

6.日歷

說到這個慚愧??！開始用的JQuery的日歷插件，后來由于其不能置于彈框的上面，所以改用另外一個。

a.先引用這兩個

<script src="calendar2008.js" type="text/javascript" language="javascript"></script>  
<link rel="stylesheet" media="all" type="text/css" href="rightbar.css" />  

b.再寫如下代碼

var c = new Calendar("c");  
document.write(c);  
//下面兩個用為微調(diào)定位  
c.offsetTop =22;  
c.offsetLeft = 25; 

html代碼：

可以看得出，他class="required dateISO" 自動驗(yàn)證時間格式

<input class="required dateISO"  name="begintime" type="text" id="Text1" size="21"  onfocus="c.showMoreDay = false;c.show(this);"  value=""/> 

7.拖拽

a.先引用這個： 

<script src="jquery-ui.min.js" type="text/javascript" language="javascript"></script> 

b.再寫這個$("xxx").draggable();實(shí)現(xiàn)拖拽

8.滑入顯示：

插件提供了擴(kuò)展：

Code highlighting produced by Actipro CodeHighlighter (freeware)  
http://www.CodeHighlighter.com/  
 
--> $(document).ready(function() {  
     $.fn.extend({  
    dropIn: function(speed, callback){  
        var $t = $(this);  
 
        if($t.css("display") == "none"){  
            eltop = $t.css('top');  
            elouterHeight = $t.outerHeight(true);  
 
            $t.css({ top: -elouterHeight, display: 'block' })  
                .animate({ top: eltop },speed,'swing', callback);  
        }  
    }  
});  
}); 

調(diào)用$.prompt("mes",{show:'dropIn'}即可實(shí)現(xiàn)滑入。

9.圓角邊框。

a.先引用這個 

<script src="jquery.corner.js" type="text/javascript" language="javascript"></script>  

b.調(diào)用$.("xxx").corner("cc:#d1c7b7");

c.注意事項(xiàng)：四個角所缺的地方的顏色也是可設(shè)置的，一般都和背景色一致。

#p#

四.總結(jié)

一般命名插件的CSS和腳本命名都很規(guī)范，所以難得出現(xiàn)沖突。只要CSS和Js不沖突，就可以   放心用，隨便用，亂著用。

五.問題（已解決）

本來想清一色的JQuery插件的，結(jié)果JQuery日歷插件浮不到彈出層的上面，所以換了另外一個日歷控件。氣得我把z-index設(shè)成10000000000000000，結(jié)果可想而知----依然浮不上。找不到哪里CSS沖突了，哪個發(fā)現(xiàn)了告訴我一下。

Code highlighting produced by Actipro CodeHighlighter (freeware)  
http://www.CodeHighlighter.com/  
-->table.jCalendar {  
    border: 1px solid #000;  
    background: #aaa;  
    border-collapse: separate;  
    border-spacing: 2px;  
    z-index: 100000000000000000000000000000000;  
    position:absolute;  
} 

解決辦法：

方法一：在你的頁面開始出定義下面的樣式

.ui-datepicker {z-index:1200;} 

當(dāng)調(diào)用dialog時用下面的代碼

jQuery("#midialog").dialog({zIndex:900}); 

方法二：

.datepicker({   
beforeShow: function (i, e) {   
var z = jQuery(i).closest(".ui-dialog").css("z-index") + 4;   
e.dpDiv.css('z-index', z);   
}   
})   

六.下載

原文鏈接：http://www.cnblogs.com/iamzhanglei/archive/2010/06/15/1758645.html

【編輯推薦】

1. jQuery插件之Ajax自動完成
2. jQuery基本事件代碼優(yōu)化
3. 印象深刻的jQuery手風(fēng)琴效果應(yīng)用
4. jQuery可多次使用的星級插件
5. JQuery插件的開發(fā)真的有那么難嗎