标签：
（插件本身已经减少了人力，如果开始无脑开发，简直就是无能，@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()这两个函数。为此我写了一个遮罩的扩展
1 //创建简单遮罩层，显示load时的信息，配合Unobtrusive 2 ; (function ($) { 3 //设置背景层高 4 function height() { 5 var scrollHeight, offsetHeight; 6 // handle IE 6 7 if ($.browser.msie && $.browser.version < 7) { 8 scrollHeight = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight); 9 offsetHeight = Math.max(document.documentElement.offsetHeight, document.body.offsetHeight); 10 if (scrollHeight < offsetHeight) { 11 return $(window).height(); 12 } else { 13 return scrollHeight; 14 } 15 // handle "good" browsers 16 } 17 else if ($.browser.msie && $.browser.version == 8) { 18 return $(document).height() - 4; 19 } 20 else { 21 return $(document).height(); 22 } 23 }; 24 //设置背景层宽 25 function width() { 26 var scrollWidth, offsetWidth; 27 // handle IE 28 if ($.browser.msie) { 29 scrollWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth); 30 offsetWidth = Math.max(document.documentElement.offsetWidth, document.body.offsetWidth); 31 if (scrollWidth < offsetWidth) { 32 return $(window).width(); 33 } else { 34 return scrollWidth; 35 } 36 // handle "good" browsers 37 } 38 else { 39 return $(document).width(); 40 } 41 }; 42 /*==========全部遮罩=========*/ 43 function createLayer(load) { 44 //背景遮罩层 45 var layer = $("<div id=" + load.attr("data-loadlayer-id") + "></div>"); 46 layer.css({ 47 zIndex: 9998, 48 position: "absolute", 49 height: height() + "px", 50 width: width() + "px", 51 background: "black", 52 top: 0, 53 left: 0, 54 filter: "alpha(opacity=30)", 55 opacity: 0.3 56 }); 57 58 //图片及文字层 59 var content = $("<div id=" + load.attr("data-loadlayer-id") + "-content" + "></div>"); 60 content.css({ 61 textAlign: "left", 62 position: "absolute", 63 zIndex: 9999, 64 //height: opt.height + "px", 65 //width: opt.width + "px", 66 top: "50%", 67 left: "50%", 68 verticalAlign: "middle", 69 //background: opt.backgroudColor,"#ECECEC" 70 background: "#ECECEC", 71 borderRadius: "3px", 72 padding:"2px 5px 2px 5px", 73 fontSize: "13px" 74 }); 75 76 //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>"); 77 content.append("<span style=‘text-align:center; vertical-align:middle;color:#000000‘>" + load.attr("data-loadlayer-msg") + "</span>"); 78 load.append(layer.append(content)); 79 var top = content.css("top").replace(‘px‘, ‘‘); 80 var left = content.css("left").replace(‘px‘, ‘‘); 81 content.css("top", (parseFloat(top) - parseFloat(content.css("height")) / 2)).css("left", (parseFloat(left) - parseFloat(content.css("width")) / 2)); 82 83 layer.hide(); 84 return this; 85 } 86 87 $(document).ready(function () { 88 createLayer($("div[data-loadlayer=true]")) 89 }); 90 })(jQuery)
使用方法
<div data-loadlayer="true" data-loadlayer-id="load" data-loadlayer-msg="loading..."></div>
然后需要在调用的地方data-ajax-loading="#load"即可
jquery.unobtrusive-ajax.js单独的用法
标签：
原文地址：http://www.cnblogs.com/RainbowInTheSky/p/4540642.html
