83-解决方案

选择背景色：黄橙洋红淡粉水蓝草绿白色选择字体：宋体黑体微软雅黑楷体选择字体大小：小中大特恢复默认

5.20.2　解决方案

你可以构建一个不具备浮华外观的网站，然后以无干扰的方式添加JavaScript功能：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
　　 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
　　 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
　　 <meta http-equiv="Content-Language" content="en-us" />
　　 <title>Task List</title>
　　 <script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js">
　　 </script>
　　 <script type="text/javascript">
　　　　　$(document).ready( function() {
　　　　　　　 var url = $('form').attr('action');
　　　　　　　 $(':checkbox').click(function() {
　　　　　　　　　　$.post(url, this.name + '=1');
　　　　　　　　　　$(this).parent().slideUp(function() {
　　　　　　　　　　　　 $(this).remove();
　　　　　　　　　　});
　　　　　　　 });
　　　　　　　 $(':submit').hide();
　　　　　});
　　 </script>
</head>
<body>
<form method="post" action="tasklist.html">
　　 <ul>
　　　　　<li>
　　　　　　　 <input type="checkbox" name="task1" id="task1" />
　　　　　　　 <label for="task1">Learn jQuery</label>
　　　　　</li>
　　　　　<li>
　　　　　　　 <input type="checkbox" name="task2" id="task2" />
　　　　　　　 <label for="task2">Learn Progressive Enhancement</label>
　　　　　</li>
　　　　　<li>
　　　　　　　 <input type="checkbox" name="task3" id="task3" />
　　　　　　　 <label for="task3">Build Great Websites</label>
　　　　　</li>
　　 </ul>
　　 <input type="submit" value="Mark Complete" />
</form>
</body>
</html>

这个页面的输入表单不需要JavaScript>。用户登记已经完成的任务并提交表单，然后由服务器加载一个新页面，将完成的任务从列表中删除。

现在，可以用jQuery对该页面进行渐进增强：为复选框绑定一个事件处理程序，获得表单的提交URL并生成说明复选框选中的POST数据，模拟标准表单提交。然后，制作删除任务的动画为用户提供反馈。因为标记任务结束已经成为瞬时就能完成的任务，所以还隐藏了提交按钮。

Previous 上一篇本节目录 Next 下一篇

83-解决方案

5.20.2 解决方案

5.20.2　解决方案