<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>WEB前端开发 &#187; jquery</title>
	<atom:link href="http://www.css88.com/archives/tag/jquery/feed" rel="self" type="application/rss+xml" />
	<link>http://www.css88.com</link>
	<description>专注前端开发，关注用户体验</description>
	<lastBuildDate>Mon, 06 Feb 2012 13:31:04 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>jQuery doTimeout插件: 比setTimeout实用</title>
		<link>http://www.css88.com/archives/4152</link>
		<comments>http://www.css88.com/archives/4152#comments</comments>
		<pubDate>Tue, 01 Nov 2011 08:02:49 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[jQuery插件]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=4152</guid>
		<description><![CDATA[jQuery  doTimeout插件是延迟执行代码的插件，主要包括延迟，阻止重复执行，支持jQuery的链式调用。 插件主页：http://benalman.com/projects/jquery-dotimeout-plugin/ 照着写了几个例子：http://www.css88.com/demo/dotimeout/ 声明: 本文采用 BY-NC-SA 协议进行授权 &#124; WEB前端开发转载请注明转自《jQuery doTimeout插件: 比setTimeout实用》]]></description>
		<wfw:commentRss>http://www.css88.com/archives/4152/feed</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
		<item>
		<title>[jQuery插件] jQuery Color Animations颜色动画插件</title>
		<link>http://www.css88.com/archives/4090</link>
		<comments>http://www.css88.com/archives/4090#comments</comments>
		<pubDate>Sat, 17 Sep 2011 07:19:57 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Color Animation]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[jQuery插件]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=4090</guid>
		<description><![CDATA[jQuery的animate方法对颜色无法做动画效果，例如有个test元素： &#60;div id=&#34;test&#34; style=&#34;border: 3px solid #CDCDCD; width: 500px; height: 500px; background-color: #FFFFFF&#34;&#62; 测试元素&#60;/div&#62; 我们写一行这样的代码： $(&#34;#test&#34;).animate({&#34;backgroundColor&#34;:&#34;#FF3300&#34;,&#34;height&#34;:200},5000); 我们可以看到test元素高度会缓慢的变小，而该元素的背景颜色却毫无变化，假设你去对边框做颜色变化的动画效果，也是无法实现的。 再看一下API：http://www.css88.com/jqapi/#p=animate 所有用于动画的属性必须是数字的（除了如下所示）；这些属性如果不是数字的将不能使用基本的jQuery功能。（举个例子， 1width ,  1height 或者 1left 可以执行动画，但是 1background-color 不能。）属性值被当作一个像素单位的数字,除非另有说明。单位 1em  和  1% 需要指定使用。就是说color，background-color，border-left-color等等这些颜色属性是不能执行动画效果的。 jQuery ui中Effects有一个Color Animation效果（见：http://jqueryui.com/demos/animate/）这里分明能改变文本颜色和背景颜色，看了一下jquery.effects.core.js这个源码，并且抽出源码，改了一个jQuery Color Animations颜色动画插件，对&#8217;backgroundColor&#8217;, &#8216;borderBottomColor&#8217;, &#8216;borderLeftColor&#8217;, &#8216;borderRightColor&#8217;, &#8216;borderTopColor&#8217;, &#8216;color&#8217;, &#8216;outlineColor&#8217;这几个属性做了动画支持。 见demo页面：http://www.css88.com/demo/Color_Animations/ 更多阅读： http://jquery.offput.ca/highlightFade/ http://www.bitstorm.org/jquery/color-animation/ &#160; 声明: 本文采用 BY-NC-SA 协议进行授权 &#124; WEB前端开发转载请注明转自《[jQuery插件] jQuery Color [...]]]></description>
		<wfw:commentRss>http://www.css88.com/archives/4090/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>【jQuery插件】autoTextarea-文本框根据输入内容自适应高度</title>
		<link>http://www.css88.com/archives/3948</link>
		<comments>http://www.css88.com/archives/3948#comments</comments>
		<pubDate>Sun, 07 Aug 2011 09:45:19 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[jQuery插件]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=3948</guid>
		<description><![CDATA[在玩微博的时候我们可能会注意到一个细节就是不管是新浪微博还是腾讯微博在转发和评论的时候给你的默认文本框的高度都不会很高，这可能是版面的限制和用户通常只转播或者评论一个短句有关。但是当你输入超过一行文字的时候，文本框的高度就自动撑高了，大大改善了体验，这样用户就可以看到全部的文字。不用再去拖动文本框的滚动条。如图： 新浪微博：@feiwen8772(我的新浪微博，顺便做个广告，^_^) 腾讯微博：@feiwen8772(我的腾讯微博，顺便做个广告，^_^) 这些在平时的项目中挺实用的，所以抽空封装了一个文本框根据输入内容自适应高度的插件-autoTextarea： (function($){ $.fn.autoTextarea = function(options) { var defaults={ maxHeight:null,//文本框是否自动撑高，默认：null，不自动撑高；如果自动撑高必须输入数值，该值作为文本框自动撑高的最大高度 minHeight:$(this).height() //默认最小高度，也就是文本框最初的高度，当内容高度小于这个高度的时候，文本以这个高度显示 }; var opts = $.extend({},defaults,options); return $(this).each(function() { $(this).bind(&#34;paste cut keydown keyup focus blur&#34;,function(){ var height,style=this.style; this.style.height = opts.minHeight + &#039;px&#039;; if (this.scrollHeight &#62; opts.minHeight) { if (opts.maxHeight &#38;&#38; this.scrollHeight &#62; opts.maxHeight) { height = opts.maxHeight; style.overflowY = &#039;scroll&#039;; } else [...]]]></description>
		<wfw:commentRss>http://www.css88.com/archives/3948/feed</wfw:commentRss>
		<slash:comments>16</slash:comments>
		</item>
		<item>
		<title>jQuery判断一个元素是否为另一个元素的子元素(或者其本身)</title>
		<link>http://www.css88.com/archives/3809</link>
		<comments>http://www.css88.com/archives/3809#comments</comments>
		<pubDate>Tue, 12 Jul 2011 00:34:07 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=3809</guid>
		<description><![CDATA[上个月研究学习了《js判断一个元素是否为另一个元素的子元素》，感觉还挺好用，但是在jQuery应用中还是有很多缺陷，比如多个元素的时候写起来就不是很方便。所以写了比较简单的jQuery判断一个元素是否为另一个元素的子元素(或者其本身)的两个扩展： //判断:当前元素是否是被筛选元素的子元素 jQuery.fn.isChildOf = function(b){ return (this.parents(b).length &#62; 0); }; //判断:当前元素是否是被筛选元素的子元素或者本身 jQuery.fn.isChildAndSelfOf = function(b){ return (this.closest(b).length &#62; 0); }; 使用起来也非常方便： $(document).click(function(event){ alert($(event.target).isChildOf(&#34;.floatLayer&#34;)); }); 或者： $(document).click(function(event){ alert($(event.target).isChildAndSelfOf (&#34;.floatLayer&#34;)); }); 查看demo：http://www.css88.com/demo/isParent/index1.html 声明: 本文采用 BY-NC-SA 协议进行授权 &#124; WEB前端开发转载请注明转自《jQuery判断一个元素是否为另一个元素的子元素(或者其本身)》]]></description>
		<wfw:commentRss>http://www.css88.com/archives/3809/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>【jQuery插件】slideImg-广告轮播，焦点图效果</title>
		<link>http://www.css88.com/archives/3799</link>
		<comments>http://www.css88.com/archives/3799#comments</comments>
		<pubDate>Mon, 11 Jul 2011 13:08:11 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[jQuery插件]]></category>
		<category><![CDATA[slide]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=3799</guid>
		<description><![CDATA[感谢 留痕 网友提交的bug，bug主要原因是我忽视了多个广告轮播和样式重名的问题；经简单的修改已经修复该问题。谢谢 留痕 网友。 ==============华丽的分割线================ 广告轮播，焦点图效果反反复复写了好几个插件,http://www.css88.com/?s=%E5%B9%BF%E5%91%8A%E8%BD%AE%E6%92%AD,http://www.css88.com/archives/2455 这次这个插件主要解决了两个问题: 1.当焦点图只有一张的时候不滚动； 2.当鼠标经过右下角图片选择的控制点上加了延时，避免在用户不经意划过这些控制点的时候切换图片。 具体插件代码： /** * @author 愚人码头 * User: feiwen * Date: 11-7-11 * Time: 下午4:30 * Settings:{ * speed:滚动速度 * timer:滚动的时间间隔 * } */ (function($) { $.fn.slideImg = function(settings) { settings = jQuery.extend({ speed: &#34;normal&#34;, timer: 1000 }, settings); return this.each(function() { $.fn.slideImg.scllor($(this), settings); }); }; [...]]]></description>
		<wfw:commentRss>http://www.css88.com/archives/3799/feed</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
		<item>
		<title>50 New jQuery Plugins For Web Developers</title>
		<link>http://www.css88.com/archives/4437</link>
		<comments>http://www.css88.com/archives/4437#comments</comments>
		<pubDate>Mon, 04 Jul 2011 07:22:11 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[开发资源]]></category>
		<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[plugins]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=4437</guid>
		<description><![CDATA[转载自：http://www.splashnology.com/article/50-new-jquery-plugins-for-web-developers/4141/ In spite of the fact that jQuery was released in January 2006 it still holds its position and it’s not surprising, because of its ability to add various elements without the necessity to write bulky and heavy code. Also, it’s getting even much more easier as the community of developers constantly releases plugins that [...]]]></description>
		<wfw:commentRss>http://www.css88.com/archives/4437/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>【jQuery插件】insertContent-在文本框光标位置插入内容并选中</title>
		<link>http://www.css88.com/archives/3627</link>
		<comments>http://www.css88.com/archives/3627#comments</comments>
		<pubDate>Mon, 23 May 2011 14:19:06 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[jQuery插件]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=3627</guid>
		<description><![CDATA[在文本框光标位置插入内容在实际的项目应用中经常用到，比如在文本框插入表情，首先要获取光标在文本框中的位置，当然这个有浏览器兼容性问题。 IE下可以通过document.selection.createRange();获取光标位置，代码也很简单： if (document.selection) { pos = document.selection.createRange(); pos.text = &#34;要插入的字符串&#34;; } Firefox浏览器则稍微负责一点，需要首先获取光标位置，然后对value进行字符串截取处理。 if (obj.selectionStart &#124;&#124; obj.selectionStart == &#039;0&#039;) { //obj是文本框对象 var startPos = obj.selectionStart; var endPos = obj.selectionEnd; obj.value = obj.value.substring(0, startPos) + &#34;要插入的字符串&#34; + obj.value.substring(endPos, obj.value.length); obj.selectionStart = startPos + myValue.length; obj.selectionEnd = startPos + myValue.length; } else { obj.value += &#34;要插入的字符串&#34;; } [...]]]></description>
		<wfw:commentRss>http://www.css88.com/archives/3627/feed</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>【jQuery插件】chackTextarea-类似于新浪腾讯微博文本域字符数判断</title>
		<link>http://www.css88.com/archives/3605</link>
		<comments>http://www.css88.com/archives/3605#comments</comments>
		<pubDate>Sat, 21 May 2011 04:13:00 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[jQuery插件]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=3605</guid>
		<description><![CDATA[PS:此插件存在性能问题，请慎用！敬请期待新插件，预计6月发布！ 项目中有一个类似于新浪腾讯微博文本域字符数判断，就是想腾讯微博和新浪微博那样，判断文本框中最多嫩输入140个字，将中文视为一个字符，将英文视为半个字符，也就是两个英文字符按一个字符计算。如果超出就提示！并且实时提示可是输入的文字数。 去年也曾经写过类似一个脚本（http://www.css88.com/archives/2027），只是将上次的代码封装成了jquery插件，做了一点点的性能优化，主要是在文本域获取焦点的时候触发setInterval，文本域失去焦点就clearInterval。 调用方式： //默认的参数 $(&#34;.chackTextarea&#34;).chackTextarea({ chackNum : 140,//限定字数，将中文视为一个字符，将英文视为半个字符，也就是两个英文字符按一个字符计算。 chackObj:&#34;.chackTextarea-area&#34;, //文本域的hook chackNumObj :&#34;.chackTextarea-num&#34;,//提示文字的hook chackBtn:&#34;.chackTextarea-btn&#34;, //按钮的hook disabledClass:&#34;chackTextarea-disabled&#34;,//按钮disabled状态下的样式 errorClass:&#34;chackTextarea-errortxt&#34; //超过限定字符提示文字的样式 }); 注意disabledClass:”chackTextarea-disabled”和errorClass:”chackTextarea-errortxt”两个参数是样式名，不带“.”； 查看demo：http://www.css88.com/demo/chackTextarea/ 声明: 本文采用 BY-NC-SA 协议进行授权 &#124; WEB前端开发转载请注明转自《【jQuery插件】chackTextarea-类似于新浪腾讯微博文本域字符数判断》]]></description>
		<wfw:commentRss>http://www.css88.com/archives/3605/feed</wfw:commentRss>
		<slash:comments>9</slash:comments>
		</item>
		<item>
		<title>【jQuery插件】capacityFixed-类似于新浪微博新消息提示的定位框</title>
		<link>http://www.css88.com/archives/3515</link>
		<comments>http://www.css88.com/archives/3515#comments</comments>
		<pubDate>Wed, 27 Apr 2011 10:44:24 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[jQuery插件]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=3515</guid>
		<description><![CDATA[公司项目需求中有一个类似于新浪微博新消息提示的定位框的效果，例如： 这个在很早以前其实已经写过，请移步：http://www.css88.com/archives/1943 当浏览器滚动的时候，要浮层要移除浏览器界面视区的时候，修改其position属性，让其浮动在窗口的上沿显示就可以了，position：fixed，可以在IE7+和其他浏览器下浮动层平滑固定定位，由于IE6前辈不支持fixed属性，使用position：absolute属性代替，重新计算top值。 具体代码如下： /** * @author 愚人码头 * 类似于新浪微博新消息提示的定位框 * 更多http://www.css88.com/archives/3515 */ (function($){ $.fn.capacityFixed = function(options) { var opts = $.extend({},$.fn.capacityFixed.deflunt,options); var FixedFun = function(element) { var top = opts.top; var right = ($(window).width()-opts.pageWidth)/2+opts.right; element.css({ &#34;right&#34;:right, &#34;top&#34;:top }); $(window).resize(function(){ var right = ($(window).width()-opts.pageWidth)/2+opts.right; element.css({ &#34;right&#34;:right }); }); $(window).scroll(function() { var scrolls = $(this).scrollTop(); if [...]]]></description>
		<wfw:commentRss>http://www.css88.com/archives/3515/feed</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
		<item>
		<title>【jQ插件】jQuery打印插件</title>
		<link>http://www.css88.com/archives/3014</link>
		<comments>http://www.css88.com/archives/3014#comments</comments>
		<pubDate>Mon, 10 Jan 2011 06:45:28 +0000</pubDate>
		<dc:creator>愚人码头</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[jQuery插件]]></category>

		<guid isPermaLink="false">http://www.css88.com/?p=3014</guid>
		<description><![CDATA[本插件自己打印链接中指定的页面，可以通过以下方式和参数传递： $(select).printPage( {attr : “href”,//链接的href属性 url : false,//特定的url， message: “请稍后，真正为您准备文档&#8230;” } ); demo页面：http://www.css88.com/demo/jQuery-printPage-plugin/ 注意：在IE下打印页面，背景图片和背景颜色默认不打印 解决方案： 在IE的工具里，Internet选项&#8211;>高级&#8211;>打印（打印背景颜色和图像）选中即可 声明: 本文采用 BY-NC-SA 协议进行授权 &#124; WEB前端开发转载请注明转自《【jQ插件】jQuery打印插件》]]></description>
		<wfw:commentRss>http://www.css88.com/archives/3014/feed</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
	</channel>
</rss>

