参考亮亮的代码。
[html]
PS: JavaScript中localeCompare函数方法是返回一个值，指出在当前的区域设置中两个字符串是否相同。使用方法： stringVar.localeCompare(stringExp) 其中stringVar是必选项。一个 String 对象后文字。 stringExp是必选项。将与 stringVar 进行比较的字符串。 localeCompare 可以对 stringVar 和 stringExp 进行一个区分区域设置的字符串比较并返回 –1、0 或 +1， 这取决于系统中缺省区域设置的排序。如果 stringVar 排序在 stringExp 之前，那么 localeCompare 返回 –1； 如果 stringVar 排序在 stringExp 之后，则返回 +1。如果返回值为 0，那就说明这两个字符串是相同的。
[/html]
Multi Bit Shift and Multi Bit Shift Advanced
are flash applets that can be embedded into new or
existing websites to quickly enable multiple file
uploads, complete with upload status.
演示：
http://multibitshift.com/demo
下载：
http://multibitshift.com/downloads
演示：
http://www.corrie.net.cn/demo/areaopt/
以前发过的：
http://www.cssrain.cn/article.asp?id=772
演示：
http://nettuts.s3.amazonaws.com/127_iNETTUTS/demo/index.html
下载：
http://nettuts.s3.amazonaws.com/127_iNETTUTS/source.zip
官网：
http://nettuts.com/tutorials/%20-ajax/inettuts/
演示：
http://www.serie3.info/s3slider/demonstration.html
用法：
[code]
[/code]
下载：
http://www.serie3.info/s3slider/style/code/s3SliderFull.rar
上次发的
http://www.cssrain.cn/article.asp?id=1181
样式在ie6有点问题。
这次已经改过来了，
大家可以重新下载：
点击下载此文件
截图：
演示：
http://www.suuronen.org/esa-matti/projects/panfullsize/
用法：
[code]
// FullSize
$("img#mypic").panFullSize(700, 450).css("border", "medium solid black");
// 切换模式
$("a#zoom").toggle(function(){
$("img#mypic").normalView();
},
function(){
$("img#mypic").panFullSize();
}
);
[/code]
一 ， 简单介绍
它是一个基于jQuery开发的javascript模板引擎。它主要的作用如下：
1. 通过JavaScript获取JSON形式的数据；
2. 获取一个HTML模板，与数据相结合，生成页面HTML。
二 ， 快速上手
先来看一个简单的例子：
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="jquery-jtemplates.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//初始化数据
var data = {
name: '用户列表',
list_id: '编号89757',
table: [
{id: 1, name: 'Rain', age: 22, mail: 'cssrain@domain.com'},
{id: 2, name: '皮特', age: 24, mail: 'cssrain@domain.com'},
{id: 3, name: '卡卡', age: 20, mail: 'cssrain@domain.com'},
{id: 4, name: '戏戏', age: 26, mail: 'cssrain@domain.com'},
{id: 5, name: '一揪', age: 25, mail: 'cssrain@domain.com'}
]
};
// 附上模板
$("#result1").setTemplateElement("template");
// 给模板加载数据
$("#result1").processTemplate(data);
});
</script>
<!– 模板内容 –>
<textarea id="template" style="display:none">
<strong>{$T.name} : {$T.list_id}</strong>
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>邮箱</th>
</tr>
{#foreach $T.table as record}
<tr>
<td>{$T.record.id}</td>
<td>{$T.record.name}</td>
<td>{$T.record.age}</td>
<td>{$T.record.mail}</td>
</tr>
{#/for}
</table>
</textarea>
<!– 输出元素 –>
<div id="result1" ></div>
上面代码中，先导入了jQuery.js，然后导入jtemplates.js。
接下来新建了一个data数据的json对象。
var data = {
……
};
然后在HTMl页面上增加一个 输出元素 和 一个模板元素:
最后在JS给输出元素 附加模板 和 数据。
这样，运行代码后，出现如下图所示界面。
三 ， 加载模板
这次把模板放到一个单独的页面中，而不是直接写在页面里。
新建一个template.html，放入以下代码：
<strong>{$T.name} : {$T.list_id}</strong>
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>邮箱</th>
</tr>
{#foreach $T.table as record}
<tr>
<td>{$T.record.id}</td>
<td>{$T.record.name}</td>
<td>{$T.record.age}</td>
<td>{$T.record.mail}</td>
</tr>
{#/for}
</table>
然后新建一个json文件，名称为cs.json，代码如下：
{
name: "用户列表",
list_id: "编号89757",
table: [
{id: 1, name: 'Rain', age: 22, mail: 'cssrain@domain.com'},
{id: 2, name: '皮特', age: 24, mail: 'cssrain@domain.com'},
{id: 3, name: '卡卡', age: 20, mail: 'cssrain@domain.com'},
{id: 4, name: '戏戏', age: 26, mail: 'cssrain@domain.com'},
{id: 5, name: '一揪', age: 25, mail: 'cssrain@domain.com'}
]
}
在jQuery中，可以通过$.ajax()方法来加载 json文件，代码如下：
<script type="text/javascript">
$(function(){
$.ajax({
type: "post",
dataType: "json",
url: "cs.json",
success: function(data){
…..
}
});
});
</script>
在success回调函数里，首先需要设置模板，然后需要添加数据。如下代码所示：
success: function(data){
// 设置模板
$("#result1").setTemplateURL("template.html?date="+(+new Date()), null, {filter_data: true});
// 加载数据
$("#result1").processTemplate(data);
}
}
完整代码如下所示：
$(function(){
$.ajax({
type: "post",
dataType: "json",
url: "cs.json",
success: function(data){
$("#result1").setTemplateURL("template.html?date="+(+new Date()), null, {filter_data: true});
$("#result1").processTemplate(data);
}
});
});
运行代码后，也可以得到上图的界面。
四 ，小结
关于 new Date().getTime()的简写方式：可以参考这篇文章：
http://www.cssrain.cn/article.asp?id=1116
CssRain提供的几个例子，按照官方写的：
jtemplates官方首页 :
http://jtemplates.tpython.com/
官方的几个例子：
1. Simple template (see source as description)
example1.html
2. Example 1 + multiple elements + parameters
example2.html
3. Example 1 (Valid XHTML 1.1 !)
example3.html
4. Multitemplate (Valid XHTML 1.1)
example4.html
演示：
http://www.cssrain.cn/demo/TheSlideShowImage/demo1.html
点击下载此文件
有问题，请留言。
声明：文章来自亮亮的BLOG推荐的jQuery插件。http://www.94this.com.cn/article/258.htm
jQuery插件—XML to JSON plugin–把xml转化为json插件：
这个插件应该是比较方便的一个插件了，它能把xml字符串或xml文件转化为json对象，比如把
<xml>
<message>Hello world</message>
</xml>
转化为
{
message: 'Hello world';
}
这样我们操作起来就很方便了，因为用javascript操作json比操作xml要方便好多。
基本的使用：
当然它也能通过直接把xml文件转化为json
好了，看看基本的演示吧!
这个插件还有一个扩展的用法：
基本的是把
<?xml version="1.0" encoding="utf-8"?>
<animals>
<dog color='Black'>
<name>Rufus</name>
<breed>labrador</breed>
</dog>
<dog breed='whippet'>
Adopted
<name>Marty</name>
</dog>
<cat color="White">
<name>Matilda</name>
</cat>
</animals>
转化为
{
dog:[
{ name:'Rufus', breed:'labrador', color:'Black' },
{ text:'Adopted', name:'Marty', breed:'whippet' }
],
cat:{ name:'Matilda', color:'White'}
}
扩展的作用是把每个节点转化为数组的形式，即
{
dog:[
{ name:['Rufus'], breed:['labrador'], color:'Black' },
{ text:'Adopted', name:['Marty'], breed:'whippet' }
],
cat:[
{ name:'Matilda', color:'White'}
]
}
这个使用也简单，就多了一个参数：
$.get('data/animals.xml', function(xml){
var animals = $.xml2json(xml, true);
alert(animals.dog[1].name[0].text +'/'+ animals.dog[1].text);
});
最后，看看所有用法的演示(此演示官方提供)吧！
点击下载此文件