彬Go » Ajax

15款提高表格操作的jQuery插件

彬Go — Mon, 21 Dec 2009 06:40:55 +0000

　　table表格由于它的浏览器兼容性和复杂的标签嵌套方式，可以算是添加样式最困难的对象之一了。大多数前端er都把网页中的table标签替换为div，主要就是因为div要比table更容易添加CSS样式。但是我们在日常应用中仍然要用到table表格，其中最好的例子就是对照表。今天彬Go将向大家推荐15个jQuery表格插件让你对数据表格进行显示、排序、筛选和操控。如jQuery表格排序插件、jQuery表格拖拽插件、jQuery树形表格插件、设置颜色、点击、替换等效果。

您还可以参考以下javascript相关资源:
《推荐9款很棒的网页绘制图表JavaScript框架脚本》
《了解jQuery技巧来提高你的代码》
《10种JavaScript特效实例让你的网站更吸引人》
《300+Jquery, CSS, MooTools 和 JS的导航菜单资源》

1.DataTables-强大的jQuery表格插件

　　DataTables是提供了大量特性的强大jQuery表格插件。例如:你可以自动轻松筛选、Ajax预读取数据、分页、列排序、高亮排序列、扩展插件支持、使用CSS或jQuery UI ThemeRoller 定制主题和完整文档。

2.uiTableFilter-jQuery表格过滤插件

　　uiTableFilter是一个用于表格行筛选的jQuery插件。插件作者提供了详细的例子来告诉大家如何将自己的表格和插件整合在一起并完成表格筛选。

3.Scrollable HTML Table-jQuery表格滚动插件

　　Scrollable HTML Table jQuery插件可以让你的表格变得可以滚动控制。

4.Tablesorter-jQuery表格排序插件

　　Tablesorter这个jQuery插件是用来将一个包含thead和tbody标签的标准HTML表格转变为无页面刷新的可排序表格。它不但支持多列排序，而且跨浏览器兼容并且能通过widget系统进行扩展。

5.Flexigrid-Web2.0 jQuery表格插件

　　Flexigrid 是一个轻量级的Web2.0 jQuery插件。它包含很多非常Cool的特性，如主题定制、分页、工具栏、搜索、排序、ajax读取数据源、调整列宽高尺寸等。

6.HeatColor-jQuery表格颜色插件

　　HeatColor可以让你根据元素的值来为元素设置颜色。它的值的比对时根据预设的一个范围来进行比较，最后对他们自动进行颜色值的设置。

7.JQTreeTable-jQuery树形表格插件

　　使用JQTreeTable插件你可以得到一个树形表格，如果用户的浏览器禁用了JavaScript，那么他们也能看到普通形式的表格，并不影响可访问性。

8.Ingrid-jQuery表格插件

　　Ingrid是另一个数据表jQuery插件。它也有很多特性，比如列调整尺寸、排序、行列添加样式等。在作者网站提供了很棒的文档来告诉大家如何从头使用这个jQuery表格插件。

9.jQuery ColumnManager plugin

　　columnManager是可以控制任意表格列显示或隐藏的jQuery插件，而且它可以保存当前表格的状态至你下次访问。这个jQuery插件非常小巧轻量，仅3.6kb。

10.jQuery treeTable-jQuery树形表格插件

　　jQuery treeTable是小型的JQTreeTable, 它也能让你的table显示成树形结构. 这个插件也可以在浏览器禁用JavaScript时保持文档整洁并让原始table可以使用.

11.CSV2Table-CSV格式读取表格插件

　　CSV2Table 可以读取CSV文件，它从CSV文件中读取内容并创建成table表格.

12.Table Pagination-jQuery表格分页插件

　　这个jQuery表格分页插件可以在表格下面创建分页元素，你还可以通过各种设置来定制分页。

13.jQuery TableRowCheckboxToggle

　　这个jQuery表格插件可以让你再点击表格行的时候改变多选框状态并修改该行CSS样式。

14.Table Drag and Drop jQuery plugin-jQuery表格拖拽插件

