深山老林

[http://syre.blogbus.com/logs/5192416.html]

如下代码定义了一个循环模板的例子：

<xsl:template name="for-loop">
<xsl:param name="i"/>
<xsl:param name="count"/>
<xsl:if test="$i &lt;= $count">
<xsl:value-of select="$i" disable-output-escaping = "yes" />
</xsl:if>
<xsl:if test="$i &lt;= $count">
<xsl:call-template name="for-loop">
<xsl:with-param name="i">
<xsl:value-of select="$i + 1"/>
</xsl:with-param>
<xsl:with-param name="count">
<xsl:value-of select="$count"/>
</xsl:with-param>
</xsl:call-template>
</xsl:if>
</xsl:template>

调用方法：

<xsl:call-template name="for-loop">
<xsl:with-param name="i">1</xsl:with-param>
<xsl:with-param name="count">10</xsl:with-param>
</xsl:call-template>

结果输出1-10这10个数字。

看到这个标题很容易就会想到截断文字加“...”的做法。哈哈，就是这样。其实写这篇日志也只是把这样方法做个记录，因为好像写了这么多次，还是会不太记得。嘿嘿~~

一般的文字截断(适用于内联与块)：
==============CSS================ 
.text-overflow{
display:block;/*内联对象需加*/
width:31em;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}
=================================

对于表格的话，定义有一点不一样：
==============CSS================ 
table{
width:30em;
table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
} 
=================================

注：这个东东只对单行的文字的效，如果你想把它用在多行上，也只有第一行有作用的。 这个写法只有IE会有“...”，其它的浏览器文本超出指定宽度时会隐藏。

“好久没有更新blog了”发现每次一写日志，都少不了这一句。交互设计现在也成了一个热门词，到哪都总能听到交互这交互那的，当然工作上也少不了接触到交互。每每跟臭鱼聊到交互，总会提到“以目标为导向”的交互设计——以用户的目标为设计的主导，任务越少越好。貌似是怎么说的。

有个例子：“比如有一个人想从A地到B地去，古时候是要几个任务要做：

1. 带上枪
2. 拿上足够的钱
3. 租一辆马车

而现在如果也是要从A地到B地去，所要做的任务就不一样了：

1. 不能带枪
2. 拿少量现金
3. 定机票

虽然是完全不同的任务，但目标是一样的：从A地到B地。如果有个人帮你把这些任务提前给你安排了，那会不会更爽呢？当然！交互所要做的就是帮你把这些任务给你安排好，让你更快的到达目地地。”

听起来好像没错，但仔细想想，你会发现任务还是要做，交互所要做的不是帮用户把任务做了，而是让用户更顺利的完成必须要完成的任务。

学交互的同学应该都知道“别让我思考——Krug可用性第一定律”、“……设计者应该尽量做到，当我看一个页面时，它应该是不言而喻，一目了然，自我解释的。我应该能明白它――它是什么意思，怎样用它――而不需要进行额外的思考。……”当然不可能完全做到这种页面，过多的提示只会让用户有被当成“白痴”的感觉。所以整站统一的设计，能让用户更容易形成心理模型，更容易的自我帮助。

“自我解释” 在对于提高页面友好度是很有帮助的，特别是当用户需要完成一些操作的时候，如链接、按钮等操作。一个不知道结果的操作，对于用户来说，都有一定的“恐惧感”，点了之后会出现什么呢？最简单的一个例子，关于链接的：大家都知道链接可以打开新窗口，也可以在当前窗口跳转。当一个链接没有说明是否在新窗口打开时，用户对于要不要点这个链接，总会犹豫，因为不知会不会将当前页面的内容覆盖。观查下身边使用电脑的朋友打开网页的习惯（特别是找资料的时候），你会发现一个很奇怪的现象：有大部分的人会在链接上点右键，然后选“在新窗口打开...”，也有人会按着Ctrl键直接点链接（在新窗口打开链接），为什么呢？因为不用去担心会不会把当前窗口覆盖（-_-||我就喜欢在新窗口打开，不行啊？……）。

OK，其实只是想说明一点：让用户知道自己在哪、将会去到哪。

在BLOGBUS建了个群组——CSS森林，欢迎各位同行加入，分享下经验、技巧。

群组：http://groups.blogbus.com/cssforest.html 

CSS森林（QQ群：30247792） 欢迎走 Web 标准之路，玩CSS的朋友加入。精神正常者慎入！

记念俺学标准一年了，同时也记念这个Blog三周岁的生日（貌似已经过了-_-||）给个“裸体”示众。

 谢谢每一个关心我、帮助我、支持我的同学、同行……