jQuery Mobile手機網站案例
一、總結
一句話總結：jQuery Mobile是純手機框架，和amazeui和bootstrap都可以做手機網站。
1、另一款文本編輯器？
jd編輯器
二、jQuery Mobile手機網站案例
1、index.php
1 <?php 2 include 'common/config.php'; 3 4 $sql='select * from message'; 5 6 $rst=mysql_query($sql); 7 8 9 ?> 10 <!doctype html> 11 <html> 12 <head> 13 <meta charset="UTF-8"> 14 <title>index</title> 15 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 16 <link rel="stylesheet" href="jm/mobile.css"> 17 <script src="jm/jquery.js"></script> 18 <script src="jm/mobile.js"></script> 19 <link rel="stylesheet" href="css/idangerous.swiper.css"> 20 <link rel="stylesheet" href="css/style.css"> 21 <link rel="stylesheet" href="css/swiper-demos.css"> 22 <script src="js/idangerous.swiper-1.9.1.min.js"></script> 23 <script src="js/idangerous.swiper.scrollbar-1.2.js"></script> 24 <script src="js/swiper-demos.js"></script> 25 <style> 26 *{ 27 min-width:0px!important; 28 min-height:0px!important; 29 } 30 31 .home-device,.swiper-main,.swiper-container,.swiper1,.swiper-wrapper,.swiper-slide{ 32 width:100%; 33 overflow:hidden; 34 } 35 36 *{ 37 font-family: 微軟雅黑; 38 } 39 </style> 40 </head> 41 <body> 42 <div data-role="page" id="pageone"> 43 <div data-role="header"> 44 <h1>手機動漫</h1> 45 <div data-role="navbar"> 46 <ul> 47 <li><a href="#a" data-theme='b' data-icon="home" data-rel='dialog'>查看動漫</a></li> 48 <li><a href="add.php" data-theme='b' data-icon='grid' data-rel='dialog'>發布動漫</a></li> 49 </ul> 50 </div> 51 </div> 52 53 <div data-role="content"> 54 <div class="home-device"><a class="arrow-left" href="#"></a> <a class="arrow-right" href="#"></a> 55 <div class="swiper-main"> 56 <div class="swiper-container swiper1"> 57 <div class="swiper-wrapper"> 58 <div class="swiper-slide"> <img src="images/slider1-1.jpg" width='100%'> </div> 59 <div class="swiper-slide"> <img src="images/slider1-2.jpg" width='100%'> </div> 60 </div> 61 </div> 62 </div> 63 <div class="pagination pagination1"></div> 64 </div> 65 <p>國產動畫《新大頭兒子和小頭爸爸》已於2013年11月28日晚20：00在中央電視台少兒頻道《銀河劇場》欄目首播。這部動畫由諸多微小而有趣的故事組成，是一部很適合中國孩子觀看的動畫片。大頭兒子、是個活潑可愛的大頭的小孩，小頭爸爸、是個給予大頭兒子的是想象力的滿足和對他一顆童心的一位好爸爸，圍裙媽媽是一個有潔癖，但卻很關心大頭兒子和小頭爸爸的一位家庭主婦，這三個人組成了一個三口之家，他們是中國現代家庭教育典型的縮影。這是一個普通而又平凡的家庭，但它所具有的特質是任何一個家庭都不具備的，因為它是由強烈的現實性與濃郁的幻想性所構成的。</p> 66 </div> 67 68 <div data-role="footer"> 69 <h1>www.lampym.com</h1> 70 </div> 71 </div> 72 73 <div data-role='page' id='a'> 74 <div data-role='header' data-theme='b'> 75 <h1>查看動漫</h1> 76 </div> 77 <div data-role='content' data-theme='a'> 78 <ul data-role="listview" data-inset="true" data-theme='e'> 79 <?php 80 while($row=mysql_fetch_assoc($rst)){ 81 echo "<li><a href=''>{$row['title']}</a></li>"; 82 } 83 ?> 84 85 </ul> 86 </div> 87 <div data-role='footer' data-theme='b'> 88 <h1>www.lampym.com</h1> 89 </div> 90 </div> 91 <div data-role='page' id='b'> 92 <div data-role='header' data-theme='b'> 93 <h1>發布動漫</h1> 94 </div> 95 <div data-role='content' data-theme='a'> 96 97 </div> 98 <div data-role='footer' data-theme='b'> 99 <h1>www.lampym.com</h1> 100 </div> 101 </div> 102 103 </body> 104 <script> 105 function size(){ 106 h=$('.swiper-slide img').eq(0).height(); 107 $('.swiper-slide').height(h); 108 $('.swiper-slide').parentsUntil('.home-device').height(h); 109 } 110 111 $(window).load(function(){ 112 size(); 113 }); 114 115 $(window).resize(function(){ 116 size(); 117 }); 118 119 $(window).on("orientationchange",function(){ 120 size(); 121 }); 122 123 </script> 124 </html>
2、add.php
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>index</title> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="stylesheet" href="jm/mobile.css"> 8 <script src="jm/jquery.js"></script> 9 <script src="jm/mobile.js"></script> 10 <style> 11 *{ 12 font-family: 微軟雅黑; 13 } 14 15 #content{ 16 height:100px!important; 17 } 18 </style> 19 </head> 20 <body> 21 <div data-role="page" id="pageone"> 22 <div data-role='header'> 23 <h1>發布動漫</h1> 24 </div> 25 <div data-role="content"> 26 <form action="insert.php" method='post' data-transition="slide" data-ajax='false'> 27 <label for="username">發布者:</label> 28 <input type="text" name='username' id='username'> 29 30 <label for="title">動漫標題:</label> 31 <input type="text" name='title' id='title'> 32 33 <label for="content">動漫內容:</label> 34 <textarea name="content" id="content" rows='10'></textarea> 35 36 <input type="submit" data-role='button' value='提交' data-inline='true' data-theme='b'> 37 <input type="reset" data-role='button' value='取消' data-inline='true' data-theme='e'> 38 </form> 39 </div> 40 41 <div data-role="footer"> 42 <h1>www.lampym.com</h1> 43 </div> 44 </div> 45 </body> 46 </html>
3、insert.php
1 <?php 2 include 'common/config.php'; 3 4 $username=$_POST['username']; 5 $time=time(); 6 $title=$_POST['title']; 7 $content=$_POST['content']; 8 9 $sql="insert into message(username,title,content,time) values('{$username}','{$title}','{$content}','{$time}')"; 10 if(mysql_query($sql)){ 11 header('location:/lampweb'); 12 } 13 ?>