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"即可
jquery.unobtrusive-ajax.js单独的用法的更多相关文章
- ASP.NET Core中的jQuery Unobtrusive Ajax帮助器
最近在ASP.NET Core下写文章管理系统时,准备在分页显示文章内容时,使用Ajax.网上找了篇帖文,简单翻一下,仅供自己查阅. 原链接:https://dotnetthoughts.net/jq ...
- AjaxHelper创建的ajax无效,JQuery直接方法post有效,原来是Microsoft.jQuery.Unobtrusive.Ajax错误,NuGet解决
Get-Package -ListAvailable -Filter Microsoft.JQuery Microsoft.jQuery.Unobtrusive.Ajax –Version 3.2.0
- 关于Jquery中ajax方法data参数用法的总结
data 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 processData 选项说明以禁止此自动转换.必须为 Key/Value 格式.如果为数组,jQ ...
- 【转】关于Jquery中ajax方法data参数用法的总结
$.ajax({ type: "POST", url: "some.php", data: "name=John&location=Bosto ...
- MVC4 AspNet MVC下的Ajax / 使用微软提供的Ajax请求脚本 [jquery.unobtrusive-ajax.min.js]
源码参考:链接:http://pan.baidu.com/s/1pKhHHMj 密码:mkr4 1:新建-->项目-->Web-->ASP.NET MVC 4 Web 应用程序.命 ...
- [ASP.NET MVC 小牛之路]14 - Unobtrusive Ajax
Ajax (Asynchronous JavaScript and XML 的缩写),如我们所见,这个概念的重点已经不再是XML部分,而是 Asynchronous 部分,它是在后台从服务器请求数据的 ...
- 【转】Unobtrusive Ajax的使用
[转]Unobtrusive Ajax的使用 Ajax (Asynchronous JavaScript and XML 的缩写),如我们所见,这个概念的重点已经不再是XML部分,而是 Asynchr ...
- 【ASP.NET MVC 学习笔记】- 15 Unobtrusive Ajax
本文参考:http://www.cnblogs.com/willick/p/3418517.html 1.Unobtrusive Ajax允许我们通过 MVC 的 Help mothod 来定义 Aj ...
- jQuery(二) jQuery对Ajax的使用
学习使我快乐!嘿 --WH 一.jQuery使用Ajax 想要了解jQuery如何使用Ajax,并且体会到它所带来的方便性,那么就得了解原始的Ajax是如何编写的,是怎样的繁琐,然后和Jquery的代 ...
随机推荐
- 01-事件处理简介/UIView拖拽
1.ios当中常见的事件? 触摸事件 加速计事件 远程控制事件2.什么是响应者对象? 继承了UIResponds的对象我们称它为响应者对象 UIA ...
- 软件测试—— junit 单元测试
Tasks: Install Junit(4.12), Hamcrest(1.3) with Eclipse Install Eclemma with Eclipse Write a java pro ...
- java 中的fanal
三.java中有final final 修饰符 关键字可用于修饰类,变量和方法,final关键字有点类似于C#里的sealed 关键字,用于表示它修饰的类,方法和变量不可改变. fina修饰变量时,表 ...
- 处理程序“WebServiceHandlerFactory-Integrated”在其模块列表中有一个错误模块“ManagedPipelineHandler”
开发web项目时需要安装IIS,在安装好IIS的Windows7本上发布asp.net网站时,web程序已经映射到了本地IIS上,但运行如下错误提示“处理程序“PageHandlerFactory-I ...
- Duilib学习笔记《02》— 界面布局
1. 界面描述XML文件 Duilib主要是通过XML来进行界面的布局配置,程序通过读取并解析XML文件来创建对应的窗体.DuiLib的页面布局分为三类:窗体(Window).容器(Contain)和 ...
- express 框架初步体验
一. 安装express 1.打开cmd 全局安装express 输入:npm install -gd express 2. 安装命令行工具,不然你输入express 会出现 不是内部命令. 输入: ...
- 使用fiddler2抓取手机发出的请求信息
fiddler2 简介:抓包软件,可以替换服务器js,从而实现本地调试 初始化设置: 1.工具——fiddler选项——常规——允许远程计算机连接(打钩) 2.按下图设置 3.设置连接,如 ...
- C# 中DataGridView 绑定List<T>做数据源的操作问题
若想将 List<T>作为DataGridView的数据源,然后后续还想继续操作的话,需要将List<T>赋值给BindingList对象, 然后直接将BindingList赋 ...
- 有联系的jQuery选择器
1.包含关系 2.相邻关系 //JavaScript$(document).ready(function () { $(".studentName + div").hide(); ...
- Magento后台界面全局样式修改之——font-weight
路径: \app\design\adminhtml\Magento\backend\web\app\setup\styles\less\lib\_variables.less