前言
利用 jQuery 實(shí)現(xiàn)的PC端事務(wù)管理應(yīng)用，能夠?qū)κ聞?wù)進(jìn)行增刪改，查看事務(wù)的詳情信息，標(biāo)記完成事務(wù)以及實(shí)現(xiàn)了事務(wù)定時提醒的功能柏腻。這個項(xiàng)目的數(shù)據(jù)都存儲在localStorage中，所以使用Store.js實(shí)現(xiàn)localStorage的讀取與存儲系吭。在項(xiàng)目開發(fā)過程中了解并掌握jQuery的promise機(jī)制五嫂，以及datetimepicker插件等等。
1. 項(xiàng)目基本環(huán)境的部署
- 新建index.html
- 使用npm init 對項(xiàng)目進(jìn)行初始化肯尺，自動添加package.json文件
- 安裝JQuery
- 使用npm install jquery, 會在項(xiàng)目中創(chuàng)建node_modules文件夾沃缘，并加入jquery
- 使用npm install jquery --save,在 package.json文件中添加對jquery庫的依賴
node_modules可隨時刪除，需要恢復(fù)時蟆盹，使用npm install命令即可
-
在index.html中引入jquery.js文件
項(xiàng)目結(jié)構(gòu)
2. 整體結(jié)構(gòu)布局及樣式設(shè)計
- HTML結(jié)構(gòu)
<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"> <!-- 任務(wù)開始 -->
<span><input type="checkbox"></span>
<span class="task-content">item content 1</span>
<span>delete</span>
<span>detail</span>
</div> <!-- 任務(wù)結(jié)束 -->
</div> <!-- 清單列表結(jié)束 -->
<div class="task-detail"> <!-- 任務(wù)詳情開始 -->
<div class="content">
下午記得買菜
</div>
<div class="remark">
<textarea cols="50" rows="10"></textarea>
</div>
<div class="remind"> <!-- 任務(wù)提醒開始 -->
<input type="date">
<!-- <input type="submit" value="submit"> -->
</div> <!-- 任務(wù)提醒結(jié)束 -->
</div> <!-- 任務(wù)詳情結(jié)束 -->
<div class="task-detail-mask"></div>
</div>
默認(rèn)樣式
-
樣式風(fēng)格設(shè)計
css代碼統(tǒng)一放在了base.css中，這里直接展示添加樣式后的效果
style
任務(wù)詳情放在了彈出層mask中逾滥，樣式如下：
mask
彈出層的制作可以參考 慕課網(wǎng)\彈出層效果
