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 相关文章推荐
5 cool javascript apps
Mar 24 Javascript
JavaScript中的new的使用方法与注意事项
May 16 Javascript
一些技巧性实用js代码小结
Oct 14 Javascript
基于JQuery的cookie插件
Apr 07 Javascript
javascript 数组学习资料收集
Apr 11 Javascript
jquery实现背景墙聚光灯效果示例分享
Mar 02 Javascript
jQuery控制Div拖拽效果完整实例分析
Apr 15 Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 Javascript
JS+CSS实现DIV层的展开、收缩效果
Jan 28 Javascript
分享jQuery封装好的一些常用操作
Jul 28 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
详解JavaScript的数据类型以及数据类型的转换
Apr 20 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
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
非常经典的PHP文件上传类分享
2016/05/15 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
phpfpm的作用和用法
2019/10/10 PHP
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
tangram框架响应式加载图片方法
2013/11/21 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
jquery实现仿新浪微博评论滚动效果
2015/08/06 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
javaScript实现复选框全选反选事件详解
2020/11/20 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
[02:01]BBC DOTA2国际邀请赛每日综述:八强胜者组鏖战,中国队喜忧参半
2014/07/19 DOTA
python操作sqlite的CRUD实例分析
2015/05/08 Python
全面了解Python环境配置及项目建立
2016/06/30 Python
基于python的多进程共享变量正确打开方式
2018/04/28 Python
Python实现迭代时使用索引的方法示例
2018/06/05 Python
python游戏地图最短路径求解
2019/01/16 Python
Django实现发送邮件找回密码功能
2019/08/12 Python
python numpy数组中的复制知识解析
2020/02/03 Python
解决python 虚拟环境删除包无法加载的问题
2020/07/13 Python
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
定义一结构体变量,用其表示点坐标,并输入两点坐标,求两点之间的距离
2015/08/17 面试题
文案策划专业自荐信
2014/07/07 职场文书
新店开张活动方案
2014/08/24 职场文书
三好生演讲稿
2014/09/12 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
学校国庆节活动总结
2015/03/23 职场文书
高三数学教学反思
2016/02/18 职场文书
教你怎么用Python监控愉客行车程
2021/04/29 Python
关于ObjectUtils.isEmpty() 和 null 的区别
2022/02/28 Java/Android
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技