待办事项列表页

edu83

快速搭建了一个简单的用户登录页面。当用户输入手机号和密码并单击“登录”按钮后，会进入待办事项列表页。根据交互设计可知，用户可以在这个页面查看各种事项的历史记录列表，通过单击“开始记录”按钮或者列表上的任意一行进入待办事项的详情页。

在login.html同级目录下新建list.html页面，基础的html结构、样式表和文件引入和login.html页面一致，可以直接复用，所以这里不再叙述。

页面分为两部分，第一部分是用户新增记录的人口，为一个单独的按钮。这一部分的核心代码如下：

1.         <div class="page_title">
   
2.                 待办事项
   
3.         </div>
   
4.     <div class="weui_cells_title">记录</div>
   
5.         <div class="weui_btn_area">
   
6.         <a class="weui_btn weui_btn_primary" href="./detail.html">开始记录</a>
   
7.     </div>

复制代码

页面的第二部分则是根据日期进行分组显示的待办事项列表，主要还是用到了cell结构。其中的每一行都会标识当前事项的状态。这一部分的核心代码如下：

1.     <div class="weui_cells_title">2017年06月16日</div>
   
2.     <div class="weui_cells weui_cells_access">
   
3.         <a class="weui_cell" href="javascript:;">
   
4.             <div class="weui_cell_bd weui_cell_primary">
   
5.                 <p>取照片</p>
   
6.             </div>
   
7.             <div class="weui_cell_ft"><font color="red">进行中</font></div>
   
8.         </a>
   
9.         <a class="weui_cell" href="javascript:;">
   
10.             <div class="weui_cell_bd weui_cell_primary">
    
11.                 <p>超市采购</p>
    
12.             </div>
    
13.             <div class="weui_cell_ft"><font color="red">进行中</font></div>
    
14.         </a>
    
15.          <a class="weui_cell" href="javascript:;">
    
16.             <div class="weui_cell_bd weui_cell_primary">
    
17.                 <p>完成章节编写</p>
    
18.             </div>
    
19.             <div class="weui_cell_ft"><font color="red">进行中</font></div>
    
20.         </a>
    
21.     </div>

复制代码

为了方便使用，通过对页面上a标签增加重定向脚本，用户在单击“开始记录”按钮和列表项时可以进行跳转。这一部分代码如下：

1. <script type="text/javascript" src="../js/jq.js"></script>
   
2. <script type="text/javascript">
   
3.         $(function(){
   
4.         $('a').click(function(){
   
5.             window.location.href = "./detail.html"; // 跳转到详情/编辑页面
   
6.         })
   
7.         })
   
8. </script>

复制代码

完成后，通过游览器直接访问list.html文件，和在登录页单击“登录”按钮后的效果一致。如图所示。