一个月没有把@ucdcn的推汇总出来了。实在惭愧，一来是因为当时写的存储推的数据库出现了一些问题，导致部分推不能被在汇总中显示，二来是因为有朋友反应推的频率太高会被洪水淹没，因此现在减小了推的频率。下面的关于UCD/UED的自3月初的总结。为了大家的检索方便，接下来空余时间我做一个搜索推库的功能，敬请期待^_^

• @ 2010-3-3 11:25

  创新的简历可能会帮助你找到更好的工作。甚至有的人把 #infographic 的展现方式都运用其中。http://is.gd/9zBQQ

• @ 2010-3-3 11:27

  #iphone #code #web #ued 十分十分有用的代码片段有助于你为iPhone设计更友好的界面。http://is.gd/9zCkP

• @ 2010-3-3 11:31

  #os #jquery “谁在你的网站上？” 有人写了一个开源的"who is online" 的小插件，功能蛮齐的。http://is.gd/9zD11

• @ 2010-3-4 10:1

  #design #ued Web设计中的颜色理论http://is.gd/aaHRE

• @ 2010-3-4 11:38

  #ued #ucd #web 50个十分漂亮简洁的网站设计欣赏。 颜色越是用得简单，设计的时候就越需要考虑布局排版。大家可以围观 http://is.gd/ab0nI

• @ 2010-3-4 12:18

  #design #ued #web 2010年网页设计趋势预测。 http://is.gd/ab7XZ

• @ 2010-3-4 12:34

  #jquery #ued 未被众人所知的一些jQuery的隐藏技能 http://is.gd/abaU0

• @ 2010-3-5 10:7

  #ued #tool 十个有用的网站分析工具http://is.gd/ahjT9

• @ 2010-3-1 9:24

  #design #case 国外设计师本周搜集的一些很棒的设计 http://is.gd/aEByt

• @ 2010-3-1 9:36

  #wallpaper wow~简直是太漂亮了，这里有80+地球上最漂亮的地方的照片。 其中部分做了HDR的处理 http://is.gd/aEFmy

• @ 2010-3-1 9:45

  #ucd #ucdchina 社区上出现一篇文章，说到安慰用户的一些情感设计。http://is.gd/aEHSL 这让我想到了前些时间看到的纽约十字路口人行道的按钮其实是不会让红绿灯改变的，但是没有取消的原因完全是为了安慰行人。http://is.gd/aEHSL

• @ 2010-3-1 9:51

  #ued #jquery #js 45个有用的jQuery技巧及工具 http://is.gd/aEJEU

• @ 2010-3-2 13:3

  #jquery 这个世界什么奇怪的人都有，例如这个，像书的翻页角一样的jQuery插件，虽然不实用，但是的确很sexy http://is.gd/aJj7E

• @ 2010-3-2 13:5

  #web #webapp #ued 如果你想设计一个Web Application，这里有20个很棒的20个We APP的接口设计供你参考。http://is.gd/aJjeo

• @ 2010-3-2 13:9

  #flash #jquery #chart #ued 如果你要设计一个带有图表的网站，首先想到的是图表用flash/flex来展现。但是若在不支持flash的环境中怎么办？这里有5个顶级JS的包帮助你 http://is.gd/aJjqB

• @ 2010-3-2 13:25

  #web #ued 50个设计很漂亮的黄色网站也许能给你不少灵感 http://is.gd/aJkbS

• @ 2010-3-2 13:43

  #bizcard 设计名片？背面总是一件痛苦的事儿。这里有一些双面的名片设计的案例供给你参考 http://is.gd/aJl3z

• @ 2010-3-3 12:26

  #ucd #ued #web 无论你是图像设计和体验设计的高手还是菜鸟，这篇文章总结的12个标准屏幕设计模板都会帮助你把经验固化。文中还包含了大量的最侍实践 http://is.gd/aLnIH

• @ 2010-3-2 9:38

  #ucd #flash 请饶恕我的推中不常包含中文网站。的确是我实在不知道哪些是值得拿出来推的，直到我发现这个：http://www.iloveg3.com/ 中国移动的G3宣传概念网站，值得一看

