BlogJava-paulwong-随笔分类-JQuery

15 个用于布局和 UI 增强的 jQuery 插件

paulwong — Fri, 07 Nov 2014 00:48:00 GMT

有非常非常多的 jQuery 插件，这些插件可以简化你的 Web 应用开发。今天我们向你推荐 15 个用于布局和 UI 增强的 jQuery 插件。

Superscrollorama

jQuery File Upload Demo

jQuery Knob

jQuery Complexify

rcarousel

turn.js

jQuery HiddenPosition

Fancy Input

pickadate.js

Cool Kitten

stellar.js

windows

Infinite Scrolling

Autobrowse jQuery Infinite scrolling plugin using Ajax

jScrollPane

paulwong 2014-11-07 08:48 发表评论

一套不错的JQUERY UI框架：EASY UI

paulwong — Tue, 17 Apr 2012 14:57:00 GMT

一套不错的JQUERY UI框架：EASY UI
http://www.jeasyui.com/

补一个常用的方法：

function closeSelectedTab(){
    var tab = $('#tt').tabs('getSelected');
    alert(tab.panel('options').href);
    $('#tt').tabs('close',tab.panel('options').title);
    //reloadTab(title,url);
}

paulwong 2012-04-17 22:57 发表评论

jQuery 表格工具集

paulwong — Fri, 16 Apr 2010 03:14:00 GMT

本文搜集了大量 jQuery 表格插件，帮助 Web 设计者更好地驾御 HTML 表格，你可以对表格进行横向和竖向排序，设置固定表头，对表格进行搜索，对大表格进行分页，对表格进行滚动，拖放操作等等。这些插件很多都包含详细的教程。

jQuery 表格插件

Flexigrid – Web 2.0 Javscript Grid for jQuery - 可变列宽，自动适应表头宽度，可通过 Ajax 连接 XML 数据源，类似 Ext Grid，但基于 jQuery 因此更轻量小巧。

Chromatable JQuery Plugin - 固定表头，可滚动内容区，内容区滚动的时候表头位置保持不变。

Ingrid, the jQuery Datagrid - 在 HTML 表格上加入列宽调整，分页，排序，行列式样等功能（演示）。

JQTreeTable - 在表格中加入树形结构

Scrollable HTML table - 将普通 HTML 表格变为可滚动状态。将表头部分放入 THEAD 区，内容部分放入 TBODY 区，脚注部分放入 TFOOT 区域，引用 webtoolkit.scrollabletable.js 文件，然后在每个表格后面创建 ScrollableTable() 对象即可（演示）。

KeyTable - 象 Excel 那样，在单元格之间巡游，可以现场编辑。

graphTable - 借助 flot 将 HTML 表格中的内容变成图形（演示）。

DataTables - 非常强大的 jQuery 表格插件，可变宽页码浏览，现场过滤。多列排序，自动探测数据类型，智能列宽，可从几乎任何数据源获取数据。

jqGrid Plugin - 基于 Ajax 的 jQuery 表格插件，可以 Ajax 方式从服务器端获取数据填充进来（演示）。

Visualize: Accessible Charts & Graphs from Table Elements - 从 HTML 表格收集数据，并借助 HTML5 Canvas 对象转换为图表。

Grider - 一个简单的 jQuery 插件，可以对 HTML 表格进行计算，平均，累加，最大值，最小值等。

表格功能增强

Table Drag and Drop - 通过拖放，对表格中的数据重新排列，可以设置禁止拖放的行。

Table Pagination - 在表格下方自动生成分页导航。

tableRowCheckboxToggle - 可根据 class name 对表格的行自动 check on/off

BS Table Crosshair Plugin - 鼠标在表格上移动时，所经过的单元格自动交叉加亮

jqtable2csv - 将 HTML 表格转换为 SVG 字符串。

Colorize - 自动对表格间隔行使用不同背景颜色

jExpand - 一个非常轻量的 jQuery 插件，可以展开/关闭表格单元格，使表格可以容纳更多内容。

columnHover - 鼠标经过时，可以整列加亮，甚至支持 colspans 和 rowspans

HeatColor - 根据规则，或自动对表格中的值进行分析，对不同范围的值按不同颜色区分。

Fixed Header Table - 固定表头可滚动表格

