提升SharePoint默认的列表表单体验

本文将描述如何通过简单的CSS和jQuery插件提升SharePoint默认的列表表单体验。这些小技巧并不仅仅改善了外观，还提升了可用性。

剩余字数

我们以通知列表为例。通知正文字段假设要求不应该超过200个字符。为了让用户方便的知道什么时候接近字数限制了，我们将在正文字段上设置一个统计剩余字数的脚本。（注意：由于插件针对的对象是textarea标记，所以需要保证正文字段是纯文本格式的。富文本格式在页面中不是使用的textarea标记。）

除了jQuery外，我们的解决方案还会用到char counter插件。

CHAR COUNTER插件介绍

下载jquery.charcounter.js

首先，我们需要添加jQuery和插件的脚本引用。你可以通过插入WebPart的方式去做，但是我发现有时这种方式会出现问题。最简单以及最保险的方式是将脚本直接添加到页面的PlaceHolderAdditionalPageHead里。

为此，我们打开SharePoint Designer 2010，点击“所有文件”下的Lists，找到通知列表。这里要右击NewForm.aspx，选择“在高级模式下编辑文件”。

注意：“在高级模式下编辑文件”是在SharePoint Designer 2010中新增页面编辑功能。通常编辑 Web 部件页时，我们使用默认模式更简单更直观。事实上，默认模式与向 wiki 页中添加内容的操作非常相似。人们可以插入数据视图和表单，键入文本，以及在主内容占位符 (PlaceHolderMain) 中添加其他内容，但页面的其余部分是锁定的，不得编辑。在此模式下，所有自定义内容都只能放在隐藏的 Web 部件里了。因此在默认模式下，无法对页面进行自定义（“unghost”）。

相比之下，在高级模式下，您可以完全自定义页面，也就是说，可以编辑页面上的任何内容。默认情况下，只有网站集管理员能够在高级模式下编辑页面。

继续我们的添加引用操作，在打开的NewForm.aspx里找到PlaceHolderAdditionalPageHead占位符，如下图所示：

在其中添加如下的代码：

1
<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server"> 

2
<!-把脚本和css样式表都放在这里--> 

3
<script type="text/javascript" src="/_layouts/scripts/jquery/jquery-1.4.1.js"></script> 

4
<script type="text/javascript" src="/_layouts/scripts/plugins/jquery.charcounter.js"></script>

引用完所有需要的脚本文件后，我们需要回到SharePoint，在新建页面上为正文字段挂接相应的行为。这里我们可以采用HTML表单WebPart的方式添加所需的JavaScript。

如果默认的列表表单是以对话框的方式打开的，那么就不方便直接进入页面编辑状态了。我们可以通过修改列表设置->高级设置->对话框，关闭对话框方式。

也可以直接输入新建窗体的URL。这里为http://sp2010u/it/Lists/Announcements/NewForm.aspx。

选择网站操作->编辑页面，进入编辑模式。插入一个HTML表单WebPart。打开WebPart属性->“源编辑器”。删除默认的HTML内容。编写如下的JavaScript代码：

01
<script type="text/javascript"> 

02
$(document).ready(function(){ 

03
$("textarea[title='正文']").charCounter(200, { 

04
    classname: "counter", 

05
    format: "剩余 %1 字", 

06
    pulse: false, 

07
    delay: 100 

08
}); 

09
}); 

10
</script>

通过textaarea标记和title属性，我们选中了正文字段。挂接charCounter的语法也很简单。如需了解更多设置，可以参考上面的插件介绍。

另外，我还在其中为字数文本添加了显示样式的css：

01
<style> 

02
.counter{ 

03
    position:relative; 

04
    right:14px; 

05
    top:0; 

06
    color:#555; 

07
    float:right; 

08
    clear:both; 

09
    display:block; 

10
    text-align:right; 

11
    background:#fff; 

12
    width:90px; 

13
    padding:3px; 

14
    border:1px solid #888; 

15
    border-top:0px; 

16
    margin-top:-1px; 

17
    } 

18
</style>

完成后可以把列表表单改回成对话框方式打开。

看一下运行效果：

输入框提示信息

当要求用户在列表表单中输入信息时，最好能够提示用户要输入什么类型的信息。SharePoint自带的功能里，可以为每个字段输入一个描述信息，将显示在输入框下方。如果你需要更加动态的显示一些提示信息，可以用我的这个办法。

首先也是在PlaceHolderAdditionalPageHead占位符里添加jQuery和插件的引用。方法同上。

`1`	`<script` `type="text/javascript"` `src="/_layouts/scripts/plugins/jquery.inputHintBox.js">`

`2`	`</script>`

这里我们用的插件是Input floating hint box

在HTML表单WebPart里添加的JavaScript调用如下，主要是设置位置项和提示的html内容：

01
$(document).ready(function(){ 

02
  
03
$("input[title='标题']").inputHintBox({ 

04
        className:'simple_box', 

05
        html:'这条通知的标题是什么？', 

06
            incrementLeft:-160, 

07
            incrementTop:140 

08
            }); 

09
  
10
});

同样是使用input标记和title属性进行选择。

其中，把提示文字的类设为simple_box，所以在css样式里添加一个简单的样式定义代码：

1
.simple_box{ 

2
    border:1px solid gray; background:url('/_layouts/images/toolgrad.gif'); 

3
    color:#444;padding:7px; 

4
}

看一下运行效果：

水印提示

这里我们用到的插件是TinyWatermark。它可以为我们的列表表单中的输入控件添加水印提示。水印是增加SharePoint窗体易用性的很好的方法。

我们继续在前面的窗体上做测试。首先也是在PlaceHolderAdditionalPageHead占位符里添加jQuery和插件的引用。方法同上。

`1`	`<script` `type="text/javascript"` `src="/_layouts/scripts/plugins/jquery.tinywatermark-2.0.0.js">`

`2`	`</script>`

在HTML表单WebPart里添加的JavaScript调用如下，主要是选择字段和添加水印提示的内容。内容可以直接传一个字符串，或者通过jQuery获取某个属性值(如title)：

1
$(document).ready(function(){ 

2
    var t=$("input[title='标题']"); 

3
    t.watermark('watermark',t.attr('title')); 

4
    $("textarea[title='正文']").watermark('watermark','请输入正文内容'); 

5
});

其中，把提示文字的类设为watermark，所以在css样式里添加一个简单的样式定义代码：

`1`	`.watermark {color:#999;}`

看一下运行效果：

参考资料

Improving #SharePoint Forms-Hints

Improving #SharePoint Forms-Watermarks

Improving #SharePoint Forms-Character Count