(插件本身已经减少了人力,如果开始无脑开发,简直就是无能,@Ajax里面哪里帮助类生成的其实就是jquery.unobtrusive的一些特性)

jquery.unobtrusive是MVC中出现的jquery插件,用与和MVC中Ajax交互,但是我不怎么喜欢在构建页面的时候用@Ajax.XXX去构建,感觉太依赖了,jquery.unobtrusive应该是所有web后端语言都能用的东西。所以就有了自己的单独使用jquery.unobtrusive的旅程,研究jquery.unobtrusive的用法和源码(之前已经有过阅读源码的文章和一定的注释,地址:http://www.cnblogs.com/RainbowInTheSky/p/4466993.html)。

用法data-ajax="true"是开启jquery.unobtrusive。

$(element.getAttribute("data-ajax-update"))

  源码中有这样一段,说明data-ajax-update的值就是选择器得到的,可以直接#id,.class。(data-ajax-update//更新的对象)

经常与data-ajax-mode配合使用

data-ajax-mode//更新的形式 BEFORE插入到对象之前 AFTER插入到对象之后 为空就是覆盖

  函数调用

data-ajax-begin
data-ajax-complete
data-ajax-success
data-ajax-failure

上面的四个属性对应$.ajax中的beforeSend,complete,success,error,他们的参数可以是程序片段,也可以是一个function,但是在写参数的时候不能是functiong(){}这样的匿名函数。基本涵盖了ajax,满足了需求。

不过在使用

data-ajax-loading//显示loading的对象

data-ajax-loading-duration//持续时间 默认是0

这两个属性的时候需要扩展一下,因为jquery.unobtrusive没有对齐做UI的实现,需要自己扩展。data-ajax-loading就是需要显示的对象,data-ajax-loading-duration是持续时间,他们使用的是jquery.show(),和jquery.hide()这两个函数。为此我写了一个遮罩的扩展

 //创建简单遮罩层,显示load时的信息,配合Unobtrusive
; (function ($) {
//设置背景层高
function height() {
var scrollHeight, offsetHeight;
// handle IE 6
if ($.browser.msie && $.browser.version < 7) {
scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
offsetHeight = Math.max(document.documentElement.offsetHeight, document.body.offsetHeight);
if (scrollHeight < offsetHeight) {
return $(window).height();
} else {
return scrollHeight;
}
// handle "good" browsers
}
else if ($.browser.msie && $.browser.version == 8) {
return $(document).height() - 4;
}
else {
return $(document).height();
}
};
//设置背景层宽
function width() {
var scrollWidth, offsetWidth;
// handle IE
if ($.browser.msie) {
scrollWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);
offsetWidth = Math.max(document.documentElement.offsetWidth, document.body.offsetWidth);
if (scrollWidth < offsetWidth) {
return $(window).width();
} else {
return scrollWidth;
}
// handle "good" browsers
}
else {
return $(document).width();
}
};
/*==========全部遮罩=========*/
function createLayer(load) {
//背景遮罩层
var layer = $("<div id=" + load.attr("data-loadlayer-id") + "></div>");
layer.css({
zIndex: 9998,
position: "absolute",
height: height() + "px",
width: width() + "px",
background: "black",
top: 0,
left: 0,
filter: "alpha(opacity=30)",
opacity: 0.3
}); //图片及文字层
var content = $("<div id=" + load.attr("data-loadlayer-id") + "-content" + "></div>");
content.css({
textAlign: "left",
position: "absolute",
zIndex: 9999,
//height: opt.height + "px",
//width: opt.width + "px",
top: "50%",
left: "50%",
verticalAlign: "middle",
//background: opt.backgroudColor,"#ECECEC"
background: "#ECECEC",
borderRadius: "3px",
padding:"2px 5px 2px 5px",
fontSize: "13px"
}); //content.append("<img style='vertical-align:middle;margin:" + (opt.height / 4) + "px; 0 0 5px;margin-right:5px;' src='" + opt.backgroundImage + "' /><span style='text-align:center; vertical-align:middle;'>" + opt.text + "</span>");
content.append("<span style='text-align:center; vertical-align:middle;color:#000000'>" + load.attr("data-loadlayer-msg") + "</span>");
load.append(layer.append(content));
var top = content.css("top").replace('px', '');
var left = content.css("left").replace('px', '');
content.css("top", (parseFloat(top) - parseFloat(content.css("height")) / 2)).css("left", (parseFloat(left) - parseFloat(content.css("width")) / 2)); layer.hide();
return this;
} $(document).ready(function () {
createLayer($("div[data-loadlayer=true]"))
});
})(jQuery)

使用方法

 <div data-loadlayer="true" data-loadlayer-id="load" data-loadlayer-msg="loading..."></div>

然后需要在调用的地方data-ajax-loading="#load"即可

