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 相关文章推荐
正则表达式语法
Oct 09 Javascript
通过DOM脚本去设置样式信息
Sep 19 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
Mar 16 Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
Nov 23 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
Oct 18 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
Dec 09 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
May 22 Javascript
通过js给网页加上水印背景实例
Jun 17 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中取得文件的后缀名?
2012/02/20 PHP
安装apache2.2.22配置php5.4(具体操作步骤)
2013/06/26 PHP
PHP实现的MongoDB数据库操作类分享
2014/05/12 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
php获取当前页面完整URL地址
2015/12/30 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
2010/09/12 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
VueJS全面解析
2016/11/10 Javascript
AngularJs表单验证实例代码解析
2016/11/29 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
2018/07/23 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
2018/08/30 Javascript
javascript实现日历效果
2019/06/17 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
2019/09/20 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
2020/08/10 Javascript
vue created钩子函数与mounted钩子函数的用法区别
2020/11/05 Javascript
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
使用python实现省市三级菜单效果
2016/01/20 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
Python 逐行分割大txt文件的方法
2017/10/10 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
python实现对服务器脚本敏感信息的加密解密功能
2019/08/13 Python
自定义Django默认的sitemap站点地图样式
2020/03/04 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
BCBG官网:BCBGMAXAZRIA
2017/12/29 全球购物
人力资源管理专业毕业生自我评价
2013/09/21 职场文书
大学生入党自我鉴定
2013/10/31 职场文书
求职自荐信的格式
2014/04/07 职场文书
学校校庆演讲稿
2014/05/22 职场文书
街道党工委党的群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python