基于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结构

 
    
My Todo
    

        
        
    
  
    
  
        
 
            
            item content 1
            delete
            detail
        
 
    
 
    
 
        

        下午记得买菜
        
        

            
        
        
 
            
            
        
 
    
 
    

默认样式

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

style

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

mask

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