表格搜索，筛选

tableFilter - 给表格添加简单的筛选功能。

uiTableFilter - 根据条件筛选（隐藏）表格行

Tablesorter 2.0 - 将普通的，拥有 THEAD 和 TBODY 标签的表格转换为可排序表格，可以分析多种数据，支持多列排序。

PicNet Table Filter - 实时的，Google 式筛选功能

jQuery tinysort - 排序

LiveFilter 1.1 - 非常轻量的表格筛选插件，部署非常简单。

jQtablesearch - 快速搜索，非常快

Quicksearch - 简单的搜索功能

jQuery 现场编辑

TableEditor – Flexible in place editing of TableSorter - 现场编辑表格内容，用户可以插入 Ajax 机制回存数据

jGridEditor - 现场编辑，可配置 Ajax 回存数据

本材料原始来源：Nope jQuery HTML Table Toolbox (原文作者:Paul Andrew)

中文编译来源：锐商企业CMS 网站内容管理系统官方网站

paulwong 2010-04-16 11:14 发表评论

从零开始学习jQuery

paulwong — Sun, 26 Jul 2009 15:56:00 GMT

paulwong 2009-07-26 23:56 发表评论

Eclipse 增加JQuery插件方法

paulwong — Sun, 26 Jul 2009 14:49:00 GMT

1. Spket的安装：
    (1)Plugin:
        最低要求： eclipse平台运行时3.2.x
    (2)Spket IDE:
        这是更新网站，为spket的ide 。
      使用它，打开eclipse的updatemanager (在eclipse下的帮助菜单) ，并新增一个书签为：
      http://www.spket.com/update

2. Elipse开发jQuery环境设置(Spket):
    首先需要安装Spket，如上，之后进行JQuery的配置：
    (1)从http://jquery.com/下载开发用的Javascript文件

   (2)配置Eclipse里面的Spket Javascript Profiles

   1) 从window->Preferences...进去

   2) 如上图选择Spket -> Javascript Profiles

   3) 点击New...输入JQuery建立新的profile

   4) 点击Add Library，并选择JQuery，建立新的Library

   5) 点击Add File, 选择刚下载的JQuery文件

   6) 如果想让JQuery成为缺省的Javascript Profile，则点击Default。

3.最后新建js文件。选择openwith spket js editor

完成！！！

paulwong 2009-07-26 22:49 发表评论

JQuery

paulwong — Tue, 21 Jul 2009 18:08:00 GMT

1、关于页面元素的引用
　　通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。

2、jQuery对象与dom对象的转换
　　只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。
　　普通的dom对象一般可以通过$()转换成jquery对象。
　　如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。
如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。
以下几种写法都是正确的：

$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;

3、如何获取jQuery集合的某一项
　　对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个

元素的内容。有如下两种方法：

$("div").eq(2).html(); //调用jquery对象的方法
$("div").get(2).innerHTML; //调用dom的方法属性

4、同一函数实现set和get
Jquery中的很多方法都是如此，主要包括如下几个：

$("#msg").html();               //返回id为msg的元素节点的html内容。
$("#msg").html("new content");
//将“new content” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content

$("#msg").text();               //返回id为msg的元素节点的文本内容。
$("#msg").text("new content");
//将“new content” 作为普通文本串写入id为msg的元素节点内容中,页面显示new content

$("#msg").height();               //返回id为msg的元素的高度
$("#msg").height("300");       //将id为msg的元素的高度设为300
$("#msg").width();               //返回id为msg的元素的宽度
$("#msg").width("300");       //将id为msg的元素的宽度设为300

$("input").val(");       //返回表单输入框的value值
$("input").val("test");       //将表单输入框的value值设为test

$("#msg").click();       //触发id为msg的元素的单击事件
$("#msg").click(fn);       //为id为msg的元素单击事件添加函数

同样blur,focus,select,submit事件都可以有着两种调用方法

5、集合处理功能
　　对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery已经为我们提供的很方便的方法进行集合的处理。
包括两种形式：

$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
//为索引分别为0，1，2的p元素分别设定不同的字体颜色。

$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
//实现表格的隔行换色效果

$("p").click(function(){alert($(this).html())})
//为每个p元素增加了click事件，单击某个p元素则弹出其内容

6、扩展我们需要的功能

$.extend({
       min: function(a, b){return a < b?a:b; },
       max: function(a, b){return a > b?a:b; }
});       //为jquery扩展了min,max两个方法

使用扩展的方法（通过“$.方法名”调用）：

alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));

