jquery.unobtrusive-ajax.js单独的用法

（插件本身已经减少了人力，如果开始无脑开发，简直就是无能，@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)

View Code

 

使用方法

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

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