　　这个简单的jQuery插件可以让用户使用拖拽行的方式重新排列表格各行，任意单独行可以设置为不可拖拽和/或不可放置。

15.uiTableEdit

　　uiTableEdit是由Greg Weber制作的很酷的jQuery表格编辑插件，它允许用户编辑表格内容。

留意更新

订阅彬Go以查看网页设计最新资源。

英文原文:15 Great jQuery Plugins For Better Table Manipulation
翻译原文:15款提高表格操作的jQuery插件(彬Go)

转载声明:
原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
本文链接:http://blog.bingo929.com/15-jquery-plugins-for-better-table-manipulation.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

了解jQuery技巧来提高你的代码

彬Go — Mon, 23 Nov 2009 02:01:13 +0000

　　jQuery之所以如此流行并被从大公司到个人博客的几乎每个人都广泛使用，是因为它上手和使用相当简单，而且为我们提供了一些人都不知道的相当棒的特性。我认为jQuery的大多数用户更趋向于使用jQuery插件来解决面临的难题，这通常是明智的选择。但是当插件相对于你的需求有一定缺陷的时候，你也许更应该想办法自己来解决，下面来看看这些实用的jQuery技巧，他们肯定会能够派上用场的！

1.测试并提升你的jQuery选择器水平

　　这个jQuery选择器实验室非常酷，它能在线免费使用，当然你也能下来到本地离线使用。这个测试页面包含复杂的HTML组合字段，然后你能尝试预定义使用各种jQuery选择器。如果这还不够你也可以自定义选择器。

点击上图查看清晰大图

2.测试jQuery包装集是否包含某些元素

　　如果你想测试一下某个jQuery包装集中是否包含某些元素，你首先可以尝试使用验证首个元素是否存在：

if($(selector)[0]){...}
// 或者这样
if($(selector).length){...}

来看看这个例子：

//例子.如果你的页面有以下html代码
<ul id="shopping_cart_items">
<li><input class="in_stock" name="item" type="radio" value="Item-X" />Item X</li>
<li><input class="unknown" name="item" type="radio" value="Item-Y" />Item Y</li>
<li><input class="in_stock" name="item" type="radio" value="Item-Z" />Item Z</li>
</ul>
<pre escaped="true" lang="javascript">...
//这个if条件将返回true，因为我们有两个
// input域匹配了选择器，所以代码将会执行
if($('#shopping_cart_items input.in_stock')[0]){}

3.从jquery.org读取jQuery最新版本

你可以使用这句代码读取jQuery的最新版本的代码文件。

你可以使用这个方法来调用最近版本的jQuery框架，当然，你还可以使用下面这个代码从ajax.googleapis.com调用同样的最新版本jQuery：

4.存储数据

　　使用data方法可以避免在DOM中存储数据，有些前端开发er喜欢使用HTML的属性来存储数据：

$('selector').attr('alt', 'data being stored');
//之后可以这样读取数据:
$('selector').attr('alt');

　　使用”alt”属性来作为参数名存储数据其实对于HTML来说是不符合语义的，我们可以使用jQuery的data方法来为页面中的某个元素存储数据：

$('selector').data('参数名', '要存储的数据');
//之后这样取得数据:
$('selector').data('参数');

　　这个data方法能让你自己明明数据的参数，更语义更灵活，你可以在页面上的任何元素存储数据信息。如果想了解更多关于data()和removeData()方法的介绍，可以看看jQuery官方讲解

这个方法的经典应用是给input域一个默认值，然后在聚焦的时候清空它:
HTML部分:

JavaSript部分:

$(function() {
//取出有clear类的input域
//(注: "clear once" 是两个class clear 和 once)
$('#testform input.clear').each(function(){
//使用data方法存储数据
$(this).data( "txt", $.trim($(this).val()) );
}).focus(function(){
// 获得焦点时判断域内的值是否和默认值相同，如果相同则清空
if ( $.trim($(this).val()) === $(this).data("txt") ) {
$(this).val("");
}
}).blur(function(){
// 为有class clear的域添加blur时间来恢复默认值
// 但如果class是once则忽略
if ( $.trim($(this).val()) === "" && !$(this).hasClass("once") ) {
//Restore saved data
$(this).val( $(this).data("txt") );
}
});
});

