jquery.mobile 手机滚动

<!-- <!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport"

content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<link rel="stylesheet"

href="../../../ui/jquery.mobile-1.4.5/jquery.mobile-1.4.5.css">

<script src="../../../ui/jquery.mobile-1.4.5/js/jquery.js"></script>

<script src="../../../ui/jquery.mobile-1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>

<body> -->

<div data-role="page" id="mytabs"

style="background-image: url(‘../../../Image/App/hb_main3.jpg‘); background-size: 100% 100%;">

<script type="text/javascript">

if (!$.mobile.data) {

$.mobile.data = {};

}

if (!$.mobile.data.tabNames) {

$.mobile.data.tabNames = [ ‘健康体检‘, ‘美容抗衰‘, ‘口腔健康‘, ‘功能医学‘, ‘康复疗养‘ ];

$.mobile.data.clickTab = function(tab) {

var index = $(tab).attr(‘data-tab-index‘);

$(‘#mytabs .fragments‘).hide();

$(‘#fragment-‘ + index).show();

}

$.mobile.data.moveToPrevTab = function() {

var $Navbar = $(‘#mytabs-navbar‘);

var index = parseInt($Navbar.attr(‘data-tab-index‘));

if (index > 0) {

$Navbar.find(‘a‘).each(

function(i, e) {

var no = index - 1 + i;

$(e).text($.mobile.data.tabNames[no]).attr(

‘data-tab-index‘, no);

}).filter(‘.ui-btn-active‘).click();

$Navbar.attr(‘data-tab-index‘, --index);

if (index == 0) {

$(‘#mytabs-prev‘).css(‘color‘, ‘#ccc‘);

} else {

$(‘#mytabs-next‘).css(‘color‘, ‘#000‘);

}

}

};

$.mobile.data.moveToNextTab = function() {

var $Navbar = $(‘#mytabs-navbar‘);

var index = parseInt($Navbar.attr(‘data-tab-index‘));

if (index < 2) {

$Navbar.find(‘a‘).each(

function(i, e) {

var no = index + 1 + i;

$(e).text($.mobile.data.tabNames[no]).attr(

‘data-tab-index‘, no);

}).filter(‘.ui-btn-active‘).click();

$Navbar.attr(‘data-tab-index‘, ++index);

if (index == 2) {

$(‘#mytabs-next‘).css(‘color‘, ‘#ccc‘);

} else {

$(‘#mytabs-prev‘).css(‘color‘, ‘#000‘);

}

}

};

}

</script>

<div data-role="header" data-position="fixed" data-theme="b"

style="overflow: hidden; background-color: #333333;">

<h1>健康中心</h1>

<a href="../../app/main.html" data-icon="back" data-iconpos="notext">Back</a>

<a href="#opt-panel" data-icon="gear" data-iconpos="notext"

style="display: none;">Options</a>

</div>

<div class="ui-content" role="main">

<div

style="margin: -16px -16px 0 -16px; padding: 0 31px; position: relative;">

<div

style="position: absolute; top: 0; left: 0; width: 32px; height: 100%;">

<a id="mytabs-prev" href="#" class="ui-btn ui-mini"

style="margin: 0; color: #ccc; background-color: #2A670D;"

onclick="$.mobile.data.moveToPrevTab();">&lt;</a>

</div>

<div id="mytabs-navbar" data-role="navbar" data-tab-index="0">

<ul>

<li><a href="#" data-tab-index="0" class="ui-btn-active"

onclick="$.mobile.data.clickTab(this);">健康体检</a></li>

<li><a href="#" data-tab-index="1"

onclick="$.mobile.data.clickTab(this);">美容抗衰</a></li>

<li><a href="#" data-tab-index="2"

onclick="$.mobile.data.clickTab(this);">口腔健康</a></li>

</ul>

</div>

<div

style="position: absolute; top: 0; right: 0; background-color: red; width: 32px;; height: 100%;">

<a id="mytabs-next" href="#" class="ui-btn ui-mini"

style="margin: 0; background-color: #2A670D;"

onclick="$.mobile.data.moveToNextTab();">&gt;</a>

</div>

</div>

<div id="fragment-0" class="fragments">

<div style="margin-top: 20px;">

<ul data-role="listview" class="ul">

<li class="li"><a

style="padding-left: 30px; background-color: #97E88F;"

href="../health/detail.html"><div

style="float: left; width: 60px;">

<img src="../../../Image/App/hb_20.jpg"

style="max-width: 100%; height: 30px; margin: auto;">

</div> 体检套餐</a></li>

<li class="li"><a

style="padding-left: 30px; background-color: #97E88F;" href="#"><div

style="float: left; width: 60px;">

<img src="../../../Image/App/hb_20.jpg"

style="max-width: 100%; height: 30px; margin: auto;">

</div>健康之旅</a></li>

<li class="li"><a

style="padding-left: 30px; background-color: #97E88F;" href="#"><div

style="float: left; width: 60px;">

<img src="../../../Image/App/hb_20.jpg"

style="max-width: 100%; height: 30px; margin: auto;">

</div>健康管理计划</a></li>

<li class="li"><a

style="padding-left: 30px; background-color: #97E88F;" href="#"><div

style="float: left; width: 60px;">

<img src="../../../Image/App/hb_20.jpg"

style="max-width: 100%; height: 30px; margin: auto;">

</div>基因检测</a></li>

<li class="li"><a

style="padding-left: 30px; background-color: #97E88F;" href="#"><div

style="float: left; width: 60px;">

<img src="../../../Image/App/hb_20.jpg"

style="max-width: 100%; height: 30px; margin: auto;">

</div>中医检测</a></li>

<li class="li"><a

style="padding-left: 30px; background-color: #97E88F;" href="#"><div

style="float: left; width: 60px;">

<img src="../../../Image/App/hb_20.jpg"

style="max-width: 100%; height: 30px; margin: auto;">

</div>体能检测</a></li>

<li class="li"><a

style="padding-left: 30px; background-color: #97E88F;" href="#"><div

style="float: left; width: 60px;">

<img src="../../../Image/App/hb_20.jpg"

style="max-width: 100%; height: 30px; margin: auto;">

</div>心里检测</a></li>

<li class="li"><a

style="padding-left: 30px; background-color: #97E88F;" href="#"><div

style="float: left; width: 60px;">

<img src="../../../Image/App/hb_20.jpg"

style="max-width: 100%; height: 30px; margin: auto;">

</div>营养评估</a></li>

</ul>

</div>

</div>

<div id="fragment-1" class="fragments" style="display: none;">

<div style="margin-top: 20px;">

<ul data-role="listview" class="ul">

<li class="li"><a

style="padding-left: 30px; background-color: #97E88F;" href="#"><div

style="float: left; width: 60px;">

<img src="../../../Image/App/hb_20.jpg"

style="max-width: 100%; height: 30px; margin: auto;">

</div>光子嫩肤</a></li>

<li class="li"><a

style="padding-left: 30px; background-color: #97E88F;" href="#"><div

style="float: left; width: 60px;">

<img src="../../../Image/App/hb_20.jpg"

style="max-width: 100%; height: 30px; margin: auto;">

</div>冰点脱毛</a></li>

<li class="li"><a

style="padding-left: 30px; background-color: #97E88F;" href="#"><div

style="float: left; width: 60px;">

<img src="../../../Image/App/hb_20.jpg"

style="max-width: 100%; height: 30px; margin: auto;">

</div>果酸换肤</a></li>

<li class="li"><a

style="padding-left: 30px; background-color: #97E88F;" href="#"><div

style="float: left; width: 60px;">

<img src="../../../Image/App/hb_20.jpg"

style="max-width: 100%; height: 30px; margin: auto;">

</div>玻糖酸</a></li>

<li class="li"><a

style="padding-left: 30px; background-color: #97E88F;" href="#"><div

style="float: left; width: 60px;">

<img src="../../../Image/App/hb_20.jpg"

style="max-width: 100%; height: 30px; margin: auto;">

</div>保妥适</a></li>

</ul>

</div>

</div>

<div id="fragment-2" class="fragments" style="display: none;">

<div style="margin-top: 20px;">

<ul data-role="listview" class="ul">

<li class="li"><a

style="padding-left: 30px; background-color: #97E88F;" href="#"><div

style="float: left; width: 60px;">

<img src="../../../Image/App/hb_20.jpg"

style="max-width: 100%; height: 30px; margin: auto;">

</div>口腔种植</a></li>

<li class="li"><a

style="padding-left: 30px; background-color: #97E88F;" href="#"><div

style="float: left; width: 60px;">

<img src="../../../Image/App/hb_20.jpg"

style="max-width: 100%; height: 30px; margin: auto;">

</div>超薄贴面</a></li>

<li class="li"><a

style="padding-left: 30px; background-color: #97E88F;" href="#"><div

style="float: left; width: 60px;">

<img src="../../../Image/App/hb_20.jpg"

style="max-width: 100%; height: 30px; margin: auto;">

</div>无痛洁牙</a></li>

<li class="li"><a

style="padding-left: 30px; background-color: #97E88F;" href="#"><div

style="float: left; width: 60px;">

<img src="../../../Image/App/hb_20.jpg"

style="max-width: 100%; height: 30px; margin: auto;">

</div>牙齿矫正</a></li>

</ul>

</div>

</div>

<div id="fragment-3" class="fragments" style="display: none;">

<div style="margin-top: 20px;">

<ul data-role="listview" class="ul">

<li class="li"><a

style="padding-left: 30px; background-color: #97E88F;" href="#"><div

style="float: left; width: 60px;">

<img src="../../../Image/App/hb_20.jpg"

style="max-width: 100%; height: 30px; margin: auto;">

</div>功能医学</a></li>

<li class="li"><a

style="padding-left: 30px; background-color: #97E88F;" href="#"><div

style="float: left; width: 60px;">

<img src="../../../Image/App/hb_20.jpg"

style="max-width: 100%; height: 30px; margin: auto;">

</div>荷尔蒙疗法</a>

</ul>

</div>

</div>

<div id="fragment-4" class="fragments" style="display: none;">

<div style="margin-top: 20px;">

<ul data-role="listview" class="ul">

<li class="li"><a

style="padding-left: 30px; background-color: #97E88F;" href="#"><div

style="float: left; width: 60px;">

<img src="../../../Image/App/hb_20.jpg"

style="max-width: 100%; height: 30px; margin: auto;">

</div>运动康复</a></li>

<li class="li"><a

style="padding-left: 30px; background-color: #97E88F;" href="#"><div

style="float: left; width: 60px;">

<img src="../../../Image/App/hb_20.jpg"

style="max-width: 100%; height: 30px; margin: auto;">

</div>度假疗养</a>

<li class="li"><a

style="padding-left: 30px; background-color: #97E88F;" href="#"><div

style="float: left; width: 60px;">

<img src="../../../Image/App/hb_20.jpg"

style="max-width: 100%; height: 30px; margin: auto;">

</div>康复套餐</a>

</ul>

</div>

</div>

</div>

</div>

<!-- </body></html> -->

时间： 2024-07-29 15:12:00

jquery.mobile 手机滚动的相关文章

jquery.mobile手机网页简要

先上最终效果: 最近做了一个用手机浏览器访问的web应用,采用较流行的HTML5,为了提高开发效率节省时间决定采用现有开源框架,免去了自己做设计与兼容性. 一些比较优秀的框架:10大优秀的移动Web应用程序开发框架推荐 最终选择的是 jQuery Mobile ,官方地址:http://jquerymobile.com jQuery Mobile 是针对触屏智能手机与平板电脑的网页开发框架.能工作在现有主流的智能手机和平板电脑上,且构建于 jQuery 以及 jQuery UI类库之上,用极少的

JQuery Mobile 手机显示页面偏小

今天第一次用JQuery Mobile做了个3个手机小页面,一个登陆页面.一个列表页面和一个表单页面,页面中的组件呈现一切正常. 但出现了一个奇怪的问题,登陆页面大小正常,到了列表页面和表单页面就显得非常小,对比各种CSS样式,完全没问题. 花了1个小时中发现,原来在页面head中少了一句话 <meta name="viewport" content="width=device-width, initial-scale=1" />

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

我们坐在地铁.经常拿出新浪手机查看新闻.腾讯新闻,或者看新闻,等刷微信功能.你有没有想过如何实现这些目标. 移动互联网.更活泼. 由于HTML5未来,jQuery Moblie未来. 今天我用jqm的移动新闻站点. 先看效果图: 好吧.我们来看看实现的代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>jQuery

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

我们坐在地铁,经常来查看新浪手机新闻,腾讯新闻.或者刷微信看新闻更多功能.你有没有想过如何实现这些目标.移动互联网,更活泼. 因为HTML5到,jQuery Moblie到.今天我用jqm为了给你一个简单的移动新闻网站. 先看效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveG10YmxvZw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast

jQuery Mobile 手机网页开发的 两个问题

============问题描述============ 问题1: 怎么动态修改主题....我想做个夜间模式...用户点击按钮的时候,改变jQuery Mobile里page的主题....怎么用jQuery 修改.. 问题2:$.Mobile 这个对象有多少方法什么的啊,哪里有参考的,我去搜了,都是一些不全的,没有像开发文档之类的吗.. 我搜到的都是 http://www.w3school.com.cn/jquerymobile/jquerymobile_examples.asp http://

jquery mobile的一些插件（图片滚动）

jquery mobile的一些插件(图片滚动) 1,photoswipe 网址:http://www.photoswipe.com/demo: http://www.photoswipe.com/latest/examples/04-jquery-mobile.html个人描述:在手机上操作很流畅,能自使用屏幕尺寸,竖屏显示效果很好,横屏图片太大了,也就是列数固定的原因. 2,Touch-Gallery 网址:http://neteye.github.com/touch-gallery.htm

解决关于jquery mobile databox日期插件手机上失效的问题

不废话,直接上代码,修改前的代码: <span style="font-size: small;"><span style="font-size: small;"><span style="font-size: small;"><html> <head> <title>密码修改</title> <meta http-equiv="Content-T

为什么html5用的jQuery Mobile在手机浏览器/微信中打开字体很小

头部加入 <header> <metaname="viewport"content="width=device-width, initial-scale=1"> </header> 为什么html5用的jQuery Mobile在手机浏览器/微信中打开字体很小,布布扣,bubuko.com

管理外借设备的小工具(简化界面和优化手机界面的功能jquery mobile)

前阵子写了个小工具,后来经过经理的审核后给了我几个改进的建议,第一是简化界面,这个工具将来会用手机来进行管理,所以界面上要尽量简化,省去不必要的组件,第二是使用jquery mobile来美化界面,第三是使用ajax post方式来提交数据,避免传统的post方法重载整个页面. 第一,我加上了检测客户端设备的页面为首页,这样就能在访问首页的时候根据设备来做重定向, 此代码参考了csdn里某大牛的文章,做了部分修改,原文出自这里:链接 index.php代码为:     <?php