亚洲欧美熟妇综合久久久久,亚洲电影一区二区三区,亚洲色大成网站www永久

15 个用于布局�?UI 增强�?jQuery 插�g

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

有非帔R��常多�?jQuery 插�g�Q�这些插件可以简化你�?Web 应用开发。今天我们向你推�?15 个用于布局�?UI 增强�?jQuery 插�g�?/p>

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框架�Q�EASY UI

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

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

补一个常用的�Ҏ��Q?

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 发表评论

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

本文搜集了大�?jQuery 表格插�g�Q�帮�?Web 设计者更好地驑ֱM HTML 表格�Q�你可以对表��D��行横向和竖向排序�Q�设�|�固定表��_��对表��D��行搜索，对大表格�q�行分页�Q�对表格�q�行滚动�Q�拖放操作等�{�。这些插件很多都包含详细的教�E��?/p>

jQuery 表格插�g

Flexigrid – Web 2.0 Javscript Grid for jQuery - 可变列宽�Q�自动适应表头宽度�Q�可通过 Ajax �q�接 XML 数据源，�c�M�� Ext Grid�Q�但��Z�� jQuery 因此更轻量小巧�?/p>

Chromatable JQuery Plugin - 固定表头�Q�可滚动内容区，内容区滚动的时候表头位�|�保持不变�?/p>

Ingrid, the jQuery Datagrid - �?HTML 表格上加入列宽调��_��分页�Q�排序，行列式样�{�功能（演示�Q��?/p>

JQTreeTable - 在表��g��加入树�Ş�l�构

Scrollable HTML table - ��普�?HTML 表格变�ؓ可滚动状态。将表头部分攑օ� THEAD 区，内容部分攑օ� TBODY 区，脚注部分攑օ� TFOOT 区域�Q�引�?webtoolkit.scrollabletable.js 文�g�Q�然后在每个表格后面创徏 ScrollableTable() 对象卛_��Q?a >演示�Q��?/p>

KeyTable - �?Excel 那样�Q�在单元��g��间��E游，可以现场�~�辑�?/p>

graphTable - 借助 flot ��?HTML 表格中的内容变成囑�Ş�Q?a >演示�Q��?/p>

DataTables - 非常强大�?jQuery 表格插�g�Q�可变宽��늠��览�Q�现��滤。多列排序，自动探测数据�c�d��Q�智能列宽，可从几乎��M��数据源获取数据�?/p>

jqGrid Plugin - ��Z�� Ajax �?jQuery 表格插�g�Q�可�?Ajax 方式从服务器端获取数据填充进来（演示�Q��?/p>

Visualize: Accessible Charts & Graphs from Table Elements - �?HTML 表格攉��数据�Q��ƈ借助 HTML5 Canvas 对象转换为图表�?/p>

Grider - 一个简单的 jQuery 插�g�Q�可以对 HTML 表格�q�行计算�Q��^均，累加�Q�最大��|��最��值等�?/p>

表格功能增强

Table Drag and Drop - 通过拖放�Q�对表格中的数据重新排列�Q�可以设�|�禁止拖攄��行�?/p>

Table Pagination - 在表��g��方自动生成分��导航�?/p>

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

BS Table Crosshair Plugin - 鼠标在表��g��U�d��Ӟ��所�l�过的单元格自动交叉加亮

jqtable2csv - ��?HTML 表格转换�?SVG 字符丌Ӏ?/p>

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

jExpand - 一个非常轻量的 jQuery 插�g�Q�可以展开/关闭表格单元��|��使表格可以容�U�x��多内宏V�?/p>

columnHover - 鼠标�l�过�Ӟ��可以整列加亮�Q�甚��x��?colspans �?rowspans

HeatColor - �Ҏ��规则�Q�或自动对表��g��的��D��行分析，对不同范围的值按不同颜色区分�?/p>

Fixed Header Table - 固定表头可滚动表�?/p>

表格搜烦�Q�筛�?/h2>
tableFilter - �l�表格添加简单的�{�选功能�?/p>

uiTableFilter - �Ҏ��条�g�{�选（隐藏�Q�表��D��

Tablesorter 2.0 - ��普通的�Q�拥�?THEAD �?TBODY 标签的表��D�{换�ؓ可排序表��|��可以分析多种数据�Q�支持多列排序�?/p>

PicNet Table Filter - 实时的，Google 式筛选功�?/p>

jQuery tinysort - 排序

LiveFilter 1.1 - 非常轻量的表格筛选插�Ӟ��部��v非常��单�?/p>

jQtablesearch - 快速搜索，非常�?/p>

Quicksearch - ��单的搜烦功能

jQuery 现场�~�辑

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

jGridEditor - 现场�~�辑�Q�可配置 Ajax 回存数据

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

中文�~�译来源�Q?a >锐商企业CMS �|�站内容��理�pȝ�� 官方�|�站

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

从零开始学习jQuery

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

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

Eclipse 增加JQuery插�g�Ҏ��

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

1. Spket的安装：
    (1)Plugin:
        最低要求： eclipse�q�_��q�行�?.2.x
    (2)Spket IDE:
        �q�是更新�|�站�Q��ؓspket的ide �?br />       使用它，打开eclipse的updatemanager (在eclipse下的帮助菜单) �Q��ƈ新增一个书�{��ؓ�Q?br />       http://www.spket.com/update

2. Elipse开发jQuery环境讄��(Spket):
    首先需要安装Spket�Q�如上，之后�q�行JQuery的配�|�：
    (1)�?a >http://jquery.com/下蝲开发用的Javascript文�g

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

   1) 从window->Preferences...�q�去

   2) 如上��N��择Spket -> Javascript Profiles

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

   4) 点击Add Library�Q��ƈ选择JQuery�Q�徏立新的Library

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

   6) 如果惌��JQuery成�ؓ�~�省的Javascript Profile�Q�则点击Default�?

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

完成�Q�！�Q?

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

JQuery

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

1、关于页面元素的引用
　　通过jquery�?span style="color: #ff0000">$()引用元素包括通过id、class、元素名以及元素的层�U�关�p�d��dom或者xpath条�g�{�方法，且返回的对象�?span class="hilite1">jquery对象�Q�集合对象）�Q�不能直接调用dom定义的方法�?br />
2�?span class="hilite1">jQuery对象与dom对象的�{�?/span>
　　只有jquery对象才能使用jquery定义的方�?/span>。注意dom对象�?span class="hilite1">jquery对象是有区别的，调用�Ҏ��时要注意操作的是dom对象�q�是jquery对象�?br /> 　　普通的dom对象一般可以通过$()转换�?span class="hilite1">jquery对象�?br /> 　　如：$(document.getElementById("msg"))则�ؓjquery对象�Q�可以��?span class="hilite1">jquery的方法�?br /> �׃��jquery对象本��n是一个集�?/span>。所以如�?span class="hilite1">jquery对象要�{换�ؓdom对象则必��d��出其中的某一��，一般可通过索引取出�?br /> 如：$("#msg")[0]�Q?("div").eq(1)[0]�Q?("div").get()[1]�Q?("td")[5]�q�些都是dom对象�Q�可以��用dom中的�Ҏ��Q�但不能再��?span class="hilite1">Jquery的方法�?br /> 以下几种写法都是正确的：

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

3、如何获�?span class="hilite1">jQuery集合的某一��?/span>
　　对于获取的元素集合，获取其中的某一��（通过索引指定�Q�可以��用eq或get(n)�Ҏ��或者烦引号获取�Q�要注意�Q?span style="text-decoration: underline">eq�q�回的是jquery对象�Q�而get(n)和烦引返回的是dom元素对象�?/span>对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取�W�三�?lt;div>元素的内宏V��有如下两种�Ҏ��Q?br />

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

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

$("#msg").html();               //�q�回id为msg的元素节点的html内容�?/span>
$("#msg").html("new content");
//��?#8220;new content” 作�ؓhtml串写入id为msg的元素节点内容中,��面昄��_�体的new content

$("#msg").text();               //�q�回id为msg的元素节点的文本内容�?/span>
$("#msg").text("new content");
//��?#8220;new content” 作�ؓ普通文本串写入id为msg的元素节点内容中,��面昄��new content

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

$("input").val(");       //�q�回表单输入框的value�?br /> $("input").val("test");       //��表单输入框的value��D��为test

$("#msg").click();       //触发id为msg的元素的单击事�g
$("#msg").click(fn);       //为id为msg的元素单��M��件添加函�?/span>

同样blur,focus,select,submit事�g都可以有着两种调用�Ҏ��

5、集合处理功�?/span>
　　对于jquery�q�回的集合内�Ҏ��需我们自己循环遍历�q�对每个对象分别做处理，jquery已经为我们提供的很方便的�Ҏ��q�行集合的处�?/span>�?br /> 包括两种形式�Q?br />

$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
//为烦引分别�ؓ0�Q?�Q?的p元素分别讑֮�不同的字体颜艌Ӏ?/span>

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

$("p").click(function(){alert($(this).html())})
//为每个p元素增加了click事�g�Q�单��L��个p元素则弹出其内容

6、扩展我们需要的功能

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

使用扩展的方法（通过“$.�Ҏ��?#8221;调用�Q�：

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

7、支持方法的�q�写
所谓连写，卛_��以对一�?span class="hilite1">jquery对象�q�箋调用各种不同的方法�?br /> 例如�Q?br />

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

8、操作元素的样式
主要包括以下几种方式�Q?br />

$("#msg").css("background");               //�q�回元素的背景颜�?/span>
$("#msg").css("background","#ccc")       //讑֮�元素背景为灰�?/span>
$("#msg").height(300); $("#msg").width("200");       //讑֮�宽高
$("#msg").css({ color: "red", background: "blue" });//以名值对的�Ş式设定样�?/span>
$("#msg").addClass("select");       //为元素增加名�U�Cؓselect的class
$("#msg").removeClass("select");       //删除元素名称为select的class
$("#msg").toggleClass("select");       //如果存在�Q�不存在�Q�就删除�Q�添加）名称为select的class

9、完善的事�g处理功能
Jquery已经为我们提供了各种事�g处理�Ҏ��Q�我们无需在html元素上直接写事�g�Q�而可�?span style="color: #0000ff">直接为通过jquery获取的对象添加事�?/span>�?br /> 如：

$("#msg").click(function(){alert("good")}) //为元素添加了单击事�g
$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
//��Z��个不同的p元素单击事�g分别讑֮�不同的处�?/span>

jQuery中几个自定义的事�Ӟ��
�Q?�Q�hover(fn1,fn2)�Q�一个模仿悬停事�Ӟ��鼠标�U�d��C��个对象上面及�U�d��q�个对象�Q�的�Ҏ��。当鼠标�U�d��C��个匹配的元素上面�Ӟ��会触发指定的�W�一个函数。当鼠标�U�d��q�个元素�Ӟ��会触发指定的�W�二个函数�?br /> //当鼠标放在表格的某行上时��class�|��ؓover�Q�离开时置为out�?br />

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

�Q?�Q�ready(fn):当DOM载入��q�A可以查询及操�U�|��l�定一个要执行的函数�?br />

$(document).ready(function(){alert("Load Success")})
//��面加蝲完毕提示“Load Success”,相当于onload事�g。与$(fn)�{��h

�Q?�Q�toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点��M��一个匹配的元素�Q�则触发指定的第一个函敎ͼ�当再�ơ点��d��一元素�Ӟ��则触发指定的�W�二个函数。随后的每次点击都重复对�q�两个函数的轮番调用�?br />

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

�Q?�Q�trigger(eventtype): 在每一个匹配的元素上触发某�c�M��件�?br /> 例如�Q?br />

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

�Q?�Q�bind(eventtype,fn)�Q�unbind(eventtype): 事�g的绑定与反绑�?br /> 从每一个匹配的元素中（��d��Q�删除绑定的事�g�?br /> 例如�Q?br />

$("p").bind("click", function(){alert($(this).text());});       //为每个p元素��d��单击事�g
$("p").unbind();       //删除所有p元素上的所有事�?/span>
$("p").unbind("click")       //删除所有p元素上的单击事�g

10、几个实用特效功�?/span>
其中toggle()和slidetoggle()�Ҏ��提供了状态切换功能�?br /> 如toggle()�Ҏ��包括了hide()和show()�Ҏ��?br /> slideToggle()�Ҏ��包括了slideDown()和slideUp�Ҏ��?br />
11、几个有用的jQuery�Ҏ��
$.browser.��览器类型：��浏览器�c�d��。有效参敎ͼ�safari, opera, msie, mozilla。如��是否ie�Q?.browser.isie�Q�是ie��览器则�q�回true�?br /> $.each(obj, fn)�Q�通用的�P代函数。可用于�q�似地�P代对象和数组�Q�代替��@环）�?br /> �?br />

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

�{��h于：

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

也可以处理json数据�Q�如

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

�l�果为：
Name:name, Value:John
Name:lang, Value:JS
$.extend(target,prop1,propN)�Q�用一个或多个其他对象来扩展一个对象，�q�回�q�个被扩展的对象。这�?span class="hilite1">jquery实现的��承方式�?br /> 如：

$.extend(settings, options);
//合�ƈsettings和options�Q��ƈ��合�q�结果返回settings中，相当于options�l�承setting�q�将�l�承�l�果保存在setting中�?/span>
var settings = $.extend({}, defaults, options);
//合�ƈdefaults和options�Q��ƈ��合�q�结果返回到setting中而不覆盖default内容�?/span>

可以有多个参敎ͼ�合�ƈ多项�q�返回）
$.map(array, fn)�Q�数�l�映��。把一个数�l�中的项�?处理转换�?保存到到另一个新数组中，�q�返回生成的新数�l��?br /> 如：

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):合�ƈ两个数组�Q�返回的�l�果会修改第一个数�l�的内容——第一个数�l�的元素后面跟着�W�二个数�l�的元素。�?br /> 如：

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

$.trim(str)�Q�删除字�W�串两端的空白字�W��?
如：

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

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