JQuery on 冯威的博客

jQuery上传插件Uploadify使用详解(3.2.1)

Sun, 25 Sep 2016 18:57:49 +0800

六年前，因为工作中使用到 jQuery 的上传组件 Uploadify ，写了一篇《JQuery上传插件Uploadify使用详解》的博客来介绍 Uploadify ，其实只是将官方文档简单翻译了下。几年下来居然有50多万的访问量，而且每天通过各种搜索引擎有大几百的朋友会访问到这篇文章。六年时间 Uploadify 从当时的2.1.0到了现在的3.2.1，变化还是挺大，为了对访问到之前那篇博客的朋友还有点价值，特写此篇。

使用fancybox

Wed, 02 Dec 2015 00:00:00 +0800

fancybox是一款不错的展示图片的jQuery插件，就目前在网上查到的资料大体有1.x和2.x两个大大版本，两个版本的用法有不少的差别，本文主要介绍的是2.1.5版本的使用。

jQuery跨域调用Asp.Net Web API

Sat, 15 Aug 2015 00:00:00 +0800

Asp.Net Web API是一个轻量级的Web服务，当Web API和Web程序不是部署在同一域的时候，要使用jQuery来实现调用API的接口就存在跨域的问题。下面介绍两种方式来解决jQuery调用API跨域的问题。

jQuery知识总结

Sat, 13 Apr 2013 00:00:00 +0800

前言

jQuery一直都在用，但都是在用时查查手册，并没有系统的学过，最近组内做jQuery交流，花了几天时间系统了学习了下，做了个PPT，本文是根据PPT总结而来，有些地方做了些补充。希望对jQuery初学者有些帮助。

jQuery简介

简介

jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写的更少,做的更多)。 jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多javascript高手加入，现在由Dave Methvin率领团队进行开发。如今， jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery 。【摘自百度百科】

下载地址

http://jquery.com/

源码地址

https://github.com/jquery/jquery

可以通过 git clone git://github.com/jquery/jquery.git来获取源码。

在线文档

http://www.ostools.net/apidocs/apidoc?api=jquery
http://www.ostools.net/上有各种在线工具，在此推荐下。

使用jQuery

使用jQuery首先需要在页面中进行引用，如下：

<script type=”text/javascript” src=”Scripts/jquery-1.8.1.min.js”></script>

使用的代码如下：

$(document).ready(function () {
 $("#div1").html("hello world");
});

$(function () {
 $("#btnOK").bind("click", function () { 

 });
});

上面的代码相当于window.onload，不过跟window.onload还是有一些区别，后面会以表格的形式来展现他们的区别。在jQuery中到处可以见到$符号，这是jQuery里的一种简写，$("#btnOK")和jQuery("#btnOK")是等价的。

window.onload和$(document).ready()的区别

	WINDOW.ONLOAD	$(DOCUMENT).READY()
执行时间	网页所有内容加载完后执行	DOM结构加载完后就执行，效率更高
编写个数	1个	多个，多个的执行顺序取决于函数的顺序以及引用文件的顺序
是否支持简写	不支持	简写形式为：$(function(){});

DOM对象和jQuery对象转换

获取DOM对象代码如下：

//获取DOM对象
var div1 = document.getElementById("div1");

div1.innerHTML = "oec2003";

获取jQuery对象代码如下:

//获取jQuery对象
var div1 = $("#div1");

div1.html("oec2003");

jQuery对象转DOM对象

//因为ajQuery对象是一个数组对象，所以转换为DOM对象时要用索引的形式

var $div1 = $("#div1"); //jQuery对象

var div1 = $div1[0]; //转换为了DOM对象

var div2 = $div1.get(0); //和上面一行效果一样

div1.innerHTML = "oec2003";

DOM对象转jQuery对象

//DOM对象转jQuery只需用$包装即可

var div1 = document.getElementById("div1");

var $div1 = $(div1); //转换为了jQuery对象

$div1.html("oec2003");

解决冲突

有时会有jQuery和其他的库或自己写的一些公共脚本文件一起使用的场景，就有可能会出现$冲突的问题，冲突的解决分两种情况：

1、jQuery库在其他库之后引用，如下所示：

<script type=”text/javascript” src=”Scripts/jquery-1.8.1.min.js”></script>

<script type=”text/javascript” src=”Scripts/common.js”></script>

在common.js中有对$重新定义，代码如下：

