梦想天空 jquery 目录
使用JQuery UI进行更换皮肤功能
主题：基于JQuery的换皮肤功能.
效果：
应用范围：网站或系统，可以更换指定皮肤
其他说明：
原理很简单，其实大家在学习JavaScript与CSS的时候应该就试过，使用js变更字体颜色的操作：
document.getelementByid("div_Description").style.color='red';
同样的道理，我们可以对 <head><link id='skin'>指定其href，实现相应的换肤效果。
源码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" id="skin"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/plugins/jquery-ui-1.8.14.custom/external/jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
function changecss(str) {
$("#skin").attr("href", str) //改变一下href属性其实这里已经完成
/*
$("#skin", window.frames[0].document).attr("href", str);//应用于子窗体
$(window.parent.document).find("#skin").attr("href", str);//应用于父窗体
*/
/*
$.cookie("css_skin", str)//这里是记录一下cookie,防止刷新就回到原来的css路径
下载路径:http://plugins.jquery.com/files/jquery.cookie.js.txt
*/
}
$(document).ready(function () {
/*
使用cookie 中存储 的样式要求，此方式还可以扩展换成从数据表中获取样式
if ($.cookie("css_skin") != null) {
changecss($.cookie("css_skin"));
}
*/
});
</script>
<script type="text/javascript">
$(function () {
$('ul#Pager li,table.ui-list .ui-list-row').hover(
function () { $(this).addClass('ui-state-hover'); },
function () { $(this).removeClass('ui-state-hover'); }
);
});
</script>
<style type="text/css">
#themes{font-size: 14px; font-weight: bold; text-align: right;}
#themes ul ,#themes li{ list-style:none;float:right; padding:10px}
body{font: 72.5% "Trebuchet MS" , sans-serif;margin: 50px;margin-top: 0px;}
.demoHeaders{margin-top: 2em;}
/*jquery extended ui Pager*/
.ui-pager{margin: 0;padding: 0;}
.ui-pager .ui-pager-item{margin: 2px;padding: 4px 0;cursor: pointer;float: left;list-style: none;}
.ui-pager span, .ui-pager span.ui-icon,.ui-pager a{float: left;margin:0 4px;height:16px;}
/*jquery extended ui List*/
.ui-list {width:100%;border: 1px solid #C6C6C6; empty-cells:hide; border-collapse: collapse}
.ui-list .ui-list-header th,.ui-list .ui-list-header td,
.ui-list .ui-list-row td {border:#c0c0c0 1px solid !important;border-bottom:none;line-height:16px;+line-height:18px;padding: 3px 7px 3px 6px;+padding: 2px 7px 2px 6px;}
.ui-list .ui-list-row td {overflow: hidden;text-overflow: ellipsis;-o-text-overflow: ellipsis;font-weight:normal;}
</style>
</head>
<body>
<div id="themes">
Chanage Themes :
<ul>
<li><a href="javascript:changecss('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/black-tie/jquery-ui.css')">
black-tie</a></li>
<li><a href="javascript:changecss('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/blitzer/jquery-ui.css')">
blitzer</a> </li>
<li><a href="javascript:changecss('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/smoothness/jquery-ui.css')">
smoothness</a> </li>
<li><a href="javascript:changecss('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/flick/jquery-ui.css')">
flick</a></li>
<li><a href="javascript:changecss('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/le-frog/jquery-ui.css')">
le-frog</a></li>
</ul>
</div>
<h2 class="demoHeaders">
Pager</h2>
<ul id="Pager" class="ui-pager ui-widget ui-helper-clearfix">
<li class="ui-pager-item ui-state-default ui-corner-all"><a class="">第一页</a></li>
<li class="ui-pager-item ui-state-default ui-corner-all"><a class="ui-icon ui-icon-circle-triangle-w">
前一页</a></li>
<li class="ui-pager-item ui-state-default ui-corner-all ui-state-active"><span>1</span></li>
<li class="ui-pager-item ui-state-default ui-corner-all"><a href="#" class="">2</a></li>
<li class="ui-pager-item ui-state-default ui-corner-all"><a href="#" class="">3</a></li>
<li class="ui-pager-item ui-state-default ui-corner-all"><a href="#" class="ui-icon ui-icon-circle-triangle-e">
下一页</a></li>
<li class="ui-pager-item ui-state-default ui-corner-all"><a class="">最后一页</a></li>
</ul>
<h2 class="demoHeaders">
List</h2>
<table class="ui-list ui-corner-all">
<tr class="ui-list-header ui-state-default">
<th class="">1 Columns</th><th class="">2 Columns</th><th class="">3 Columns</th><th class="">4 Columns</th><th class="">5 Columns</th><th class="">6 Columns</th><th class="">7 Columns</th>
</tr>
<tr class="ui-list-row">
<td>First</td><td>Second</td><td>Third</td><td>four</td><td>five</td><td>six</td><td>seven</td>
</tr>
<tr class="ui-list-row">
<td>First</td><td>Second</td><td>Third</td><td>four</td><td>five</td><td>six</td><td>seven</td>
</tr>
<tr class="ui-list-row">
<td>First</td><td>Second</td><td>Third</td><td>four</td><td>five</td><td>six</td><td>seven</td>
</tr>
</table>
</body>
</html>
学习jQuery UI 的使用心得及技巧
1 jQuery UI
2 为我所用
2.1 Tabs
2.2 Accordion
2.2.1 使用基本的Accordion
2.2.2 实现打开多个标签
2.2.3 Accordion的嵌套
3 给插件应用主题——Theme Roller
3.1 更改配色
3.2 更改图标
4 相关连接
jQuery UI
有时你仅仅是为了实现一个渐变的动画效果而不得不把javascrip 重新学习一遍然后书写大量代码。直到jQuery的出现，让开发人员从一大堆繁琐的js代码中解脱，取而代之几行jQuery代码。现今，jQuery无疑已成为最为流行没有之一的JavaScript类库。
而jQuery UI 则是在jQuery 基础上开发的一套界面工具，几乎包括了网页上你所能想到和用到的插件以及动画特效，让一个毫无艺术感只知道码字的码农不费吹灰之力就可以做出令人炫目的界面。让你在做界面的时候随便‘拿来'就用，还有一点就是，它是免费开源的，用户可根据需要自定义甚至重新设计。
2 为我所用
下面以Tabs和Accordion插件来看看如何在项目中使用jQuery UI。其他插件的详尽使用文档及演示在这里可以学习到，只不过是英文的。
2.1Tabs
Tabs 形式的插件在网页及桌面应用程序中都使用得相当广泛，可以用作菜单，也可做为一小部分内容的选项卡
首先在VS2010新建一个MVC项目，要使用jQuery UI,首先要把jQuery及jQuery UI 脚本文件包含在项目当中，并且相关页面要用<script>标签进行引用。当我们创建好一个MVC项目后，在Scripts文件夹里，系统已经自动把jQuery及jQuery UI 脚本文件包含在项目当中了（如图1）。
图 1
注释：图中jquery-1.5.1-vsdoc.js为包含完整提示注释的版本，在VS里编写代码时会有智能地显示提示信息及注释；jquery-1.5.1.js为标准版本；带min的为压缩精简后的版本，为的是在客户端减少下载时间。一般页面中我们会使用精简的版本，只要项目文件夹包含jquery-1.5.1-vsdoc.js，VS会自动调用里面的提示信息。
现在需要做的就是在页面将它包含进来。由于创建好项目后，系统在Site.Mater页面中已经将jQuery引用到页面，这意味着所有使用了母版页的页面都默认引用了jQuery,所以我们在index页面只需要添加对是jQuery UI文件的声明：
为了在页面上呈现Tabs插件，我们需要定义一个Div，并且在<script>脚本代码里面选中它，在它身上应用tabs方法。
<div id="tabs">
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
})
</script>
现在运行程序不会看到任何东西，因为我们还没有往主体Div中定义要显示的tab,只是定义好了一个可以放tabs的地方。现在tabs Div中定义一个无序列表，列表项决定了要显示的标签个数及要显示的标签名称。
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tabs1</a></li>
<li><a href="#tabs-2">Tabs2</a></li>
<li><a href="#tabs-3">Tabs3</a></li>
</ul>
<div id="tabs-1">
<p>content of tab one</p>
</div>
<div id="tabs-2">
<p>content of tab two</p>
</div>
<div id="tabs-3">
<p>content of tab three</p>
</div>
</div>
这里定义3个列表项，名称分别为Tabs1、Tabs2、Tabs3，列表下方的三个Div对应着上面定义的三个标签，用来呈现每个标签里面要显示的正文。页面部分基本完工。运行程序：
图 2
值得注意的是，进行到这一步并没有出现图0中的效果，tabs样式没有应用上。原因只可能有一个，那就是样式表。后来谷歌一下果然是没有把相应的样式表包含到页面。这在官方的Demo里也没有提及，也没给出相应的注意，我觉得这里Demo不该省略点如果重要的一句代码的，不一定每个第一次使用jQuery UI人都能快速找到问题。对于每一个新手，在进行到这一步都需要去谷歌一下为什么效果没出来。找到问题后解决起来就很简单了。在页面里加上对jQuery UI 样式表的引用。
图 3
最后完整的代码大概是这样的。
<link href="http://www.jb51.net/Content/themes/base/jquery.ui.all.css"type="text/css"rel="stylesheet"/>
<script src="http://www.jb51.net/Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tabs1</a></li>
<li><a href="#tabs-2">Tabs2</a></li>
<li><a href="#tabs-3">Tabs3</a></li>
</ul>
<div id="tabs-1">
<p>content of tab one</p>
</div>
<div id="tabs-2">
<p>content of tab two</p>
</div>
<div id="tabs-3">
<p>content of tab three</p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
})
</script>
由于是用的MVC模板生成的项目，所以在Content/themes/base文件夹里已经放入了jQuery UI的CSS样式表，如果没有，你需要单独下载然后放到项目中，并在页面正确引用。
现在再来刷新一下页面，效果就出来了。
图 4
既然是用样式表控制的，代表着我们可以随意对它进行自定义，换颜色等，这在后面的应用样式 里介绍。
对于Accordion控件就有一些东西需要说的了。因为对于一个东西，如果它不够灵活，不易扩展，会给使用者带来很大的不便。
图 5
先来看一下如何将Accordion插件应用起来。我们将它放到我们的Tabs1页面里。同Tabs一样，应用起来也非常的简单，只需把相应的Div定义好，之后，在脚本总要所要做的工作也就是一句代码的事。是不是体验到了jQuery UI所带来的便捷了。
将之前tabs-1 Div 中的<P>标签及内容删除掉，用如下的代码替换。
<div id="tabs-1">
<div id="accordion">
<h3>
<a href="#">Section 1</a></h3>
<div>
<p>content of section 1</p>
</div>
<h3>
<a href="#">Section 2</a></h3>
<div>
<p>content of section 2</p>
</div>
<h3>
<a href="#">Section 3</a></h3>
<div>
<p>content of section 3</p>
</div>
</div>
</div>
其中id为accordion的外围Div是容器，在脚本代码里面选中它然后对它应用accordion方法。
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
$("#accordion").accordion();
})
</script>
之后，里面的每个<a>标签就会被解析成一个可以点击的标题，<a>标签后紧跟<div>用于放置本小块的内容。最后效果如下图。
图 6
需要注意的地方有两点。一是样式，每个jQuery UI其实都用了在上面说的那个样式表，如果先前没将它引用进页面，这里的Accordion效果也是不会出来的。二是这里的格式需要严格按照一个<a>标签然后跟一个<div>标签的形式，这样的交叉形式如果被打乱，呈现出来的结果将是你所不愿意扯的。比如你在<a>跟两个<div>：
<div id="accordion">
<h3>
<a href="#">Section 1</a></h3>
<div>
<p>content of section 1.1</p>
</div>
<div>
<p>content of section 1.2</p>
</div>
<h3>
<a href="#">Section 2</a></h3>
<div>
<p>content of section 2</p>
</div>
<h3>
<a href="#">Section 3</a></h3>
<div>
<p>content of section 3</p>
</div>
</div>
你原本以为 这两个div会被包在第一个secion里面，但其实真实的效果会是有点离谱的：
图 7
是不是有点坑爹。那如果我需要在section里进行布局，非要放两个Div或者更多呢。那就必需把这些内容装到一个div中再放到section1里面，这样就不会出错了。为了显示出确实是放了两个Div，给每个Div加上边框。
<div id="accordion">
<h3>
<a href="#">Section 1</a></h3>
<div>
<div style="border: 1px solid gray">
<p>content of section 1.1</p>
</div>
<div style="border: 1px solid gray">
<p>content of section 1.2</p>
</div>
</div>
<h3>
<a href="#">Section 2</a></h3>
<div>
<p>content of section 2</p>
</div>
<h3>
<a href="#">Section 3</a></h3>
<div>
<p>content of section 3</p>
</div>
图 8
jQuery UI Accordion最大的一个硬伤也是最让人蛋疼的特性就是同时只能打开一个标签，比如Section1被点开了，其他Secton必然处于闭合状态。如果我想实现同时有几个标签处于打开状态呢，并且我不希望打开的标签因为我点击了另外的标签而关闭掉。很遗憾，这个插件并不有提供相应的Option。更牛逼的是，在官方的Demo中明确说了，如果你非要让多个标签同时处于打开状态，那你就不要用我们的Accordion好了，爱用啥用啥，反正我们就是要让它只支持一个标签被打开。
图 9
好吧，我还没强大到可以重写这个Accordion插件，于是我谷歌“expander”” multi open accordion”之类的，确实还是有很多朋友是有这样的需求的，并且也有牛人给出了一些解决方法，但都有点复杂。最后的最后，我突然顿悟，把每个section都定义成accordion不就行了嘛。一个acction同时只能打开一个secton，如果我想要每个section都可任意打开关闭而不影响别的部分，那把每个section用accordion代替就好了，并且accordion里只定义一个section。
说起来有点晕，下面修改之前的代码，定义id分别为accordion1,accordion2,accordion3三个div并放入相应内容:
<div id="tabs-1">
<div id="accordion1">
<h3><a href="#">Section 1</a></h3>
<div>content of section 1</div>
</div>
<div id="accordion2">
<h3><a href="#">Section 2</a></h3>
<div>content of section 2</div>
</div>
<div id="accordion3">
<h3><a href="#">Section 3</a></h3>
<div>content of section 3</div>
</div>
</div>
然后修改脚本代码：
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
$("#accordion1").accordion();
$("#accordion2").accordion();
$("#accordion3").accordion();
})
</script>
运行程序，发现三个secton同时打开了，并且还不能关闭！这显然也不是我们想要的结果。原因很简单，如果上面所说的accordion这个插件有且仅有一个section是被打开的，每个accordion里我们只定义了一个section，那这个section毫无疑问应该处于被打开状态，由于只有它一个，把它关闭了之后没有其他section可以打开，所以索性我们想关它都关不掉了。
但幸运的是，我们可以通过设置accordion的collapsible为true来让这个唯一的section可以进行折叠打开操作。只需修改脚本如下：
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
$("#accordion1").accordion({ collapsible: true });
$("#accordion2").accordion({ collapsible: true });
$("#accordion3").accordion({ collapsible: true });
})
</script>
再次运行程序，Okay，一切如我们所想的那样。
图 10
还有个问题就是accordion的嵌套。一开始我在尝试去实现这个功能时也是遇到了些麻烦的。
比如现在我们要在section 1里面想再放一个accordion，给它取名为subaccordion吧，需要注意的地方就是 这个subaccordion一定要放在“content of section1”这个Div中，其他任何形式的摆放都不会出现正确的效果。如果你觉得直接在Accordion 1里面加一个<a>标签再加一个<div>，就会正确地在Section1里面解析出一个内嵌于Accortion1的Accordion，那你就错了。最后的代码及效果如下。
<div id="tabs-1">
<div id="accordion1">
<h3><a href="#">Section 1</a></h3>
<div>
<div id="subaccortion">
<h3><a href="#">subaccortion</a></h3>
<div>content of subaccortion</div>
</div>
</div>
</div>
<div id="accordion2">
........
图 11
有点不完美的地方就是Section1出现了滚动条，下面我们设置一下高度属性并且让里面那个子accortion一开始处于折叠状态。
修改脚本代码如下：
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
$("#accordion1").accordion({ collapsible: true, autoHeight: false });
$("#subaccortion").accordion({ collapsible: true, active:false });
$("#accordion2").accordion({ collapsible: true, autoHeight: false });
$("#accordion3").accordion({ collapsible: true, autoHeight: false });
})
</script>
图 12
从这里你已经可以看到，可以设置任意一个标签一开始是处于折叠还是打开状态。当然也可以将一个accortion disable掉，那样点击标题就不会有折叠打开动作了。
3 给插件应用主题——Theme Roller 3.1更改配色
现在，我们是可以方便地使用jQuery UI 做出界面了。但试想，那么多人如果都在用，会不会把整个互联网搞得千篇一律，用户一打开浏览器走到哪里看到的都是同一个东西，会不会有点摸不着北。并且我们也需要在使用这些插件的时候进行一些调整以符合我们自己网站的主题，色调等。
jQuery UI支持用户定义样式，你甚至可以更改实现代码来进行更高级的自定义，如果你有能力的话。
你可以修改相应的css文件以达到修改样式的目的，但这不如到官网的主题网站去下载自己需要的主题，并且还可以在线编辑出自己想要的主题。
进入theme roller后，选择自己喜欢的主题样式下载下来。
图 13
解压后进行到css文件夹，将jquery-ui-1.8.24.custom.css文件和images文件夹复制到项目中适当位置，然后需要在页面正确地引用到，便可将样式应用上。不管你应用什么主题，主题所使用的图片名字都是一样的，只是颜色不一样而以。由于本例是用MVC模板生成的项目，所以项目中的imges文件夹中已经存在的图片和下载下来的图片可能部分重名，复制时询问是否替换，点击确实即可。
图 14
图 15
这时把之前写的样式表引用改成对这个customer样式表的引用
<link href="http://www.jb51.net/Content/themes/base/jquery-ui-1.8.24.custom.css" type="text/css" rel="stylesheet" />
然后去刷新页面，效果如下图：
图 16
需要注意的是jquery-ui-1.8.24.custom.css与images文件夹的相对位置最好不要改变，也就是把它们两个放一起，因为css文件中会调用images文件夹中的图片，如果你改变了他们的相对位置，就需要到css中把所有对图片的调用路径通通改正确后才能使主题正常工作。
不仅仅是颜色，jQuery UI的主题里面，也为我们预设了很多图标可供选择，在网页上我们可以看到有一大堆丰富的图标。这些图标的颜色对应你所下载的主题，包含在了imges文件夹中。
图 17
问题是在这么多图标中如何准确指定我们想要的那一个。比如现在想把Accordion标题左边的三角形图标改成线条形的尖角形状。
下面只是个人提供的一个小技巧。将鼠标指到你想要的图标身上，会出现tooltip提示文本，这个文字就对应这个图标。
图 18
现在我们得到这个名字后，就可以到脚本代码里去进行修改了。
<script type="text/javascript">
$(document).ready(function () {
$("#tabs").tabs();
$("#accordion1").accordion({ collapsible: true, autoHeight: false,
icons: { "header": "ui-icon-carat-1-n", "headerSelected": "ui-icon-carat-1-s" }
});
$("#subaccortion").accordion({ collapsible: true, active:false ,
icons: { "header": "ui-icon-carat-1-n", "headerSelected": "ui-icon-carat-1-s" }
});
$("#accordion2").accordion({ collapsible: true, autoHeight: false ,
icons: { "header": "ui-icon-carat-1-n", "headerSelected": "ui-icon-carat-1-s" }
});
$("#accordion3").accordion({ collapsible: true, autoHeight: false,
icons: { "header": "ui-icon-carat-1-n", "headerSelected": "ui-icon-carat-1-s" }
});
})
</script>
最后来看下效果,perfect.
图19
到这里基本介绍了jQuery UI的使用过程。当然，jQuery UI不只包含tabs和accordion 这两个插件，其他的插件及效果的使用也相差不多，详尽的使用及设置方法都可以在官方的文档及Demo中找到答案。
后记：因为jQuery已经火得一塌糊涂了,如果再结合jQuery UI，将更大程度上减轻程序员的负担。在享受这些便利的同时，我们不得不默默地内心要感谢一下那些为jQuery及UI做出奉献的同行们，同时我们也能尽我们自己的一分力量，来丰富扩展jQuery的插件及UI库。
相关连接
jQuery UI 官网
http://jqueryui.com/
theme roller
http://jqueryui.com/themeroller/
如何设置jquery插件DataTables属性
DataTables(http://www.datatables.net/)应该是我到目前为止见过的，功能最强大的表格解决方案（当然，不计算其它整套框架中的table控件在内）。
先把它主页上写的特性翻译罗列如下：
- 可变长度分页；
- 动态过滤；
- 多列排序，带数据类型检测功能；
- 列宽度的智能处理；
- 从多种数据源获取数据（DOM，js Array, ajax file, server-side returning）；
- 滚动配置属性；
- 完整国际化支持；
- jquery UI ThemeRoller支持；
- 经历了个2600多个单元测试，相当牢固；
- 有为数不少的插件支持；
- 免费的；
- 状态保存能力；
- 支持隐藏列；
- 动态创建表格的能力；
- 自动ajax数据加载；
- 自定义DOM位置；
- 单列过滤（这个与前面的过滤有区别么？）；
- 多种分页器；
- 无损的DOM交互；
- 参与排序的列高亮；
- 高级数据源配置；
- 扩展的插件支持功能；
- 可以用css完全配置表象；
- 丰富的文档；
- 110多个例子；
- 对Adobe AIR的完全支持。
引入
使用
- $(document).ready(function(){
- $('#example').dataTable();
- });
- // 另一个例子
- $(document).ready(function(){
- $('#example').dataTable({
- "bInfo": false
- });
- });
要注意的是，要被dataTable处理的table对象，必须有thead与tbody，而且，结构要规整（数据不一定要完整），这样才能正确处理。
以下是在进行dataTable绑定处理时候可以附加的参数：
| 属性名称 | 取值范围 | 解释 |
| bAutoWidth | true or false, default true | 是否自动计算表格各列宽度 |
| bDeferRender | true or false, default false | 用于渲染的一个参数 |
| bFilter | true or false, default true | 开关，是否启用客户端过滤功能 |
| bInfo | true or false, default true | 开关，是否显示表格的一些信息 |
| bJQueryUI | true or false, default false | 是否使用jquery ui themeroller的风格 |
| bLengthChange | true or false, default true | 开关，是否显示一个每页长度的选择条（需要分页器支持） |
| bPaginate | true or false, default true | 开关，是否显示（使用）分页器 |
| bProcessing | true or false, defualt false | 开关，以指定当正在处理数据的时候，是否显示“正在处理”这个提示信息 |
| bScrollInfinite | true or false, default false | 开关，以指定是否无限滚动（与sScrollY配合使用），在大数据量的时候很有用。当这个标志为true的时候，分页器就默认关闭 |
| bSort | true or false, default true | 开关，是否让各列具有按列排序功能 |
| bSortClasses | true or false, default true | 开关，指定当当前列在排序时，是否增加classes 'sorting_1', 'sorting_2' and 'sorting_3'，打开后，在处理大数据时，性能有所损失 |
| bStateSave | true or false, default false | 开关，是否打开客户端状态记录功能。这个数据是记录在cookies中的，打开了这个记录后，即使刷新一次页面，或重新打开浏览器，之前的状态都是保存下来的 |
| sScrollX | 'disabled' or '100%' 类似的字符串 | 是否开启水平滚动，以及指定滚动区域大小 |
| sScrollY | 'disabled' or '200px' 类似的字符串 | 是否开启垂直滚动，以及指定滚动区域大小 |
| -- | -- | -- |
| 选项 | ||
| aaSorting | array array[int,string], 如[], [[0,'asc'], [0,'desc']] | 指定按多列数据排序的依据 |
| aaSortingFixed | 同上 | 同上。唯一不同点是不能被用户的自定义配置冲突 |
| aLengthMenu | default [10, 25, 50, 100]，可以为一维数组，也可为二维数组，比如：[[10, 25, 50, -1], [10, 25, 50, "All"]] | 这个为选择每页的条目数，当使用一个二维数组时，二维层面只能有两个元素，第一个为显示每页条目数的选项，第二个是关于这些选项的解释 |
| aoSearchCols | default null, 类似：[null, {"sSearch": "My filter"}, null,{"sSearch": "^[0-9]", "bEscapeRegex": false}] | 给每个列单独定义其初始化搜索列表特性（这一块还没搞懂） |
| asStripClasses | default ['odd', 'even'], 比如['strip1', 'strip2', 'strip3'] | 指定要被应用到各行的class风格，会自动循环 |
| bDestroy | true or false, default false | 用于当要在同一个元素上执行新的dataTable绑定时，将之前的那个数据对象清除掉，换以新的对象设置 |
| bRetrieve | true or false, default false | 用于指明当执行dataTable绑定时，是否返回DataTable对象 |
| bScrollCollapse | true or false, default false | 指定适当的时候缩起滚动视图 |
| bSortCellsTop | true or false, default false | （未知的东东） |
| iCookieDuration | 整数，默认7200，单位为秒 | 指定用于存储客户端信息到cookie中的时间长度，超过这个时间后，自动过期 |
| iDeferLoading | 整数，默认为null | 延迟加载，它的参数为要加载条目的数目，通常与bServerSide，sAjaxSource等配合使用 |
| iDisplayLength | 整数，默认为10 | 用于指定一屏显示的条数，需开启分页器 |
| iDisplayStart | 整数，默认为0 | 用于指定从哪一条数据开始显示到表格中去 |
| iScrollLoadGap | 整数，默认为100 | 用于指定当DataTable设置为滚动时，最多可以一屏显示多少条数据 |
| oSearch | 默认{ "sSearch": "", "bRegex": false, "bSmart": true } | 又是初始时指定搜索参数相关的，有点复杂，没搞懂目前 |
| sAjaxDataProp | 字符串，default 'aaData' | 指定当从服务端获取表格数据时，数据项使用的名字 |
| sAjaxSource | URL字符串，default null | 指定要从哪个URL获取数据 |
| sCookiePrefix | 字符串，default 'SpryMedia_DataTables_' | 当打开状态存储特性后，用于指定存储在cookies中的字符串的前缀名字 |
| sDom | default lfrtip (when bJQueryUI is false) or <"H"lfr>t<"F"ip> (when bJQueryUI is true) | 这是用于定义DataTable布局的一个强大的属性，另开专门文档来补充说明吧 |
| sPaginationType | 'full_numbers' or 'two_button', default 'two_button' | 用于指定分页器风格 |
| sScrollXInner | string default 'disabled' | 又是水平滚动相关的，没搞懂啥意思 |
DataTable支持如下回调函数
| 回调函数名称 | 参数 | 返回值 | 默认 | 功能 |
| fnCookieCallback | 1.string: Name of the cookie defined by DataTables 2.object: Data to be stored in the cookie 3.string: Cookie expires string 4.string: Path of the cookie to set | string: cookie formatted string (which should be encoded by using encodeURIComponent()) | null | 当每次cookies改变时，会触发这个函数调用 |
| fnDrawCallback | 无 | 无 | 无 | 在每次table被draw完后调用，至于做什么就看着办吧 |
| fnFooterCallback | 1.node : "TR" element for the footer 2.array array strings : Full table data (as derived from the original HTML) 3.int : Index for the current display starting point in the display array< 4.int : Index for the current display ending point in the display array 5.array int : Index array to translate the visual position to the full data array | 无 | 无 | 用于在每次重画的时候修改表格的脚部 |
| fnFormatNumber | 1.int : number to be formatted | String : formatted string for DataTables to show the number | 有默认的 | 用于在大数字上，自动加入一些逗号，分隔开 |
| fnHeaderCallback | 1.node : "TR" element for the header 2.array array strings : Full table data (as derived from the original HTML) 3.int : Index for the current display starting point in the display array 4.int : Index for the current display ending point in the display array 5.array int : Index array to translate the visual position to the full data array | 无 | 无 | 用于在每次draw发生时，修改table的header |
| fnInfoCallback | 1.object: DataTables settings object 2.int: Starting position in data for the draw 3.int: End position in data for the draw 4.int: Total number of rows in the table (regardless of filtering) 5.int: Total number of rows in the data set, after filtering 6.string: The string that DataTables has formatted using it's own rules | string: The string to be displayed in the information element. | 无 | 用于传达table信息 |
| fnInitComplete | 1.object:oSettings - DataTables settings object | 无 | 无 | 表格初始化完成后调用 |
| fnPreDrawCallback | 1.object:oSettings - DataTables settings object | Boolean | 无 | 用于在开始绘制之前调用，返回false的话，会阻止draw事件发生；返回其它值，draw可以顺利执行 |
| fnRowCallback | 1.node : "TR" element for the current row 2.array strings : Raw data array for this row (as derived from the original HTML) 3.int : The display index for the current table draw 4.int : The index of the data in the full list of rows (after filtering) | node : "TR" element for the current row | 无 | 当创建了行，但还未绘制到屏幕上的时候调用，通常用于改变行的class风格 |
| fnServerData | 1.string: HTTP source to obtain the data from (i.e. sAjaxSource) 2.array objects: A key/value pair object containing the data to send to the server 3.function: Function to be called on completion of the data get process that will draw the data on the page. | void | $.getJSON | 用于替换默认发到服务端的请求操作 |
| fnStateLoadCallback | 1.object:oSettings - DataTables settings object 2.object:oData - Object containing information retrieved from the state saving cookie which should be restored. For the exact properties please refer to the DataTables code. | Boolean - false if the state should not be loaded, true otherwise | 无 | 在cookies中的数据被加载前执行，可以方便地修改这些数据 |
| fnStateSaveCallback | 1.object:oSettings - DataTables settings object 2.String:sValue - a JSON string (without the final closing brace) which should be stored in the state saving cookie. | String - the full string that should be used to save the state | 无 | 在状态数据被存储到cookies前执行，可以方便地做一些预操作 |
如何使用jQuery中的DataTables插件
在做后台的时候并没有美工和前端工程师来配合你做页面，为了显示数据并有一定的美感，我们可以使用jQuery的DataTables插件来帮助我们完成任务
1、DataTables的默认配置
$(document).ready(function() {
$('#example').dataTable();
} );
示例：http://www.guoxk.com/html/DataTables/Zero-configuration.html
2、DataTables的一些基础属性配置
"bPaginate": true, //翻页功能
"bLengthChange": true, //改变每页显示数据数量
"bFilter": true, //过滤功能
"bSort": false, //排序功能
"bInfo": true,//页脚信息
"bAutoWidth": true//自动宽度
示例：http://www.guoxk.com/html/DataTables/Feature-enablement.html
3、数据排序
$(document).ready(function() {
$('#example').dataTable( {
"aaSorting": [
[ 4, "desc" ]
]
} );
} );
从第0列开始，以第4列倒序排列
示例：http://www.guoxk.com/html/DataTables/Sorting-data.html
4、多列排序
示例：http://www.guoxk.com/html/DataTables/Multi-column-sorting.html
5、隐藏某些列
$(document).ready(function() {
$('#example').dataTable( {
"aoColumnDefs": [
{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] },
{ "bVisible": false, "aTargets": [ 3 ] }
] } );
} );
示例：http://www.guoxk.com/html/DataTables/Hidden-columns.html
6、改变页面上元素的位置
$(document).ready(function() {
$('#example').dataTable( {
"sDom": '<"top"fli>rt<"bottom"p><"clear">'
} );
} );
//l- 每页显示数量
//f - 过滤输入
//t - 表单Table
//i - 信息
//p - 翻页
//r - pRocessing
//< and > - div elements
//<"class" and > - div with a class
//Examples: <"wrapper"flipt>, <lf<t>ip>
示例：http://www.guoxk.com/html/DataTables/DOM-positioning.html
7、状态保存，使用了翻页或者改变了每页显示数据数量，会保存在cookie中，下回访问时会显示上一次关闭页面时的内容。
$(document).ready(function() {
$('#example').dataTable( {
"bStateSave": true
} );
} );
示例：http://www.guoxk.com/html/DataTables/State-saving.html
8、显示数字的翻页样式
$(document).ready(function() {
$('#example').dataTable( {
"sPaginationType": "full_numbers"
} );
} );
示例：http://www.guoxk.com/html/DataTables/Alternative-pagination-styles.html
9、水平限制宽度
$(document).ready(function() {
$('#example').dataTable( {
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true
} );
} );
示例：http://www.guoxk.com/html/DataTables/Horizontal.html
10、垂直限制高度
示例：http://www.guoxk.com/html/DataTables/Vertical.html
11、水平和垂直两个方向共同限制
示例：http://www.guoxk.com/html/DataTables/HorizontalVerticalBoth.html
12、改变语言
$(document).ready(function() {
$('#example').dataTable( {
"oLanguage": {
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "抱歉， 没有找到",
"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
"sInfoEmpty": "没有数据",
"sInfoFiltered": "(从 _MAX_ 条数据中检索)",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "前一页",
"sNext": "后一页",
"sLast": "尾页"
},
"sZeroRecords": "没有检索到数据",
"sProcessing": "<img src='./loading.gif' />"
}
} );
} );
示例：http://www.guoxk.com/html/DataTables/Change-language-information.html
13、click事件
示例：http://www.guoxk.com/html/DataTables/event-click.html
14/配合使用tooltip插件
示例：http://www.guoxk.com/html/DataTables/tooltip.html
15、定义每页显示数据数量
$(document).ready(function() {
$('#example').dataTable( {
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
} );
} );
示例：http://www.guoxk.com/html/DataTables/length_menu.html
16、row callback
示例：http://www.guoxk.com/html/DataTables/RowCallback.html
最后一列的值如果为“A”则加粗显示
17、排序控制
$(document).ready(function() {
$('#example').dataTable( {
"aoColumns": [
null,
{ "asSorting": [ "asc" ] },
{ "asSorting": [ "desc", "asc", "asc" ] },
{ "asSorting": [ ] },
{ "asSorting": [ ] }
]
} );
} );
示例：http://www.guoxk.com/html/DataTables/sort.html
说明：第一列点击按默认情况排序，第二列点击已顺序排列，第三列点击一次倒序，二三次顺序，第四五列点击不实现排序
18、从配置文件中读取语言包
$(document).ready(function() {
$('#example').dataTable( {
"oLanguage": {
"sUrl": "cn.txt"
}
} );
} );
19、是用ajax源
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": './arrays.txt'
} );
} );
示例：http://www.guoxk.com/html/DataTables/ajax.html
20、使用ajax，在服务器端整理数据
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sPaginationType": "full_numbers","sAjaxSource": "./server_processing.php",
/*如果加上下面这段内容，则使用post方式传递数据
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
} );
}*/
"oLanguage": {
"sUrl": "cn.txt"
},
"aoColumns": [
{ "sName": "platform" },
{ "sName": "version" },
{ "sName": "engine" },
{ "sName": "browser" },
{ "sName": "grade" }
]//$_GET['sColumns']将接收到aoColumns传递数据
} );
} );
示例：http://www.guoxk.com/html/DataTables/ajax-serverSide.html
21、为每行加载id和class
服务器端返回数据的格式：
{
"DT_RowId": "row_8",
"DT_RowClass": "gradeA",
"0": "Gecko",
"1": "Firefox 1.5",
"2": "Win 98+ / OSX.2+",
"3": "1.8",
"4": "A"
},
示例：http://www.guoxk.com/html/DataTables/add_id_class.html
22、为每行显示细节，点击行开头的“+”号展开细节显示
示例：http://www.guoxk.com/html/DataTables/with-row-information.html
23、选择多行
示例：http://www.guoxk.com/html/DataTables/selectRows.html
22、集成jQuery插件jEditable
示例：http://www.guoxk.com/html/DataTables/jEditable-integration.html
50个必须保留的超实用jQuery代码段
本文会给你们展示50个jquery代码片段，这些代码能够给你的javascript项目提供帮助。其中的一些代码段是从jQuery1.4.2才开始支持的做法，另一些则是真正有用的函数或方法，他们能够帮助你又快又好地把事情完成。这些都是我尽量记住的有着最佳性能的代码段，因此如果你发现你任何可以做得更好的地方的话，欢迎把你的版本粘贴在评论中!我希望你在这一文章中能找到有帮助的东西。
1. 如何创建嵌套的过滤器：
-
//允许你减少集合中的匹配元素的过滤器， - //只剩下那些与给定的选择器匹配的部分。在这种情况下，
- //查询删除了任何没（:not）有（:has）
- //包含class为“selected”（.selected）的子节点。
- .filter(":not(:has(.selected))")
2. 如何重用元素搜索
-
var allItems = $("div.item"); - var keepList = $("div#container1 div.item");
- //现在你可以继续使用这些jQuery对象来工作了。例如，
- //基于复选框裁剪“keep list”，复选框的名称
- //符合
- < DIV >class names:
- $(formToLookAt + " input:checked").each(function() {
- keepList = keepList.filter("." + $(this).attr("name"));
- });
- < /DIV>
3. 任何使用has()来检查某个元素是否包含某个类或是元素：
-
//jQuery 1.4.*包含了对这一has方法的支持。该方法找出 - //某个元素是否包含了其他另一个元素类或是其他任何的
- //你正在查找并要在其之上进行操作的东东。
- $("input").has(".email").addClass("email_icon");
4. 如何使用jQuery来切换样式表
-
//找出你希望切换的媒体类型（media-type），然后把href设置成新的样式表。 - $('link[media='screen']').attr('href', 'Alternative.css');
5. 如何限制选择范围（基于优化目的）：
-
//尽可能使用标签名来作为类名的前缀， - //这样jQuery就不需要花费更多的时间来搜索
- //你想要的元素。还要记住的一点是，
- //针对于你的页面上的元素的操作越具体化，
- //就越能降低执行和搜索的时间。
- var in_stock = $('#shopping_cart_items input.is_in_stock'); <ul id="shopping_cart_items"> <li><input type="radio" value="Item-X" name="item" class="is_in_stock" /> Item X</li> <li><input type="radio" value="Item-Y" name="item" class="3-5_days" /> Item Y</li> <li><input type="radio" value="Item-Z" name="item" class="unknown" /> Item Z</li> </ul>
6. 如何正确地使用ToggleClass：
-
//切换（toggle）类允许你根据某个类的 - //是否存在来添加或是删除该类。
- //这种情况下有些开发者使用：
- a.hasClass('blueButton') ? a.removeClass('blueButton') : a.addClass('blueButton');
- //toggleClass允许你使用下面的语句来很容易地做到这一点
- a.toggleClass('blueButton');
7. 如何设置IE特有的功能：
-
if ($.browser.msie) { - // Internet Explorer就是个虐待狂
- }
8. 如何使用jQuery来代替一个元素：
-
$('#thatdiv').replaceWith('fnuh');
9. 如何验证某个元素是否为空：
-
if ($('#keks').html()) { - //什么都没有找到;
- }
10. 如何从一个未排序的集合中找出某个元素的索引号
-
$("ul > li").click(function () { - var index = $(this).prevAll().length;
- });
11. 如何把函数绑定到事件上：
-
$('#foo').bind('click', function() { - alert('User clicked on "foo."');
- });
12. 如何追加或是添加html到元素中：
-
$('#lal').append('sometext');
13. 在创建元素时，如何使用对象字面量（literal）来定义属性
-
var e = $("", { href: "#", class: "a-class another-class", title: "..." });
14. 如何使用多个属性来进行过滤
-
//在使用许多相类似的有着不同类型的input元素时， - //这种基于精确度的方法很有用
- var elements = $('#someid input[type=sometype][value=somevalue]').get();
15. 如何使用jQuery来预加载图像：
-
jQuery.preloadImages = function() { - for(var i = 0; i < arguments.length; i++) {
- $("<img />").attr('src', arguments[i]);
- }
- };
- //用法
- $.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');
16. 如何为任何与选择器相匹配的元素设置事件处理程序：
-
$('button.someClass').live('click', someFunction); - //注意，在jQuery 1.4.2中，delegate和undelegate选项
- //被引入代替live，因为它们提供了更好的上下文支持
- //例如，就table来说，以前你会用
- //.live()
- $("table").each(function(){
- $("td", this).live("hover", function(){
- $(this).toggleClass("hover");
- });
- });
- //现在用
- $("table").delegate("td", "hover", function(){
- $(this).toggleClass("hover");
- });
17. 如何找到一个已经被选中的option元素：
-
$('#someElement').find('option:selected');
18. 如何隐藏一个包含了某个值文本的元素：
-
$("p.value:contains('thetextvalue')").hide();
19. 如果自动滚动到页面中的某区域
-
jQuery.fn.autoscroll = function(selector) { - $('html,body').animate(
- {scrollTop: $(selector).offset().top},
- 500
- };
- }
- //然后像这样来滚动到你希望去到的class/area上。
- $('.area_name').autoscroll();
20. 如何检测各种浏览器：
-
检测Safari (if( $.browser.safari)), - 检测IE6及之后版本 (if ($.browser.msie && $.browser.version > 6 )),
- 检测IE6及之前版本 (if ($.browser.msie && $.browser.version <= 6 )),
- 检测FireFox 2及之后版本 (if ($.browser.mozilla && $.browser.version >= '1.8' ))
21. 如何替换串中的词
-
var el = $('#id'); - el.html(el.html().replace(/word/ig, ''));
22. 如何禁用右键单击上下文菜单：
-
$(document).bind('contextmenu',function(e){ - return false;
- });
23. 如何定义一个定制的选择器
-
$.expr[':'].mycustomselector = function(element, index, meta, stack){ - // element- 一个DOM元素
- // index – 栈中的当前循环索引
- // meta – 有关选择器的元数据
- // stack – 要循环的所有元素的栈
- // 如果包含了当前元素就返回true
- // 如果不包含当前元素就返回false };
- // 定制选择器的用法：
- $('.someClasses:test').doSomething();
24. 如何检查某个元素是否存在
-
if ($('#someDiv').length) { - //万岁！！！它存在……
- }
25. 如何使用jQuery来检测右键和左键的鼠标单击两种情况：
-
$("#someelement").live('click', function(e) { - if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
- alert("Left Mouse Button Clicked");
- } else if(e.button == 2) {
- alert("Right Mouse Button Clicked");
- }
- });
26. 如何显示或是删除input域中的默认值
-
//这段代码展示了在用户未输入值时， - //如何在文本类型的input域中保留
- //一个默认值
- wap_val = [];
- $(".swap").each(function(i){
- wap_val[i] = $(this).val();
- $(this).focusin(function(){
- if ($(this).val() == swap_val[i]) {
- $(this).val("");
- }
- }).focusout(function(){
- if ($.trim($(this).val()) == "") {
- $(this).val(swap_val[i]);
- }
- });
- });
27. 如何在一段时间之后自动隐藏或关闭元素（支持1.4版本）：
-
//这是1.3.2中我们使用setTimeout来实现的方式 - setTimeout(function() {
- $('.mydiv').hide('blind', {}, 500)
- }, 5000);
- //而这是在1.4中可以使用delay()这一功能来实现的方式（这很像是休眠）
- $(".mydiv").delay(5000).hide('blind', {}, 500);
28. 如何把已创建的元素动态地添加到DOM中：
-
var newDiv = $(''); - newDiv.attr('id','myNewDiv').appendTo('body');
29. 如何限制“Text-Area”域中的字符的个数：
-
jQuery.fn.maxLength = function(max){ - this.each(function(){
- var type = this.tagName.toLowerCase();
- var inputType = this.type? this.type.toLowerCase() : null;
- if(type == "input" && inputType == "text" || inputType == "password"){
- //Apply the standard maxLength
- this.maxLength = max;
- }
- else if(type == "textarea"){
- this.onkeypress = function(e){
- var ob = e || event;
- var keyCode = ob.keyCode;
- var hasSelection = document.selection? document.selection.createRange().text.length > 0 : this.selectionStart != this.selectionEnd;
- return !(this.value.length >= max && (keyCode > 50 || keyCode == 32 || keyCode == 0 || keyCode == 13) && !ob.ctrlKey && !ob.altKey && !hasSelection);
- };
- this.onkeyup = function(){
- if(this.value.length > max){
- this.value = this.value.substring(0,max);
- }
- };
- }
- });
- };
- //用法
- $('#mytextarea').maxLength(500);
30. 如何为函数创建一个基本的测试
-
//把测试单独放在模块中 - module("Module B");
- test("some other test", function() {
- //指明测试内部预期有多少要运行的断言
- expect(2);
- //一个比较断言，相当于JUnit的assertEquals
- equals( true, false, "failing test" );
- equals( true, true, "passing test" );
- });
31. 如何在jQuery中克隆一个元素：
-
var cloned = $('#somediv').clone();
32. 在jQuery中如何测试某个元素是否可见
-
if($(element).is(':visible') == 'true') { - //该元素是可见的
- }
33. 如何把一个元素放在屏幕的中心位置：
-
jQuery.fn.center = function () { - this.css('position','absolute');
- this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px');
- this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');
- return this;
- }
- //这样来使用上面的函数：
- $(element).center();
34. 如何把有着某个特定名称的所有元素的值都放到一个数组中：
-
var arrInputValues = new Array(); - $("input[name='table[]']").each(function(){
- arrInputValues.push($(this).val());
- });
35. 如何从元素中除去HTML
-
(function($) { - $.fn.stripHtml = function() {
- var regexp = /<("[^"]*"|'[^']*'|[^'">])*>/gi;
- this.each(function() {
- $(this).html( $(this).html().replace(regexp,”") );
- });
- return $(this);
- }
- })(jQuery);
- //用法：
- $('p').stripHtml();
36. 如何使用closest来取得父元素：
-
$('#searchBox').closest('div');
37. 如何使用Firebug和Firefox来记录jQuery事件日志：
-
// 允许链式日志记录 - // 用法：
- $('#someDiv').hide().log('div hidden').addClass('someClass');
- jQuery.log = jQuery.fn.log = function (msg) {
- if (console){
- console.log("%s: %o", msg, this);
- }
- return this;
- };
38. 如何强制在弹出窗口中打开链接：
-
jQuery('a.popup').live('click', function(){ - newwindow=window.open($(this).attr('href'),'','height=200,width=150');
- if (window.focus) {
- newwindow.focus();
- }
- return false;
- });
39. 如何强制在新的选项卡中打开链接：
-
jQuery('a.newTab').live('click', function(){ - newwindow=window.open($(this).href);
- jQuery(this).target = "_blank";
- return false;
- });
40. 在jQuery中如何使用.siblings()来选择同辈元素
-
// 不这样做 - $('#nav li').click(function(){
- $('#nav li').removeClass('active');
- $(this).addClass('active');
- });
- //替代做法是
- $('#nav li').click(function(){
- $(this).addClass('active').siblings().removeClass('active');
- });
41. 如何切换页面上的所有复选框：
-
var tog = false; - // 或者为true，如果它们在加载时为被选中状态的话
- $('a').click(function() {
- $("input[type=checkbox]").attr("checked",!tog);
- tog = !tog;
- });
42. 如何基于一些输入文本来过滤一个元素列表：
-
//如果元素的值和输入的文本相匹配的话 - //该元素将被返回
- $('.someClass').filter(function() {
- return $(this).attr('value') == $('input#someId').val();
- })
43. 如何获得鼠标垫光标位置x和y
-
$(document).ready(function() { - $(document).mousemove(function(e){
- $(’#XY’).html(”X Axis : ” + e.pageX + ” | Y Axis ” + e.pageY);
- });
- });
44. 如何把整个的列表元素（List Element，LI）变成可点击的
-
$("ul li").click(function(){ - window.location=$(this).find("a").attr("href");
- return false;
- });
-
<ul> - <li><a href="#">Link 1</a></li>
- <li><a href="#">Link 2</a></li>
- <li><a href="#">Link 3</a></li>
- <li><a href="#">Link 4</a></li>
- </ul>
45. 如何使用jQuery来解析XML（基本的例子）：
-
function parseXml(xml) { - //找到每个Tutorial并打印出author
- $(xml).find("Tutorial").each(function() {
- $("#output").append($(this).attr("author") + "");
- });
- }
46. 如何检查图像是否已经被完全加载进来
-
$('#theImage').attr('src', 'image.jpg').load(function() { - alert('This Image Has Been Loaded');
- });
47. 如何使用jQuery来为事件指定命名空间：
-
//事件可以这样绑定命名空间 - $('input').bind('blur.validation', function(e){
- // ...
- });
- //data方法也接受命名空间
- $('input').data('validation.isValid', true);
48. 如何检查cookie是否启用
-
var dt = new Date(); - dt.setSeconds(dt.getSeconds() + 60);
- document.cookie = "cookietest=1; expires=" + dt.toGMTString();
- var cookiesEnabled = document.cookie.indexOf("cookietest=") != -1;
- if(!cookiesEnabled) {
- //没有启用cookie
- }
49. 如何让cookie过期：
-
var date = new Date(); - date.setTime(date.getTime() + (x * 60 * 1000));
- $.cookie('example', 'foo', { expires: date });
50. 如何使用一个可点击的链接来替换页面中任何的URL
-
$.fn.replaceUrl = function() { - var regexp = /((ftp|http|https)://(w+:{0,1}w*@)?(S+)(:[0-9]+)?(/|/([w#!:.?+=&%@!-/]))?)/gi;
- this.each(function() {
- $(this).html(
- $(this).html().replace(regexp,'<a href="$1">$1</a>‘)
- );
- });
- return $(this);
- }
- //用法
- $('p').replaceUrl();
11 个牛X的 CSS3 和 jQuery 制作的教程
CSS3 为 Web 开发带来了非常令人兴奋的变化，特别是在 CSS 3D 转换、动画等特性的支持，可以轻松的创建很酷的 Web 效果。
在这篇文章中我们介绍 11 个使用 CSS3 和 jQuery 实现的特效，很酷。
via queness/oschina
使用 jQuery Masonry制作的15 个瀑布流网站
1. Cutest Paw
2. All Blues
3. Do Whatever It Takes
4. Pattern Tap
5. We And The Color
6. All in My Head
7. Dazed Digital
8. Photography by Koa Metter
9. All Women Stalk
10. Cla-ude
11. Chromeography
12. Fab.com
13. Inspire Well
14. Interview Magazine
15. Veerle’s Blog
值得开发人员关注的jQuery技术网站和博客20个
1. John Resig - http://ejohn.org
毫无疑问，jQuery的缔造者的博客是你首先必须关注的。
2. Filmament Group Lab
这个也是必看之一，因为jQuery UI类库就出自这个网站
3. Learning jQuery
老牌的学习jQuery的网站之一，这个网站是由几个作者联合建立
4. Soh Tnaka Blog
非常酷的一个jQuery设计和分享网站，风格非常酷，里面的教程和插件实现非常有艺术感，本人这里强烈推荐。
5. nettuts
老牌的网页设计网站，里面包含了非常多的jQuery教程和技巧。同时这个网站也有大量的设计相关的文章，大家可以学习。
6. jQuery4u
老牌的jQuery网站学习网站，里面有很多jQuery的教程，及其收集的jQuery插件。
7. WebResourceDepot
收集了许多jQuery插件教程及其信息
8. The Sea of ideas - personal blog of Paul Bakus
Paul Bakus是jQueryUI的创始者并且也是很多著名插件的开发人，在他的博客中我们可以找到大量javascript，jQuery，jQueryUI开发的信息和文章
9. James Padolsey
Jame是一个具有丰富开发经验的前端开发工程师，在他的博客中，他经常介绍最新的开发技术和价格，并且分享很多jQuery代码及其实现
10. jankoatwarpspeed
Janko的博客发布有很多写的非常好的jQuery开发文章，并且也有新书的发布
11. jQueryhowto
jQueryHowto提供了大量的代码片段帮助你解决jQuery编程中的个实现问题，非常实用的开发查询网站，GBin1这里强烈推荐
12. Marcofolio
这个博客拥有很多不错的教程，帮助大家实现非常实用的jQuery功能， 例如，如何实现TechCrunch的像素Logo
13. Build internet
Build internet拥有很多书写的非常好的jQuery教程，当然由于它是一个综合性的网站，也拥有很多其它的web开发教程和资料
14. W3CSchools
比较老牌的一个网站，主要提供各种W3C相关教程，包括HTML，XML，CSS，Javascript，也包括jQuery等其它教程
15. Addy Osmani Blog
Addy Osmani拥有很多详细讲解的jQuery教程及其相关Javascript toolkit。
16. jQuery style
一个完全讲解jQuery类库的网站，分享代码片段及其各种jQuery插件。
17. The Ultimate jQuery List
一个非常完整的jQuery类库，插件，演示及其教程说明， 完全值得大家去查看内容
18. Queness
这个个人blog拥有很多实用的jQuery资源
19. Tutorialzine
这个博客有很多实用的资源，可以直接在代码中实用
20. GBin1
GBin1是提供互联网相关技术的综合类博客，我们提供最新的互联网信息，技术及其教程，希望能帮助大家了解最新的互联网技术和信息
超过 30 个有用的 CSS、jQuery插件和代码技巧
Grid Navigation Effects with jQuery
The 30 CSS Selectors you Must Memorize
Beautiful Slide Out Navigation: A CSS and jQuery Tutorial
Fixed Fade Out Menu: A CSS and jQuery Tutorial
Beautiful Slide Out Navigation Revised
Beautiful Background Image Navigation with jQuery
Twitter API and jQuery Showcase: Display your Followers or Friends
CSS and jQuery Tutorial: Fancy Apple-Style Icon Slide Out Navigation
A Fresh Bottom Slide Out Menu with jQuery
Vertical Sliding Accordion with jQuery
Animated Text and Icon Menu with jQuery
Circular Content Carousel with jQuery
Portfolio Image Navigation with jQuery
Expanding Fullscreen Grid Portfolio
Simple jQuery Fluid Thumbnail menu Bar
Slides, A Slideshow Plugin for jQuery
leanModal – a JQuery modal plugin that works with your CSS
Colorful Sliders With jQuery & CSS3
Contextual Slideout Tips With jQuery & CSS3
Awesome Cufonized Fly-out Menu with jQuery and CSS3
Thumbnails Navigation Gallery with jQuery
Creating a Fancy menu using CSS3 and jQuery
Feature Table Design
CSS & jQuery clickable map of Europe
Easy Display Switch with CSS and jQuery
FancyForm
Perfect Full Page Background Image
Greyscale Hover Effect w/ CSS & jQuery
Greyscale Hover Effect w/ CSS & jQuery
Codename Rainbows
Pure CSS3 bokeh effect with some jQuery help
Accessible, Custom Designed Checkbox and Radio Button Inputs Styled with CSS (and a dash of jQuery)
jQuery UI Selectmenu: An ARIA-Accessible Plugin for Styling a Custom HTML Select Element
jQuery & CSS Sprite Animation Explained In Under 5 Minutes
支持博主
关于邵珠庆博客
文章标签
记事邵珠庆博客
最近文章
最近评论
- 发表在《中国翻墙网民状况调查》
- 发表在《教你如何简单获取新浪微博短地址接口》
- 发表在《教你如何简单获取新浪微博短地址接口》
- 发表在《教你如何简单获取新浪微博短地址接口》
- 发表在《教你如何简单获取新浪微博短地址接口》
博客日历
| 一 | 二 | 三 | 四 | 五 | 六 | 日 |
|---|---|---|---|---|---|---|
| « 8月 | ||||||
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
| 8 | 9 | 10 | 11 | 12 | 13 | 14 |
| 15 | 16 | 17 | 18 | 19 | 20 | 21 |
| 22 | 23 | 24 | 25 | 26 | 27 | 28 |
| 29 | 30 | 31 | ||||
目录分类
文章归档
- 2025年8月 (2)
- 2022年9月 (1)
- 2022年8月 (3)
- 2022年7月 (1)
- 2022年3月 (1)
- 2021年10月 (3)
- 2021年1月 (1)
- 2020年4月 (3)
- 2020年3月 (3)
- 2020年2月 (2)
- 2020年1月 (3)
- 2019年12月 (2)
- 2019年11月 (3)
- 2019年10月 (2)
- 2019年9月 (2)
- 2019年8月 (4)
- 2019年7月 (2)
- 2019年6月 (2)
- 2019年5月 (2)
- 2019年4月 (3)
- 2019年3月 (2)
- 2019年2月 (3)
- 2019年1月 (2)
- 2018年12月 (2)
- 2018年11月 (2)
- 2018年10月 (3)
- 2018年9月 (2)
- 2018年8月 (2)
- 2018年7月 (1)
- 2018年6月 (2)
- 2018年5月 (3)
- 2018年4月 (2)
- 2018年3月 (6)
- 2018年2月 (7)
- 2018年1月 (3)
- 2017年11月 (2)
- 2017年10月 (2)
- 2017年9月 (5)
- 2017年8月 (4)
- 2017年7月 (8)
- 2017年6月 (5)
- 2017年5月 (14)
- 2017年4月 (8)
- 2017年3月 (5)
- 2017年2月 (2)
- 2017年1月 (1)
- 2016年12月 (1)
- 2016年11月 (5)
- 2016年10月 (3)
- 2016年9月 (2)
- 2016年8月 (1)
- 2016年7月 (2)
- 2016年6月 (2)
- 2016年5月 (5)
- 2016年4月 (5)
- 2016年3月 (2)
- 2016年2月 (1)
- 2016年1月 (2)
- 2015年12月 (2)
- 2015年11月 (1)
- 2015年10月 (3)
- 2015年9月 (2)
- 2015年8月 (4)
- 2015年7月 (5)
- 2015年6月 (6)
- 2015年5月 (3)
- 2015年4月 (8)
- 2015年3月 (6)
- 2015年2月 (4)
- 2015年1月 (5)
- 2014年12月 (2)
- 2014年11月 (5)
- 2014年10月 (5)
- 2014年9月 (1)
- 2014年8月 (2)
- 2014年7月 (4)
- 2014年6月 (1)
- 2014年5月 (9)
- 2014年4月 (5)
- 2014年3月 (1)
- 2014年2月 (1)
- 2014年1月 (5)
- 2013年12月 (4)
- 2013年11月 (12)
- 2013年10月 (6)
- 2013年9月 (7)
- 2013年8月 (8)
- 2013年7月 (15)
- 2013年6月 (9)
- 2013年5月 (12)
- 2013年4月 (8)
- 2013年3月 (11)
- 2013年2月 (9)
- 2013年1月 (21)
- 2012年12月 (8)
- 2012年11月 (7)
- 2012年10月 (19)
- 2012年9月 (16)
- 2012年8月 (13)
- 2012年7月 (10)
- 2012年6月 (11)
- 2012年5月 (11)
- 2012年4月 (8)
- 2012年3月 (8)
- 2012年2月 (11)
- 2012年1月 (8)
- 2011年12月 (18)
- 2011年11月 (32)
- 2011年10月 (17)
- 2011年9月 (18)
- 2011年8月 (11)
- 2011年7月 (55)
- 2011年6月 (1)
- 2011年5月 (4)
- 2011年4月 (2)
- 2011年3月 (1)
- 2011年1月 (3)
- 2010年12月 (1)
- 2010年11月 (6)
- 2010年9月 (5)
- 2010年8月 (2)
- 2010年7月 (3)
- 2010年6月 (7)
- 2010年5月 (3)
- 2010年4月 (4)
- 2010年3月 (8)
- 2010年2月 (2)
- 2010年1月 (2)
- 2009年12月 (2)
- 2009年11月 (1)
- 2009年10月 (1)
- 2009年8月 (1)
- 2009年7月 (2)
- 2009年5月 (1)
- 2009年4月 (1)
- 2009年3月 (1)
- 2009年2月 (1)
- 2009年1月 (1)
- 2008年12月 (1)
- 2008年11月 (2)
- 2008年10月 (1)
- 2008年8月 (5)
- 2008年7月 (2)
- 2008年6月 (1)
- 2008年5月 (3)
- 2008年4月 (11)
- 2008年3月 (1)
- 2008年2月 (1)
- 2008年1月 (1)
- 2007年12月 (1)
- 2007年11月 (3)
- 2007年10月 (1)
- 2007年9月 (1)
- 2007年8月 (1)
- 2007年7月 (1)
- 2007年6月 (1)
- 2007年5月 (1)
博客功能
京东好物
