日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
jQuery:讓文盲秀網(wǎng)頁(yè)

一.需求如下

成都創(chuàng)新互聯(lián)是一家專業(yè)提供鶴峰企業(yè)網(wǎng)站建設(shè),專注與網(wǎng)站制作、成都做網(wǎng)站、H5建站、小程序制作等業(yè)務(wù)。10年已為鶴峰眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。

1：注冊(cè)不新開頁(yè)面，改成彈出層，

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

3：用戶名自動(dòng)檢索出推薦的用戶名，

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

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

二.無(wú)圖無(wú)真相

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

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

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

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

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

6：日歷

7：支持拖拽

8：滑入顯示

9：over

#p#

三.代碼分析

1.彈出層的制作，

a.先引用這三個(gè)：

 
 
 
 
    
  
  
  
  
  1.   
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3.   
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5.   
    6.

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

2.浮出文字

a.先引用這兩個(gè)：

 
 
 
 
    
  
  
  
  
  1.   
    2. 
  
  
  
  
  2.   
    3.

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

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

3.投票

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

 
 
 
 
    
  
  
  
  
  1.   
    2. 
  
  
  
  
  2.  
    3.

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

4.自動(dòng)檢索推薦用戶名（自動(dòng)完成）

a.先引用下面兩個(gè)

 
 
 
 
    
  
  
  
  
  1.   
    2. 
  
  
  
  
  2.   
    3. 
  
  
  
  
  3.   
    4.

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

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

a.先引用這 

 
 
 
 
    
  
  
  
  
  1.   
    2.

再寫如下CSS:

 
 
 
 
    
  
  
  
  
  1.    
    2. 
  
  
  
  
  2. #commentForm { width: 500px; }  
    3. 
  
  
  
  
  3. #commentForm label { width: 500px; }  
    4. 
  
  
  
  
  4. #commentForm label.error, #commentForm input.submit { margin-left: 0px;color: red;   }  
    5. 
  
  
  
  
  5.   
    6. 
  
  
  
  
  6.  
    7.

(commentForm 為form的ID)

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

如：郵箱

6.日歷

說(shuō)到這個(gè)慚愧啊！開始用的JQuery的日歷插件，后來(lái)由于其不能置于彈框的上面，所以改用另外一個(gè)。

a.先引用這兩個(gè)

 
 
 
 
    
  
  
  
  
  1.   
    2. 
  
  
  
  
  2.   
    3.

b.再寫如下代碼

 
 
 
 
    
  
  
  
  
  1. var c = new Calendar("c");  
    2. 
  
  
  
  
  2. document.write(c);  
    3. 
  
  
  
  
  3. //下面兩個(gè)用為微調(diào)定位  
    4. 
  
  
  
  
  4. c.offsetTop =22;  
    5. 
  
  
  
  
  5. c.offsetLeft = 25; 
    6.

html代碼：

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

 
 
 
 
    
  
  
  
  
  1.  
    2.

7.拖拽

a.先引用這個(gè)： 

 
 
 
 
    
  
  
  
  
  1.  
    2.

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

8.滑入顯示：

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

 
 
 
 
    
  
  
  
  
  1. Code highlighting produced by Actipro CodeHighlighter (freeware)  
    2. 
  
  
  
  
  2. http://www.CodeHighlighter.com/  
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4. --> $(document).ready(function() {  
    5. 
  
  
  
  
  5.      $.fn.extend({  
    6. 
  
  
  
  
  6.     dropIn: function(speed, callback){  
    7. 
  
  
  
  
  7.         var $t = $(this);  
    8. 
  
  
  
  
  8.  
    9. 
  
  
  
  
  9.         if($t.css("display") == "none"){  
    10. 
  
  
  
  
  10.             eltop = $t.css('top');  
    11. 
  
  
  
  
  11.             elouterHeight = $t.outerHeight(true);  
    12. 
  
  
  
  
  12.  
    13. 
  
  
  
  
  13.             $t.css({ top: -elouterHeight, display: 'block' })  
    14. 
  
  
  
  
  14.                 .animate({ top: eltop },speed,'swing', callback);  
    15. 
  
  
  
  
  15.         }  
    16. 
  
  
  
  
  16.     }  
    17. 
  
  
  
  
  17. });  
    18. 
  
  
  
  
  18. }); 
    19.

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

9.圓角邊框。

a.先引用這個(gè) 

 
 
 
 
    
  
  
  
  
  1.   
    2.

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

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

#p#

四.總結(jié)

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

五.問(wèn)題（已解決）

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

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

解決辦法：

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

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

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

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

方法二：

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

六.下載


本文題目：jQuery:讓文盲秀網(wǎng)頁(yè)
文章分享：http://www.dlmjj.cn/article/dpggpcj.html