7、支持方法的连写
所谓连写，即可以对一个jquery对象连续调用各种不同的方法。
例如：

$("p").click(function(){alert($(this).html())})
.mouseover(function(){alert('mouse over event')})
.each(function(i){this.style.color=['#f00','#0f0','#00f'][i]});

8、操作元素的样式
主要包括以下几种方式：

$("#msg").css("background");               //返回元素的背景颜色
$("#msg").css("background","#ccc")       //设定元素背景为灰色
$("#msg").height(300); $("#msg").width("200");       //设定宽高
$("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式
$("#msg").addClass("select");       //为元素增加名称为select的class
$("#msg").removeClass("select");       //删除元素名称为select的class
$("#msg").toggleClass("select");       //如果存在（不存在）就删除（添加）名称为select的class

9、完善的事件处理功能
Jquery已经为我们提供了各种事件处理方法，我们无需在html元素上直接写事件，而可以直接为通过jquery获取的对象添加事件。
如：

$("#msg").click(function(){alert("good")}) //为元素添加了单击事件
$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
//为三个不同的p元素单击事件分别设定不同的处理

jQuery中几个自定义的事件：
（1）hover(fn1,fn2)：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。
//当鼠标放在表格的某行上时将class置为over，离开时置为out。

$("tr").hover(function(){
$(this).addClass("over");
},
function(){
$(this).addClass("out");
});

（2）ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

$(document).ready(function(){alert("Load Success")})
//页面加载完毕提示“Load Success”,相当于onload事件。与$(fn)等价

（3）toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。

       //每次点击时轮换添加和删除名为selected的class。
       $("p").toggle(function(){
               $(this).addClass("selected");
       },function(){
               $(this).removeClass("selected");
       });

（4）trigger(eventtype): 在每一个匹配的元素上触发某类事件。
例如：

$("p").trigger("click"); //触发所有p元素的click事件

（5）bind(eventtype,fn)，unbind(eventtype): 事件的绑定与反绑定
从每一个匹配的元素中（添加）删除绑定的事件。
例如：

$("p").bind("click", function(){alert($(this).text());});       //为每个p元素添加单击事件
$("p").unbind();       //删除所有p元素上的所有事件
$("p").unbind("click")       //删除所有p元素上的单击事件

10、几个实用特效功能
其中toggle()和slidetoggle()方法提供了状态切换功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。

11、几个有用的jQuery方法
$.browser.浏览器类型：检测浏览器类型。有效参数：safari, opera, msie, mozilla。如检测是否ie：$.browser.isie，是ie浏览器则返回true。
$.each(obj, fn)：通用的迭代函数。可用于近似地迭代对象和数组（代替循环）。
如

$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });

等价于：

var tempArr=[0,1,2];
for(var i=0;i<tempArr.length;i++){
alert("Item #"+i+": "+tempArr[i]);
}

也可以处理json数据，如

$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " + n ); });

结果为：
Name:name, Value:John
Name:lang, Value:JS
$.extend(target,prop1,propN)：用一个或多个其他对象来扩展一个对象，返回这个被扩展的对象。这是jquery实现的继承方式。
如：

$.extend(settings, options);
//合并settings和options，并将合并结果返回settings中，相当于options继承setting并将继承结果保存在setting中。
var settings = $.extend({}, defaults, options);
//合并defaults和options，并将合并结果返回到setting中而不覆盖default内容。

可以有多个参数（合并多项并返回）
$.map(array, fn)：数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中，并返回生成的新数组。
如：

var tempArr=$.map( [0,1,2], function(i){ return i + 4; });

tempArr内容为：[4,5,6]

var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });

tempArr内容为：[2,3]

$.merge(arr1,arr2):合并两个数组，返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素。。
如：

$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,2,3,4]

$.trim(str)：删除字符串两端的空白字符。
如：

$.trim(" hello, how are you? "); //返回"hello,how are you? "

paulwong 2009-07-22 02:08 发表评论