(插件本身已经减少了人力,如果开始无脑开发,简直就是无能,@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. Arch yaourt 安装

    安装yaourt,最简单安装Yaourt的方式是添加Yaourt源至您的 /etc/pacman.conf:[archlinuxcn]#The Chinese Arch Linux communiti ...

  2. (旧)子数涵数·PS——替换颜色

    一,老规矩,下载素材(老样子,还是美美的少女) 二.打开PS,并打开素材. 三.复制一个图层,快捷键Ctrl+J(好习惯) 四.使用"替换颜色"命令,弹出对话框. 五.选择人物衣服 ...

  3. 6-10k招几个.NET开发工程师(工作地点:成都)

    目前工作的公司是一家做新加坡公司在成都的研发中心,目前有个项目组在做电子医疗记录(EMR)软件系统,在新加坡卖得还不错,由于以前版本的技术有障碍(主要采用WPF技术),目前老板决定投资用比较主流的技术 ...

  4. Android开发-API指南-数据存储

    Storage Options 英文原文:http://developer.android.com/guide/topics/data/data-storage.html 采集日期:2015-02-0 ...

  5. centos 6.5 samba简单配置

    1.安装samba yum -y install samba  (我的显示已经安装啦!) 2.编辑samba的配置文件 vi /etc/samba/smb.conf 用 testparm查看我配置后的 ...

  6. HTTP 错误 500(Internal Server Error)

    今天在用ajax请求页面的时候出现了这么一个错误:HTTP 错误 500(Internal Server Error) 由于提示较少,过了好一阵子才找到答案:ajax请求中调用了一个不存在的函数⊙﹏⊙ ...

  7. mongodb分组,的两种方式,先记一下

    using MongoDB.Bson; using MongoDB.Driver; using MongoDB.Driver.Builders; using NationalUnion.AdGalle ...

  8. CSS用border绘制三角形

    使用border绘制三角形的思路,就是border尺寸设置一个较大的值,元素自身的宽高设置为0,全部由边线占据,这样每边就会显示为四分之一块的三角形.这样不借助图片,可以直接绘制出三角形了. 一个栗子 ...

  9. MFC中release版本和debug版本区别

    最近MFC写了个程序,生成release版,原来正常,后来删掉了些控件再编译运行,结果竟然报内存读写错误,debug却是正常的.后来将“Project   Settings”   中   “C++/C ...

  10. adb调试命令详解-2016.02.01

    adb(Android Debug Bridge),调试桥可以让设备的调试监测过程在远端进行,而不必在运行实际运行应用的设备上,方便调试的输出. 1 命令详解 a 查看帮助信息         adb ...