jQuery实现一个备忘录

使用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.早晨记得读英语！"autofocusautocomplete="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。

jQuery实现一个备忘录相关推荐

如何使用jquery判断一个元素是否含有一个指定的类（class）
如何使用jquery判断一个元素是否含有一个指定的类(class) 一.总结一句话总结:可以用hasClass方法(专用)和is方法 1.is(expr|obj|ele|fn)的方法几个参数表示什么 ...
【转载】jQuery插件开发精品教程，让你的jQuery提升一个台阶
jQuery插件开发精品教程,让你的jQuery提升一个台阶要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样, ...
解题代码用jquery控制一个按钮当一次点击完之后5 秒后才能继续点击验证码的制作...
解题代码用jquery控制一个按钮当一次点击完之后5 秒后才能继续点击复制验证码的制作转载于:https://www.cnblogs.com/yaomengli/p/6927630.html
html 按下和松开事件,利用JQuery实现一个键盘按下与松开触发事件
利用JQuery实现一个键盘按下与松开触发事件发布时间:2020-11-09 16:14:22 来源:亿速云阅读:105 作者:Leah 这期内容当中小编将会给大家带来有关利用JQuery实现一个 ...
编程判断元素归类_如何使用jquery判断一个元素是否含有一个指定的类（class）...
如何使用jquery判断一个元素是否含有一个指定的类(class) 一.总结一句话总结:可以用hasClass方法(专用)和is方法 1.is(expr|obj|ele|fn)的方法几个参数表示什么 ...
使用jquery打造一个动态的预览产品颜色效果
在浏览一些电子商务网站的时候,选择一件产品的时候,我们经常会看到点击衣服的颜色,同一件衣服的颜色就会切换,让我们觉得真是比较有意思,这样做的效果给用户的体验比较好,今天就给大家分享一下这种效果的实现原 ...
ajax搜索思路,jquery创建一个ajax关键词数据搜索实现思路
在web开发过程当中,我们经常需要在前台页面输入关键词进行数据的搜索,我们通常使用的搜索方式是将搜索结果用另一个页面显示,这样的方式对于搭建高性能网站来说不是最合适的,今天给大家分享一下如何使用 jq ...
类似jquery的一个demo
通过以下的demo,可以大体知道jquery的一些组织结构以及一些实现方法. 实际上jquery就是一个全局变量,只是在这个变量上添加了各种属性和方法. 首先我们要理解什么是匿名函数自执行,简单点就是 ...
使用jQuery开发一个基于HTML5的漂亮图片拖拽上传web应用
昨天我们介绍了一款HTML5文件上传的jQuery插件:jQuery HTML5 uploader,今天我们将开发一个简单的叫upload center的图片上传程序,允许用户使用拖拽方式来上传电脑上 ...
如何使用JavaScript或JQuery检测一个URL文件是否存在?
如何使用JavaScript或JQuery检测一个URL文件是否存在? How do I check if file exists in jQuery or JavaScript? 问题: 如何检查服 ...

jQuery实现一个备忘录

jQuery实现一个备忘录相关推荐

最新文章

热门文章