• @ 2010-3-2 9:40

  #china #design 上一推推了一条中国设计的概念网站，其实SM在前些天刚做了一个关于中国从操到创造的设计大收罗： http://is.gd/aTDAA

• @ 2010-4-4 9:18

  #visual #design 一个黑色骚包的设计网站http://is.gd/b91HZ

• @ 2010-4-4 9:22

  #design #ad 我也不记得过去是在哪个推上推过一些很有创意的广告牌设计，没有关系，今天补上更多的。这些广告都突破了传统广告牌的设计http://is.gd/b91WN

• @ 2010-4-4 9:25

  #ads 我终于找到这个广告了，很早前看到的，这应该是BBC推出的一组广告中的一个，我过去看到的不是这个。广告很巧妙地利用了街口转角处的特点设计了这组广告以传达广告的意义http://is.gd/b9299

• @ 2010-4-4 10:5

  #ad 我把刚刚推的那组BBC的户外广告集结在一起了，有兴趣可以看一下 http://is.gd/b94gs

• @ 2010-4-4 16:18

  #jquery #ued 很漂亮的图片注释显示器插件

• @ 2010-4-4 16:19

  #jquery #ued 很漂亮的图片注释显示器。http://is.gd/b9ngn

• @ 2010-4-2 17:0

  #jquery #js #design 一个很实用的Notify插件http://is.gd/bgMAp

• @ 2010-4-2 17:4

  #jquery #js #web 一个动态Tab的插件，蛮有意思的http://is.gd/bgMOb

• @ 2010-4-2 17:8

  #jquery #js #web 很囧的jquery动态插件http://is.gd/bgN3f

• @ 2010-4-2 17:15

  #jquery #js 现在蛮流行大图片在网站的背景上的使用，这里有一个现成的jquery插件 http://is.gd/bgNvn

• @ 2010-4-2 20:5

  #grid #css #web 15个有用的css表格系统供你设计选用http://is.gd/bqRUa

• @ 2010-4-2 20:7

  #webapp #photo 30个照片在线编辑网站 http://is.gd/bqS5l

• @ 2010-4-5 9:31

  #design #ipad 用色蛮漂亮的ipad天气预报设计 http://is.gd/buMyG

• @ 2010-4-5 9:33

  #photo 30张很漂亮的中国主题宽屏幕墙纸。 http://is.gd/buMFn

• @ 2010-4-5 16:22

  #infographics #design 太棒了，找到一个infographics的大集合： http://is.gd/bvcy2

• @ 2010-4-5 16:32

  #ucd #ued #web 50个漂亮的导航条设计 http://is.gd/bvdct

• @ 2010-4-5 17:26

  #js #jquery #extjs EXTJS的最大优点就是做数据展示，但是EXTJS对于jQuery而言，过于臃肿，如果我们使用的框架是jQ，同时希望做很好的数据展示，这40个jQ插件也许可以帮上忙http://is.gd/bvgPu

基本原理

HTML逐帧动画的基本原理跟老式的动画片一样，就是把画好的图片一张一张逐个显示出来：

具体到技术上，就是把所有的帧横向排列到一张图片上作为舞台(stage)div的背景图，控制舞台的高(height)、宽(width)和背景图位置(background-position)，使舞台同一时间只能显示一帧的图像，然后每隔一段时间（由帧速决定）改变一次舞台的背景图位置，让下一帧显示出来，达到“播放”的效果。

API接口

有童鞋肯定会问，为什么不用gif图片来播放逐帧动画呢？原因就是gif动画无法用程序来控制，没有API接口。

Options

• img ( String, required ): 被播放图片的路径。
• width ( Number, required ): 每一帧的宽度。
• height ( Number, required ): 每一帧的高度。
• framenum ( Number, required ): 总共有多少帧。
• framerate ( Number, optional ): 播放的帧速，默认为25。
• currentFrame ( Number, optional ): 当前处于第几帧，即从第几帧开始播放，默认为1。
• autoPlay ( Boolen, optional ): 是否在初始化之后自动播放，默认为true。
• reverse ( Boolen, optional ): 是否按倒序播放，默认为false。
• vPosition ( String, optional ): 舞台竖直方向的背景图位置，默认为”0px”。

