【一】需求如下：
1：注冊(cè)不新開頁面，改成彈出層，
2：新增用戶買房欲望調(diào)查，
3：用戶名自動(dòng)檢索出推薦的用戶名，
4：出生日期用戶輸入改成控件選擇。
5：盡力提高用戶體驗(yàn)，吸引用戶注冊(cè)。
【二】無圖無真相。

1：簡(jiǎn)化后的頁面：

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

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

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

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

6：日歷

7：支持拖拽

8：滑入顯示

9：over

【三】代碼分析
1.彈出層的制作，
a.先引用這三個(gè)：

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

2.浮出文字
a.先引用這兩個(gè)：

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


3.投票
a.先引用下面兩個(gè)：

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

4.自動(dòng)檢索推薦用戶名（自動(dòng)完成）
a.先引用下面兩個(gè)

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

5.數(shù)據(jù)校驗(yàn)
a.先引用這 <script src="jquery.validate.js" type="text/javascript" language="javascript"></script>
再寫如下CSS:

(commentForm 為form的ID)
b.調(diào)用這個(gè)$("#commentForm").validate()實(shí)現(xiàn)驗(yàn)證;form里面的class和一些屬性配置好，一切驗(yàn)證全自動(dòng)。
如：郵箱<input id="cemail" name="email" class="required email" />

6.日歷
說到這個(gè)慚愧??！開始用的JQuery的日歷插件，后來由于其不能置于彈框的上面，所以改用另外一個(gè)。
a.先引用這兩個(gè)

b.再寫如下代碼


html代碼：


可以看得出，他class="required dateISO" 自動(dòng)驗(yàn)證時(shí)間格式
7.拖拽
a.先引用這個(gè)： <script src="jquery-ui.min.js" type="text/javascript" language="javascript"></script>
b.再寫這個(gè)$("xxx").draggable();實(shí)現(xiàn)拖拽

8.滑入顯示：
插件提供了擴(kuò)展：



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

9.圓角邊框。
a.先引用這個(gè) <script src="jquery.corner.js" type="text/javascript" language="javascript"></script>
b.調(diào)用$.("xxx").corner("cc:#d1c7b7");
c.注意事項(xiàng)：四個(gè)角所缺的地方的顏色也是可設(shè)置的，一般都和背景色一致。

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

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

解決辦法：
方法一：
在你的頁面開始出定義下面的樣式
.ui-datepicker {z-index:1200;}

當(dāng)調(diào)用dialog時(shí)用下面的代碼
jQuery("#midialog").dialog({zIndex:900});


方法二：

[code]
.datepicker({
beforeShow: function (i, e) {
var z = jQuery(i).closest(".ui-dialog").css("z-index") + 4;
e.dpDiv.css('z-index', z);
}
})
代碼打包下載
作者：張磊(zhanglei's Blog)