使用jQuery库实现一个纯前端的备忘录,因为没有与后台数据库进行交互,所有备忘信息存储在localStorage,源码中引用了store.js插件实现。
备忘录的主要功能如下:
- 添加待完成事项;
- 待完成事项信息的修改、删除、详情展示及相关备注;
- 实现事项的完成状态;
- 待完成事项的提醒功能;
- 原生js实现弹框。
1.主页面的布局结构如下,其中 页面中的待完成事项的模板渲染、待完成事项的详情渲染均是在js中动态实现。
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>Todo List</title>
<link rel="stylesheet" href="node_modules/normalize.css">
<link rel="stylesheet" type="text/css" href="css/base.css">
<link src="node_modules/jquery-datetimepicker/build/jquery.datetimepicker.min.css">
</head>
<body>
<div class="msg">
<span class="msg-content"></span>
<span class="anchor confirmed">OK</span>
</div>
<div class="container">
<h1>My Memo</h1>
<form class="add-task">
<input type="text"
name="content"
placeholder="e.g.早晨记得读英语!"
autofocus
autocomplete="off"
>
<button type="submit">submit</button>
</form>
<div class="tasks-list">
</div>
<div class="task-detail-mask"></div>
<div class="task-detail">
</div>
</div>
<audio class="alert" src="alert.mp3">这是一个播放器</audio>
<script src="node_modules/_jquery@3.3.1@jquery/dist/jquery.js"></script>
<script src="node_modules/store/store.js"></script>
<script src="node_modules/jquery-datetimepicker/build/jquery.datetimepicker.full.js"></script>
<script type="text/javascript" src="js/base.js"></script>
</body>
</html>
2.页下面主要展示相关页面的功能实现图:
- 备忘录主页面以及添加了六条备忘信息,其中一条已经完成并且显示在列表最下面。选择信息前面的方框可以设置备忘信息状态为已完成,已完成的信息样式会有变化,并且会自动添加到列表的最下面。
- 点击某条备忘录的详情字段,会显示详情页面,详情页面上也可以进行双击title进行修改修改并且添加content的信息,设置提醒时间。更新按钮会进行信息的更新。同时除过详情弹框,页面其余部分被浮层遮盖。
- 点击某条备忘录的删除字段,会出现删除确认弹框,确定按钮会删除相关的备忘信息并且同步到页面,取消按钮或者浮层部位的点击会取消删除操作。同时除过删除弹框,页面其余部分被浮层遮盖。
- 删除第一条备忘信息,并且设置“周一早晨英语课”为完成状态后的页面如下图所示:
- 备忘录的提醒功能:会有文字和铃声提醒,点击“OK”去掉提醒条。
3.下面主要展示用js实现一个弹框功能,其中弹框位置会根据窗口大小移动
function $alert(arg){
if(!arg){
console.error('pop title is required');
}
var conf = {}
,$body = $('body')
, $box
, $mask
, $title
, $content
, $confirm
, $cancel
, dfd
, confirmed
, timer2
;
dfd = $.Deferred();
if(typeof arg =='string')
conf.title = arg;
else{
conf = $.extend(conf, arg);
}
$box = $('<div>'+
'<div class="pop-title">'+ conf.title +'</div>'+
'<div class="pop-content">'+
'<div>'+
'<button style="margin-right: 5px;" class="primary confirm">确定</button>'+
'<button class="cancel">取消</button>'+
'</div>'+
'</div>'+
'</div>')
.css({
color:'#444',
position:'fixed',
width:300,
height:100,
padding:'10px',
background:'#fff',
'border-radius':5,
'box-shadow':'0 1px 2px rgba(0,0,0,.5)'
})
$title = $box.find('.pop-title').css({
padding:'5px 10px',
'font-weight':800,
'font-size':18,
'font-family':'微软雅黑',
'text-align':'center'
})
$content = $box.find('.pop-content').css({
padding:'5px 10px',
'text-align':'center'
})
$confirm = $content.find('button.confirm');
$cancel = $content.find('button.cancel');
$mask = $('<div></div>')
.css({
position:'fixed',
top:0,
bottom:0,
left:0,
right:0,
background:'rgba(0,0,0,.5)',
})
timer2 = setInterval(function(){
if(confirmed!==undefined){
dfd.resolve(confirmed);
clearInterval(timer2);
dismisssAlert();
}
}, 50)
$confirm.on('click',function(){
confirmed = true;
})
$cancel.on('click',function(){
confirmed = false;
})
$mask.on('click',function(){
confirmed = false;
})
function dismisssAlert(){
$mask.remove();
$box.remove();
};
function adjustBoxPosition(){
var window_width = window.innerWidth
,window_height = window.innerHeight
,box_width = $box.width()
,box_height = $box.height()
,move_x
,move_y
;
move_x = (window_width - box_width)/2;
move_y = (window_height - box_height)/2-20;
$box.css({
left: move_x,
top: move_y
})
}
$window.on('resize',function(){
adjustBoxPosition();
})
$mask.appendTo($body);
$box.appendTo($body);
$window.resize();
return dfd.promise();
}
弹窗函数在本例中的使用代码如下:传入arg参数后,当r返回为true后,执行删除备忘录信息的函数deleteTask(index),否则什么都不做。
$alert('确定删除吗?')
.then(function(r){
r ? deleteTask(index) : null;
})
})
4.其余功能的实现步骤基本如下,不再赘述:
- 选取DOM元素
- 绑定监听事件
- 执行相关逻辑操作并进行页面渲染
用jQuery库实现备忘录的这个案列,很适合初学者的基础学习。需要源码的可以访问我的Github。