<?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>PageTalks &#187; jQuery</title>
	<atom:link href="http://pagetalks.com/category/coding/jquery-coding/feed" rel="self" type="application/rss+xml" />
	<link>http://pagetalks.com</link>
	<description>Pure Web Development &#38; Design Ideas</description>
	<lastBuildDate>Thu, 19 Jan 2012 12:06:33 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Event Handling and Delegation</title>
		<link>http://pagetalks.com/2010/09/23/event-handling-and-delegation.html</link>
		<comments>http://pagetalks.com/2010/09/23/event-handling-and-delegation.html#comments</comments>
		<pubDate>Thu, 23 Sep 2010 09:18:31 +0000</pubDate>
		<dc:creator>Robin</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[delegate]]></category>
		<category><![CDATA[event]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://pagetalks.com/?p=466</guid>
		<description><![CDATA[事件代理这个词稍微有些陌生，但是用过jQuery的同学都会知道$.fn.live以及jQuery 1.4之前的一个很有名的插件——$.fn.liveQuery 。在高级的事件处理中，大家不可避免的遇到this关键字指代不明、或者... ]]></description>
			<content:encoded><![CDATA[<p>事件代理这个词稍微有些陌生，但是用过jQuery的同学都会知道<a href="http://api.jquery.com/live/">$.fn.live</a>以及jQuery 1.4之前的一个很有名的插件——<a href=" http://brandonaaron.net/code/livequery/docs">$.fn.liveQuery </a>。在高级的事件处理中，大家不可避免的遇到this关键字指代不明、或者是无法预测事件处理函数执行时的scope。而在一些看不见的地方，复杂的事件监听逻辑下，为了提升性能也不得不用事件的代理。</p>
<p>最简单的事件代理就是将一个方法或函数委托给另外一个对象执行。</p>
<pre>var delegator = function(that, func) {
        return function() {
            func.apply(that, arguments);
        };
};</pre>
<p>假设我们的一个View中在数据发生改变的时候会被通知，然后需要更新一个列表，但是必须确保这个rebuildList方法在执行的时候，scope是这个View对象，那么我们可以这样：</p>
<pre>var updateList = delegator(this, this.rebuildList);
this.model.onRowsInserted.subscribe(updateList);</pre>
<p>还有一些delegator的<a href="http://blog.xole.net/article.php?id=632">实现方法</a>，甚至直接修改Function的prototype对象来增强函数或方法的功能。</p>
<pre>Function.prototype.delegate = function(that) {
	return function() {
		this.apply(that, arguments);
	};
};</pre>
<p>除了解决scope的问题，delegate机制更大的作用是将监听器本身的注册到别的对象之上。</p>
<p>jQuery 1.4之后加入的<a href="http://api.jquery.com/jQuery.proxy/">$.proxy()</a> 就是同样实现这样功能的。里面同样是用Function.apply来执行的。</p>
<p>DOM Level 2的事件传播机制是先从document对象开始向目标对象传播，沿途会执行该事件的所有事件处理函数。<br />
到了目标对象本身，也会执行该对象上对该事件的处理函数。<br />
最后，还会再次向document传播，沿途同样会执行该事件的所有事件处理函数。</p>
<p>第一个阶段被成为capture、第二个阶段被成为bubbling。</p>
<p>IE浏览器目前只有bubbling是完美支持的。不管怎么样，我们可以利用这样的bubbling机制让我们的事件管理更加强大——为什么不把事件处理统一放到祖先元素上去呢？<br />
<span id="more-466"></span><br />
要监听一组#nav下的A元素，并执行响应的处理函数，我们必须如此循环操作：</p>
<pre>window.onload = function() {
    var nav = document.getElementById("nav");
    var links = nav.getElementsByTagName("a");
    for (var i = 0, l = links.length; i < l; i++) {
        links[i].onclick = function() {
			window.open(this.href);
            return false;
        }
    }
}</pre>
<p>如果将事件处理函数注册到#nav上，在冒泡阶段查看Event对象的target属性对目标对象进行处理，那么不管#nav下面有多少个A元素，都只需要注册一个事件处理函数：</p>
<pre>window.onload = function() {
    var nav = document.getElementById("nav");
    nav.onclick = function() {
        var e = arguments[0] || window.event, //Event对象在IE中处在window.event
        target = e.srcElement ? e.srcElement: e.target; //IE的Event对象中只有srcElement属性而没有target属性
        window.open(this.href);
        return false;
    }
}</pre>
<p>想象一下在企业级应用中常见的DataGrid对象，每个table cell都会有事件监听，你是将成百上千的td元素都给进行事件监听，还是选择用一个注册在table元素的监听函数监听所有变动了？性能差别会在这类极端应用下迅速显现出来的。</p>
<p>jQuery1.4之后出现的live()和die()就是运用bubbling进行事件委托的。但是其性能并不被开发者看好。主要是最顶部的document元素在接收到事件的时候，需要检查当前的target是不是之前所指定的那个事件对象。 </p>
<p>jQuery用的是$.fn.closet，这会从当前元素一直遍历到document找到复合给定选择符的元素。<br />
另外，当你用$.fn.live的时候，你的第一个$(selector)调用会真正的去进行DOM查找操作，事实上你只是注册一个事件监听，这个查找是多余的。<a href="http://paulirish.com/2010/on-jquery-live/ ">这篇文章</a>你介绍了已有的四个解决方法。</p>
<p>我感觉最靠谱的方法是用$.live(selector, context, type, handler)或者$(context).live(selector, type,  handler)。两个办法中都制定了一个context作为顶级对象。那么对象的监听只会到context对象，会节省很多的遍历操作。</p>
<p>事实上正因为这个问题，jQuery在<a href="http://github.com/jquery/jquery/commit/31432e048f879b93ffa44c39d6f5989ab2620bd8">最新的版本</a>里新增了delegate和undelegate ，用了一句：</p>
<pre>this.live( types, data, fn, selector )</pre>
<p>实际上也就是本文指出的第二种解决方案。 这里也不得不佩服jQuery作者对“民意”的体察啊。</p>
<p>至于在jQuery 1.3之前没有$.fn.live的时候，$.fn.livequery依然是很多人的选择。该插件是用setTimeout定义20ms的间隔进行检测是否有新元素复合之前给定的选择符。</p>
<p>该插件还提供另一种调用方法： $.fn.livequery( matchedFn, unmatchedFn )， 如果有复合选择符的新元素，就对他们执行machedFn函数，如果有元素发生改变并不在符合选择符就执行unmatchedFn，这样就相当的灵活。</p>
<p>可是我对这20ms的定期检查十分畏惧啊，在复杂环境中可能会和利用bubbling的$.fn.live相差很远吧？毕竟，后者只对DOM树的深度有关，而前者则是跟当前整个应用的复杂度有关。livequery更应该用WebWorker来在后台检测？！笑⋯⋯可惜WebWorker没有广发的支持啦⋯⋯</p>
]]></content:encoded>
			<wfw:commentRss>http://pagetalks.com/2010/09/23/event-handling-and-delegation.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>20 Helpful jQuery Methods you Should be Using</title>
		<link>http://pagetalks.com/2010/03/31/20-helpful-jquery-methods-you-should-be-using.html</link>
		<comments>http://pagetalks.com/2010/03/31/20-helpful-jquery-methods-you-should-be-using.html#comments</comments>
		<pubDate>Wed, 31 Mar 2010 08:48:19 +0000</pubDate>
		<dc:creator>Robin</dc:creator>
				<category><![CDATA[Digest]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://pagetalks.com/?p=381</guid>
		<description><![CDATA[So you’ve been playing with jQuery for a while now, you’re starting to get the hang of it, and you’re really liking it! Are you ready to take your jQuery knowledge to level two? Today, I’ll demonstrate twenty functions and features you probably h... ]]></description>
			<content:encoded><![CDATA[<div class="text-en" lang="en">
So you’ve been playing with jQuery for a while now, you’re starting to get the hang of it, and you’re really liking it! Are you ready to take your jQuery knowledge to level two? Today, I’ll demonstrate twenty functions and features you probably haven’t seen before!
</div>
<div class="text-cn" lang="zh">
作为目前最流行的JS库，jQuery受到了无论是设计师还是开发人员的欢迎。但是其实大部分人都没有领会到jQuery强大的功能。这篇文章里介绍了1.4中新引进的一些功能，相信会让你耳目一新。
</div>
<p><a href="http://net.tutsplus.com/tutorials/javascript-ajax/20-helpful-jquery-methods-you-should-be-using/" class="external digest-continue more-link">Read More</a></p>
]]></content:encoded>
			<wfw:commentRss>http://pagetalks.com/2010/03/31/20-helpful-jquery-methods-you-should-be-using.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jQuery LocationSelect Plugin</title>
		<link>http://pagetalks.com/2010/03/22/jquery-locationselect-plugin.html</link>
		<comments>http://pagetalks.com/2010/03/22/jquery-locationselect-plugin.html#comments</comments>
		<pubDate>Mon, 22 Mar 2010 06:10:03 +0000</pubDate>
		<dc:creator>Robin</dc:creator>
				<category><![CDATA[Javascript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[location]]></category>
		<category><![CDATA[plugin]]></category>
		<category><![CDATA[select]]></category>

		<guid isPermaLink="false">http://pagetalks.com/?p=343</guid>
		<description><![CDATA[最新版本的LocationSelect已经将其与jQuery分离，但做了一个jQuery的适配器，可以和jQuery一起使用。而且现在可以支持任意级别联动⋯⋯ 介绍 用户的地址选择往往是网络应用中不可缺少的一部分，... ]]></description>
			<content:encoded><![CDATA[<div class="impNotice">最新版本的LocationSelect已经将其与jQuery分离，但做了一个jQuery的适配器，可以和jQuery一起使用。而且现在可以支持任意级别联动⋯⋯</div>
<h3>介绍</h3>
<p>用户的地址选择往往是网络应用中不可缺少的一部分，可是遇到了以下问题：</p>
<ul>
<li>地址数据难以收集</li>
<li>用户选择烦琐，需要手动查找冗长的下拉菜单</li>
<li>难以维护地理数据以及重用组件</li>
</ul>
<p>LocationSelect插件具有以下特点，有效的解决了以上三个问题：</p>
<ul>
<li>基于广泛使用的jQuery插件库，轻易实现组件重用。你也可以选择使用不使用任何脚本库的版本。</li>
<li>地理数据整理来自国家公布数据</li>
<li>自动判断用户地理位置并进行最大努力的自动选择</li>
<li>独立的json数据源，可以方便的进行维护</li>
</ul>
<h3>兼容性</h3>
<p>我测试过如下浏览器：Safari5、Safari Mobile（iOS 4.0.1）、Firefox3、IE6、IE7、IE8、Opera10</p>
<h3>演示</h3>
<p>一个在线演示可以在<a href="http://pagetalks.com/share/LocationSelect">http://pagetalks.com/share/LocationSelect</a>找到。<br />
该演示实现了一个自动探测用户地理位置并自行选择的标准案例。<br />
<span id="more-343"></span></p>
<h3>下载</h3>
<p>代码寄存在GitHub ： <a href="http://github.com/RobinQu/LocationSelect-Plugin">http://github.com/RobinQu/LocationSelect-Plugin</a></p>
<h3>安装</h3>
<ol>
<li>(可选)引入jQuery脚本库，目前脚本仅在1.4.2的jQuery中进行过调试，推荐大家使用。同时，还可以使用Google的CDN进行加速：
<pre>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;</pre>
</li>
<li>由于需要用到JSON的解析器，脚本默认会调用JSON.parse方法来解析。如果你的项目里没有定义JSON.parse方法，请引用JSON.org的脚本。
<pre>&lt;script src="http://www.JSON.org/json2.js" type="text/javascript"&gt;&lt;/script&gt;</pre>
</li>
<li>现在已经不用手动引入第三方脚本了。<del datetime="2010-09-22T08:41:37+00:00">引入地理查询引擎（可选）- 本脚本是使用Google Map API V2以及MAXMIND的Javascript API进行联合查询实现确定用户地理信息的。随着Google Map的反向地址解析更为强大后，脚本会考虑减少外部脚本的依赖性。目前如果您需要使用自动检测功能，您必须引入这两个脚本</del>：
<pre><del datetime="2010-09-22T10:46:00+00:00">&lt;script src="http://j.maxmind.com/app/geoip.js" type="text/javascript"&gt;&lt;/script&gt;
	&lt;script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=XXXXXXX_YOUR_API_KEY_XXXX&amp;sensor=false" type="text/javascript"&gt;</del></pre>
</li>
<li>引入LocationSelect的脚本文件 &#8211;
<pre>&lt;script type="text/javascript" src="LocationSelect.js"&gt;&lt;/script&gt;</pre>
</li>
<li>你应该在生产环境中将调试信息关闭，LocationSelect.js中的第8行中
<pre>com.elfvision.DEBUG = true; </pre>
<p>改为
<pre>com.elfvision.DEBUG = false;</pre>
</li>
<li>在DOM Ready事件后调用，通常您应该传递响应数目的Select对象：
<pre>
	$(function() {
	$("select").LocationSelect({
        name : "areas",
	labels :["请选择一个省份或直辖市", "请选择一个城市", "请选择一个区"]
	});</pre>
<p>还可以选择使用非jQuery的初始方法：</p>
<pre>var ls = new com.elfvision.kit.LocationSelect({
				labels :["请选择一个省份或直辖市", "请选择一个城市", "请选择一个区"],
				elements : $("select").get()
			});</pre>
</li>
</ol>
<h3>参数</h3>
<dl>
<dt>name (String) 必须</dt>
<dd>默认： &#8220;areas.json&#8221; &#8211; json数据文件的地址，相对于当前页面</dd>
<dt>labels (Array<String>) 必须</dt>
<dd>每个菜单的默认标签名，例如，["请选择一个省份或直辖市", "请选择一个城市", "请选择一个区"]。注意该元素的数量决定联动菜单中选项的数目，所以一定要为每个元素制定标签。</dd>
<dt>detectGeoLocation : (Boolean)</dt>
<dd>默认： true &#8211; 是否自动检测用户地址并进行选择</dd>
<dt>listHelper : (ListHelper)</dt>
<dd>默认： com.elfvision.kit.LocationSelect.ListHelper &#8211; 列表的工具类，该插件会使用次对象中的方法去加载对象、查询列表项目等操作。传入自定义的该对象可以进行该插件的深度定制。详细内容见后文。</dd>
<dt>detector : (Function)</dt>
<dd>默认： com.elfvision.kit.LocationSelect.GeoDetect &#8211; 自动探测方法。默认情况下会利用用户IP查询地理位置。</dd>
</dl>
<h3>如何定制</h3>
<p>有很多同学想要进行定制操作，从1.1版本开始，就已经把大部分重要的算法给独立到单独的接口里面，方便大家定制。首先讲一下这个插件的工作原理。</p>
<p><a href="http://pagetalks.com/wp-content/uploads/2010/03/Sequence-Diagram.gif"><img src="http://pagetalks.com/wp-content/uploads/2010/03/Sequence-Diagram.gif" alt="" title="Sequence Diagram" width="553" height="520" class="aligncenter size-full wp-image-452" /></a></p>
<p>首先，插件会尝试使用ListHelper的fetch方法去取回所有要用的数据文件。默认情况下会访问ListHelper.dataUrl的地址，如果你不作任何配置，这个地址指向的是插件自带的areas_1.0.json。</p>
<p>当fetch方法返回之后，会执行一个回调函数。这个回调函数里回进行列表的初始划操作。</p>
<p>当列表都初始化完成，控件就已经可用了。如果自动探测的选项依然为true，就会继续接下来的探测逻辑。插件内置了根据IP判断地理位置的探测算法。</p>
<p>该算法是调用的Maxmind GEOCITY的API获得用户经纬度，然后使用Google Map的Geocoder WebService根据经纬度解析用户地理信息。然后利用返回结果去对列表进行“选择”。</p>
<p>可以看到还有个YQL的参与，这是Google Map V3的WebService已经不支持JSONP了，对跨域请求来说是噩梦。通过YQL作为一个Proxy返回的JSONP。</p>
<p>下面开始介绍如何进行深度定制。首先上一张Class Diagram。</p>
<p><a href="http://pagetalks.com/wp-content/uploads/2010/03/Class-Diagram.gif"><img src="http://pagetalks.com/wp-content/uploads/2010/03/Class-Diagram.gif" alt="" title="Class Diagram" width="553" height="1467" class="aligncenter size-full wp-image-454" /></a></p>
<p>基本来说，通过定制所传入的ListHelper对象detector函数来控制该插件的功能。</p>
<p><a href="http://pagetalks.com/wp-content/uploads/2010/03/listhelper.gif"><img src="http://pagetalks.com/wp-content/uploads/2010/03/listhelper.gif" alt="" title="Interface ListHelper" width="251" height="199" class="aligncenter size-full wp-image-455" /></a></p>
<p>ListHelper是一个列表的工具接口。默认的ListHelper采用了Singleton的模式，但你可以选择不这么做。只要保证提供fetch和find方法即可。这两个方法必须实现如下操作：</p>
<ul>
<li>fetch方法接受一个回调函数，在把所需要的JSON基本数据取得了之后就必须会被执行。</li>
<li>find方法根据传来level和id两个参数对fetch方法获得的数据进行查找进行记录的查找，必须返回一个装有记录的数组。</li>
</ul>
<dl>
<dt>纪录的数据结构</dt>
<dd>该插件对数据项的结构有所规定。一个项目如下：</p>
<pre>{
"id" : "112",
"text" : "Foobar"
}</pre>
<p>注意该项目中所有的属性均为字符串。</dd>
<dt>level</dt>
<dd>evel的意义是标识进行find请求的是第几个List。该插件中，前一个List的选项进行改变后会出发下一个List更新其内容，那么查找的find方法必须知道前一个List的level。find方法被插件调用时会自动传入level的值，该值从0开始计数。在插件默认的ListHelper里面，会调用一个find(-1)的请求，这是在请求第一个List的默认数据。插件默认状况就是通过这个请求去请求“省份”的数据项目的。</dd>
<dt>id</dt>
<dd>id值即前一个List中被选项目的id值。</dd>
</dl>
<p>你可以用fetch方法从后台取得数据（不管是啥数据，只要复合数据项目的结构规定）之后，根据这些数据实现find方法。</p>
<p>你可以传入的另外一个元素是detector函数。这个是执行自动选择的函数。默认的detector函数执行了地理位置的探测，但你可以实现你自得探测算法。只要最终使用LocationSelect.select()方法选择一组数据项。例如：</p>
<pre>that.select(["湖北省",“武汉市”]);</pre>
<p>这些值始终会根据List的传入顺序进行比对。如果List的数目大于给出的数组元素的数量，将不会对那些没有对应数值的List进行选择；如果传入的数值数组元素个数大于List个数，剩下的数组元素将会被抛弃。</p>
<p>通过传入自定义的ListHelper和detector，你可以完全自定义出类似于多级商品门类选择之类的联动菜单应用。也就不局限于选择一下地址而已了⋯⋯</p>
<h3>更新日志</h3>
<dl>
<dt>1.0.0</dt>
<dd>LocationSelect的第一个发行版本</dd>
<dt>1.1.0</dt>
<dd>LocationSelect的重写版本，与jQuery独立，改善性能。</dd>
</dl>
]]></content:encoded>
			<wfw:commentRss>http://pagetalks.com/2010/03/22/jquery-locationselect-plugin.html/feed</wfw:commentRss>
		<slash:comments>14</slash:comments>
		</item>
		<item>
		<title>jBubble Tooltip jQuery Plugin</title>
		<link>http://pagetalks.com/2010/03/21/jbubble-tooltip-jquery-plugin.html</link>
		<comments>http://pagetalks.com/2010/03/21/jbubble-tooltip-jquery-plugin.html#comments</comments>
		<pubDate>Sun, 21 Mar 2010 11:55:30 +0000</pubDate>
		<dc:creator>Robin</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[bubble]]></category>
		<category><![CDATA[jbubble]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[plugin]]></category>
		<category><![CDATA[tooltip]]></category>

		<guid isPermaLink="false">http://pagetalks.com/?p=334</guid>
		<description><![CDATA[Introduction An easy to use tooltip plugin of jQuery. You can skin it by modifying its css file and control its behaviors through many methods. Demo You can find a live demo here: http://pagetalks.com/share/jBubble/. 一个简单易用的提示条插件... ]]></description>
			<content:encoded><![CDATA[<div class="text-en" lang="en">
<h3>Introduction</h3>
<p>An easy to use tooltip plugin of jQuery. You can skin it by modifying its css file and control its behaviors through many methods.</p>
<h3>Demo</h3>
<p>You can find a live demo here: <a href="http://pagetalks.com/share/jBubble/">http://pagetalks.com/share/jBubble/</a>.</p>
</div>
<div class="text-cn" lang="zh">
一个简单易用的提示条插件。你可以通过CSS来改变其外观，并通过多种方式来控制其行为。</p>
<h3>演示</h3>
<p>你可以在次处找到在线演示: <a href="http://pagetalks.com/share/jBubble/">http://pagetalks.com/share/jBubble/</a>.</div>
<p><a href="http://pagetalks.com/wp-content/uploads/2010/03/jBubble.png"><img src="http://pagetalks.com/wp-content/uploads/2010/03/jBubble.png" alt="" title="jBubble" width="410" height="144" class="aligncenter size-full wp-image-340" /></a><br />
<span id="more-334"></span></p>
<div class="text-en" lang="en">
<h3>Download</h3>
Note: There is a file embedded within this post, please visit this post to download the file.
<h3>Markups</h3>
<pre>
&lt;a href="#" id="a" title="this title cannot be ommitted!"&gt;Come on, find out what i can tell you!&lt;/a&gt;</pre>
<p>By default, the content of tooltip is taken from title attribute.</p>
<h3>Installation</h3>
<ol>
<li>Include juqery.bubble.js and bubble.css</li>
<li>Call it after DOM Ready, e.g:
<pre>$(".tooltip").bubble();</pre>
</li>
</ol>
<p>By default, it will listen for mouseover event to show tooltip.</p>
<h3>Parameters</h3>
<dl>
<dt>data_src (String)</dt>
<dd>Default : &#8220;title&#8221; &#8211;  a propertity name that the plugin will find content for tooltip in. </dd>
<dt>alone (boolean)</dt>
<dd>Default: true &#8211; if only one tooltip is allowed to display at the same time</pre>
</dd>
<dt>once (boolean)</dt>
<dd>Default: false - if the tooltip only shows up once.<br />
		Usualy, you directly pass a boolean value rather a parameter object. e.g, when #d is clicked, #c will show its tooltip without initialization.</p>
<pre>$("#d").click(function() {
		$("#c").bubble(true);
		});</pre>
</dd>
</dl>
<h3>Public Methods</h3>
<dl>
<dt>$.fn.showBubble</dt>
<dd>after initialzed by $.fn.bubble, you can manually invoke the tooltip by this method. e.g.</p>
<pre>
	$("#a").bubble();
	$("#b").click(function() {
		$("#a").showBubble();
	});
	</pre>
</dd>
<dt>$.fn.clearBubble</dt>
<dd>clear the bubble effect on certain elements</dd>
</dl>
<h3>Changelog</h3>
<dl>
<dt>1.0</dt>
<dd>First Release of jBubble Plugin</dd>
</dl>
</div>
<div class="text-cn" lang="zh">
<h3>下载</h3>
Note: There is a file embedded within this post, please visit this post to download the file.
<h3>HTML代码</h3>
<pre>
&lt;a href="#" id="a" title="this title cannot be ommitted!"&gt;Come on, find out what i can tell you!&lt;/a&gt;</pre>
<p>默认情况下，该插件把title属性的内容当作提示条的内容</p>
<h3>安装</h3>
<ol>
<li>引入juqery.bubble.js和bubble.css</li>
<li>DOM Ready事件后调用, 例如:
<pre>$(".tooltip").bubble();</pre>
</li>
</ol>
<p>默认情况下，该插件会监听指定元素的mouseover事件并恰时显示提示条。</p>
<h3>参数</h3>
<dl>
<dt>data_src (String)</dt>
<dd>默认 : "title" -  提示条内容的数据源。这应该是元素的一个属性名。</dd>
<dt>alone (boolean)</dt>
<dd>默认: true - 是否在同一时刻只能显示一个提示条</pre>
</dd>
<dt>once (boolean)</dt>
<dd>默认: false - 是否只显示一遍。为使用这个参数，应该直接将一个布尔值传入$.fn.bubble方法，而不是传递一个包含参数的对象：</p>
<pre>$("#d").click(function() {
		$("#c").bubble(true);
		});</pre>
</dd>
</dl>
<h3>公用方法</h3>
<dl>
<dt>$.fn.showBubble</dt>
<dd>在初始化后，手工激发工具条的显示，例如：</p>
<pre>
	$("#a").bubble();
	$("#b").click(function() {
		$("#a").showBubble();
	});
	</pre>
</dd>
<dt>$.fn.clearBubble</dt>
<dd>清除指定元素的工具条显示</dd>
</dl>
<h3>更新日志</h3>
<dl>
<dt>1.0</dt>
<dd>jBubble插件的初次发行</dd>
</dl>
</div>
]]></content:encoded>
			<wfw:commentRss>http://pagetalks.com/2010/03/21/jbubble-tooltip-jquery-plugin.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Sharethis jQuery Plugin</title>
		<link>http://pagetalks.com/2010/03/21/sharethis-jquery-plugin.html</link>
		<comments>http://pagetalks.com/2010/03/21/sharethis-jquery-plugin.html#comments</comments>
		<pubDate>Sun, 21 Mar 2010 05:26:27 +0000</pubDate>
		<dc:creator>Robin</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[sharethis]]></category>
		<category><![CDATA[Wordpress]]></category>

		<guid isPermaLink="false">http://pagetalks.com/?p=328</guid>
		<description><![CDATA[Introduction A jquery plugin that enable sharing anywhere. This plugin needs fancybox lightbox effect! You can change it by editing lightbox function in sharethis.js to use you own lightbox effect. A wordpress plugin that integra this scirpt is avaliable... ]]></description>
			<content:encoded><![CDATA[<div class="text-en" lang="en">
<h3>Introduction</h3>
<p>A jquery plugin that enable sharing anywhere.</p>
<p>This plugin needs <a href="http://fancybox.net/">fancybox</a> lightbox effect! You can change it by editing lightbox function in sharethis.js to use you own lightbox effect.<br />
A wordpress plugin that integra this scirpt is avaliable on : <a href="http://pagetalks.com/2010/03/21/wordpress-plugin-free-share.html">http://pagetalks.com/2010/03/21/wordpress-plugin-free-share.html</a>
</div>
<div class="text-cn" lang="zh">
添加“分享”按钮到你想要的地方。<br />
这个插件需要<a href="http://fancybox.net/">fancybox</a>的lightbox效果! 你也可以自己更改自己为自己的lightbox效果。<br />
使用该脚本的Wordpress的插件可以在这里找到 : <a href="http://pagetalks.com/2010/03/21/wordpress-plugin-free-share.html">http://pagetalks.com/2010/03/21/wordpress-plugin-free-share.html</a></p>
</div>
<p><span id="more-328"></span></p>
<div class="text-en" lang="en">
<h3>Download</h3>
Note: There is a file embedded within this post, please visit this post to download the file.
<h3>Markups</h3>
<pre>
&lt;a href="the link you want to share" class="sharethis-button" rel="Title of the page you want ot share"&gt;Share&lt;/a&gt;</pre>
<p>By default, it will share this link in href attribute, and use rel attribute as title of the share.<br />
If you leave these two attribute blank, it will take path in location bar as link, and title of current page as the title of the share.</p>
<h3>Installation</h3>
<ol>
<li>Include fancybox scripts! or use your own lightbox effect</li>
<li>Include sharethis.js and sharethis.css</li>
</ol>
<p>By default, it will listen for click events on any element with a &#8220;sharethis-button&#8221; class to display a dialog.</p>
<h3>Parameters</h3>
<dl>
<dd>iconPath (String)</dd>
<dt>the path for icons of social sites</dt>
<dd>lightbox (function)</dd>
<dt>your own implementation of lightbox effect, taking html string &#8220;data&#8221; as the only argument, e.g.</p>
<pre>function(data) {
			$.fancybox(data);
		}</pre>
</dt>
<dt>extra (Array)</dt>
<dd>array that can supplyment the sites array, e.g. </p>
<pre>extra : [{name: "XX", url: "XX", icon: "XX.gif"},{name: "XX", url: "XX", icon: "XX.gif"}]</pre>
</dd>
</dl>
<h3>Changelog</h3>
<dl>
<dt>1.0</dt>
<dd>First Release of Sharethis Plugin</dd>
</dl>
</div>
<div class="text-cn" lang="zh">
<h3>下载</h3>
Note: There is a file embedded within this post, please visit this post to download the file.
<h3>HTML标记</h3>
<pre>
&lt;a href="the link you want to share" class="sharethis-button" rel="Title of the page you want ot share"&gt;Share&lt;/a&gt;</pre>
<p>默认状态下，它将把href属性当作你要分享的链接地址，rel属性当作分享的标题。<br />
如果你没有设置这两个属性，那么它就将当前页面的地址和标题当作默认属性。</p>
<h3>安装</h3>
<ol>
<li>引用fancybox的脚本，或者自定义自己的lightbox效果</li>
<li>引用sharethis.js和sharethis.css</li>
</ol>
<p>默认情况下它会监听所有“sharethis-button&#8221;类的点击行为，并激活分享对话框。</p>
<h3>Parameters</h3>
<dl>
<dd>iconPath (String)</dd>
<dt>the path for icons of social sites</dt>
<dd>lightbox (function)</dd>
<dt>lightbox的接口函数，调用时会传递一个data的html代码字符串，例如：</p>
<pre>function(data) {
			$.fancybox(data);
		}</pre>
</dt>
<dt>extra (Array)</dt>
<dd>补充社交站点的数组, 例如. </p>
<pre>extra : [{name: "XX", url: "XX", icon: "XX.gif"},{name: "XX", url: "XX", icon: "XX.gif"}]</pre>
</dd>
</dl>
<h3>更新日志</h3>
<dl>
<dt>1.0</dt>
<dd>第一个发行版本</dd>
</dl>
</div>
]]></content:encoded>
			<wfw:commentRss>http://pagetalks.com/2010/03/21/sharethis-jquery-plugin.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>WordPress Plugin &#8211; Free Share</title>
		<link>http://pagetalks.com/2010/03/21/wordpress-plugin-free-share.html</link>
		<comments>http://pagetalks.com/2010/03/21/wordpress-plugin-free-share.html#comments</comments>
		<pubDate>Sun, 21 Mar 2010 04:55:04 +0000</pubDate>
		<dc:creator>Robin</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[plugin]]></category>
		<category><![CDATA[share]]></category>
		<category><![CDATA[sharethis]]></category>
		<category><![CDATA[socials]]></category>

		<guid isPermaLink="false">http://pagetalks.com/?p=323</guid>
		<description><![CDATA[Introduction Add &#8220;Share&#8221; Button to anywhere you want! You don&#8217;t need to register in the Sharing or bookmarks site like Sharethis.com to embed a &#8220;Share&#8221; button! and you can choose your own lightbox effect to speed up the ui. ... ]]></description>
			<content:encoded><![CDATA[<div class="text-en" lang="en">
<h3>Introduction</h3>
<p>Add &#8220;Share&#8221; Button to anywhere you want!<br />
You don&#8217;t need to register in the Sharing or bookmarks site like Sharethis.com to embed a &#8220;Share&#8221; button!<br />
and you can choose your own lightbox effect to speed up the ui.</p>
<p>This plugin needs <a href="http://fancybox.net/">fancybox</a> lightbox effect! You can change it by editing lightbox function in sharethis.js to use you own lightbox effect.</p>
</div>
<div class="text-cn" lang="zh">添加“分享”按钮到你想要的地方。你也不必注册Sharethis.com之类的站点，同时你可以控制自己的站点列表！<br />
FreeShare能够带给你这些！<br />
这个插件需要<a href="http://fancybox.net/">fancybox</a>的lightbox效果! 你也可以自己更改自己为自己的lightbox效果。</p>
</div>
<p><span id="more-323"></span></p>
<div class="text-en" lang="en">
<h3>Download</h3>
Note: There is a file embedded within this post, please visit this post to download the file.
<h3>Installation</h3>
<ol>
<li>Include fancybox scripts! or use your own lightbox effect</li>
<li>Upload whole `freeshare` folder to the `/wp-content/plugins/` directory</li>
<li>Activate the plugin through the &#8216;FreeShare&#8217; menu in WordPress</li>
<li>Place `&lt;?php share-button();  ?&gt;` in the loop or in a single, PAGE</li>
</ol>
<h3>Frequently Asked Questions</h3>
<dl>
<dt>Why are there so many strange social sites in the list?</dt>
<dd>the default social sites list is made for users in China. You can easily custom it </dd>
<dt>How to use my own lightbox effect</dt>
<dd>open freeshare/sharethis/sharethis.js, you can find line 17, change the implementation of this function to adjust to your own lightbox effect</dd>
<dt>How to custom the site list</dt>
<dd>You can open freeshare/sharethis/sharethis.js, and you won&#8217;t miss the array that stores the site data.<br />
Don&#8217;t forget to assign an icon to each site.</dd>
<dt>Is there any option panel or something</dt>
<dd>No, at least in tis edition.</dd>
</dl>
<h3>Changelog</h3>
<dl>
<dt>1.0</dt>
<dd>First Release of FreeShare Plugin</dd>
</dl>
</div>
<div class="text-cn" lang="zh">
<h3>下载</h3>
Note: There is a file embedded within this post, please visit this post to download the file.
<h3>安装</h3>
<ol>
<li>引入Fancybox脚本，或者使用自己的lightbox效果</li>
<li>上传`freeshare` 整个文件夹到 `/wp-content/plugins/` 目录</li>
<li>在后台中激活 &#8216;FreeShare&#8217;</li>
<li>将 `&lt;?php share-button();  ?&gt;`放在loop循环中，或者PAGE、single的页面中</li>
</ol>
<h3>常见问题</h3>
<dl>
<dt>怎么会有这么多奇怪的社交站点？</dt>
<dd>默认列表是为中国用户准备的，你也可以去自定义这个列表的 </dd>
<dt>如何使用</dt>
<dd>打开freeshare/sharethis/sharethis.js,你可以在第17行找到lightbox函数, 你可以更改该函数的实现来兼容你的lightbox效果</dd>
<dt>如何自定义这个列表</dt>
<dd>打开 freeshare/sharethis/sharethis.js, 你应该能够很快看到储存社交站点数据的数组，修改吧！记得每个站点的图标文件</dd>
<dt>有插件的选项页面么？</dt>
<dd>没，至少这个版本没有</dd>
</dl>
<h3>更新日志</h3>
<dl>
<dt>1.0</dt>
<dd>FreeShara第一次发行</dd>
</dl>
</div>
]]></content:encoded>
			<wfw:commentRss>http://pagetalks.com/2010/03/21/wordpress-plugin-free-share.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>slideView and imgDesc Plugins Updated</title>
		<link>http://pagetalks.com/2009/07/05/slideview-and-imgdesc-plugins-updated.html</link>
		<comments>http://pagetalks.com/2009/07/05/slideview-and-imgdesc-plugins-updated.html#comments</comments>
		<pubDate>Sun, 05 Jul 2009 08:47:00 +0000</pubDate>
		<dc:creator>Robin</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[imgDesc]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[slideshow]]></category>
		<category><![CDATA[slideview]]></category>
		<category><![CDATA[ui]]></category>
		<category><![CDATA[user interfaces]]></category>
		<category><![CDATA[XHTML]]></category>

		<guid isPermaLink="false">http://pagetalks.com/?p=276</guid>
		<description><![CDATA[A new version of slideView plugin and imgDesc plugin are avaliable now! See more detail in http://pagetalks.com/2009/03/09/jquery-slideview-plugin.html and http://pagetalks.com/2008/08/29/jquery-imgdesc-plugin.html I Spent a whole day fixing bugs and bea... ]]></description>
			<content:encoded><![CDATA[<div lang="en" class="text-en">A new version of slideView plugin and imgDesc plugin are avaliable now!<br />
See more detail in <a href="http://pagetalks.com/2009/03/09/jquery-slideview-plugin.html">http://pagetalks.com/2009/03/09/jquery-slideview-plugin.html</a><br />
and <a href="http://pagetalks.com/2008/08/29/jquery-imgdesc-plugin.html">http://pagetalks.com/2008/08/29/jquery-imgdesc-plugin.html</a></p>
<p>I Spent a whole day fixing bugs and beautify the UI. They now works much better than the previous versions.</p>
<p>See a demo of slideView at <a href="http://pagetalks.com/share/slideView">http://pagetalks.com/share/slideView</a>;<br />
A demo of imgDesc is accessible in the original post.</p>
<p>Comments are welcome!</p></div>
<div lang="zh" class="text-cn">slideview插件的新版本出来了！到这里看更多信息：<a href="http://pagetalks.com/2009/03/09/jquery-slideview-plugin.html">http://pagetalks.com/2009/03/09/jquery-slideview-plugin.html</a> 以及 <a href="http://pagetalks.com/2008/08/29/jquery-imgdesc-plugin.html">http://pagetalks.com/2008/08/29/jquery-imgdesc-plugin.html</a></p>
<p>我花了一整天时间修补bug以及美化用户界面，这两个插件现在会看起来好很多。</p>
<p>SlideView的演示：<a href="http://pagetalks.com/share/slideView">http://pagetalks.com/share/slideView</a><br />
imgDesc的演示在上面的发布链接内<br />
欢迎大家留下意见！
</div>
]]></content:encoded>
			<wfw:commentRss>http://pagetalks.com/2009/07/05/slideview-and-imgdesc-plugins-updated.html/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>jQuery slideView Plugin</title>
		<link>http://pagetalks.com/2009/03/09/jquery-slideview-plugin.html</link>
		<comments>http://pagetalks.com/2009/03/09/jquery-slideview-plugin.html#comments</comments>
		<pubDate>Sun, 08 Mar 2009 22:13:17 +0000</pubDate>
		<dc:creator>Robin</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[js]]></category>
		<category><![CDATA[slideshow]]></category>

		<guid isPermaLink="false">http://pagetalks.com/?p=203</guid>
		<description><![CDATA[Description From small-scale commercial public sites to large-scale CMS, there are needs of slideshow. Here is a simple and graceful to implement a slideshow based on a short piece of HTML Code in a both unobstructive and pleasant way. Demo Inside dev pa... ]]></description>
			<content:encoded><![CDATA[<div lang="en" class="text-en">
<h3>Description</h3>
<p>From small-scale commercial public sites to large-scale CMS, there are needs of slideshow. Here is a simple and graceful to implement a slideshow based on a short piece of HTML Code in a both unobstructive and pleasant way.</p>
<h3>Demo</h3>
<p>Inside dev pack, there are two fully functional demos.<br />
A live demo is also available on <a href="http://www.elfvision.com">http://www.elfvision.com</a>. The slide in portfolio makes use of this script.
</div>
<div lang="zh" class="text-cn">
<h3>描述</h3>
<p>小到公司的商业站点，大到文章管理系统，都会有用到幻灯片来展示图片新闻的需求。这里，我提供一种简单、优雅的幻灯片解决方案。在一小段HTML代码的基础上，能够让你无障碍并愉快地实现幻灯片效果。</p>
<h3>演示</h3>
<p>在dev pack里面有两个可以运行的完整演示。在<a href="http://www.elfvision.com">http://www.elfvision.com</a>也有一个在线的演示，作品展示所用的幻灯片就是使用了该脚本。
</div>
<p><span id="more-203"></span></p>
<div lang="en" class="text-en">
<h3>Requirements</h3>
<ul>
<li>jQuery Libary, just download from <a href="http://jquery.com/">jQuery Official Site</a></li>
<li>slideView script file. You can download it from below</li>
<li>a little knowledge on xhtml and css</li>
</ul>
<h3>Features</h3>
<p>This plugin will generate a slideview within the given container based on the data in the HTML document.</p>
<p>The slideview will consist of a group of thumbs, a navigation tool and of course the original images.</p>
<p>The main image in the slideview will change in response to the mouse movement on the thumbs and the click of navigation buttons. </p>
<p>All you have to do is prepare a set of images in porper size and the thumbnail of thoese images.</p>
<h3>Demostration</h3>
<p>Click <a href="http://pagetalks.com/share/slideView/">here</a> to see a demo page.</p>
<h3>Download</h3>
Note: There is a file embedded within this post, please visit this post to download the file.<br />
Note: There is a file embedded within this post, please visit this post to download the file.<br />
Note: There is a file embedded within this post, please visit this post to download the file.
<h3>Usage</h3>
<dl>
<dt>HTML Preparation</dt>
<dd>Just a container and an unordered list which has links to the news page or something.</p>
<pre>&lt;div id=&quot;slideshow&quot;&gt;
&lt;ul class=&quot;slideView&quot;&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;lib/slideView/images/1.jpg&quot; alt=&quot;the description of image 1&quot; /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;lib/slideView/images/2.jpg&quot; alt=&quot;the description of image 1&quot; /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;lib/slideView/images/3.jpg&quot; alt=&quot;the description of image 1&quot; /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;lib/slideView/images/4.jpg&quot; alt=&quot;the description of image 1&quot; /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;lib/slideView/images/5.jpg&quot; alt=&quot;the description of image 1&quot; /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;lib/slideView/images/5.jpg&quot; alt=&quot;the description of image 1&quot; /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;</pre>
</dd>
<dt>Load jQuery Libary</dt>
<dd>You can directly add the following code in &lt;head&gt; tag：</p>
<pre>&lt;script type="text/javascript" src="jquery-1.3.2.min.js"&gt;&lt;/script&gt;</pre>
</dd>
<dt>Load slideView Plugin</dt>
<dd>&lt;script type=&#8221;text/javascript&#8221; src=&#8221;slideview.js&#8221;&gt;&lt;/script&gt;</dd>
<dt>Assigning the target object </dt>
<dd>Use it inside jQuery(document).ready() block:</p>
<pre>$("#slideshow").slideView();</pre>
<p>You can, of course , apply some change, customizing behaviours and appearance by the means of sending parameters to the method and modifying CSS：</p>
<pre>$("#slideshow").slideView({
	thumbPrefix: "thumb_",
	frame: {
		isExist: true,
		color: "#365563"
	},
	speed: 150,
	easeOut: "swing",
	easeIn: "swing",
	easeThumb: "swing"
});</pre>
<p>Code aboce will make slideView to load thumbnails of images, whose filenames match the pattern of &#8220;thumb_image-file-name.jpg&#8221; and so on. And also, the speed of slide is 500ms.</p>
<p>Parameters avaliable in latest versions:</p>
<dl>
<dt>thumb (Boolean)</dt>
<dd>if thumbnails should be displayed</dd>
<dt>slideBy (int)</dt>
<dd>a number that tells the script how many images should pass by at one time</dd>
<dt>loop (Boolean></dt>
<dd>if it should loop automatically</dd>
<dt>interval (int)</dt>
<dd>the time interval to every loop</dd>
<dt>frame (object)</dt>
<dd>We can define a frame box overlayed on the slide:<br />
	frame.isExist (Boolean) : if it exists or not<br />
	frame.color (String) : Hex value for a color. if it exists, what color is it?
	</dd>
<dt>easeOut (String)</dt>
<dd> the easing method used when a large image slides downward</dd>
<dt>easeIn (String)</dt>
<dd>the easing method used when a large image slides upward</dd>
<dt>easeThumb (String)</dt>
<dd>the easing method used when thumbnails slide</dd>
</dl>
</dd>
</dd>
<dt>CSS Modification</dt>
<dd>By default, images in the size of 460*300 will work perfectly, however, if you&#8217;d like to use images in different size, you need alter some lines in the css. See the description in the slideview.css. You won&#8217;t miss it.</dd>
</dl>
<h3>Change Log</h3>
<p>You can always refer to <a href="http://plugins.jquery.com/project/slideview">jQuery Plugin</a> to trace the builds.</p>
<dl>
<dt>What&#8217;s new in 1.2.0</dt>
<dd>
<ul>
<li>Support auto loop</li>
<li>Fix some problems with arrows</li>
</ul>
<dt>What&#8217;s new in 1.1.0</dt>
<dd>
<ul>
<li>Beatify the UI</li>
<li>Support easing method in animation</li>
<li>Fix some strange behavious during animation</li>
</ul>
</dd>
</dl>
<ul>
<li><strong>1.1.0</strong> Third Edition</li>
<li><strong>1.1.0</strong> Second Edition</li>
<li><strong>1.0.1</strong> First Edition</li>
</ul>
</div>
<div lang="zh" class="text-cn">
<h3>需求</h3>
<ul>
<li>jQuery脚本库，你可以从 <a href="http://jquery.com/">jQuery Official官方站点</a>下载</li>
<li>slideView脚本文件</li>
<li>一点点关于xhtml,css,js的知识</li>
</ul>
<h3>功能</h3>
<p>该插件会在给定的容器内根据HTML代码生成一个幻灯片。幻灯片将会包含一组缩略图、导航工具以及原始图片。<br />
幻灯片内的主图片将会根据鼠标动作或导航工具的点击来改变。<br />
你需要做的仅仅是准备合适尺寸的图片和他们的缩略图。</p>
<h3>演示</h3>
<p>点击<a href="http://pagetalks.com/share/slideView/">这里</a>查看演示页面</p>
<h3>下载</h3>
Note: There is a file embedded within this post, please visit this post to download the file.<br />
Note: There is a file embedded within this post, please visit this post to download the file.<br />
Note: There is a file embedded within this post, please visit this post to download the file.
<h3>用法</h3>
<dl>
<dt>准备HTML代码</dt>
<dd>你仅仅需要给出一个DIV容器和一个无序列表，列表内部包含指向文章或其他内容的链接。</p>
<pre>&lt;div id=&quot;slideshow&quot;&gt;
&lt;ul class=&quot;slideView&quot;&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;lib/slideView/images/1.jpg&quot; alt=&quot;the description of image 1&quot; /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;lib/slideView/images/2.jpg&quot; alt=&quot;the description of image 1&quot; /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;lib/slideView/images/3.jpg&quot; alt=&quot;the description of image 1&quot; /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;lib/slideView/images/4.jpg&quot; alt=&quot;the description of image 1&quot; /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;lib/slideView/images/5.jpg&quot; alt=&quot;the description of image 1&quot; /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;lib/slideView/images/5.jpg&quot; alt=&quot;the description of image 1&quot; /&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;</pre>
</dd>
<dt>载入jQuery库</dt>
<dd>在 &lt;head&gt; 标签内部直接添加：</p>
<pre>&lt;script type="text/javascript" src="jquery-1.3.2.min.js"&gt;&lt;/script&gt;</pre>
</dd>
<dt>加载slideView插件</dt>
<dd>&lt;script type=&#8221;text/javascript&#8221; src=&#8221;slideview.js&#8221;&gt;&lt;/script&gt;</dd>
<dt>指定目标，并运行 </dt>
<dd>在 jQuery(document).ready() 模块中写入:</p>
<pre>$("#slideshow").slideView();</pre>
<p>你也可以通过给该方法传递参数以及修改CSS玩当来改变该插件的外观和行为：</p>
<pre>$("#slideshow").slideView({
	thumbPrefix: "thumb_",
	frame: {
		isExist: true,
		color: "#365563"
	},
	speed: 150,
	easeOut: "swing",
	easeIn: "swing",
	easeThumb: "swing"
});</pre>
<p>><br />
上面的代码将会让该插件载入符合&#8221;thumb_iamge-filename.jpg&#8221;的文件名的缩略图，并一次只滑过一张图片。滑动将在500毫秒中完成。</p>
<p>1.1.0里面的新参数:</p>
<dl>
<dt>frame (object)</dt>
<dt>slideBy (int)</dt>
<dd>一次滑过的图片张数</dd>
<dt>loop (Boolean></dt>
<dd>是否需要自动循环</dd>
<dt>interval (int)</dt>
<dd>循环时的每次切换图片的时间间隔</dd>
<dd>我们可以定义一个线条边框:<br />
	frame.isExist (Boolean) : 这个边框是否存在？<br />
	frame.color (String) : 如果存在，这里给出边框颜色的16进制值
	</dd>
<dt>easeOut (String)</dt>
<dd>当大图片向下滑动时的easing方法</dd>
<dt>easeIn (String)</dt>
<dd>当大图片向上滑动时的easing方法</dd>
<dt>easeThumb (String)</dt>
<dd>当缩略图滚动时的easing方法</dd>
</dl>
</dd>
<dt>修改CSS</dt>
<dd>默认情况下，该插件可以与460*300的容器和相应尺寸的图片完美运行。但如果你需要使用更大的图片，你就需要手动修改CSS文件了。打开slideview.css，你就明白了，仅仅是修改三个数值而已。</dd>
</dl>
<h3>更改日志</h3>
<p>你可以随时到 <a href="http://plugins.jquery.com/project/slideview">jQuery插件主页寻找更新或支持</a> .</p>
<dl>
<dt>1.2.0的新特色</dt>
<dd>
<ul>
<li>支持自动循环</li>
<li>修改了箭头的一些问题</li>
</ul>
</dd>
<dt>1.1.0的新特色</dt>
<dd>
<ul>
<li>美化了用户界面</li>
<li>在动画过程中，支持easing的修改</li>
<li>修改了动画过程中的一些奇怪先行为</li>
</ul>
</dd>
</dl>
<ul>
<li><strong>1.2.0</strong>第三个重要发行</li>
<li><strong>1.1.0</strong>第二个重要发行</li>
<li><strong>1.0.1</strong>初版</li>
</ul>
</div>
]]></content:encoded>
			<wfw:commentRss>http://pagetalks.com/2009/03/09/jquery-slideview-plugin.html/feed</wfw:commentRss>
		<slash:comments>15</slash:comments>
		</item>
		<item>
		<title>When Ajax meets jQuery</title>
		<link>http://pagetalks.com/2008/10/08/when-ajax-meets-jquery.html</link>
		<comments>http://pagetalks.com/2008/10/08/when-ajax-meets-jquery.html#comments</comments>
		<pubDate>Thu, 09 Oct 2008 02:44:35 +0000</pubDate>
		<dc:creator>Robin</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[http]]></category>
		<category><![CDATA[jquery]]></category>

		<guid isPermaLink="false">http://pagetalks.com/?p=182</guid>
		<description><![CDATA[基于AJAX的应用现在越来越多，而对于前台开发人员来说，直接和底层的HTTPRequest打交道又不是一件令人愉快的事情。jQuery既然封装了JavaScript，肯定已经考虑过AJAX应用的问题。的确，如果用jQuery... ]]></description>
			<content:encoded><![CDATA[<p>基于AJAX的应用现在越来越多，而对于前台开发人员来说，直接和底层的HTTPRequest打交道又不是一件令人愉快的事情。jQuery既然封装了JavaScript，肯定已经考虑过AJAX应用的问题。的确，如果用jQuery写AJAX会比直接用JS写方便N倍。（不知道用jQuery长了，会不会丧失对JS的知识了……）</p>
<p>这里假设大家对jQuery语法已经比较熟悉，来对ajax的一些应用作一些总结。</p>
<h3>载入静态页面</h3>
<dl>
<dt>load( url, [data], [callback] );</dt>
<dd>
<ul>
<li><strong>url (String)</strong> 请求的HTML页的URL地址</li>
<li><strong>data (Map)(可选参数) </strong>发送至服务器的 key/value 数据</li>
<li><strong>callback (Callback) (可选参数)</strong> 请求完成时(不需要是success的)的回调函数</li>
</ul>
<p>load()方法可以轻松载入静态页面内容到指定jQuery对象。</p>
<pre>$('#ajax-div').load('data.html');</pre>
<p>这样，data.html的内容将被载入到ID为ajax-div的DOM对象之内。你甚至可以通过制定ID来实现载入部分内容的Ajax操作，如：
<pre>$('#ajax-div').load('data.html#my-section');</pre>
</p>
</dd>
</dl>
<p><span id="more-182"></span></p>
<h3>实现GET和POST方法</h3>
<dl>
<dt>get( url, [data], [callback] )</dt>
<dd>
<ul>
<li><strong>url (String)</strong> 发送请求的URL地址.</li>
<li><strong>data (Map)(可选参数) </strong> 要发送给服务器的数据，以 Key/value 的键值对形式表示，会做为QueryString附加到请求URL中</li>
<li><strong>callback (Callback) (可选参数)</strong> 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)</li>
</ul>
<p>很显然这是一个专门实现GET方式的函数，使用起来也相当的简单</p>
<pre>
		$.get('login.php', {
			id      : 'Robin',
			password: '123456',
			gate    : 'index'
		}, function(data, status) {
			//data为返回对象，status为请求的状态
			alert(data);
			//此时假设服务器脚本会返回一段文字“你好，Robin！”，那么浏览器就会弹出对话框显示该段文字
			alert(status);
			//结果为success, error等等，但这里是成功时才能运行的函数
		});</pre>
</dd>
<dt>post( url, [data], [callback], [type] )</dt>
<dd>
<ul>
<li><strong>url (String)</strong> 发送请求的URL地址.</li>
<li><strong>data (Map)(可选参数) </strong> 要发送给服务器的数据，以 Key/value 的键值对形式表示</li>
<li><strong>callback (Callback) (可选参数)</strong> 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)</li>
<li><strong>type (String) (可选参数)</strong> 请求数据的类型，xml,text,json等</li>
</ul>
<p>同样是jQuery提供的一个简便函数，其实用法</p>
<pre>
		$.post('regsiter.php', {
			id:'Robin',
			password: '123456',
			type:'user'
		},function(data, status) {
			alert(data);
		}, "json");
		</pre>
</dd>
</dl>
<h3>事件驱动的脚本载入函数：getScript()</h3>
<dl>
<dt>getScript( url, [callback] )</dt>
<dd>
<ul>
<li><strong>url (String)</strong>  待载入 JS 文件地址</li>
<li><strong>callback (Function)  (可选)</strong> 成功载入后回调函数</li>
</ul>
<p>getScript()函数可以远程载入JavaScript脚本并且执行。这个函数可以跨域载入JS文件（神奇……？！）。这个函数的意义是巨大的，它可以很大程度的缩减页面初次载入的代码量，因为你可以根据用户的交互来载入相应的JS文件，而不必在页面初始化的时候全部载入。</p>
<pre>$.getScript('ajaxEvent.js', function() {
			alert("Scripts Loaded!");
			//载入ajaxEvent.js，并且在成功载入后显示对话框提示。
		});</pre>
</dd>
</dl>
<h3>构建数据通讯的桥梁：getJSON()</h3>
<dl
	<dt>getJSON(url,[data],[callback])</dt>
<dd>
<ul>
<li><strong>url (String) </strong> 发送请求地址</li>
<li><strong>data (Map) (可选)</strong> 待发送 Key/value 参数</li>
<li><strong>callback (Function) (可选)</strong> 载入成功时回调函数。</li>
</ul>
</dd>
<p>JSON是一种理想的数据传输格式，它能够很好的融合与JavaScript或其他宿主语言，并且可以被JS直接使用。使用JSON相比传统的通过GET、POST直接发送“裸体”数据，在结构上更为合理，也更为安全。至于jQuery的getJSON()函数，只是设置了JSON参数的ajax()函数的一个简化版本。这个函数也是可以跨域使用的，相比get()、post()有一定优势。另外这个函数可以通过把请求url写成&#8221;myurl?callback=X&#8221;这种格式，让程序执行回调函数X。
	</p>
<pre>$.getJSON('feed.php',{
			request: images,
			id:      001,
			size:    large
			}, function(json) {
				alert(json.images[0].link);
				//此处json就是远程传回的json对象，假设其格式如下：
				//{'images' : [
				//	{link: images/001.jpg, x :100, y : 100},
				//	{link: images/002.jpg, x : 200, y 200:}
				//]};
			}
	);
</pre>
</dl>
<h3>更底层的ajax()函数</h3>
<p>虽然get()和post()函数非常简洁易用，但是对于更复杂的一些设计需求还是无法实现，比如在ajax发送的不同时段做出不同的动作等。jQuery提供一个更为具体的函数：ajax()。</p>
<dl>
<dt>ajax( options )</dt>
<dd>
<p>ajax()提供了一大票参数，所以可以实现相当复杂的功能。</p>
<table cellspacing="0" cellpadding="0">
<tr>
<td valign="top" width="90">参数名</td>
<td valign="top" width="83">类型</td>
<td valign="top" width="419">描述</td>
</tr>
<tr>
<td valign="top" width="90"><strong>url </strong></td>
<td valign="top" width="83">String</td>
<td valign="top" width="419">(默认: 当前页地址) 发送请求的地址。</td>
</tr>
<tr>
<td valign="top" width="90"><strong>type</strong></td>
<td valign="top" width="83">String</td>
<td valign="top" width="419">(默认: &quot;GET&quot;) 请求方式 (&quot;POST&quot; 或 &quot;GET&quot;)， 默认为 &quot;GET&quot;。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。</td>
</tr>
<tr>
<td valign="top" width="90"><strong>timeout</strong></td>
<td valign="top" width="83">Number</td>
<td valign="top" width="419">设置请求超时时间（毫秒）。此设置将覆盖全局设置。</td>
</tr>
<tr>
<td valign="top" width="90"><strong>async </strong></td>
<td valign="top" width="83">Boolean</td>
<td valign="top" width="419">(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。</td>
</tr>
<tr>
<td valign="top" width="90"><strong>beforeSend </strong></td>
<td valign="top" width="83">Function</td>
<td valign="top" width="419">发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。</p>
<pre>function (XMLHttpRequest) {    this; // the options for this ajax request  }</pre>
</td>
</tr>
<tr>
<td valign="top" width="90"><strong>cache </strong></td>
<td valign="top" width="83">Boolean</td>
<td valign="top" width="419">(默认: true) jQuery 1.2 新功能，设置为 false 将不会从浏览器缓存中加载请求信息。</td>
</tr>
<tr>
<td valign="top" width="90"><strong>complete </strong></td>
<td valign="top" width="83">Function</td>
<td valign="top" width="419">请求完成后回调函数 (请求成功或失败时均调用)。参数： XMLHttpRequest 对象，成功信息字符串。</p>
<pre>function (XMLHttpRequest, textStatus) {    this; // the options for this ajax request  }</pre>
</td>
</tr>
<tr>
<td valign="top" width="90"><strong>contentType </strong></td>
<td valign="top" width="83">String</td>
<td valign="top" width="419">(默认: &quot;application/x-www-form-urlencoded&quot;) 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。</td>
</tr>
<tr>
<td valign="top" width="90"><strong>data </strong></td>
<td valign="top" width="83">Object,<br />
      String</td>
<td valign="top" width="419">发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL  后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery  将自动为不同值对应同一个名称。如 {foo:[&quot;bar1&quot;, &quot;bar2&quot;]} 转换为  &#8216;&amp;foo=bar1&amp;foo=bar2&#8242;。</td>
</tr>
<tr>
<td valign="top" width="90"><strong>dataType </strong></td>
<td valign="top" width="83">String</td>
<td valign="top" width="419">
<p>预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText，并作为回调函数参数传递，可用值: </p>
<p>&quot;xml&quot;: 返回 XML 文档，可用 jQuery 处理。 </p>
<p>&quot;html&quot;: 返回纯文本 HTML 信息；包含 script 元素。 </p>
<p>&quot;script&quot;: 返回纯文本 JavaScript 代码。不会自动缓存结果。 </p>
<p>&quot;json&quot;: 返回 JSON 数据 。 </p>
<p>&quot;jsonp&quot;: <a href="http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/">JSONP</a> 格式。使用 <a href="http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/">JSONP</a> 形式调用函数时，如 &quot;myurl?callback=?&quot; jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。</p>
</td>
</tr>
<tr>
<td valign="top" width="90"><strong>error </strong></td>
<td valign="top" width="83">Function</td>
<td valign="top" width="419">(默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数：XMLHttpRequest 对象，错误信息，（可能）捕获的错误对象。</p>
<pre>function (XMLHttpRequest, textStatus, errorThrown) {    // 通常情况下textStatus和errorThown只有其中一个有值     this; // the options for this ajax request  }</pre>
</td>
</tr>
<tr>
<td valign="top" width="90"><strong>global </strong></td>
<td valign="top" width="83">Boolean</td>
<td valign="top" width="419">(默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件</td>
</tr>
<tr>
<td valign="top" width="90"><strong>ifModified </strong></td>
<td valign="top" width="83">Boolean</td>
<td valign="top" width="419">(默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。</td>
</tr>
<tr>
<td valign="top" width="90"><strong>processData </strong></td>
<td valign="top" width="83">Boolean</td>
<td valign="top" width="419">(默认: true) 默认情况下，发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 &quot;application/x-www-form-urlencoded&quot;。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。</td>
</tr>
<tr>
<td valign="top" width="90"><strong>success </strong></td>
<td valign="top" width="83">Function</td>
<td valign="top" width="419">请求成功后回调函数。这个方法有两个参数：服务器返回数据，返回状态</p>
<pre>function (data, textStatus) {    // data could be xmlDoc, jsonObj, html, text, etc...    this; // the options for this ajax request  }</pre>
</td>
</tr>
</table>
<p>你可以指定xml、script、html、json作为其数据类型，可以为beforeSend、error、sucess、complete等状态设置处理函数，众多其它参数也可以订完完全全定义用户的Ajax体验。下面的例子中，我们用ajax()来调用一个XML文档：</p>
<pre>
$.ajax({
    url: 'doc.xml',
    type: 'GET',
    dataType: 'xml',
    timeout: 1000,
    error: function(){
        alert('Error loading XML document');
    },
    success: function(xml){
        alert(xml);
		//此处xml就是XML的jQuery对象了，你可以用find()、next()或XPath等方法在里面寻找节点，和用jQuery操作HTML对象没有区别
    }
});
</pre>
</dd>
</dl>
<h3>进一步了解AJAX事件</h3>
<p>前面讨论的一些方法都有自己的事件处理机制，从页面整体来说，都只能说是局部函数。jQuery提供了AJAX全局函数的定义，以满足特殊的需求。下面是jQuery提供的所有函数（按照触发顺序排列如下）：</p>
<dl>
<dt>ajaxStart</dt>
<dd> (全局事件)<br />
开始新的Ajax请求，并且此时没有其他ajax请求正在进行</dd>
<dt>beforeSend </dt>
<dd> (局部事件)<br />
当一个Ajax请求开始时触发。如果需要，你可以在这里设置XMLHttpRequest对象</dd>
<dt>ajaxSend </dt>
<dd> (全局事件)<br />
请求开始前触发的全局事件</dd>
<dt>success </dt>
<dd> (局部事件)<br />
请求成功时触发。即服务器没有返回错误，返回的数据也没有错误</dd>
<dt>ajaxSuccess </dt>
<dd> 全局事件<br />
全局的请求成功</dd>
<dt>error </dt>
<dd> (局部事件)<br />
仅当发生错误时触发。你无法同时执行success和error两个回调函数</dd>
<dt>ajaxError </dt>
<dd>  全局事件<br />
全局的发生错误时触发</dd>
<dt>complete  </dt>
<dd> (局部事件)<br />
不管你请求成功还是失败，即便是同步请求，你都能在请求完成时触发这个事件</dd>
<dt>ajaxComplete  </dt>
<dd> 全局事件<br />
全局的请求完成时触发</dd>
<dt>ajaxStop  </dt>
<dd> (全局事件)<br />
当没有Ajax正在进行中的时候，触发</dd>
</dl>
<p>局部事件在之前的函数中都有介绍，我们主要来看看全局事件。对某个对象进行全局事件监听，那么全局中的AJAX动作，都会对其产生影响。比如，当页面在进行AJAX操作时，ID为“loading&#8221;的DIV就显示出来：</p>
<pre>$("#loading").ajaxStart(function(){
   $(this).show();
 });
</pre>
<p>全局事件也可以帮助你编写全局的错误相应和成功相应，而不需要为每个AJAX请求独立设置。<br />
有必要指出，全局事件的参数是很有用的。除了ajaxStart、ajaxOptions，其他事件均有event, XMLHttpRequest, ajaxOptions三个参数。<br />
第一个参数即事件本身；第二个是XHR对象；第三个是你传递的ajax参数对象。<br />
在一个对象里显示全局的AJAX情况：</p>
<pre>$("#msg").beforeSend(function(e,xhr,o) {
	$(this).html("正在请求"+o.url);
	}).ajaxSuccess(function(e,xhr,o) {
	$(this).html(o.url+"请求成功");
	}).ajaxError(function(e,xhr,o) {
	$(this).html(o.url+"请求失败");
});
</pre>
<p>很显然，第三个参数也可以帮助你传递你在AJAX事件里加入的自定义参数。</p>
<p>在单个AJAX请求时，你可以将global的值设为false，以将此请求独立于AJAX的全局事件。</p>
<pre> $.ajax({
   url: "request.php",
   global: false,
   // 禁用全局Ajax事件.
 });
</pre>
<p>如果你想为全局AJAX设置参数，你会用上ajaxSetup()函数。例如，将所有AJAX请求都传递到request.php，；禁用全局方法；强制用POST方法传递：</p>
<pre>$.ajaxSetup({
  url: "request.php",
  global: false,
  type: "POST"
});
</pre>
<h3>一些你不得不知道的方法</h3>
<p>写AJAX肯定离不开从页面获取相应的值。在这里简单列举一些方法：</p>
<dl>
<dt>val()</dt>
<dd>val()函数可以返回表单组建的值，例如任何种类input的值。配合选择符操作，你可以轻易获取选项组、输入框、按钮等元素的值。
<pre>$("input[name='info']:text").val();
//返回名字为info的文本框的值
$("input[name='pass']:password").val();
//返回名字为pass的密码框的值
$("input[name='save']:radio").val();
//返回名字为save的单选项的值
//以此类推
</pre>
</dd>
<dt>
serialize()</dt>
<dd>serialize函数可以帮你把表单对象的所有值都转换为字符串序列。如果你要写GET格式的请求，这个就非常方便了。</dd>
<dt>serializeArray()</dt>
<dd>和serialize()类似，只不过它返回的是JSON对象。</dd>
</dl>
<h3>AJAX应用参考</h3>
<ul>
<li>(WordPress) 使用 jQuery 实现 Ajax 留言 : <a href="http://hellobmw.com/archives/ajax-comments-with-jquery-for-wordpress.html" target="_blank">http://hellobmw.com/archives/ajax-comments-with-jquery-for-wordpress.html</a></li>
<li>利用JQuery方便实现基于Ajax的数据查询、排序和分页功能 : <a href="http://www.malsup.com/jquery/form/" target="_blank">http://www.malsup.com/jquery/form/</a></p>
<p><a href="http://www.cnblogs.com/henryfan/archive/2007/01/27/631954.html" target="_blank">http://www.cnblogs.com/henryfan/archive/2007/01/27/631954.html</a></li>
<li>jQuery &#8211; ajax无刷新保存例子 : <a href="http://www.phpchina.com/1296/viewspace_12580.html" target="_blank">http://www.phpchina.com/1296/viewspace_12580.html</a></li>
</ul>
<h3>参考文献</h3>
<ul>
<li>使用 jQuery 简化 Ajax 开发 : <a href="http://www.ibm.com/developerworks/cn/xml/x-ajaxjquery.html" target="_blank">http://www.ibm.com/developerworks/cn/xml/x-ajaxjquery.html</a></li>
<li>jQuery Official Documention : <a href="http://docs.jquery.com/Ajax" target="_blank">http://docs.jquery.com/Ajax</a></li>
<li>jQuery Ajax 全解析 : <a href="http://www.cnblogs.com/QLeelulu/archive/2008/04/21/1163021.html" target="_blank">http://www.cnblogs.com/QLeelulu/archive/2008/04/21/1163021.html</a></li>
<li>jQuery中Ajax事件 : <a href="http://shawphy.com/2008/08/ajax-event-in-jquery.html" target="_blank">http://shawphy.com/2008/08/ajax-event-in-jquery.html</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://pagetalks.com/2008/10/08/when-ajax-meets-jquery.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>jQuery webPrejudice Plugin</title>
		<link>http://pagetalks.com/2008/09/09/jquery-webprejudice-plugin.html</link>
		<comments>http://pagetalks.com/2008/09/09/jquery-webprejudice-plugin.html#comments</comments>
		<pubDate>Tue, 09 Sep 2008 14:03:20 +0000</pubDate>
		<dc:creator>Robin</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[browser]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[prejudice]]></category>

		<guid isPermaLink="false">http://pagetalks.com/?p=124</guid>
		<description><![CDATA[Description I believe most developers have been experiencing compatiblity issues with so-called brwosers. I know you have spent lots of time fixing pages to grace all browsers. So have I. I feel distressed, exhausted when finishing tweaking. The last wor... ]]></description>
			<content:encoded><![CDATA[<div lang="en" class="text-en">
<h3>Description</h3>
<p>I believe most developers have been experiencing compatiblity issues with so-called brwosers. I know you have spent lots of time fixing pages to grace all browsers. So have I. I feel distressed, exhausted when finishing tweaking. The last words I want to voice out &#8212;- I hate this!<br />
Why not ask visitors to change another browser?! This plugin is set to list pros and cons of various browsers and recommend visitors to alter their browser!
</p></div>
<div lang="zh" class="text-cn">
<h3>描述</h3>
<p>相信大多数开发人员都遇到过浏览器兼容性问题。你一定花费了大量的时间调试页面以便让大多数浏览器都能正常显示你的页面。我也如此！我觉得不爽，而且很累。我最后想说的是——我恨死这种工作了！<br />
为什么不能让劝说浏览者换个浏览器呢？！这个插件就是用来干这个的，它会自动判断浏览者的浏览器，并且列出其他浏览器的优缺点，推荐浏览者使用某个其他的浏览器。
</p></div>
<p><span id="more-124"></span></p>
<div lang="en" class="text-en">
<h3>Requirements</h3>
<ul>
<li>jQuery Libary, just download from <a href="http://jquery.com/">jQuery Official Site</a></li>
<li>webPrejudice script file. You can download it from below</li>
<li>a little knowledge on xhtml and js</li>
</ul>
<h3>Download</h3>
Note: There is a file embedded within this post, please visit this post to download the file.
<h3>Features</h3>
<p>This plugin will check the type and version of the browser the visitor is using, and show a UI box to recommend visitors to change his browser, etc.<br />
You can also manually choose the browser you want to prejudice on, and the plugin will help you tell the visitor how bad is the browser he&#8217;s using and the benifits of other browsers!<br />
Currently only 3 parameters are avaiblable, all of which are optional.</p>
<ul>
<li><strong>disable</strong> if the plugin is disabled. Don&#8217;t assign any vallue and the plugin will work. Set to &#8220;true&#8221; if you want to disable the plugin. </li>
<li><strong>loc</strong> the path of XML file where stores the language settings of this plugin.</li>
<li><strong>target</strong> the browser you want to condem. You can choose from &#8220;ie6&#8243;,&#8221;ie7,&#8221;ie8&#8243;,&#8221;safari&#8221;,&#8221;mozilla&#8221;,&#8221;opera&#8221;, or leave it blank. Default is &#8220;ie6&#8243;. (Most people will agree with my prejudice on IE6)</li>
</ul>
<h3>Usage</h3>
<dl>
<dt>Load jQuery Libary</dt>
<dd>You can directly add the following code in &lt;head&gt; tag：</p>
<pre>&lt;script type="text/javascript" src="jquery..js"&gt;&lt;/script&gt;</pre>
</dd>
<dt>Load webPrejudice Plugin</dt>
<dd>&lt;script type=&#8221;text/javascript&#8221; src=&#8221;jquery.webPrejudice.js&#8221;&gt;&lt;/script&gt;</dd>
<dt>Assing the target object </dt>
<dd>Use it inside jQuery(document).ready() block:</p>
<pre>jQuery.webPrejudice();</pre>
<p>You can, of course , apply some change, customizing the xml path and target browser：</p>
<pre>jQuery.webPrejudice({
	loc: "pathtoxml/set.xml",
	target: "opera"
})</pre>
<p>Codes above will using the language settings in set.xml and the plugin will help you persuade visitors to drop out Opera and use another browser.
</dd>
<dt>XML Preferrence File</dt>
<dd>By default, all lines are English, you can localize this plugin by creating XML Preferrence File in your own language. Open default.xml and edit it following the structure of this sample xml. The links of browsers downloading page are also in this xml file.</dd>
</dl>
<h3>Change Log</h3>
<p>You can always refer to <a href="http://plugins.jquery.com/project/webPrejudice">jQuery Plugin</a> to trace the builds.</p>
<ul>
<li><strong>1.0.0</strong> First Edition</li>
</ul>
</div>
<div lang="zh" class="text-cn">
<h3>需求</h3>
<ul>
<li>jQuery脚本库，你可以从 <a href="http://jquery.com/">jQuery Official官方站点</a>下载</li>
<li>webPrejudice脚本文件</li>
<li>一点点关于xhtml,css,js的知识</li>
</ul>
<h3>功能</h3>
<p>这个插件会自动检查浏览者使用的浏览器类型和版本，如果浏览者使用了太古老的浏览器或者你设置的浏览器（当然是你讨厌的浏览器），该插件显示出一个交互窗口，推荐浏览者更换浏览器。<br />
你可以手动设置你想鄙视的浏览器类型，这个插件会帮助你告诉浏览者这个浏览器是多么的差，而其他的浏览器则更优秀！<br />
目前总共有三个可选参数：</p>
<ul>
<li><strong>disable</strong> 如果你想禁用插件，设置该值为&#8221;true&#8221;。如果你想正常使用该插件，请不要使用这个参数。 </li>
<li><strong>loc</strong> XML设置文件的地址，这个XML文件内部存储着各种设置。</li>
<li><strong>target</strong> 你想要鄙视的浏览器，你可以从 &#8220;ie6&#8243;,&#8221;ie7,&#8221;ie8&#8243;,&#8221;safari&#8221;,&#8221;mozilla&#8221;,&#8221;opera&#8221;这些浏览器里面选. 默认的是&#8221;ie6&#8243;，我相信大多数都同意我的这个决定。</li>
</ul>
<h3>用法</h3>
<dl>
<dt>加载jQuery脚本库</dt>
<dd>在 &lt;head&gt; 标签内部加入如下代码：</p>
<pre>&lt;script type="text/javascript" src="jquery..js"&gt;&lt;/script&gt;</pre>
</dd>
<dt>加载webPrejudice插件</dt>
<dd>&lt;script type=&#8221;text/javascript&#8221; src=&#8221;jquery.webPrejudice.js&#8221;&gt;&lt;/script&gt;</dd>
<dt>运用插件</dt>
<dd>在jQuery(document).ready()内部加入语句:</p>
<pre>jQuery.webPrejudice();</pre>
<p>你可以添加一些参数：</p>
<pre>jQuery.webPrejudice({
	loc: "pathtoxml/set.xml",
	target: "opera"
})</pre>
<p>这样设置的话，该插件会加载set.xml文件，并会帮助你一起鄙视Opera浏览器
</dd>
<dt>XML配置文件</dt>
<dd>默认状态下，插件里面的所有语言都是英文。打开default.xml，根据里面的结构替换相应的内容，你就可以订制一套符合你的语言的配置文件了。</dd>
</dl>
</div>
]]></content:encoded>
			<wfw:commentRss>http://pagetalks.com/2008/09/09/jquery-webprejudice-plugin.html/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>
<!-- WP Super Cache is installed but broken. The path to wp-cache-phase1.php in wp-content/advanced-cache.php must be fixed! -->
