jQuery Mobile手机网站案例

一、总结

一句话总结：jQuery Mobile是纯手机框架，和amazeui和bootstrap都可以做手机网站。

1、另一款文本编辑器？

jd编辑器

二、jQuery Mobile手机网站案例

1、index.php

 <?php

 include 'common/config.php';

 $sql='select * from message';

 $rst=mysql_query($sql);

 ?>

 <!doctype html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <link rel="stylesheet" href="jm/mobile.css">

     <script src="jm/jquery.js"></script>

     <script src="jm/mobile.js"></script>

   <link rel="stylesheet" href="css/idangerous.swiper.css">

   <link rel="stylesheet" href="css/style.css">

   <link rel="stylesheet" href="css/swiper-demos.css">

   <script src="js/idangerous.swiper-1.9.1.min.js"></script>

   <script src="js/idangerous.swiper.scrollbar-1.2.js"></script>

   <script src="js/swiper-demos.js"></script>

   <style>

     *{

       min-width:0px!important;

       min-height:0px!important;

     }

     .home-device,.swiper-main,.swiper-container,.swiper1,.swiper-wrapper,.swiper-slide{

       width:100%;

       overflow:hidden;

     }

     *{

       font-family: 微软雅黑;

     }

   </style>

 </head>

 <body>

     <div data-role="page" id="pageone">

       <div data-role="header">

         <h1>手机动漫</h1>

         <div data-role="navbar">

            <ul>

              <li><a href="#a" data-theme='b' data-icon="home" data-rel='dialog'>查看动漫</a></li>

              <li><a href="add.php" data-theme='b' data-icon='grid' data-rel='dialog'>发布动漫</a></li>

            </ul>

          </div>

       </div>

       <div data-role="content">

         <div class="home-device"><a class="arrow-left" href="#"></a> <a class="arrow-right" href="#"></a>

           <div class="swiper-main">

             <div class="swiper-container swiper1">

               <div class="swiper-wrapper">

                 <div class="swiper-slide"> <img src="data:images/slider1-1.jpg" width='100%'> </div>

                 <div class="swiper-slide"> <img src="data:images/slider1-2.jpg" width='100%'> </div>

               </div>

             </div>

           </div>

           <div class="pagination pagination1"></div>

         </div>

         <p>国产动画《新大头儿子和小头爸爸》已于2013年11月28日晚20：00在中央电视台少儿频道《银河剧场》栏目首播。这部动画由诸多微小而有趣的故事组成，是一部很适合中国孩子观看的动画片。大头儿子、是个活泼可爱的大头的小孩，小头爸爸、是个给予大头儿子的是想象力的满足和对他一颗童心的一位好爸爸，围裙妈妈是一个有洁癖，但却很关心大头儿子和小头爸爸的一位家庭主妇，这三个人组成了一个三口之家，他们是中国现代家庭教育典型的缩影。这是一个普通而又平凡的家庭，但它所具有的特质是任何一个家庭都不具备的，因为它是由强烈的现实性与浓郁的幻想性所构成的。</p>

       </div>

       <div data-role="footer">

         <h1>www.lampym.com</h1>

       </div>

     </div> 

     <div data-role='page' id='a'>

       <div data-role='header' data-theme='b'>

           <h1>查看动漫</h1>

       </div>

       <div data-role='content' data-theme='a'>

         <ul data-role="listview" data-inset="true" data-theme='e'>

           <?php

             while($row=mysql_fetch_assoc($rst)){

               echo "<li><a href=''>{$row['title']}</a></li>";

             }

           ?>

         </ul>

       </div>

       <div data-role='footer' data-theme='b'>

         <h1>www.lampym.com</h1>

       </div>

     </div>

     <div data-role='page' id='b'>

       <div data-role='header' data-theme='b'>

           <h1>发布动漫</h1>

       </div>

       <div data-role='content' data-theme='a'>

       </div>

       <div data-role='footer' data-theme='b'>

         <h1>www.lampym.com</h1>

       </div>

     </div>

 </body>

 <script>

 function size(){

   h=$('.swiper-slide img').eq(0).height();

   $('.swiper-slide').height(h);

   $('.swiper-slide').parentsUntil('.home-device').height(h);

 }

 $(window).load(function(){

   size();

 });

 $(window).resize(function(){

   size();

 });

 $(window).on("orientationchange",function(){

   size();

 });

 </script>

 </html>

