这是一个简单的个人任务管理系统,桌面端兼容了IE8+,chrome,firefox等,移动端只是做了一个简单的demo。for_pc中是桌面端的代码,for_mobile中是移动端的代码。
桌面端主界面如下图:
最左边一列是任务分类列表,最上面显示了所有任务的数量,每一个分类后面也显示了该分类下的任务数量。
第一次加载该页面时,会默认选中第一个有任务的分类,并且显示其下面的子任务分类列表。将鼠标划过某一个子任务分类,会出现删除按钮,点击该按钮可以删除该子任务分类及其下面所包括的所有任务数据。点击任何一个分类会展现其包含的所有子分类。
点击选中一个任务分类(否则是默认分类),会弹出提示框来输入任务分类的名字,确认后就在选中的任务分类中增加了一个子任务分类。
点击选择一个子任务分类,点击新增任务按钮,最右侧就会出现新增任务的界面,输入符合要求的标题,任务时间及内容点击确认按钮就可以保存该任务到你选中的子任务分类下。
中间列显示某一个子分类下的所有任务,默认显示所有任务,点击未完成按钮显示该子分类下的所有未完成的任务,点击已完成按钮显示该子分类下的所有已完成的任务。
最右侧默认显示选中的任务内容,点击“勾”型按钮,弹出框提示时候确认完成该任务,点击确认该任务就变成已完成任务。点击编辑按钮,可以重新编辑该任务。
src文件夹中是模块化后的js代码