今天没事干,就做了一个记事本。用jQuery-mobile+html5做的,感觉界面做的还行吧,就是没有后台的操作,不过,后台的东西很快就会做完的,今天就把我今天几个小时的成果给大家看一看吧!我直接上代码了,大家看看就行了,前台的东西也不是很难!嘿嘿!(今天,文章更新一下,以前的界面做的还不是怎么样,原因是jQuery mobile中的图片没加进去,后来弄进去了,这样的话,界面就好看多了!)
<!DOCTYPE html>
<html>
<head>
<title>main.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.8.2.min.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" type="text/css"></link>
<script type="text/javascript" src="jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<link rel="stylesheet" href="main.css" type="text/css"></link>
<body>
<!-- 主页面 -->
<div id="page1" data-role="page" >
<div data-role="header" data-position="inline">
<a href="#about" data-rel="dialog" data-transition="pop" data-icon="info">关于</a>
<h1>记事本</h1>
<a href="#page2" data-transition="slidedown" data-icon="Plus" class="ui-btn-right">新建</a>
</div>
<div id="xianshi" data-role="content">
<ul data-role="listview">
<li data-role="list-divider" id="time" ></li>
<li id="content"><a id="neirong" href="#page3" ></a></li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<h1>IMUDGES</h1>
</div>
</div>
<!-- 编辑界面 -->
<div id="page2" data-role="page">
<div data-role="header">
<a data-icon="back" href="#page1" data-transition="slideup">返回</a>
<h1>编辑</h1>
<a data-icon="check" id="save">保存</a>
</div>
<div data-role="content">
<label>文本题目:</label>
<input type="text" id="texttheme" data-theme="a"/>
<label>输入内容:</label>
<textarea style="height: 200px;" id="textcontent" data-theme="a"></textarea>
</div>
<div data-role="footer" data-position="fixed" data-position="inline">
<h1>IMUDGES</h1>
</div>
</div>
<!-- 打开内容界面 -->
<div id="page3" data-role="page">
<div data-role="header">
<a data-icon="back" href="#page1" data-transition="slideup">返回</a>
<h1>编辑</h1>
<a data-icon="gear" id="gear" href="#bianjihuoshanchu" data-rel="dialog" data-transition="pop" data-icon="info">选项</a>
</div>
<div data-role="content">
<label>文本题目:</label>
<input id="opentexttheme" type="text" data-theme="a" readonly="readonly"/>
<label>文本内容:</label>
<textarea id="opentextcontent" style="height: 200px;" data-theme="a" readonly="readonly"></textarea>
</div>
<div data-role="footer" data-position="fixed" data-position="inline">
<h1>IMUDGES</h1>
</div>
</div>
<!-- 关于界面 -->
<div id="about" data-role="page">
<header data-role="header"><h1>记事本</h1></header>
<div data-role="content" class="content">
<p>本软件由IMUDGES团队blackberry小组所做,所有版权blackberry所有!</p>
</div>
<footer data-role="footer"><h1>IMUDGES</h1></footer>
</div>
<!-- 编辑或删除 -->
<div id="bianjihuoshanchu" data-role="page">
<header data-role="header"><h1>请选择</h1></header>
<div data-role="content" class="content">
<p>请选择你的操作</p>
<div data-inline="true">
<a href="#" id="bianji" data-role="button">编辑</a>
<a href="#" id="shanchu" data-role="button" data-theme="b">删除</a>
</div>
</div>
<footer data-role="footer"><h1>IMUDGES</h1></footer>
</div>
</body>
</html>
下面是效果图:
过几天把后台操作都加上,大家就可以放到自己的手机里可以用了!(这个一直到手机上的话,用phoneGap,这东西挺好用的呦,有时间把这一块东西在和大家分享一下下!呵呵)