jQuery Mobile手机网站案例
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手机网站案例的更多相关文章
- jquery.mobile手机网页简要
先上最终效果: 最近做了一个用手机浏览器访问的web应用,采用较流行的HTML5,为了提高开发效率节省时间决定采用现有开源框架,免去了自己做设计与兼容性. 一些比较优秀的框架:10大优秀的移动Web应 ...
- 手机新闻网站,手持移动新闻,手机报client,jQuery Mobile手机新闻网站,手机新闻网站demo,新闻阅读器开发
我们坐在地铁.经常拿出新浪手机查看新闻.腾讯新闻,或者看新闻,等刷微信功能.你有没有想过如何实现这些目标. 移动互联网.更活泼. 由于HTML5未来,jQuery Moblie未来. 今天我用jqm的 ...
- 手机新闻网站,掌上移动新闻,手机报client,jQuery Mobile手机新闻网站,手机新闻网站demo,新闻阅读器开发
我们坐在地铁,经常来查看新浪手机新闻,腾讯新闻.或者刷微信看新闻更多功能.你有没有想过如何实现这些目标.移动互联网,更活泼. 因为HTML5到,jQuery Moblie到.今天我用jqm为了给你一个 ...
- jQuery Mobile学习日记
本次主讲人是王思伦啦啦啦~ 框架特性 jQuery Mobile 以“Write Less, Do More”作为目标,为所有的主流移动操作系统平台提供了高度统一的 UI 框架:jQuery 的移动框 ...
- jQuery Mobile中文手册：开发入门
jQuery Mobile 以“Write Less, Do More”作为目标,为所有的主流移动操作系统平台提供了高度统一的 UI 框架:jQuery 的移动框架可以让你为所有流行的移动平台设计一个 ...
- 18个jQuery Mobile开发贴士和教程
jQuery Mobile 是 jQuery 在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架.支持 ...
- jQuery Mobile案例,最近用Moon.Web和Moon.Orm做了一套系统
一.简介 先说说,我们的主题.jQuery Mobile,最近用Moon.Web和Moon.Orm做了一套系统 jQuery Mobile是jQuery 在手机上和平板设备上的版本.jQuery ...
- 【学习】一本案例驱动的jQuery Mobile入门书
清华大学出版社推出的<构建跨平台APP:jQuery Mobile移动应用实战> 提供的全是jQuery Mobile的案例: 手机入侵 题库应用 音乐专辑 通讯录 新闻列表 销售排名 九 ...
- SharePoint之使用Jquery Mobile定制自己的手机页面
最近一直很忙,既要创业,又要工作,还有弄弄自己的小项目(已暂停,http://www.codelove1314.com/,如果你不愿意浪费你的业余时间,喜欢弄点小东西,请联系我),所以虽然有很多东西分 ...
随机推荐
- android开发者要懂得问题答案
我在网上看了一下有些人在博客上提出一些什么android开发者必须懂得问题,可是就是没有答案,所以我就把这些问题拷贝过来了.顺便也把全部的答案加上,为了让很多其它的开发者高速的找到答案,谢谢! 以下的 ...
- percona-toolkit的安装及简单介绍
MySQL数据库是轻量级.开源数据库的佼佼者.其功能和管理,健壮性与Oracle相比还是有相当的差距.因此有非常多功能强大第三方的衍生产品,如percona-toolkit,XtraBackup等等. ...
- Qt源码分析之信号和槽机制（QMetaObject是一个内部struct）
Qt的信号和槽机制是Qt的一大特点,实际上这是和MFC中的消息映射机制相似的东西,要完成的事情也差不多,就是发送一个消息然后让其它窗口响应,当然,这里的消息是广义的说法,简单点说就是如何在一个类的一个 ...
- ＠转EXT2->EXT3->EXT4
Linux文件系统第一篇—从Ext2到Ext3再到Ext4 1 概述 Linux继承了UNIX一切皆文件的设计哲学,用文件和树形目录的抽象逻辑概念代替了硬盘和光盘等物理设备使用数据块的概念,用户使用文 ...
- UML学习之用例图
在UML的整个学习过程中,9种图(用例图.活动图.状态图.顺序图.类图.对象图.协作图.组件图.部署图)的学习以及常用开发.建模工具的使用是最为重要的一个阶段,它是进行UML建模的基础.在本篇文章中首 ...
- amazeui学习笔记--css（常用组件13）--进度条Progress
amazeui学习笔记--css(常用组件13)--进度条Progress 一.总结 1.进度条基本使用:进度条组件,.am-progress 为容器,.am-progress-bar 为进度显示信息 ...
- 写PPT的先扬后抑的思路
近期给一个客户做IT战略规划. 基本结束了,客户要求写点有高度的东西.我想也是,尽管眼下的PPT也触及到战略和行业的问题,可是没有总结出来.于是就挖空心思,琢磨了三天.写了4页PPT.改动了几遍.还算 ...
- 在云服务器上(CentOS)上安装Node
今天手抖,买了台云服务器,本人对服务器啥的基本不懂,linux命令基本靠度娘,所以连装个node环境都历经坎坷,搞了一下午终于搞好了,记录一下: 第一步:当然是先登录服务器了,打开命令行窗口,输入: ...
- REGEXP_LIKE，REGEXP_INSTR，REGEXP_SUBSTR，REGEXP_REPLACE
参考: http://www.cnblogs.com/scottckt/archive/2012/10/11/2719562.html http://www.jb51.net/article/3842 ...
- DOS 命令forfiles
forfiles /p E:/dbbackup/diff /s /m *.* /d -14 /c "cmd /c del @file" forfiles: /p 指定的路径 /s ...