请选择 进入手机版 | 继续访问电脑版
设为首页收藏本站

亿仁网

 找回密码
 立即注册

扫一扫,访问微社区

QQ登录

只需一步,快速开始

搜索
热搜: 活动 交友 discuz
查看: 463|回复: 0

待办事项列表页

[复制链接]
  • TA的每日心情
    奋斗
    2019-3-14 22:24
  • 签到天数: 160 天

    [LV.7]常住居民III

    1074

    主题

    1139

    帖子

    1万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    18046
    发表于 2017-6-16 11:36:58 | 显示全部楼层 |阅读模式

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

    在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文件,和在登录页单击“登录”按钮后的效果一致。如图所示。

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    造物之前,必先造人。
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|手机版|小黑屋|亿仁网 ( 粤ICP备16098737  

    GMT+8, 2021-3-8 11:07 , Processed in 0.075735 second(s), 27 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表