前言
利用 jQuery 实现的PC端事务管理应用，能够对事务进行增删改，查看事务的详情信息，标记完成事务以及实现了事务定时提醒的功能。这个项目的数据都存储在localStorage中，所以使用Store.js实现localStorage的读取与存储。在项目开发过程中了解并掌握jQuery的promise机制，以及datetimepicker插件等等。
1. 项目基本环境的部署
- 新建index.html
- 使用npm init 对项目进行初始化，自动添加package.json文件
- 安装JQuery
- 使用npm install jquery, 会在项目中创建node_modules文件夹，并加入jquery
- 使用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
弹出层的制作可以参考 慕课网\弹出层效果
