printAreaprintArea 插件在 Web 应用程序也有独特的用途，而且我发现它很有用。其核心是让您能够打印一个特定的 HTML 元素。与在 Web 应用程序上进行打印的其他方式相比，它有一定的优势，原来在 Web 应用程序上打印只能简单调用 window.print() 按钮，然后期待最好的结果。正如所有使用过 Internet 浏览器的人会告诉您的一样，要让两个页面在不同的浏览器上打印的结果完全相同不太可能。而且，若您想要在文本区域内打印出所有的文本，而没有任何其他内容的话，就会出问题。一直到现在，这都非常困难。
正如我之前所述，此插件让您能够打印页面上的一些特定元素，而不会打印除了这些元素之外的其他元素。比如，我就曾经在一个电子邮件应用程序中使用过此插件，在我的应用程序中，我允许用户打印文本区域内所包含的消息。我还在显示报告的页面上使用过它，我不想让这些页面上的各种按钮和图形也与报告一同打印。人们熟悉的另一种情况就是打印飞机票。Web 页面上的机票通常具有很多信息和图形，而打印出来的机票只需包含一个条形码和基本的登机信息。
清单 7. printArea 插件1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <p>An advertisement that you don't want printed out.
<p>Another advertisement that you don't want printed out.
<div id=printable>
<table width=40% cellpadding=3 cellspacing=0 border=1>
<tr><th>Name</th><th>Age</th><th>Height</th></tr>
<tr><td>John Q</td><td>23</td><td>6'1"</td></tr>
<tr><td>Jane Q</td><td>23</td><td>5'1"</td></tr>
<tr><td>Jimmy R</td><td>23</td><td>5'6"</td></tr>
</table>
</div>
<p><input type=button id=printButton value="Print">
<p>All the annoying disclaimer text you don't want printed out.
// Capture the click on the "Print" button. Then, you can call the printArea()
// function on the "printable" div we used to wrap the portion of the page we want
// printed. The only thing that will get printed to the printer will
// be the table, and all the annoying text won't be.
$("#printButton").click(function(){
$("#printable").printArea();
});
|
该插件提供了一种十分简单直观的方式来控制页面上元素的打印。更妙的是，它在 Internet Explorer 和 Firefox 这两种浏览器上都工作得很好，并可用来控制页面如何在这两种浏览器内打印出来，为您去除了许多让人头痛的问题。惟一的一个缺陷是它依赖于用户来按下您设置的 Print 按钮，或者页面上您所能控制的其他区域。如果用户单击了浏览器的 Print 按钮，它就会将用户带回到原来容易出现问题的打印功能。而且麻烦加倍，您将不能停止该打印按钮的执行，甚至会发出有关使用它的警告。所以，您只能期盼用户足够聪明来按下您自己的 Print 按钮。而其他的一些方式，则是简单地进行某些条件下的自动打印，而完全不用用户参与。
AlphaNumericPlus通常，在用户界面设计中，要针对较少的用户假设来编写代码。一个减少用户假设的好例子是表单上文本字段的处理。假设，已经设立了一个字段来获取电话号码，但您知道有些人会输入字母。
您可以在三个地方阻止此不正确的输入。第一个地方是在输入进入数据库之前在服务器端检查错误的输入。因此，可以写一些 Java™ 代码或 PHP 代码来检查所有输入字段并决定哪些字段具有有效输入，哪些字段没有，如果它们无效，则向客户机发送回一个消息。第二层错误检查是用 JavaScript 在客户端进行检查。通过在客户端检查这些条件，就能节省网络流量并能提供给用户更为快速的响应。最后一层错误检查是充分利用 “较少的用户假设” 的 设计模式，该模式不允许用户输入任何坏的信息。我们这里所讨论的例子，为什么还要向服务器发送字母作为电话号码呢？或者为什么还要在提交此表单前让 JavaScript 检查有无字母呢？最好的方案就是根本不让用户键入任何字母。
此插件就是构建在这样的一个理念上，即 Web 应用程序的文本字段应该只接受我认为合适的输入。所以，对于一个只能有数字的字段，我想要我的文本字段只能接受数字。如果我想要它只有字母，它应只能接受字母。您知道我的想法了吧？
清单 8. AlphaNumeric 插件1
2
3
4
5
6
7
| <p>Alpha-only: <input type=text width=20 id=alphaOnly>
<p>Numeric-only: <input type=text width=20 id=numericOnly>
// This code will prevent unworthy characters from being entered
// into our text fields, assuring valid input
$("#alphaOnly").alpha();
$("#numericOnly").numeric();
|
这就是标准 AlphaNumeric 插件的全部了，但是我根据自己的需要对其进行了扩展，所以我将在这里讨论这些附加内容（它们包括在 下载 部分）。我原来想既然我能控制输入只有字母或数字，我应该也能扩展到包括特殊字符，比如 $、% 或 &。有了这种推测，我就能根据它们在表单内的使用将这些特定的规则附加到文本字段。比如，一个被用于电子邮件地址的文本字段应该允许包括标准数字和字母在内的所有字符。所以，一个电子邮件地址字段应该接受 _、-、 @ 和 “.”。所有其他特殊的字符都是无效的，并且如果这些字符用在了电子邮件内，将会导致一个错误，所以我们禁止这些字符的键入。我们能 100% 保证这是一个有效的电子邮件地址么？不能，用户还是会键入可笑的内容，比如 “a@a@.com”，但我们迈出了第一步。
我向标准的 AlphaNumeric 插件添加的功能是用来处理十进制、货币、电子邮件、电话、时钟和日期的。清单 9 所示的就是我的代码。
清单 9. AlphaNumericPlus插件1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| // will only allow numerals and the .
// and , characters (because I'm thinking international
// here, and some countries use a , for a decimal)
$("#decimalOnly").decimal();
// same as the above, but it adds support for the "%"
$("#percentOnly").percent();
// as described above, only allows valid e-mail characters
$("#emailOnly").email();
// allows only numbers and the ( and ) and - characters
$("#phoneOnly").phone();
// allows only numbers and the : character
$("#clockOnly").clock();
// allows only numbers and the / and - characters
$("#dateOnly").date();
// this is the only one that's slightly different, in that
// it requires you to pass in the valid currency symbol, so you can
// pass in a pound sign or euro if you're using this overseas
$("#currencyOnly").currency("$");
|
此 AlphaNumericPlus 插件是防止用户无效输入的第一层保护。通过不允许特定条件下出现无效字符，它不仅能最小化错误的机率，它还迅速向用户强调他们没有输入有效信息。所以，如果一个用户试图在一个电话号码字段输入一个字母，用户立即就会被通知出错了。这种快速响应通常都会备受用户欢迎，因为用户无需等待到处理结束来修复所有错误。
防止出错的第二个层面是基于表单提交的客户端检查。在这种情况下，可以检查数据是不是都处于有效格式；比如，检查电话号码是否具有正确数量的数字。防止出错的最后一个层面是服务器端检查，在此，可以进一步检查格式是否有效，以及针对数据库内已经有的任何内容来检查信息。一个成功的三管齐下的方式才是最好的解决方案，其中由此插件充当第一道防线。虽然不完美（尽管所有字符都有效，您还是能输入一个无效格式），但它毕竟能将反馈立即呈现给用户。 |