Methods

• .frameplayer( “play” ): 开始播放。
• .frameplayer( “pause” ): 暂停播放。
• .frameplayer( “stop” ): 停止播放，回到第一帧（倒序播放时跳到最后一帧）。
• .frameplayer( “options”, newOptions ): 修改选项参数，可修改的参数见”Options“。

Events

• .bind( “play”, function ): 开始播放时触发。
• .bind( “pause”, function ): 暂停播放时触发。
• .bind( “play”, function ): 停止播放时触发。
• .bind( “complete”, function ): 播放完毕时触发。

代码很简单，在Demo中直接点击右键即可查看。

Demo

C/S模式的tab

在探讨C/S模式的Tab之前，我们先总结一下B/S模式的Tab通常是什么样的。web中常见的tab设计通常是用于分节展示大量信息以提高页面空间的利用率，而且这些信息通常是静态的，或者交互比较简单。通过ajax动态加载tab内容的技术也是为这种应用场景设计的。

随着Web技术的发展，越来越多的桌面应用都在向Web应用转型。在这个过程中，很多C/S模式的应用场景不可避免的会被移植到Web中。但是B/S模式相对较弱的交互性决定了某些移植很难实现或者效果不好。C/S模式的Tab设计就是其中之一。

所谓C/S模式的Tab实际上是为了在不需要打开多个应用的情况下，可以同时对多个对象进行操作，以提高工作效率。这个应用场景在往B/S移植的过程中，如果沿用B/S常用的tab技术，通过ajax动态加载tab内容，就会有一些技术难点：

• 在B/S的架构中，同一类型的tab页通常是对应的同一个物理页面，例如订单A和订单B的的tab页实际上都是对应的order.php这个页面，只不过请求的GET参数不一样而已。这样如果同时加载了订单A和订单B的tab页，那么这两个页面的html和js很可能发生冲突。
• 我们需要用一种标识来区别不同的tab页，并且避免重复打开同一个tab页。例如，在订单A已经被打开的情况下，如果试图再打开订单A，那么订单A的tab应该被激活，而不是再打开一个订单A。
• 如果打开的tab数量较多，或者tab页中的交互复杂、内容很多，浏览器就很容易出现性能问题，速度变的很慢。
• 还有很多潜在的、琐碎的问题随时可能让我们抓狂。在这点上，我是有惨痛教训的……

其实解决上面这些问题的方式是很多的。经过一些尝试、失败和总结，我选择了一种现代结合复古的方式：动态生成iframe，并通过iframe的src属性来区分不同的tab。采用这种方案之后，上面难题都迎刃而解，唯一的不足就是tab子页和主页间的交互会变得比较复杂。请猛击这里看demo。这个demo模拟了一个查看、修改订单的应用场景，主要实现了这些功能：

1. 添加tab的时候，动态生成一个iframe。并且在tab切换的时候，所有iframe都不会刷新。
2. iframe的高度自适应内容的高度。
3. 在尝试打开一个已经存在的tab的时候，会激活这个tab，不会重复打开相同的tab。
4. tab可以被关闭，并且关闭的时候tab对应的iframe会被移除。

下面我们就一步一步的实现上面的功能。

第一步：编写demo的框架

这个demo用到了jquery和jquery的ui库，文件结构如图：

demo的文件结构

其中：

• index.html是demo的首页。
• order.php就是订单的详细页面，每个订单详情tab都是加载的这个页面。
• index.css是首页的样式表。
• index.js是首页的js脚本。

由于篇幅的限制，这里就不贴代码了，demo的源代码在文章最后可以下载。

第二步：初始化jquery tab

现在我们可以开始编写index.js了。首先是初始化tab：

// 初始化tab
$( "#tabs" ).tabs({
    tabTemplate: '<li><a href="#{href}">#{label}</a><a class="close" href="#">x</a></li>',
    cache: true
})
.bind( "tabsadd", function( event, ui ) {
    $( this ).tabs( "select", "#" + ui.panel.id );
});

