SharePoint:扩展DVWP - 第34部分:使用图标形式的表单操作链接
2010-11-11 10:22
323 查看
上一次,我们对我们的DVWP的外观进行了最后的加工,实现了下图中 1-5 的部分。这一次,我们将继续完成剩下的6 和 7 ,来为其添加一个图标。
在本系列中间的部分,Greg Schaefer提了一个很好的建议, 正因如此,我打算把我们的表单操作链接改成图标的形式。 Greg 建议我参考一下 Peter Allen的博客中有关 SharePoint Layout Images 的部分,使用SharePoint内置的一些图片来替换默认的表单操作链接:update, remove和insert。
本文也可以看作是对Greg所提建议的一个回应。
下面是我找到的比较合适的图标:
对它们的使用也很简单:
点击链接
把原来的链接文本替换成图片:
…改成:
有了图片, 原来添加的竖线就不需要了… 但还是需要定义一下外边框空白:
对于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
在本系列中间的部分,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 |
点击链接
把原来的链接文本替换成图片:
<a href="javascript: {ddwrt:GenFireServerEvent(concat('__cancel;dvt_1_form_editkey={',$KeyValue,'}'))}">update</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>
对于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
相关文章推荐
- SharePoint:扩展DVWP - 第6部分:分析列表表单操作链接
- SharePoint:扩展DVWP - 第10部分:在表单操作工作流中传递工作流变量
- SharePoint:扩展DVWP - 第11部分:在工作流中使用更多的表单字段
- SharePoint:扩展DVWP - 第7部分:创建一个列表表单操作并挂接工作流
- SharePoint:扩展DVWP - 赠送部分:当“找不到匹配项”时修复Insert表单操作
- SharePoint:扩展DVWP - 第4部分:将DVWP操作链接转为按钮
- SharePoint:扩展DVWP - 第29部分:修改Remove模版上的表单操作工作流
- SharePoint:扩展DVWP - 第8部分:挂接了工作流列表表单操作
- SharePoint:扩展DVWP - 第5部分:在保存操作提交前做些事情——PreSaveAction()
- SharePoint:扩展DVWP - 第20部分:使用jQuery实现级联下拉框
- SharePoint:扩展DVWP - 第12部分:从数据源添加更多表单域
- SharePoint:扩展DVWP - 第3部分:把DVWP的功能链接放在同一行中
- 转载:SharePoint:扩展DVWP - 第1部分:布局增强 – 在默认值模板和编辑模板中重新排列栏
- SharePoint:扩展DVWP - 第19部分:可维护的下拉框 - 填充关系列表(下)
- SharePoint:扩展DVWP - 第9部分:噢~设置处理器样式失败
- SharePoint:扩展DVWP - 第30部分:用EasyTabs和筛选使DVWP的数据更具条理
- SharePoint:扩展DVWP - 第33部分:修改DVWP中的合计和分类汇总
- SharePoint:扩展DVWP - 第31部分:在Insert模版上通过jQuery填写默认值
- SharePoint:扩展DVWP - 第15部分:通过网站栏实现可维护的下拉框
- SharePoint:扩展DVWP - 第35部分:把所有的内容串起来