Perl正则表达式可以分为四个角色。
（1）装载师
主要负责次数相关的匹配。
* 匹配之前的字符，出现>=0次
+匹配之前的字符，出现>=1次
?匹配之前的字符，出现<=1次
（2）变形金刚
主要负责某一类型的匹配。
. 一个小点，匹配一个字符
\d 匹配一个数字0到9
\w 匹配一个字符数字、字母、下划线
\s 匹配空格
（3）守护神
主要负责字符开头和结尾的匹配。
^以其后的字符开头
&以其后的字符结尾
（4）选秀师
主要负责从几个可能匹配的对象之中，挑选出一个。
[aeiou]匹配括号中的单个字符
{good|bad|new|old}匹配括号中的任意一个字符串
在常用的门户社交类网站中 我们往往会注意到在loading数据的时候 会出现一个loading的效果
对我个人来讲，这样的效果有三个好处...
1，让我们知道我们点击了请求 这时是有回应的
2，防止用户在loading数据的时候点击别的按钮 出现混乱
3，AJax 请求数据更加专业 显得我们的网站更加 friendly-UI
闲话少说，我们开始来讲 如何在网站中 .Net MVC3中正常运用ajax添加这一效果
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<style type="text/css">
/*后面通过设置position、top、bottom、left和right是它可以遮住整个页面，
并且将其背景设置为黑色。*/
.hide{display:none }
.progress{z-index: 2000}
.mask{position: fixed;top: 0;right: 0;bottom: 0;left: 0; z-index: 1000; background-color: #000000}
</style>
<script type="text/javascript" src="/blog_article/@Url.Content("~/Scripts/jquery-1.7.1.min.js")"></script>
</head>
<body>
<div>@RenderBody()</div>
<img id="progressImgage" alt="" src="/blog_article/@Url.Content("~/Images/ajax-loader.gif")"/>
<div id="maskOfProgressImage" ></div>
</body>
</html>
在这里 我用GIF图片和<div>遮罩 定义在布局中，并为他们加上相应的css 样式
其中gif图片和遮罩 div的 z-index 分别为2000 & 1000。（只要前者比后者大即可 ，让gif显示在最上层即可）
接下来， 我们通过为jquery定义一个方法ajax2 实现ajax调用
该方法依然调用$.ajax(options)来实现ajax调用
在ajax2方法中我们队options的参数compelte实现封装
让可以显示的gif图片和div隐藏起来，同时覆盖了 options的async属性，
这样 总是以异步的方式来执行。
因为这样浏览器才能不被锁住 gif图片才能正常显示。再用$.load（options）进行ajax请求之前 我们将gif图片显示出来 ，并对他们进行相应的设置。
<script type="text/javascript">
$(function () {
$.load= function (options) {
var img = $("#progressImgage");
var mask = $("#maskOfProgressImage");
var complete = options.complete;
options.complete = function (httpRequest, status) {
img.hide();
mask.hide();
if (complete) {
complete(httpRequest, status);
}
};
options.async = true;
img.show().css({
"position": "fixed",
"top": "50%",
"left": "50%",
"margin-top": function () { return -1 * img.height() / 2; },
"margin-left": function () { return -1 * img.width() / 2; }
});
mask.show().css("opacity", "0.1");
$.ajax(options);
};
});
</script>
最后我们进行ajax调用的时候 去call 这个方法即可 $.load。
<a href="#" id="load">Load</a>
<div id="result"></div>
<script type="text/javascript">
$("#load").click(function () {
$.ajax2({
url: '@Url.Action("GetContacts")',
success: function(result)
{
$("#result").html(result);
}
});
});
</script>
-
本文附件下载:
- Progress-4-ajax.rar (2.5 MB)
已有 0 人发表留言，猛击->>这里<<-参与讨论
ITeye推荐
- —软件人才免语言低担保 赴美带薪读研！—
不写时候默认为default作用域 当前类 同包 子类 不同包 private Y default Y Y protected Y Y Y public Y Y Y Y
已有 4 人发表留言，猛击->>这里<<-参与讨论
ITeye推荐
- —软件人才免语言低担保 赴美带薪读研！—