jquery.unobtrusive-ajax.js单独的用法的更多相关文章

  1. ASP.NET Core中的jQuery Unobtrusive Ajax帮助器

    最近在ASP.NET Core下写文章管理系统时,准备在分页显示文章内容时,使用Ajax.网上找了篇帖文,简单翻一下,仅供自己查阅. 原链接:https://dotnetthoughts.net/jq ...

  2. AjaxHelper创建的ajax无效,JQuery直接方法post有效,原来是Microsoft.jQuery.Unobtrusive.Ajax错误,NuGet解决

    Get-Package -ListAvailable -Filter Microsoft.JQuery Microsoft.jQuery.Unobtrusive.Ajax –Version 3.2.0

  3. 关于Jquery中ajax方法data参数用法的总结

    data 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 processData 选项说明以禁止此自动转换.必须为 Key/Value 格式.如果为数组,jQ ...

  4. 【转】关于Jquery中ajax方法data参数用法的总结

    $.ajax({ type: "POST", url: "some.php", data: "name=John&location=Bosto ...

  5. MVC4 AspNet MVC下的Ajax / 使用微软提供的Ajax请求脚本 [jquery.unobtrusive-ajax.min.js]

    源码参考:链接:http://pan.baidu.com/s/1pKhHHMj  密码:mkr4 1:新建-->项目-->Web-->ASP.NET MVC 4 Web 应用程序.命 ...

  6. [ASP.NET MVC 小牛之路]14 - Unobtrusive Ajax

    Ajax (Asynchronous JavaScript and XML 的缩写),如我们所见,这个概念的重点已经不再是XML部分,而是 Asynchronous 部分,它是在后台从服务器请求数据的 ...

  7. 【转】Unobtrusive Ajax的使用

    [转]Unobtrusive Ajax的使用 Ajax (Asynchronous JavaScript and XML 的缩写),如我们所见,这个概念的重点已经不再是XML部分,而是 Asynchr ...

  8. 【ASP.NET MVC 学习笔记】- 15 Unobtrusive Ajax

    本文参考:http://www.cnblogs.com/willick/p/3418517.html 1.Unobtrusive Ajax允许我们通过 MVC 的 Help mothod 来定义 Aj ...

  9. jQuery(二) jQuery对Ajax的使用

    学习使我快乐!嘿 --WH 一.jQuery使用Ajax 想要了解jQuery如何使用Ajax,并且体会到它所带来的方便性,那么就得了解原始的Ajax是如何编写的,是怎样的繁琐,然后和Jquery的代 ...

随机推荐

  1. hibernate使用原生SQL查询返回结果集的处理

    今天没事的时候,看到公司框架里有一个用原生SQL写的函数,说实在以前自己也干过这事,但好久都没有用,都忘得差不多了,现在基本都是用的hql语句来查询结果.hibernate中使用createSQLQu ...

  2. [Java] 我的Coding Style 总结

    1. 缩进 采用4个空格的缩进方式 2. tab 不采用"hard" tab. 需要更改编辑器的默认配置.将tab值改成4个空格. 3. 换行 3.1 一行不超过75个字符 3.2 ...

  3. DAY13 Matlab实现图像错切源代码

    Matlab实现图像错切源代码 %错切im=(imread('robot.jpg'));im1=rgb2gray(im);figure,imshow(im1);[row,col]=size(im1); ...

  4. 操作笔记:linux下查看端口被占用

    [root@iZ945sgm0ugZ /]# lsof -i:8080 COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME java 1192 jet ...

  5. ajax 跳入error的一些原因

    先放一个标准的jquery的ajax代码: $.ajax({ type: 'POST', url: 'getSecondClassification', data: {"sort2" ...

  6. ios开发之OC基础-oc小程序

    本系列的文章主要来自于个人在学习前锋教育-欧阳坚老师的iOS开发教程之OC语言教学视频所做的笔记,边看视频,边记录课程知识点.建议大家先过一遍视频,在看视频的过程中记录知识点关键字,把把握重点,然后再 ...

  7. poj3349 哈希

    这题目写了一上午,一直错,然后自己测试数据还都对.为什么呢,为什么呢,后来我才发现代码里有一行free(tmp)...在55行那里... #include <stdio.h> #inclu ...

  8. A Neural Probabilistic Language Model

    A Neural Probabilistic Language Model,这篇论文是Begio等人在2003年发表的,可以说是词表示的鼻祖.在这里给出简要的译文 A Neural Probabili ...

  9. Windows Phone零距离开发(Composite Thread组合线程)

    简洁流畅,快速响应是Windows Phone的特点也是他的买点,我们在开发App时候,也要在手机有限的硬件性能上最大限度做到UI快速响应,微软在优化手机快速响应这块做了很多底层优化工作,其中有一个就 ...

  10. .NET如何从配置文件中获取连接字符串

    一.设置配置文件 <configuration> <!--在configuration下创建一个connectionStrings--> <connectionStrin ...