2、add.php

 <!doctype html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <link rel="stylesheet" href="jm/mobile.css">

     <script src="jm/jquery.js"></script>

     <script src="jm/mobile.js"></script>

   <style>

     *{

       font-family: 微软雅黑;

     }

     #content{

       height:100px!important;

     }

   </style>

 </head>

 <body>

     <div data-role="page" id="pageone">

       <div data-role='header'>

         <h1>发布动漫</h1>

       </div>

       <div data-role="content">

         <form action="insert.php" method='post' data-transition="slide" data-ajax='false'>

           <label for="username">发布者:</label>

           <input type="text" name='username' id='username'>

           <label for="title">动漫标题:</label>

           <input type="text" name='title' id='title'>

           <label for="content">动漫内容:</label>

           <textarea name="content" id="content" rows='10'></textarea>

           <input type="submit" data-role='button' value='提交' data-inline='true' data-theme='b'>

           <input type="reset" data-role='button' value='取消' data-inline='true' data-theme='e'>

         </form>

       </div>

       <div data-role="footer">

         <h1>www.lampym.com</h1>

       </div>

     </div>

 </body>

 </html>

3、insert.php

 <?php

 include 'common/config.php';

 $username=$_POST['username'];

 $time=time();

 $title=$_POST['title'];

 $content=$_POST['content'];

 $sql="insert into message(username,title,content,time) values('{$username}','{$title}','{$content}','{$time}')";

 if(mysql_query($sql)){

     header('location:/lampweb');

 }

 ?>
 
 
 
 

