今天没事干,就做了一个记事本。用jQuery-mobile+html5做的,感觉界面做的还行吧,就是没有后台的操作,不过,后台的东西很快就会做完的,今天就把我今天几个小时的成果给大家看一看吧!我直接上代码了,大家看看就行了,前台的东西也不是很难!嘿嘿!
<!DOCTYPE html><html> <head> <title>main</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"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <script type="text/javascript" src="jquery-1.6.4.min.js"></script><link rel="stylesheet" href="jquery.mobile-1.0.min.css" type="text/css"></link><script type="text/javascript" src="jquery.mobile-1.0.min.js"></script></head> <body> <!-- 主页面 --> <section id="page1" data-role="page" > <div data-role="header"> <a href="#about" data-rel="dialog" data-transition="pop" data-role="button">关于</a> <h1>记事本</h1> <a href="#page2" data-transition="slidedown" data-role="button" class="ui-btn-right">编辑</a> </div> <div data-role="content"> <ul data-role="listview"> <li data-role="list-divider">2013/2/1</li> <li><a href="index">题目四</a></li> <li><a href="index">题目三</a></li> <li><a href="index">题目二</a></li> <li data-role="list-divider">2012/1/31</li> <li><a href="index">题目一</a></li> </ul> </div> <div data-role="footer" data-position="fixed"> <h1>IMUDGES</h1> </div> </section> <!-- 编辑界面 --> <div id="page2" data-role="page"> <div data-role="header"> <a data-role="button" href="#page1" data-transition="slideup">主页</a> <h1>编辑</h1> <a data-role="button" >保存</a> </div> <div data-role="content"> <label>文本题目:</label> <input type="text" /> <label>输入内容:</label> <textarea style="height: 200px;"></textarea> </div> <div data-role="footer" data-position="fixed"> <h1>IMUDGES</h1> </div> </div> <!-- 关于界面 --> <section 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> </section> </body></html>
下面是效果图:
过几天把后台操作都加上,大家就可以放到自己的手机里可以用了!(这个一直到手机上的话,用phoneGap,这东西挺好用的呦,有时间把这一块东西在和大家分享一下下!呵呵)