基于JQuery实现的todolist(1)

前言

利用 jQuery 实现的PC端事务管理应用，能够对事务进行增删改，查看事务的详情信息，标记完成事务以及实现了事务定时提醒的功能。这个项目的数据都存储在localStorage中，所以使用Store.js实现localStorage的读取与存储。在项目开发过程中了解并掌握jQuery的promise机制，以及datetimepicker插件等等。

1. 项目基本环境的部署

• 新建index.html
• 使用npm init 对项目进行初始化，自动添加package.json文件
• 安装JQuery

1. 使用npm install jquery, 会在项目中创建node_modules文件夹，并加入jquery
2. 使用npm install jquery --save,在 package.json文件中添加对jquery库的依赖

node_modules可随时删除，需要恢复时，使用npm install命令即可

• 在index.html中引入jquery.js文件

  
  项目结构

2. 整体结构布局及样式设计

• HTML结构

<div class="container"> 
    <h1>My Todo</h1>
    <div class="add-task">
        <input type="text" placeholder="e.g. 中午记得按时吃饭！">
        <input type="submit" value="submit">
    </div>  
    <div class="task-list">  <!-- 清单列表开始 -->
        <div class="task-item"> <!-- 任务开始 -->
            <span><input type="checkbox"></span>
            <span class="task-content">item content 1</span>
            <span>delete</span>
            <span>detail</span>
        </div> <!-- 任务结束 -->
    </div> <!-- 清单列表结束 -->
    <div class="task-detail"> <!-- 任务详情开始 -->
        <div class="content">
        下午记得买菜
        </div>
        <div class="remark">
            <textarea cols="50" rows="10"></textarea>
        </div>
        <div class="remind"> <!-- 任务提醒开始 -->
            <input type="date">
            <!-- <input type="submit" value="submit"> -->
        </div> <!-- 任务提醒结束 -->
    </div> <!-- 任务详情结束 -->
    <div class="task-detail-mask"></div>
</div>

默认样式

• 样式风格设计
  css代码统一放在了base.css中，这里直接展示添加样式后的效果

style

任务详情放在了弹出层mask中，样式如下：

mask
弹出层的制作可以参考 慕课网\弹出层效果