jQuery实现一个备忘录

最新推荐文章于 2020-05-10 14:11:07 发布

Freya_yyy

最新推荐文章于 2020-05-10 14:11:07 发布

阅读量1.4k

点赞数 1

分类专栏： jQuery 文章标签： JQuery实现备忘录 js实现弹框

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/Freya_yyy/article/details/86437880

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

使用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。

Freya_yyy

关注

1
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录