查看Demo

5.jQuery手册常备身边

　　大多数人都很难记住所有的编程细节，即使再好的程序员也会有对某个程序语言的疏忽大意，所以把相关的手册打印出来或随时放在桌面上进行查阅绝对是可以提高编程效率的。
oscarotero jquery 1.3 (壁纸版)

6.在FireBug控制台记录jQuery

　　FireBug是我最喜欢用的一个浏览器扩展工具之一，这个工具可以让你快速的在可视化界面中了解当前页面的HTML+CSS+JavaScript，并在该工具下完成即时开发。作为jQuery或JavaScript开发人员，FireFox对于记录你的JavaScript代码也得到支持。

写入FireBug控制台的最简单方式如下:

console.log("hello world")

你也可以按照你希望的方式写一些参数：

console.log(2,4,6,8,"foo",bar)

你也可以编写一个小扩展来记录jQuery对象到控制台：

jQuery.fn.log = function (msg) {
console.log("%s: %o", msg, this);
return this;
};

对于这个扩展，你可以直接使用.log()方法来记录当前对象到控制台。

$('#some_div').find('li.source > input:checkbox')
.log("sources to uncheck")
.removeAttr("checked");

7.尽可能使用ID选择器

　　在使用jQuery之后，你会发现利用class属性来选择DOM元素变得相当简单。尽管如此，还是推荐大家尽量少用class选择器取而代之尽量多使用运行更快的ID选择器(IE浏览器下使用class选择器会在遍历整个DOM树之后返回相符的class包装集)。而ID选择器更快是因为DOM本身就有”天然的”getElementById这个方法，而class并没有。所以如果使用class选择器的话，浏览器会遍历整个DOM，如果你的网页DOM结构足够复杂，这些class选择器足矣把页面拖得越来越慢。让我们看看这段简单的HTML代码:

<div id="main">
<form method="post" action="/">
<h2>Selectors in jQuery</h2>
...
...
<input class="button" id="main_button" type="submit" value="Submit" />
</form>
</div>

//使用class来调用submit按钮要比使用绝对的ID选择器慢很多
var main_button = $('#main .button');
var main_button = $('#main_button');

8.善于利用jQuery链

　　jQuery链不但允许以简洁的方式写出强大的操作，而且提高了开发效率，因为它能够把多个命令应用到包装集，而不必重新计算包装集。从而你不用再这样写了：

<li>Description: <input type="text" name="description" value="" /></li>

$('#shopping_cart_items input.text').css('border', '3px dashed yellow');
$('#shopping_cart_items input.text').css('background-color', 'red');
$('#shopping_cart_items input.text').val("text updated");

取而代之你可以使用jQuery链来完成简便的操作：

var input_text = $('#shopping_cart_items input.text');
input_text.css('border', '3px dashed yellow');
input_text.css('background-color', 'red');
input_text.val("text updated");

//same with chaining:
var input_text = $('#shopping_cart_items input.text');
input_text
.css('border', '3px dashed yellow')
.css('background-color', 'red')
.val("text updated");

9.绑定jQuery函数到$(window).load事件

　　大多数jQuery实例或教程都告诉我们绑定我们的jQuery代码到$(document).ready事件。虽然$(document).ready事件在大多数情况下都OK，但是它的解析顺序是在文档准备就绪，单文档中的图片等对象正在下载的时候开始运行的。所以在某些时候使用$(document).ready事件并不一定能达到我们预期的效果，比如一些视觉效果和动画、拖拽、预读取隐藏图片等…通过使用$(window).load事件便可以安全的在整个文档都准备就绪之后再开始运行你期望的代码。

$(window).load(function(){
// 将你希望在页面完全就绪之后运行的代码放在这里
});

