SharePoint：扩展DVWP - 第34部分：使用图标形式的表单操作链接

上一次，我们对我们的DVWP的外观进行了最后的加工，实现了下图中 1-5 的部分。这一次，我们将继续完成剩下的6 和 7 ,来为其添加一个图标。

在本系列中间的部分，Greg Schaefer提了一个很好的建议, 正因如此，我打算把我们的表单操作链接改成图标的形式。 Greg 建议我参考一下 Peter Allen的博客中有关 SharePoint Layout Images 的部分，使用SharePoint内置的一些图片来替换默认的表单操作链接：update, remove和insert。

本文也可以看作是对Greg所提建议的一个回应。

将超链接图标化

Peter 提到通过查找SharePoint Layout Images 目录往往可以发现很多有用的图片资源，这些图片都可以通过 /_layouts/images/ 路径进行访问。

下面是我找到的比较合适的图标:

Update		edititem.gif
Remove		crit_16.gif
Insert		newitem.gif

 

对它们的使用也很简单：

1. 点击链接
2. 把原来的链接文本替换成图片：

    
<a href="javascript: {ddwrt:GenFireServerEvent(concat('__cancel;dvt_1_form_editkey={',$KeyValue,'}'))}">update</a>

…改成：

<a href="javascript: {ddwrt:GenFireServerEvent(concat('__cancel;dvt_1_form_editkey={',$KeyValue,'}'))}"><img src="/_layouts/images/edititem.gif" border="0" alt="" /></a>

在remove 链接上重复该步骤。这里还有一个可以用于remove的图片：

Remove

Delitem.gif

有了图片, 原来添加的竖线就不需要了… 但还是需要定义一下外边框空白:

<td class="ms-vb" width="1%" nowrap="" style="padding-left=3px">
<a href="javascript: {ddwrt:GenFireServerEvent(concat('__cancel;dvt_1_form_removekey={',$KeyValue,'}'))}">
<img src="/_layouts/images/crit_16.gif" border="0" alt="" />
</a>
</td>

1. 对于Insert，我还添加了一些描述文字：
   

   <a href="javascript: {ddwrt:GenFireServerEvent('__cancel;dvt_1_form_insertmode={1}')}">
   <img src="/_layouts/images/newitem.gif" border="0"/> Add a new employee
   </a>
   

至此… 包装工作完成。

好了，到目前为止，已经走过了34个部分。除了需要把所有的内容连接成一个完整的解决方案外，基本没有什么了。下一次，我们就可以完成我们的扩展DVWP系列了。

参考资料

SharePoint:Extending the DVWP - Part 34:Using Icons for Form Action Links