在Asp.Net中使用jQueryEasyUI

Sun, 25 Nov 2012 00:00:00 +0800

前言

最近做一个小工具，列表显示页面准备使用jQuery的UI框架，因为之前知道有jQWidgets这个框架,所以直接就下载下来使用了,jQWidgets的功能很强大,Demo和文档也非常详细,但使用后发现有几个问题就果断放弃了使用jQWidgets:

页面加载速度比较慢
当列表字段过多出现横向滚动条时,拖动滚动条非常卡(在IE下都很卡,Chrome好点)
分页取数稍显麻烦,也可能是我没研究透。

经过一番比较选择了jQueryEasUI，目前最新版本为1.3.1：

其实是用类似的框架，看看官网的文档也就OK了，本文是我最近是用jQueryEasyUI的一个总结，也可以让初使用jQueryEasyUI的朋友少走弯路。

下载引用

下载后解压的文件目录如下图：

demo：JQueryEasyUI的一些示例页面，在项目使用可以将该目录删除
locale：该目录中是一些本地化文件，用来支持不同的语言，如中文可以引用其中的easyui-lang-zh_CN.js
plugins和src：这两个目录中是支持JQueryEasyUI各种功能的js文件
themes：主题目录，目录中有三种主题，default、gray和metro，另外还有一个icons目录和icon.css，在页面使用引用icon.css即可。

使用jQueryEasyUI需要引用四个文件，两个css和两个js文件：

<link rel="stylesheet" type="text/css" href="../Scripts/jqueryeasyui/themes/gray/easyui.css" />
<link rel="stylesheet" type="text/css" href="../Scripts/jqueryeasyui/themes/icon.css" />
<script type="text/javascript" src="../Scripts/jqueryeasyui/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../Scripts/jqueryeasyui/jquery.easyui.min.js"></script>

如果需要使用本地化还需要引用：

<script type="text/javascript" src="../Scripts/jqueryeasyui/locale/easyui-lang-zh_CN.js"></script>

jQueryEasyUI Grid的分页

根据官网的文档可以很容易的构建Grid，期初我没有引用本地化文件easyui-lang-zh_CN.js，列表的分页栏显示出来是英文的，在网上查阅后得知可以用代码的方式重新构建分页栏：

//设置分页控件 var p = $('#dg').datagrid('getPager');
$(p).pagination({
 pageSize: 10, //每页显示的记录条数，默认为10 
 pageList: [10, 20, 30, 40, 50], //可以设置每页记录条数的列表 beforePageText: '第', //页数文本框前显示的汉字 
 afterPageText: '页 共 {pages} 页',
 displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录'
 /*onBeforeRefresh:function(){ $(this).pagination('loading'); 
 alert('before refresh'); $(this).pagination('loaded'); }*/
});

后来发现只需要引用本地化文件easyui-lang-zh_CN.js后分页栏就自动显示为中文了。引用本地化文件还可以解决日历控件格式的问题，所以如果是做中文系统建议还是在页面中引用本地化文件。

jQueryEasyUI控件的取值

使用JQuery取控件的值很简单，如下：

$("#CstName").val();
$("#TaskNo").val(),

如果要使用jQueryEasyUI的日历控件、下拉控件或其他的一些控件，给普通的input、select控件添加一个class即可：

<input id="FeedBackDate" name="FeedBackDate" class="easyui-datebox" maxlength="10"
 style="width: 150px;" />
<select id="IsKfCl" class="easyui-combobox" name="IsKfCl" style="width:150px;"> 
 <option value=""></option> 
 <option value="是">是</option> 
 <option value="否">否</option> 
</select>

现在取这些控件的值需要使用下面的方法：

$("#FeedBackDate").datebox("getValue");
$("#IsKfCl").combobox("getValue");

Grid ToolBar的两种方式

通常在Grid列表控件的上方会添加一些按钮如：新增、编辑、删除等，如下面效果：

在jQueryEasyUI中可以使用ToolBar来实现，ToolBar可以在DataGrid初始化时定义，如下：

jQuery boxy插件弹出框的四个边角图片在IE中不显示问题的解决

Thu, 09 Dec 2010 00:00:00 +0800

jQuery boxy插件很好用，但也会出现一些问题，比如弹出框的边角在IE中不能显示。本博文将来解决这个问题。将boxy插件引用到项目中后会有一个boxy.css文件和jquery.boxy.js文件。在boxy.css文件中有给弹出框设置四个角图片的样式，如下图：