10.使用jQuery链来限定选择器，让你的代码更简洁更优雅

　　由于JavaScript支持链结构而且支持断行，所以你的代码可以写成下面这样，这个例子先在元素上移除一个class然后在同一个元素上添加另一个class：

$('#shopping_cart_items input.in_stock')
.removeClass('in_stock')
.addClass('3-5_days');

如果想让它更简单实用，你可以创建一个支持链结构的jQuery函数：

$.fn.makeNotInStock = function() {
return $(this).removeClass('in_stock').addClass('3-5_days');
}

$('#shopping_cart_items input.in_stock').makeNotInStock().log();

11.使用回调函数同步效果

　　如果你想确保某个事件或动画效果要在另一个事件运行之后再调用，那你就要使用回调函数了。你可以在这些动画效果后面绑定回调函数：slideDown( speed, [回调] ) ie. $(‘#sliding’).slideDown(‘slow’, function(){… 点击这里预览这个例子.

>
div.button { background:#cfd; margin:3px; width:50px;
text-align:center; float:left; cursor:pointer;
border:2px outset black; font-weight:bolder; }
#sliding { display:none; }
>

$(document).ready(function(){
// 使用jQuery的click事件改变视觉效果，并开启滑动效果
$("div.button").click(function () {
//div.button 现在看上去是按下的效果
$(this).css({ borderStyle:"inset", cursor:"wait" });
//#sliding 现在将渐隐并在完成动作之后开启渐显效果
//slideup once it completes
$('#sliding').slideDown('slow', function(){
$('#sliding').slideUp('slow', function(){
//渐显效果完成后将会改变按钮的CSS属性
$('div.button').css({ borderStyle:"outset", cursor:"auto" });
});
});
});
});

12.学会使用自定义选择器

　　jQuery允许我们在css选择器的基础上定义自定义选择器来让我们的代码更简洁:

$.expr[':'].mycustomselector= function(element, index, meta, stack){
// element- DOM元素
// index - 堆栈中当前遍历的索引值
// meta - 关于你的选择器的数据元
// stack - 用于遍历所有元素的堆栈

// 包含当前元素则返回true
// 不包含当前元素则返回false
};

// 自定义选择器的应用:
$('.someClasses:test').doSomething();

下面让我们来看看一个小例子，我们通过使用自定义选择器来锁定含有”rel”属性的元素集：

$.expr[':'].withRel = function(element){
var $this = $(element);
//仅返回rel属性不为空的元素
return ($this.attr('rel') != '');
};

$(document).ready(function(){
//自定义选择器的使用很简单，它和其他选择器一样，返回一个元素包装集
//你可以为他使用格式方法，比如下面这样修改它的css样式
$('a:withRel').css('background-color', 'green');
});

<ul>
<li>
<a href="#">without rel</a>
</li>
<li>
<a rel="somerel" href="#">with rel</a>
</li>
<li>
<a rel="" href="#">without rel</a>
</li>
<li>
<a rel="nofollow" href="#">a link with rel</a>
</li>
</ul>

13.预加载图片

通常使用JavaScript来预加载图片是个相当不错的方法:

//定义预加载图片列表的函数(有参数)

jQuery.preloadImages = function(){
//遍历图片
for(var i = 0; i<arguments.length; i++){
jQuery("").attr("src", arguments[i]);

}
}
// 你可以这样使用预加载函数
$.preloadImages("images/logo.png", "images/logo-face.png", "images/mission.png");

14.将你的代码测试完好

　　jQuery有一个名为QUnit单元测试框架。编写测试很容易，它能让您可以放心地修改您的代码，并确保它仍然按预期工作。下面是如何工作的：

//将测试分成若干模块.
module("Module B");

test("some other test", function() {
//指定多少个判断语句需要加入测试中.
expect(2);

equals( true, false, "failing test" );
equals( true, true, "passing test" );
});

留意更新

订阅彬Go以查看JavaScript最新教程及资源。

英文原文:More jQuery and General Javascript Tips to Improve Your Code
翻译原文:了解更多jQuery技巧来提高你的代码(彬Go)

转载声明:
原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
本文链接:http://blog.bingo929.com/jquery-javascript-tips-to-improve-code.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

Ajax Loading进度条gif在线生成网站Preloaders.net

彬Go — Wed, 04 Mar 2009 14:20:10 +0000

在这个被Ajax技术统治的互联网时代，很多Ajax程序都会在异步读取数据的同时，显示一个正在读取或Loading的动画，今天彬Go要向大家推荐一个在线生成Loading预载动画Gif图片的网站，它不但提供了超多的Loading动画样式供你选择，而且你还可以自定义尺寸、颜色等参数，可谓方便到家，最最重要的是，PreLoaders.net提供的Loading预载动画生成服务完全免费，心动了吧.

Loading预载动画图片生成界面如下:

Loading预载动画图片生成样例：

留意更新

订阅彬Go以查看前端开发/CSS兼容性相关最新教程及资源。

转载声明:
原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
本文链接:http://blog.bingo929.com/preloaders-net-loading-gif-maker.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

你是一个职业的页面重构工作者吗？

彬Go — Fri, 09 Jan 2009 14:25:32 +0000

做为一个专职的页面重构者，我们从事的工作简单的说就是“将设计稿转换成WEB页面”，这一过程可以很简单到直接把PSD从PS里导出成网页；也可复杂到需要考虑页面中每个标签的使用，考虑“页面性能”。以“前端工程师”为目标的同学可能会不愿承认将页面重构这块分出来，但随着工种的细分，加上页面重构本身的专业性，独立为一个职业也不是不可能，至少我现在从事的就是一个专职的职位。如果你觉得一个前端工程师必须去画设计稿，可以不理会下面的内容。

单纯的页面重构，所涉及到的工作内容一般是“分析设计稿=>切图=>写HTML和CSS”，虽然看起来很少，但要做好这份工作，绝非所想的那么容易。原因很简单：工作内容单一，在时间和工作量上必会很苛刻，往往跟设计师的工作时间是3:1，即设计师给三天的时间，制作只给一天的时间完成；在这种工作强度下，很多人都是靠着对这份工作的喜爱在维持着，一旦工作热情消失，很容易就会变得枯燥，保持热情也成了重构工作者（也许是所有参加工作的人）应该具备的能力。

跟“前端工程师”所要求的有所不同，“页面重构”虽然也是“前端工程师”的一个范畴，在职业化中，对专职的页面重构者，要求当然也更高。不单是做出页面，而是做出好页面。又引出另一个话题，“何为好页面？”，一般包括下面几点：

结构完整，可通过标准验证
标签语义化，结构合理
充分考虑到页面在站点中的“作用和重要性”，并对其进行有针对性的优化

很多同学多少都遇到过方向不明，不知道自己应该提高些什么，我们可以从“分析设计稿=>切图=>写HTML和CSS”这个工作内容，针对每一点提出一些要求，以方便我们分析自己的能力水平，为继续提高确定个方向：

一，设计稿的分析

设计稿的分析是指对设计稿如何制作成页面的分析，即哪一块的内容可以做为公共的部分、哪一块的内容结构可以如何实现等。对设计稿的分析能力可以划分成下面的几个阶段：

能分清设计稿中的公共与私有的部分
在1的基础上对各部分的实现方式有一个初步的方案（包括如何切图、写结构、写样式）
在1的基础上，准确的给出各部分的实现方案（包括如何切图、写结构、写样式）
在3的基础上，能同时考虑方案的扩展性、复用性及页面性能（包括如何切图、写结构、写样式）
在4的基础上，考虑整站的结构分布（包括文件分布、目录结构）

上面这些都是在还没开始动手制作之前所要做的。

二，切图

切图是指将设计稿切成便于制作成页面的图片。都有个误区，觉得切图就是把图片切出来，其实并不完全是这样，还包括把切出来的图片合并到一起，怎么切、从哪切才能将性能最大化，说“切图是一门艺术”完全不为过。切图也可以划分成几个阶段：

切成所需要的图片（如何将需要的部分切出来）
在1的基础上，对切出来的图片进行一些优化（包括压缩文件大小、选择图片类型）
在2的基础上，规划切出来的图片（包括文件分布）
在3的基础上，考虑整体的性能（包括合并图片、压缩文件大小）

HTML和CSS的编写

HTML和CSS的编写是指将上面完成的内容，通过HTML和CSS的编写，将设计稿转换成WEB页面最重要的一块，也是我们所要重点掌握的内容，把它们放在一起，是因为它们相互的关联性太强，HTML的写法会影响到CSS的写法，它又可以划分成下面几个阶段：

还原设计稿视觉效果，并通过标准验证（HTML）
在1的基础上，实现多浏览器的兼容（HTML）
在2的基础上，标签语义化（HTML）
在3的基础上，选择较优的实现方式（包括模块化结构，方便程序脚本使用，HTML和CSS）
在4的基础上，考虑到扩展性、复用性和可维护性（HTML和CSS）
在5的基础上，考虑到整站的样式分布（包括如何实现分布）
在6的基础上，样式写法的优化（包括技巧的应用）

是对所遇到问题的解决能力，这一点在不同的阶段都可能会遇到，所以没有写到上面。

如果你已经达到或超过3、4、5，恭喜你，你已经是一个职业的“页面重构工作者”了。为了我们自身的发展，关注新技术、技术创新、提高用户体验、审美观、程序脚本的实现方式等，也是十分必要的。大家一起进步吧。

本文转自:ISD Webteam

2008年最佳Web设计/前端开发技巧、脚本及资源总结

彬Go — Wed, 31 Dec 2008 02:24:28 +0000

今天是2008年的最后一天，彬Go为大家奉上今年的最后大餐，这篇文章将为大家总结08年国外一些比较不错的前端开发相关的教程、技巧、脚本、实例及工具资源等，有一些是曾经彬Go发表过的翻译文章。实在是丰盛的需要消化很久…无论您是刚入门的前端开发菜鸟，还是有多年前端开发经验的高手，我相信下面的这些日志总会有您需要的！
注:链接到的文章都是英文，如果您的英文不好可以尝试使用Google翻译，如果还是无法理解，可以将想看的文章的标题留言给我，暴风彬彬今后有时间会为大家翻译的。

留意更新

订阅彬Go以查看网页设计/前端开发最新教程及资源。

英文原文:Best of 2008 for developers: 2008+ tips, tricks, scripts and sources!
翻译原文:2008年国外最佳前端开发技巧、脚本及资源总结(暴风彬彬)

转载声明:
原载:彬Go——集前端开发/网页设计/网站可用性/用户体验于一体的趣味互联网生活
本文链接:http://blog.bingo929.com/css-best-practices-css-template-file.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

10种JavaScript特效实例让你的网站更吸引人

暴风彬彬 — Wed, 10 Dec 2008 10:00:33 +0000

　　今天的话题是如何改进自己网站的界面或提高网站的视觉体验，从而让用户记忆犹新。

　　我们有三种主要的方法(从难到易):自己动手写脚本;使用类似于jQuery和mooTools的JavaScript框架(可以让编写代码变得更容易些);使用能工作于现有的JavaScript框架下的提前预置好的脚本或那种从头开始开发的创建者。这篇文章适合那些打算提高工作效率或不愿意从头开发脚本的人阅读。

　　这里收集了10种强大的且容易上手的JavaScript特效来改进您的网页站界面，从而得到更多的用户体验。这10种javaScript特效回味你的网站带来意想不到的视觉盛宴，而且安装和使用都比较容易。

您还可以参考以下JavaScript/Ajax相关教程及资源:
《10个非常棒的Ajax及Javascript实例资源网站》
《12种Javascript解决常见浏览器兼容问题的方法》
《300+Jquery, CSS, MooTools 和 JS的导航菜单资源》

1.GreyBox

　　GreyBox 允许你以模式窗口的形式运行其它网站(类似于弹出式窗口，但又不运行新的浏览器窗口).如果你的网站上有一些其他网站的导出链接，但你又不想让你的用户离开你的网站或不想让他们打开另一个浏览器窗口的话，这真的是一个很好的解决方案。使用GreyBox 非常简单。

　　这里是关于GreyBox的关键页面:下载页面, 说明页面, 实例, 安装,和高级用法(如果你是JavaScript高手，看完这个页面中的一些技巧说明，你就能扩展它的函数库了)

2.instant.js

　　instant.js 特效会为你的照片动态添加类似偏振(Polaroid-like)的效果(将照片倾斜并添加阴影和边框)。现在我们可以使用这个照片特效模拟Photoshop的数码照片处理了。

　　这个脚本技术可以用于在你的网站上有很多照片，但又不想一个个手动处理的情况。（也许你会使用批量处理，但那只是建立于单一的动作下的，如调整尺寸、裁剪等…）

3.mooTable

　　mooTable允许你为表格中的数据进行排序(不用刷新页面)，利用DOM替代数据库的请求的新式排序方法。使用简单，仅需轻微的配置即可。

　　这个脚本库需要mooTools框架的支持，你可以在这里下载。你还可以在论坛中的mootools板块寻找一些创建mooTable的方法，会有很多mootools开发者的反馈。

4.FancyForm

　　FancyForm 可以取代单调乏味的表单控件如单选按钮和复选框。基本的使用仅需两步:(1)在页面中调用JavaScript文件 (2)为你的表单控件指定类名，如复选框指定class=”checked” 或 class=”unchecked”，单选框指定class=”selected” 和 class=”unselected”。非常不显眼的javaScript.

　　该脚本需要mootools的支持(版本1.1)

5.image menu

　　image menu,使用phatfusion开发而成。非常漂亮的横向菜单，当你悬停在某个菜单项上时，图片就会扩展开。

　　你可以使用这个技术为照片的隐藏部分使用蒙太奇效果，但当用户将鼠标悬停在上面是就会显示全部。

　　该脚本需要mootools的支持(版本1.1)

6.AmberJack: Site Tour Creator

　　这是一个轻量级的JavaScipt库，允许你为网站添加实施快速游览。允许用户事实的在浏览每个页面的时候查看简短的描述。

　　您可以利用这个技术来演示如何让用户使用这个网站，用户只需要点击下一步的按钮，就能了解需要做的每一步。

7.ImageFlow

　　灵感来源于iPod的“coverflow”，ImageFlow是一个用来展示图片集合的特效。用户可以拖动下方的滚动条来控制图片的显示。

　　用户点击图片以后，会转向到现实清晰大图的网页。

8.ShadowBox.js Media viewer

　　ShadowBox是”完全使用JavaScipt编写的跨浏览器、跨平台、代码简洁且文档完整的媒体查看应用程序”(怎么样?一口气说下来这么多优点。)

　　ShadowBox区别于其它Model Box（如Lightbox 2）的地方是，它还支持除图片以外的很多其它文件类型，如flash视频、内嵌式youtube视频、Apple.com预告片和网页(这样能让用户不用转到另一个页面就能完成登录、注册)。这是很有价值的脚本。

9.TJPzoom 3 – image magnifier

TJPzoom可以让你将某个高清图片的局部放大显示。按下并拖动鼠标的话，可以改变放大区域的尺寸。

10.mootools Tips

　　mootools Tips是mooTools框架的一部分，它可以让你为用户提供一个高度可配置的工具提示，当用户将鼠标悬停在某个链接或图片上时，一些关于这个元素的附加的提示信息就会在屏幕上显示出来。

　　一些可以调节的方法:CSS 样式(可以修改默认的黑背景白文字)、渐变速度、工具提示在屏幕上显示的风格、你希望工具提示显示多久。这个脚本需要mootools框架的支持。

英文原文:10 JavaScript Effects to Boost Your Website’s Fanciness Factor
翻译原文:10种JavaScript特效实例让你的网站更吸引人

转载声明:
原载:彬Go
本文链接:http://blog.bingo929.com/10-ajax-effects-website-fanciness.html
如需转载必须以链接形式注明原载或原文地址，谢谢合作

Web前端开发必备手册下载

暴风彬彬 — Mon, 17 Nov 2008 04:00:21 +0000

今天暴风彬彬要向大家推荐一些前端开发时必备的参考手册，它们能够让你在开发页面的时候查询一些必要的语法。这些手册(Cheat sheet)包括目前比较流行的编程语言，比如jQuery, Mootools, Prototype, CSS,HTML,Django等…Cheat sheet这个词组如果直译成中文，意思大概是”作弊小抄”之类的词，但Cheat sheet这个词的实际意思已经并非是贬义了，虽然中文还没有实际的对应词能够很好的翻译”Cheat sheet”，但大致意思就是用于参考的简洁手册，就像是考试作弊时将必备的数学公式等写在一张纸上，以便考试时查询。

如果您有其它暴风彬彬没有提到的参考手册，欢迎留言分享。

彬Go会经常更新前端开发/网页设计等相关技术及教程文章，欢迎订阅本博客来及时浏览本博客的最新教程及资源。

彬Go » Ajax

15款提高表格操作的jQuery插件

1.DataTables-强大的jQuery表格插件

2.uiTableFilter-jQuery表格过滤插件

3.Scrollable HTML Table-jQuery表格滚动插件

4.Tablesorter-jQuery表格排序插件

5.Flexigrid-Web2.0 jQuery表格插件

6.HeatColor-jQuery表格颜色插件

7.JQTreeTable-jQuery树形表格插件

8.Ingrid-jQuery表格插件

9.jQuery ColumnManager plugin

10.jQuery treeTable-jQuery树形表格插件

11.CSV2Table-CSV格式读取表格插件

12.Table Pagination-jQuery表格分页插件

13.jQuery TableRowCheckboxToggle

14.Table Drag and Drop jQuery plugin-jQuery表格拖拽插件

15.uiTableEdit

留意更新

了解jQuery技巧来提高你的代码

1.测试并提升你的jQuery选择器水平

2.测试jQuery包装集是否包含某些元素

3.从jquery.org读取jQuery最新版本

4.存储数据

5.jQuery手册常备身边

6.在FireBug控制台记录jQuery

7.尽可能使用ID选择器

8.善于利用jQuery链

9.绑定jQuery函数到$(window).load事件

10.使用jQuery链来限定选择器，让你的代码更简洁更优雅

11.使用回调函数同步效果

12.学会使用自定义选择器

13.预加载图片

14.将你的代码测试完好

留意更新

Ajax Loading进度条gif在线生成网站Preloaders.net

Loading预载动画图片生成界面如下:

Loading预载动画图片生成样例：

留意更新

你是一个职业的页面重构工作者吗？

一，设计稿的分析

二，切图

HTML和CSS的编写

2008年最佳Web设计/前端开发技巧、脚本及资源总结

工具&Web应用

脚本、补丁及Hack

技巧

资源

生成器

插件和主题

留意更新

10种JavaScript特效实例让你的网站更吸引人

1.GreyBox

2.instant.js

3.mooTable

4.FancyForm

5.image menu

6.AmberJack: Site Tour Creator

7.ImageFlow

8.ShadowBox.js Media viewer

9.TJPzoom 3 – image magnifier

10.mootools Tips

推荐12款可用于前端开发的免费文本编辑器

1.Bluefish Editor

2.NOTEPAD++

3.jEdit

4.Komodo Edit

5.SciTE

6.ConTEXT

7.Crimson Editor

8.GNU Emacs

9.gedit

10.Caditor

11.Smultron

12.TextWrangler

Web前端开发必备手册下载

1.CSS Cheat Sheet

2.HTML Cheat Sheet

3.Javascript Cheat Sheet

4. jQuery Cheat Sheet

5.Mootools Cheat Sheet