初始化参数中的tabTemplate是为后面的关闭tab做准备。这里还绑定了一个tabsadd的事件处理函数，作用是在添加tab之后立即选中新增的tab。

第三步：动态生成iframe

如果现在打开页面，只能看到订单列表一个tab，下面我们让列表中的连接被点击之后，添加一个新tab显示对应订单的详情：

// 点击添加tab页
$( ".list a" ).click( function( e ) {
    e.preventDefault();
    var href = $( this ).attr( "href" );
    var orderid = href.substring( href.indexOf( "-" ) + 1 );
    var tabid = "order-" + orderid;
    var url = "order.php?orderid=" + orderid;
    var label = "订单详情-" + orderid;
    addTab( tabid, url, label );
});

// 添加tab的接口
function addTab( id, url, label ) {
    var mainTab = $( "#tabs" );
    var panel = $( "<div/>" ).attr({
        "id": id
    }).appendTo( mainTab );

    mainTab.tabs( "add", "#" + id, label );

    $( "<iframe/>" ).attr({
        "frameBorder": "0",
        "scrolling": "no",
        "allowTransparency": "true",
        "src": url
    }).css({
        "width": "100%",
        "height": "100px"
    }).load( function() {
        var iframe = $( this );
        iframe.height( iframe.contents().find( "body" ).height());
    }).appendTo( panel );
}

上面的代码中，我们编写了一个方法作为添加tab的通用接口。在点击某一个订单链接的时候，我们会调用这个添加tab的接口，按顺序做这几件事：

1. 生成一个div，作为jquery tab的panel，也就是iframe的容器。
2. 调用jquery tab的接口新增一个tab指向刚才的div，并选中这个tab（刚才绑定的tabsadd事件）。
3. 创建并初始化一个iframe，然后将它添加到刚生成的div里面。其中，在初始化的时候我们给iframe添加了一个load事件的处理函数，用来让iframe自适应内容的高度。

第四步：防止重复打开tab

现在如果多次点击订单列表中的同一个链接，我们会打开多个相同的tab。为了避免这种情况发生，我们需要在添加tab之前，通过iframe的src判断这个tab是否已经被打开，如果已经被打开，则选中这个tab（4行至15行）：

// 添加tab的接口
function addTab( id, url, label ) {
    var mainTab = $( "#tabs" );
    var added = false;
    $( "iframe", mainTab ).each( function( i ) {
        var src = this.src.substring( this.src.lastIndexOf( "/" ) + 1 );
        if ( src == url ) {
            added = $( this );
        }
    });

    if ( added ) {
        mainTab.tabs( "select", "#" + added.parent().attr( "id" ));
        return;
    }

    var panel = $( "<div/>" ).attr({
        "id": id
    }).appendTo( mainTab );

    mainTab.tabs( "add", "#" + id, label );

    $( "<iframe/>" ).attr({
        "frameBorder": "0",
        "scrolling": "no",
        "allowTransparency": "true",
        "src": url
    }).css({
        "width": "100%",
        "height": "100px"
    }).load( function() {
        var iframe = $( this );
        iframe.height( iframe.contents().find( "body" ).height());
    }).appendTo( panel );
}

第五步：关闭tab

最后我们让tab上的关闭链接发挥作用。实现这个功能通常的思路是，在每次添加tab的时候（tabsadd事件）绑定关闭tab的处理函数。但是这里我们会使用jquery 1.3中的一个新特性——live event来实现这个功能：

// 动态绑定关闭tab的事件
$( ".ui-tabs-nav a.close" ).live( "click", function( e ) {
    e.preventDefault();
    var index = $( ".ui-tabs-nav li" ).index( $( this ).parent());
    $( "#tabs" ).tabs( "remove", index );
});

简单的说，live event就是预先给某些目前DOM中可能不存在，但是未来会被动态加入到DOM中的元素绑定事件处理函数。想了解更多关于live event的信息，请参考jquery的文档。

至此，demo中的所有功能我们都已经实现了。这种实现C/S模式tab的方案，就目前来说，我觉得不是完美的，但却是可行性最强的。现实的开发中可能出现的一些其他常用需求，比如加载iframe的loading效果，实现起来都会比较容易。

下载：demo的源代码