不做任何修改在Chrome浏览器下没有问题，如下：

在网上查了一些资料，说将css文件中的图片路径给位全路径可以解决问题，如下：

发现这样修改后并没有作用，运行后效果仍然如下：

有效的解决方法

将上面css截图的下半部分注释掉，如下图：

然后在jquery.boxy.js文件中的Boxy函数中添加一段脚本，下面贴出修改后的Boxy函数代码：

function Boxy(element, options) {

 this.boxy = jQuery(Boxy.WRAPPER);
 jQuery.data(this.boxy[0], 'boxy', this);

 this.visible = false;
 this.options = jQuery.extend({}, Boxy.DEFAULTS, options || {});

 if (this.options.modal) {
 this.options = jQuery.extend(this.options, {center: true, draggable: false});
 }

 // options.actuator == DOM element that opened this boxy
 // association will be automatically deleted when this boxy is remove()d
 if (this.options.actuator) {
 jQuery.data(this.options.actuator, 'active.boxy', this);
 }

 this.setContent(element || "<div></div>");
 this._setupTitleBar();

 this.boxy.css('display', 'none').appendTo(document.body);
 this.toTop();

 if (this.options.fixed) {
 if (jQuery.browser.msie && jQuery.browser.version < 7) {
 this.options.fixed = false; // IE6 doesn't support fixed positioning
 } else {
 this.boxy.addClass('fixed');
 }
 }

 if (this.options.center && Boxy._u(this.options.x, this.options.y)) {
 this.center();
 } else {
 this.moveTo(
 Boxy._u(this.options.x) ? this.options.x : Boxy.DEFAULT_X,
 Boxy._u(this.options.y) ? this.options.y : Boxy.DEFAULT_Y
 );
 }

 //fengwei add 2010-11-28
 //用于解决弹出框的圆角在ie中的显示问题
 if ($.browser.msie) {
 var setFilter = function(cls) {
 var obj = $(cls), ret = obj.css("background-image").match(/url\(\"(.+)\"\)/);
 if (ret == null || ret.length < 1) return;
 obj.css({
 "background": "none", "filter": "alpha(opacity=0)",
 "filter": "progid:DXImageTransform.Microsoft.
 AlphaImageLoader(src='" + ret[1] + "')"
 });
 };

 setFilter(".top-left");
 setFilter(".top-right");
 setFilter(".bottom-left");
 setFilter(".bottom-right");
 }
 if (this.options.show) this.show();
};

修改好css和js文件后，再次运行程序，在IE6,7,8中均能正常弹出带边角的框了。

jQuery boxy插件的确认框在AspNet中的应用

Sat, 20 Nov 2010 00:00:00 +0800

jQuery有不少弹出框的插件，boxy应该算的上是功能和效果都还不错的一款了。先来看一张效果图吧。

在Web开发中经常会使用到Alert和Confirm弹出框，在Asp.Net中的删除按钮上我们常常会加上删除的确认提示，以避免误删除数据，就像上面图片那样。我们一般会写出这样的代码。

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
 <title></title>
 <script type="text/javascript">
 function confirmDel() {
 return confirm("您确认要删除吗？");
 }
 </script>
</head>
<body>
 <form id="form1" runat="server">
 <asp:Button ID="btnDel" runat="server" 
 OnClientClick="return confirmDel();" Text="删除" />
 </form>
</body>
</html>

上面的代码很简单，confirm弹出框会有两个按钮，点击确定返回true，点击取消返回false。在boxy插件中也有confirm方法，调用代码如下：

$(document).ready(function() {
 $("#btnDel").click(function() {
 Boxy.confirm("您确认要删除吗？", function() { }, null);
 return false;
 });
});

Boxy的confirm方法有三个参数分别是确认信息内容，弹出框点击确定的回调函数，一些设置项比如标题。上面的代码中如果不加上return false，那么弹出框会闪现，然后删除按钮的后天事件还是执行了。加上return false，那么不管是点击确定还是取消都不会执行后台事件，这显然达不到我们的要求，看来只能打点击确定后的回调函数的主意了。可以在一个公用的js文件中将Boxy的confirm封装一下：

页面的调用代码如下：

$(document).ready(function() {
 $("#Button1").click(function() { return confirmO(this, "您确认删除吗？") });

});

经过这样修改后，但点击弹出框的确定按钮时就会执行服务器事件了。

jQuery 1.4.1 VS智能提示文件下载

Tue, 09 Feb 2010 00:00:00 +0800

vs2008中默认的jquery版本为1.3.2 ，我在在vs2008中设置jquery智能提示一文中做了详细介绍。主要是靠一个vsdoc文件实现。在vs2010中默认的jquery的版本为1.4.1，现在已经又相对应的vsdoc文件下载，设置方法与vs2008中相同。

jQuery上传插件Uploadify使用详解

Wed, 06 Jan 2010 00:00:00 +0800

本文Uploadify版本为2.1.0，已经过时，截止（2016-09-25）最新版本3.2.1的详细介绍请移步《jQuery上传插件Uploadify使用详解(3.2.1)》

Uploadify是jQuery的一个上传插件，实现的效果非常不错，带进度显示。不过官方提供的实例时php版本的，本文将详细介绍Uploadify在Aspnet中的使用，您也可以点击下面的链接进行演示或下载。

首先按下面的步骤来实现一个简单的上传功能。

1 创建Web项目，命名为JQueryUploadDemo，从官网上下载最新的版本解压后添加到项目中。

2 在项目中添加UploadHandler.ashx文件用来处理文件的上传。

3 在项目图:

4 Default.aspx的html页的代码修改如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title>Uploadify</title>
 <link href="JS/jquery.uploadify-v2.1.0/example/css/default.css"
 rel="stylesheet" type="text/css" />
 <link href="JS/jquery.uploadify-v2.1.0/uploadify.css"
 rel="stylesheet" type="text/css" />

 <script type="text/javascript"
 src="JS/jquery.uploadify-v2.1.0/jquery-1.3.2.min.js"></script>

 <script type="text/javascript"
 src="JS/jquery.uploadify-v2.1.0/swfobject.js"></script>

 <script type="text/javascript"
 src="JS/jquery.uploadify-v2.1.0/jquery.uploadify.v2.1.0.min.js"></script>

 <script type="text/javascript">
 $(document).ready(function()
 {
 $("#uploadify").uploadify({
 'uploader': 'JS/jquery.uploadify-v2.1.0/uploadify.swf',
 'script': 'UploadHandler.ashx',
 'cancelImg': 'JS/jquery.uploadify-v2.1.0/cancel.png',
 'folder': 'UploadFile',
 'queueID': 'fileQueue',
 'auto': false,
 'multi': true
 });
 });
 </script>

</head>
<body>
 <div id="fileQueue"></div>
 <input type="file" name="uploadify" id="uploadify" />
 <p>
 <a href="javascript:$('#uploadify').uploadifyUpload()">上传</a>|
 <a href="javascript:$('#uploadify').uploadifyClearQueue()">取消上传</a>
 </p>
</body>
</html>

5 UploadHandler类的ProcessRequest方法代码如下：

public void ProcessRequest(HttpContext context)
{
 context.Response.ContentType = "text/plain";
 context.Response.Charset = "utf-8"; 

 HttpPostedFile file = context.Request.Files["Filedata"];
 string uploadPath =
 HttpContext.Current.Server.MapPath(@context.Request["folder"])+"\\"; 

 if (file != null)
 {
 if (!Directory.Exists(uploadPath))
 {
 Directory.CreateDirectory(uploadPath);
 }
 file.SaveAs(uploadPath + file.FileName);
 //下面这句代码缺少的话，上传成功后上传队列的显示不会自动消失
 context.Response.Write("1");
 }
 else
 {
 context.Response.Write("0");
 }
}

6 运行后效果如下图：

在vs2008中设置jquery智能提示

Wed, 20 May 2009 00:00:00 +0800

1 要确保您的vs2008已经打了sp1补丁，可以点击这里下载

2 下载 jQuery-vsdoc.js ，如果您安装了asp.net mvc ，可以在mvc的项目下的srcipts目下找到，或是点击这里下载。

3 下载安装一个vs2008支持 -vsdoc.js 智能提示的一个补丁，可以点击这里下载

4 准备工作已经做完，现在就可以来试试jquery的智能提示了，用vs2008新建一个项目，在页面的head标签里添加对jquery-1.3.2-vsdoc.js的引用

5 现在在js的方法中敲一个$符号，智能提示就会弹出来。

参考文章：http://weblogs.asp.net/scottgu/archive/2008/11/21/jquery-intellisense-in-vs-2008.aspx