如何在 jqueryMobile 中正确创建类似于 iOS tabbarController 的 tabbar 控制器？
Posted
技术标签:
【中文标题】如何在 jqueryMobile 中正确创建类似于 iOS tabbarController 的 tabbar 控制器？【英文标题】：How to create a tabbar controller similar to iOS tabbarController in jqueryMobile correctly? 【发布时间】：2017-04-30 02:34:52 【问题描述】：我正在尝试在jquery-mobile 中创建一个tabbar 控制器，但我将jquery-mobile api:http://demos.jquerymobile.com/1.4.5/tabs/#&ui-state=dialog 的演示失败了：
结果变成了这样：
你看，这里有两个问题：
1) three 向下偏移水平。
2) 我希望navbar(在ios 中称为tabbar) 位于page 的底部。
我的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<!--<meta http-equiv="content-type" content="text/html; charse=utf-8">-->
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../css/jquery.mobile-1.4.0.css" rel="stylesheet">
<script src="../js/lib/jquery-2.0.3.js"></script>
<script src="../js/lib/jquery.mobile-1.4.0.js"></script>
</head>
<body>
<footer data-position="fixed">
<div data-role="tabs" id="tabs">
<div data-role="navbar">
<ul>
<li><a href="#one" data-ajax="false">one</a></li>
<li><a href="#two" data-ajax="false">two</a></li>
<li><a href="ajax-content-ignore.html" data-ajax="false">three</a></li>
</ul>
</div>
<div id="one" class="ui-body-d ui-content">
<h1>First tab contents</h1>
</div>
<div id="two">
<ul data-role="listview" data-inset="true">
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Cadillac</a></li>
<li><a href="#">Ferrari</a></li>
</ul>
</div>
</div>
</footer>
</body>
</html>【问题讨论】：
我认为这可以帮助你framework7.io @Ponja 我认为这不适合jquery-mobile。
【参考方案1】：
尝试以这种方式使用导航栏插件：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Welcome To My Homepage</h1>
</div>
<div data-role="main" class="ui-content">
<p>My Content..</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac metus at quam consectetur feugiat. Quisque blandit vulputate turpis, eu molestie sem dapibus id. Etiam mattis odio quam, id facilisis nisi commodo ac. Duis orci ex, auctor vitae mi quis, elementum dictum leo. Fusce ullamcorper dignissim justo, at facilisis velit facilisis vitae. Sed quis efficitur lorem. Integer in molestie felis. Maecenas cursus tempor consequat. Aliquam dapibus accumsan aliquet. Donec non eleifend mauris. Fusce vitae efficitur purus. Aenean sed imperdiet nibh, et tristique lorem. Donec volutpat sem orci, vel ornare sapien tempus ut. Pellentesque lacinia, libero ac tincidunt vulputate, tortor leo placerat ipsum, ut finibus sem est a nunc. Praesent quis condimentum dolor.
</p>
</div>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="#pageone">Home</a></li>
<li><a href="#pagetwo">Page Two</a></li>
<li><a href="#search">Search</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>Welcome To Page Two</h1>
</div>
<div data-role="main" class="ui-content">
<p>This is page two!</p>
</div>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="#pageone">Home</a></li>
<li><a href="#pagetwo">Page Two</a></li>
<li><a href="#search">Search</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="search">
<div data-role="header">
<h1>Welcome To SEARCH PAGE</h1>
</div>
<div data-role="main" class="ui-content">
<p>SEARCH!</p>
</div>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="#pageone">Home</a></li>
<li><a href="#pagetwo">Page Two</a></li>
<li><a href="#search">Search</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>【讨论】：
我看到了，我测试了。我的要求也是当点击Home、Page Two和Search时，我想切换页面，怎么办？如果您详细说明，这一定是一个赞成的答案。以上是关于如何在 jqueryMobile 中正确创建类似于 iOS tabbarController 的 tabbar 控制器？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用正确的字符编码在 jQueryMobile 1.3.1 中通过 AJAX 加载 ISO-8859-1 内容？
如何在 React 中正确地进行 GET 调用，返回一个 observable（类似于 Angular 中的方法而不使用 Promise）？