高级 jQuery：让好的应用程序变成强大的应用程序

核心提示： 记住：如果您的应用程序有多个相互依赖的 Ajax 调用，那么要考虑使用 Ajax Queue 或 Ajax Sync，高级 jQuery：让好的应用程序变成强大的应用程序(9)，第二个示例 Web 应用程序我将使用另一个小部件解决本文的最后 3 个问题，并且在深入研究其代码之前展示和解释它，我添

记住：如果您的应用程序有多个相互依赖的 Ajax 调用，那么要考虑使用 Ajax Queue 或 Ajax Sync。

第二个示例 Web 应用程序

我将使用另一个小部件解决本文的最后 3 个问题，并且在深入研究其代码之前展示和解释它。这个 401k 小部件并不陌生，因为您已经在前面的文章见过它。不过，这回有个微妙的不同之处，因为我在同一个页面上两次添加了这个小部件。它被添加到两个不同的表中。这将带来几个有趣的地方。图 3 显示了这个小部件：

图 3. 401k 小部件

在这个小部件中，我正在做几件事情。第一件是计算文本字段之和并确定它们是否为 100。如果它们的和不为 100，我将向用户显示一个错误，提示他们没有正确使用该小部件。第二，我在每个选项获取输入之后对选项进行排序。通过这种方式，百分比最高的投资分配将一直出现在表的顶部。这可以在图 3 中看到，它按百分比对选项进行排序。最后，为了让它更酷，我添加了一些条带。

用于生产这个小部件的 HTML 代码出奇地简单。清单 8 详细地显示了这个小部件。

清单 8. 生成 401k 小部件的 HTML

<p><table　width=300　class="percentSort"　cellpadding=0　cellspacing=0>　
<tbody>　
　<tr><td>S&P　500　Index</td>　
　<td><input　type=text>　%</td></tr>　
　<tr><td>Russell　2000　Index</td>　
　<td><input　type=text>　%</td></tr>　
　<tr><td>MSCI　International　Index</td>　
　<td><input　type=text>　%</td></tr>　
　<tr><td>MSCI　Emerging　Market　Index</td>　
　<td><input　type=text>　%</td></tr>　
　<tr><td>REIT　Index</td>　
　<td><input　type=text>　%</td></tr>　
</tbody>　
<tfoot>　
</tfoot>　
</table>