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()這兩個函數。為此我寫了一個遮罩的擴展

 

//創建簡單遮罩層，顯示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"即可