jQuery:让文盲秀网页

一.需求如下

成都创新互联是一家专业提供鹤峰企业网站建设,专注与网站制作、成都做网站、H5建站、小程序制作等业务。10年已为鹤峰众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。

1：注册不新开页面，改成弹出层，

2：新增用户买房欲望调查，

3：用户名自动检索出推荐的用户名，

4：出生日期用户输入改成控件选择。

5：尽力提高用户体验，吸引用户注册。

二.无图无真相

1：简化后的页面：

2：浮出文字提示和圆角边框：

3：支持民意调查（异步提交）

4：自动检索推荐用户名（测试数据）

5：数据有效性验证

6：日历

7：支持拖拽

8：滑入显示

9：over

#p#

三.代码分析

1.弹出层的制作，

a.先引用这三个：

b.调用这个方法$.prompt，实现弹出。

2.浮出文字

a.先引用这两个：

b.调用下面代码实现浮出：

 
 
 
 
  
  
  
  $("#suggest2").tooltip({bodyHandler: function() {return "用户名必须以字母开头";},showURL: false});  
  
  
  
  $("#cemail").tooltip({bodyHandler: function() {return "建议使用新浪游戏";},showURL: false});  
  
  
  
  $("#Text1").tooltip({bodyHandler: function() {return "未成年人请不要注册";},showURL: false});

3.投票

a.先引用下面两个：

b.调用$('#demo2').rater('Handler1.ashx')实现投票

4.自动检索推荐用户名（自动完成）

a.先引用下面两个

b.调用 $("#suggest2").focus().autocomplete(cities);实现自动检索，（用的是localdata.js里面的本地测试数据）

5.数据校验

a.先引用这

再写如下CSS:

 
 
 
 
  
  
  
     
  
  
  
  #commentForm { width: 500px; }  
  
  
  
  #commentForm label { width: 500px; }  
  
  
  
  #commentForm label.error, #commentForm input.submit { margin-left: 0px;color: red;   }

(commentForm 为form的ID)

b.调用这个$("#commentForm").validate()实现验证;form里面的class和一些属性配置好，一切验证全自动。

如：邮箱

6.日历

说到这个惭愧啊！开始用的JQuery的日历插件，后来由于其不能置于弹框的上面，所以改用另外一个。

a.先引用这两个

b.再写如下代码

 
 
 
 
  
  
  
  var c = new Calendar("c");  
  
  
  
  document.write(c);  
  
  
  
  //下面两个用为微调定位  
  
  
  
  c.offsetTop =22;  
  
  
  
  c.offsetLeft = 25;

html代码：

可以看得出，他class="required dateISO" 自动验证时间格式

7.拖拽

a.先引用这个：

b.再写这个$("xxx").draggable();实现拖拽

8.滑入显示：

插件提供了扩展：

 
 
 
 
  
  
  
  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);  
  
  
  
          }  
  
  
  
      }  
  
  
  
  });  
  
  
  
  });

调用$.prompt("mes",{show:'dropIn'}即可实现滑入。

9.圆角边框。

a.先引用这个

b.调用$.("xxx").corner("cc:#d1c7b7");

c.注意事项：四个角所缺的地方的颜色也是可设置的，一般都和背景色一致。

#p#

四.总结

一般命名插件的CSS和脚本命名都很规范，所以难得出现冲突。只要CSS和Js不冲突，就可以放心用，随便用，乱着用。

五.问题（已解决）

本来想清一色的JQuery插件的，结果JQuery日历插件浮不到弹出层的上面，所以换了另外一个日历控件。气得我把z-index设成10000000000000000，结果可想而知----依然浮不上。找不到哪里CSS冲突了，哪个发现了告诉我一下。

 
 
 
 
  
  
  
  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;}

当调用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);   
  
  
  
  }   
  
  
  
  })

六.下载

网站栏目：jQuery:让文盲秀网页
文章URL：http://www.csdahua.cn/qtweb/news21/223421.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：快上网

成都快上网为您推荐相关内容