jquery 弹出层注册页面等(asp.net后台)


Posted in Javascript onJune 17, 2010

【一】需求如下:
1:注册不新开页面,改成弹出层,
2:新增用户买房欲望调查,
3:用户名自动检索出推荐的用户名,
4:出生日期用户输入改成控件选择。
5:尽力提高用户体验,吸引用户注册。
【二】无图无真相。

1:简化后的页面:

jquery 弹出层注册页面等(asp.net后台)

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

jquery 弹出层注册页面等(asp.net后台)

jquery 弹出层注册页面等(asp.net后台)

3:支持民意调查(异步提交)

jquery 弹出层注册页面等(asp.net后台)

4:自动检索推荐用户名(测试数据)

jquery 弹出层注册页面等(asp.net后台)

5:数据有效性验证

jquery 弹出层注册页面等(asp.net后台)

6:日历

jquery 弹出层注册页面等(asp.net后台)

jquery 弹出层注册页面等(asp.net后台)

7:支持拖拽

jquery 弹出层注册页面等(asp.net后台)

8:滑入显示

jquery 弹出层注册页面等(asp.net后台)

9:over

jquery 弹出层注册页面等(asp.net后台)

【三】代码分析
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.调用这个方法$.prompt,实现弹出。

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.调用下面代码实现浮出:
代码
$("#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.调用$('#demo2').rater('Handler1.ashx')实现投票

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.调用 $("#suggest2").focus().autocomplete(cities);实现自动检索,(用的是localdata.js里面的本地测试数据)

5.数据校验
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.调用这个$("#commentForm").validate()实现验证;form里面的class和一些属性配置好,一切验证全自动。
如:邮箱<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); 
//下面两个用为微调定位 
c.offsetTop =22; 
c.offsetLeft = 25;

html代码:

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

可以看得出,他class="required dateISO" 自动验证时间格式
7.拖拽
a.先引用这个: <script src="jquery-ui.min.js" type="text/javascript" language="javascript"></script>
b.再写这个$("xxx").draggable();实现拖拽

8.滑入显示:
插件提供了扩展:

$(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.先引用这个 <script src="jquery.corner.js" type="text/javascript" language="javascript"></script>
b.调用$.("xxx").corner("cc:#d1c7b7");
c.注意事项:四个角所缺的地方的颜色也是可设置的,一般都和背景色一致。

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

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

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

方法二:

[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)

Javascript 相关文章推荐
js replace正则表达式应用案例讲解
Jan 17 Javascript
js获得地址栏?问号后参数的方法
Aug 08 Javascript
javascript中clipboardData对象用法详解
May 13 Javascript
jQuery插件实现文字无缝向上滚动效果代码
Feb 25 Javascript
Bootstrap入门教程一Hello Bootstrap初识
Mar 02 Javascript
使用jquery datatable和bootsrap创建表格实例代码
Mar 17 Javascript
Angular中管道操作符(|)的使用方法
Dec 15 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
Jul 19 Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 Javascript
react国际化化插件react-i18n-auto使用详解
Mar 31 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
Apr 08 Javascript
实例讲解React 组件生命周期
Jul 08 Javascript
jquery 多行滚动代码(附详细解释)
Jun 17 #Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
Jun 14 #Javascript
jQuery+jqmodal弹出窗口实现代码分明
Jun 14 #Javascript
ExtJS 设置级联菜单的默认值
Jun 13 #Javascript
js 未结束的字符串常量错误解决方法
Jun 13 #Javascript
JSON 和 JavaScript eval使用说明
Jun 13 #Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 #Javascript
You might like
让PHP支持页面回退的两种方法[转]
2007/02/14 PHP
从零开始学YII2框架(三)扩展插件yii2-gird
2014/08/20 PHP
帝国cms常用标签汇总
2015/07/06 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
Yii框架多语言站点配置方法分析【中文/英文切换站点】
2020/04/07 PHP
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
node.js中的fs.appendFile方法使用说明
2014/12/17 Javascript
浅谈Javascript实现继承的方法
2015/07/06 Javascript
jquery ajax 如何向jsp提交表单数据
2015/08/23 Javascript
JavaScript中split与join函数的进阶使用技巧
2016/05/03 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
2017/11/21 Javascript
深入理解 webpack 文件打包机制(小结)
2018/01/08 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
2018/11/14 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
2019/05/15 Javascript
解决layui的form里的元素进行动态生成,验证失效的问题
2019/09/14 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
vue中destroyed方法的使用说明
2020/07/21 Javascript
仅用50行代码实现一个Python编写的计算器的教程
2015/04/17 Python
目前最全的python的就业方向
2018/06/05 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
苏宁红孩子母婴商城:redbaby
2017/02/12 全球购物
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
strlen的几种不同实现方法
2013/05/31 面试题
《母亲的恩情》教学反思
2014/02/13 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
学生自我评语
2015/01/04 职场文书
小学生运动会广播
2015/08/19 职场文书
2016春季幼儿园大班开学寄语
2015/12/03 职场文书
教你怎么用Python监控愉客行车程
2021/04/29 Python
vue实现无缝轮播效果(跑马灯)
2021/05/14 Vue.js
springboot 自定义配置 解决Boolean属性不生效
2022/03/18 Java/Android
Go本地测试解耦任务拆解及沟通详解Go本地测试的思路沟通的重要性总结
2022/06/21 Golang