【jQuery】todolist
1
2
3 用npm命令下载依赖,优点:不用去网上找链接,代码都一样
4.jQuery自动下载进node_modules文件下
npm install jquery --save 这句命令的意思是保存,使package.json文件与node_modules同步(save以后dependencies下才有jquery,有利于项目部署,此时若删掉node_modules文件,保留package.json,直接npm install会自动下载相关依赖)
5.把代码写成这种形式,避免直接写到window中(可能将window的属性覆盖)
;(function(){
'use strict'; })();
6.传统reset方法http://meyerweb.com/eric/tools/css/reset/index.html
现采用normalize方法:https://necolas.github.io/normalize.css/(或http://www.bootcdn.cn/normalize/)
其命令为:npm install normalize.css
在html中引用normalize.css时应该放在第一位
7.原理框图如下
8.storejs插件
参考:https://www.awesomes.cn/repo/marcuswestin/store-js
适用于所有浏览器的本地存储,不使用 cookies 或者 flash。会根据浏览器的不同选择 localStorage, globalStorage, 和 userData 作为存储引擎。
store.js 公开了一个简单的接口来实现跨浏览器的本地存储。
// Store 'marcus' at 'username'
store.set('username', 'marcus') // Get 'username'
store.get('username') // Remove 'username'
store.remove('username') // Clear all keys
store.clear() // 存储一个对象字面量 - store.js 内部使用了 JSON.stringify
store.set('user', { name: 'marcus', likes: 'javascript' }) // 获取存储的对象 - store.js 内部使用了 JSON.parse
var user = store.get('user')
alert(user.name + ' likes ' + user.likes) // Get all stored values
store.getAll().user.name == 'marcus' // Loop over all stored values
store.forEach(function(key, val) {
console.log(key, '==', val)
})
在本项目中
function refresh_task_list() {
store.set('task_list',task_list);
render_task_list();
}
function get(index) {
return store.get('task_list')[index];
}
9.datatimepicker插件
参考:http://www.jq22.com/jquery-info332
该插件可以精确到分钟
function render_task_detail(index) {
if(index===undefined||!task_list[index]) return;
var item =task_list[index];
var tpl=
'<form>'+
'<div class="content">'+
(item.content||'')+
'</div>'+
'<div class="input-item"><input style="display: none" type="text" name="content" value="'+item.content+'"></div>'+
'<div>'+
'<div class="desc input-item">'+
'<textarea name="desc">'+(item.desc||'')+'</textarea>'+
'</div>'+
'</div>'+
'<div class="remind input-item">'+
'<label>提醒时间</label>'+
'<input class="datetime" name="remind_date" type="text" value="'+(item.remind_date||'')+'">'+
'</div>'+
'<div input-item><button type="submit">更新</button></div>'+
'</form>'; /*清空task详情模板*/
$task_detail.html(null);
/*使用新模板*/
$task_detail.html(tpl);
$('.datetime').datetimepicker();
/*选中其中的form元素*/
$update_form=$task_detail.find('form');
$task_detail_content=$update_form.find('.content');
$task_detail_content_input=$update_form.find('[name=content]');
/*双击内容元素显示input,隐藏自己*/
$task_detail_content.on('dblclick',function () {
$task_detail_content_input.show();
$task_detail_content.hide();
}) $update_form.on('submit',function (e) {
e.preventDefault();
var data={};
/*获取表单中各个input的值*/
data.content=$(this).find('[name=content]').val();
data.desc=$(this).find('[name=desc]').val();
data.remind_date=$(this).find('[name=remind_date]').val();
update_task(index,data);
hide_task_detail();
})
}
项目中使用到了Deferred(延迟)对象,具体可以参考我的另一篇文章:http://www.cnblogs.com/yujihang/p/6875263.html
【jQuery】todolist的更多相关文章
- 【jQuery】使用JQ来编写面板的淡入淡出效果
本文与上一篇的<[jQuery]使用JQ来编写最主要的淡入淡出效果>(点击打开链接)为姊妹篇. 但上一篇仅仅是对文本的基本控制,本篇则是对面板元素进行控制. 尽管功能上很类似,可是所用到的 ...
- 【jQuery】复选框的全选、反选,推断哪些复选框被选中
本文与<[JavaScript]复选框的全选.反选.推断哪些复选框被选中>(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,相同做到例如以下的效果: 布局还是相同的布局, ...
- js【jquery】 - DOM操作
1.修改元素样式 js方式: var div2 = document.getElementById("") div2.style.width = '200px'; div2.cla ...
- 【jQuery】 实用 js
[jQuery] 实用 js 1. int 处理 parseInt(") // int 转换 isNaN(page) // 判断是否是int类型 2. string 处理 // C# str ...
- 【jQuery】 Ajax
[jQuery] Ajax $.ajax({ type: "Post", // 发包方式 cache: false, // 是否缓存 contentType: "appl ...
- 【jQuery】 常用函数
[jQuery] 常用函数 html() : 获取设置元素内的 html,包含标签 text() : 获取设置元素内的文本, 不包含标签 val() : 获取设置 value 值 attr() : 获 ...
- 【jQuery】 资料
[jQuery] 资料 1. 选择器 http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp 2. 事件 http://www.w3sch ...
- 【jQuery】 效果
[jQuery] 效果 资料 http://www.w3school.com.cn/jquery/jquery_ref_effects.asp 1. 显示隐藏 hide(); 隐藏 show(): 显 ...
- 【jQuery】 选择器
[jQuery] 选择器 资料: w3school http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp 1. 标签选择器 : $(& ...
随机推荐
- 0/1背包问题(DP)
Description 给定 n 个物品和一个背包.物品 i 的重量是 wi ,其价值为 vi ,背包的容量为 C .问:应该如何选择装入背包的物品,使得装入背包中物品的总价值最大? Input 输入 ...
- winform程序限制只能打开一个进程
有很多方案,先来最傻瓜式的 : static class Program { /// <summary> /// 应用程序的主入口点. ...
- [javaSE] 网络编程(URL)
获取URL对象,new出来,构造参数:String的路径 调用URL对象的getProtocal()方法,获取协议 调用URL对象的getHost()方法,获取主机 调用URL对象的getPath() ...
- ios开发 学习积累20161101
20161101 XML的声明 <?XML version="1.0" encoding="UTF-8" ?> XML文档必须有根元素 XML 对大 ...
- Cookie写入之path的坑
问题 我在/page/index/index.html中向浏览器添加了一个useid的cookie(这里没有指定path), 然后试着从/page/demo/demo.html中取值,发现无法取到, ...
- CenOs7安装oracle图文详细过程(01)
原创作品,转载请在文章头部(显眼位置)注明出处:https://www.cnblogs.com/sunshine5683/p/10011441.html 1.检查必要的安装包是否安装 命令脚本: rp ...
- RegExp对象的exec方法
RegExp对象的exec方法和String对象的match方法用法十分相似,分两篇博客讲讲其各自的用法和它们之间的异同. 下一篇讨论match方法的用法和两者的异同. 定义及语法 [定义] exec ...
- 关于npm构建angular2项目问题
我在win10系统下用npm构建好angular2项目之后,在命令行下运行 ng serve --open,报一下错误: Unknown browser query 'basedir=$(dirnam ...
- 转:使用VS Code断点调试PHP
使用VS Code断点调试PHP vs code 使用一款杰出的轻量级代码编辑器,其中的插件工具不胜枚举而且还在不断增加.使用 vs code 调试 PHP 代码更是方便简洁,下面我们来一起看一下. ...
- Angular面试题二
十一.ng-repeat迭代数组的时候,如果数组中有相同值,会有什么问题,如何解决? 会提示 Duplicates in a repeater are not allowed. 加 track by ...