当前位置: 代码迷 >> 移动开发 >> 用jQuery-mobile作的一个记事本(前台界面)
  详细解决方案

用jQuery-mobile作的一个记事本(前台界面)

热度:2258   发布时间:2013-02-26 00:00:00.0
用jQuery-mobile做的一个记事本(前台界面)

             今天没事干,就做了一个记事本。用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,这东西挺好用的呦,有时间把这一块东西在和大家分享一下下!呵呵)



       

  相关解决方案