jQuery Mobile手机网站案例的更多相关文章

  1. jquery.mobile手机网页简要

    先上最终效果: 最近做了一个用手机浏览器访问的web应用,采用较流行的HTML5,为了提高开发效率节省时间决定采用现有开源框架,免去了自己做设计与兼容性. 一些比较优秀的框架:10大优秀的移动Web应 ...

  2. 手机新闻网站,手持移动新闻,手机报client,jQuery Mobile手机新闻网站,手机新闻网站demo,新闻阅读器开发

    我们坐在地铁.经常拿出新浪手机查看新闻.腾讯新闻,或者看新闻,等刷微信功能.你有没有想过如何实现这些目标. 移动互联网.更活泼. 由于HTML5未来,jQuery Moblie未来. 今天我用jqm的 ...

  3. 手机新闻网站,掌上移动新闻,手机报client,jQuery Mobile手机新闻网站,手机新闻网站demo,新闻阅读器开发

    我们坐在地铁,经常来查看新浪手机新闻,腾讯新闻.或者刷微信看新闻更多功能.你有没有想过如何实现这些目标.移动互联网,更活泼. 因为HTML5到,jQuery Moblie到.今天我用jqm为了给你一个 ...

  4. jQuery Mobile学习日记

    本次主讲人是王思伦啦啦啦~ 框架特性 jQuery Mobile 以“Write Less, Do More”作为目标,为所有的主流移动操作系统平台提供了高度统一的 UI 框架:jQuery 的移动框 ...

  5. jQuery Mobile中文手册：开发入门

    jQuery Mobile 以“Write Less, Do More”作为目标,为所有的主流移动操作系统平台提供了高度统一的 UI 框架:jQuery 的移动框架可以让你为所有流行的移动平台设计一个 ...

  6. 18个jQuery Mobile开发贴士和教程

    jQuery Mobile 是 jQuery 在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架.支持 ...

  7. jQuery Mobile案例,最近用Moon.Web和Moon.Orm做了一套系统

      一.简介 先说说,我们的主题.jQuery Mobile,最近用Moon.Web和Moon.Orm做了一套系统 jQuery Mobile是jQuery 在手机上和平板设备上的版本.jQuery ...

  8. 【学习】一本案例驱动的jQuery Mobile入门书

    清华大学出版社推出的<构建跨平台APP:jQuery Mobile移动应用实战> 提供的全是jQuery Mobile的案例: 手机入侵 题库应用 音乐专辑 通讯录 新闻列表 销售排名 九 ...

  9. SharePoint之使用Jquery Mobile定制自己的手机页面

    最近一直很忙,既要创业,又要工作,还有弄弄自己的小项目(已暂停,http://www.codelove1314.com/,如果你不愿意浪费你的业余时间,喜欢弄点小东西,请联系我),所以虽然有很多东西分 ...

随机推荐

  1. 洛谷 P3955 图书管理员【民间数据】

    P3955 图书管理员[民间数据] 题目背景 数据已再次修正 (既然你们不要前导0我就去掉了) 题目描述 图书馆中每本书都有一个图书编码,可以用于快速检索图书,这个图书编码是一个 正整数. 每位借书的 ...

  2. eclipse中导入zico Maven项目

    zico源代码地址:https://github.com/jitlogic/zico 简单的说,git上同步的源代码需要先进行maven编译,然后导入eclipse. 如果没有配置好maven,请参考 ...

  3. ASP.NET MVC案例教程（基于ASP.NET MVC beta）——第五篇：MVC整合Ajax

    摘要      本文将从完成“输入数据验证”这个功能出发,逐渐展开ASP.NET MVC与Ajax结合的方法.首先,本文将使用ASP.NET MVC提供的同步方式完成数据验证.而后,将分别结合ASP. ...

  4. Web应用开发（Servlet+html+Mysql）入门小示例

    在安装好eclipse并配置完安装环境.安装好tomcat的前提下: 1.新建Dynamic Web Project,选择好运行的tomcat服务器版本等:2.在WebContent下:   新建fo ...

  5. 原生js大总结十

    91.ajax的优点     a.提高运行效率   b.提高用户体验,让多件事情同时发生   c.在不刷新页面的情况下可以对局部数据进行加载和刷新       92.ajax请求的流程   1.创建通 ...

  6. 【CS Round #46 (Div. 1.5) B】Letters Deque

    [链接]h在这里写链接 [题意] 让你把一个正方形A竖直或水平翻转. 问你翻转一次能不能把A翻转成B [题解] 有说一定要恰好为1次. 并不是说A和B相同就一定不行. [错的次数] 2 [反思] 自己 ...

  7. 洛谷——U10223 Cx大帝远征埃及

    https://www.luogu.org/problem/show?pid=U10223#sub 题目背景 众所周知,Cx是一个宇宙大犇.Cx能文善武,一直在为大一统的实现而努力奋斗着.Cx将调用他 ...

  8. 编程——C语言的问题,堆栈

    堆和栈的区别一.预备知识—程序的内存分配一个由c/C++编译的程序占用的内存分为以下几个部分 1.栈区(stack)— 由编译器自动分配释放 ,存放函数的参数值,局部变量的值等.其操作方式类似于数据结 ...

  9. DB2学习总结（1）——DB2数据库基础入门

    DB2的特性 完全Web使能的:可以利用HTTP来发送询问给服务器. 高度可缩放和可靠:高负荷时可利用多处理器和大内存,可以跨服务器地分布数据库和数据负荷:能够以最小的数据丢失快速地恢复,提供多种备份 ...

  10. Android 用SQLite 使用 CursorLoader 中的数据填充列表视图

    我做了简单的测试应用程序基于此示例.有一个按钮,插入到数据库和列表视图的数据.都是在 MainActivity 中.在原来的代码是restartLoader() 仅从调用 onResume() ,但它 ...