<!DOCTYPE html>
<html>
<head>
<title>记事本NoteApp实战</title>
<!--最佳化屏幕宽度-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<!--引用jQuery Mobile函数库 应用ThemeRoller制作的样式-->
<link rel="stylesheet" href="themes/sweet.min.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="jquery/jquery.mobile.structure-1.4.2.min.css" />
<script src="jquery/jquery-1.9.1.min.js"></script>
<script src="jquery/jquery.mobile-1.4.0.min.js"></script>
<style>
#header{height:50px;font-size:25px;font-family:"微软雅黑"}
.css_btn_class {
float: left;
padding: 0.6em;
position:relative;
display:block;
z-index:10;
font-size:16px;
font-family:Arial;
font-weight:normal;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
border:1px solid #e65f44;
padding:8px 18px;
text-decoration:none;
background:-moz-linear-gradient( center top, #f0c911 5%, #f2ab1e 100% );
background:-ms-linear-gradient( top, #f0c911 5%, #f2ab1e 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0c911', endColorstr='#f2ab1e');
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #f0c911), color-stop(100%, #f2ab1e) );
background-color:#f0c911;
color:#c92200;
text-shadow:1px 1px 0px #ded17c;
-webkit-box-shadow:inset 1px 1px 0px 0px #f9eca0;
-moz-box-shadow:inset 1px 1px 0px 0px #f9eca0;
box-shadow:inset 1px 1px 0px 0px #f9eca0;
}.css_btn_class:hover {
background:-moz-linear-gradient( center top, #f2ab1e 5%, #f0c911 100% );
background:-ms-linear-gradient( top, #f2ab1e 5%, #f0c911 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2ab1e', endColorstr='#f0c911');
background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #f2ab1e), color-stop(100%, #f0c911) );
background-color:#f2ab1e;
}.css_btn_class:active {
position:relative;
top:1px;
}
</style>
<script type="text/javascript">
var db;
$(function(){
//打开数据库
var dbSize=2*1024*1024;
db = openDatabase('todo', '', '', dbSize);
db.transaction(function(tx){
//创建数据表
tx.executeSql("CREATE TABLE IF NOT EXISTS notes (id integer PRIMARY KEY,title char(50),inputMemo text,last_date datetime)");
});
//显示列表
noteList();
//显示新增页面
$("#new").on("click",addnew);
function addnew(){
$.mobile.changePage("#addNote",{});
}
$("#addNote").on("pageshow",function(){
$("#inputMemo").val("");
$("#title").val("");
$("#title").focus();
});
//新增
$("#save").on("click",save);
function save(){
var title = $("#title").val();
var inputMemo = $("#inputMemo").val();
db.transaction(function(tx){
//新增数据
tx.executeSql("INSERT INTO notes(title,inputMemo,last_date) values(?,?,datetime('now', 'localtime'))",[title,inputMemo],function(tx, result){
$('.ui-dialog').dialog('close');
noteList();
},function(e){
alert("新增数据错误:"+e.message)
});
});
}
//显示详细信息
$('#list').on('click', 'li',show);
function show(){
$("#viewTitle").html("");
$("#viewMemo").html("");
var value=parseInt($(this).attr('id'));
db.transaction(function(tx){
//显示customer数据表全部数据
tx.executeSql("SELECT id,title,inputMemo,last_date FROM notes where id=?",[value], function(tx, result){
if(result.rows.length>0){
for(var i = 0; i < result.rows.length; i++){
item = result.rows.item(i);
$("#viewTitle").html(item["title"]);
$("#viewMemo").html(item["inputMemo"]);
$("#last_date").html("创建日期："+item["last_date"]);
}
}
$.mobile.changePage("#viewNote",{});
},function(e){
alert("SELECT语法出错了!"+e.message)
});
});
}
//显示list刪除按钮
$("#del").on("click",showdelbtn);
function showdelbtn(){
if($("button").length<=0){
var DeleteBtn = $("<button class='css_btn_class'>Delete</button>");
$("li:visible").before(DeleteBtn);
}
}
//单击list刪除按钮
$("#home").on('click','.css_btn_class', function(){
if(confirm("确定要执行刪除?")){
var value=$(this).next("li").attr("id");
db.transaction(function(tx){
//显示customer数据表全部数据
tx.executeSql("DELETE FROM notes WHERE id=?",[value], function(tx, result){
noteList();
},function(e){
alert("DELETE语法出错了!"+e.message)
$("button").remove();
});
});
}
});
//列表
function noteList(){
$("ul").empty();
var note="";
db.transaction(function(tx){
//显示notes数据表全部数据
tx.executeSql("SELECT id,title,inputMemo,last_date FROM notes",[], function(tx, result){
if(result.rows.length>0){
for(var i = 0; i < result.rows.length; i++){
item = result.rows.item(i);
note+="<li id="+item["id"]+"><a href='#'><h3>"+item["title"]+"</h3><p>"+item["inputMemo"]+"</p></a></li>";
}
}
$("#list").append(note);
$("#list").listview('refresh');
},function(e){
alert("SELECT语法出错了!"+e.message)
});
});
}
});
</script>
</head>
<body>
<!--首页记事列表-->
<div data-role="page" id="home">
<div data-role="header" id="header">
<a href="#" data-icon="delete" id="del">刪除</a>
<h1>备忘记事本</h1>
<a href="#" data-icon="plus" class="ui-btn-right" id="new">新增记事</a></div>
<div data-role="content">
<ul id="list" data-role="listview" data-inset="true" data-filter="true" data-filter-placeholder="快速搜索"></ul>
</div>
</div>
<!--新增记事-->
<div data-role="dialog" id="addNote">
<div data-role="header">
<h1>新增记事</h1>
</div>
<div data-role="content">
<input type="text" id="title">
<textarea cols="40" rows="8" id="inputMemo"></textarea>
<hr>
<a href="#" data-role="button" id="save">保存</a> </div>
</div>
<!--记事详细信息-->
<div data-role="dialog" id="viewNote">
<div data-role="header">
<h1 id="viewTitle">记事</h1>
</div>
<div data-role="content">
<p id="viewMemo">内容</p>
</div>
<div data-role="footer">
<p id="last_date">日期</p>
</div>
</div>
</body>
</html>
《HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站》源码
2星 需积分: 50 55 浏览量
2018-02-11
13:36:01
上传
评论 8
收藏 44.16MB ZIP 举报 
《HTML5+CSS3+jQuery Mobile轻松构造APP与移动网站》源码 （682个子文件） 
all-wcprops 530B todonote.apk 518KB jquery.mobile-1.4.0.min.css 216KB jquery.mobile-1.4.0.min.css 216KB jquery.mobile-1.4.0.min.css 216KB jquery.mobile.icons.min.css 136KB jquery.mobile.icons.min.css 136KB jquery.mobile.icons.min.css 124KB jquery.mobile.structure-1.4.2.min.css 67KB jquery.mobile.structure-1.1.1.min.css 40KB mytheme.css 37KB mytheme.css 25KB mytheme.css 25KB mytheme.css 23KB mytheme.min.css 20KB sweet.css 19KB mytheme.min.css 18KB mytheme.min.css 18KB sweet.min.css 15KB mytheme.min.css 13KB fullcalendar.css 11KB color.css 2KB style.css 2KB jquery.mobile.datepicker.css 1KB cart_color.css 1KB style.css 912B fullcalendar.print.css 668B color.css 563B test.css 74B my.cur 7KB my.cur 7KB my.cur 7KB Thumbs.db 113KB Thumbs.db 113KB Thumbs.db 45KB Thumbs.db 45KB Thumbs.db 27KB entries 1KB
bg_1.gif 10KB bg_1.gif 10KB ajax-loader.gif 8KB ajax-loader.gif 8KB ajax-loader.gif 6KB ajax-loader.gif 6KB ajax-loader.gif 6KB ajax-loader.gif 6KB main.gif 3KB main.gif 3KB flash.gif 3KB flash.gif 3KB message.gif 2KB message.gif 2KB music.gif 2KB music.gif 2KB movie.gif 2KB movie.gif 2KB butterfly1.gif 1KB dot.gif 285B bg.gif 64B asc.gif 54B desc.gif 54B ch16_01.htm 5KB ch16_03.htm 4KB ch13_03.htm 3KB ch05_05.htm 3KB ch13_05.htm 3KB ch14_04.htm 2KB ch13_02.htm 2KB 背包客旅行札记-CSS版.htm 2KB ch08_06.htm 2KB ch16_02.htm 2KB ch03_08.htm 2KB ch12_02.htm 2KB ch14_03.htm 2KB ch11_04.htm 2KB index.htm 2KB ch05_03.htm 2KB ch13_01.htm 1KB ch12_01.htm 1KB ch12_06.htm 1KB ch11_02.htm 1KB ch07_07.htm 1KB ch10_05.htm 1KB message.htm 1KB message.htm 1KB ch14_02.htm 1KB ch05_02.htm 1KB ch11_01.htm 1KB index.htm 1KB ch12_04.htm 1KB ch11_03.htm 1KB ch12_03.htm 1KB ch12_05.htm 1KB ch13_07.htm 1KB music.htm 1KB music.htm 1KB ch14_01.htm 1KB movie.htm 1KB movie.htm 1KB page_initialize.htm 1001B共 682 条
- 1
- 2
- 3
- 4
- 5
- 6
- 7
资源评论
silimade72019-03-23还可以学习一下，
Ali_HuAli_Hu2018-07-02不太好，太过于简陋
地中海的美丽2018-11-26不太好，太过于简陋
qq_37868272
- 粉丝: 1
- 资源: 4
最新资源
- apk.tw_LineLite_v8a_v.2.17.1_sign.apk
- Elasticsearch实战：构建高效搜索系统的秘诀.zip
- HTML+CSS+JS网页设计：从入门到精通.zip
- 数据库课程设计：从理论到实践的全面指南.zip
- Python闭包：深入理解与应用场景解析.zip
- Win64OpenSSL-3-3-0.exe
- 课高分程设计-基于C++实现的民航飞行与地图简易管理系统-南京航空航天大学
- 航天器遥测数据故障检测系统python源码+文档说明+数据库(课程设计)
- 北京航空航天大学操作系统课设+ppt+实验报告
- 基于Vue+Echarts实现风力发电机中传感器的数据展示监控可视化系统+源代码+文档说明(高分课程设计)
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
