尝试使用幻灯片菜单创建应用程序，并使用app-UI创建JSON列表
[英]Trying to create an application with slide menu, and JSON list with app-UI
问题描述
预先感谢您的帮助，对我的英语不好，我深表歉意。 我正在尝试使用jquery移动ios设备创建PhoneGap应用程序。 由于从json导入数据时数据幻灯片转换中的问题太多，因此结果不错，但非常慢。 使用的样式是带有滑动效果的侧面菜单的样式http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/panels/panel-nav-form.html 。 我通过尝试https://github.com/triceam/Fresh-Food-Finder应用程序看到了app-UI的非凡结果。 我想用三个链接样式的facebook实现一个幻灯片左侧菜单，在其中单击任何一个都可以打开一个使用app-UI从json导入的列表，这无疑是更快，更高效的。 我尝试实现，但是我不是javascript的王牌，而且我有些沮丧。 有人可以给我一些指导方针吗？ 谢谢
1 个解决方案
解决方案1
0 2013-05-01 08:22:20
嘿，这是页面的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Demos - Slide Panel</title>
<link rel="stylesheet" href="../../../css/themes/default/jquery.mobile-1.3.0-beta.1.css">
<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
<script src="//code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="../_assets/js/jquery.mobile.demos.js"></script>
<script src="../../../js/jquery.mobile-1.3.0-beta.1.js"></script>
</head>
<body>
<div data-role="page" class="ui-responsive-panel">
<div data-role="header" data-theme="f">
<h1>My App</h1>
<a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
<a href="#add-form" data-icon="plus" data-iconpos="notext">Add</a>
</div><!-- /header -->
<div data-role="content">
<h2>Panel: Menu + form</h2>
<p>This is a typical page that has two buttons in the header bar that open panels. The left button opens a left menu with the reveal display mode. The right button opens a form in a right overlay panel.</p>
<p>Since the panel links are in the top bar, there really isn't a need for the fixed positioning feature on the panel since you will always be scrolled to the top of the page. The fixed positioning impacts animation smoothness so it's off in this demo (<code>data-position-fixed="false"</code>) and the panel will scroll with the page.</p>
<p>To make this responsive, the left panel stays open and causes the page to re-flow at wider widths. This allows both the menu and page to be used together when more space is available. This behavior is controlled by CSS media queries. You can create a custom one for a specific breakpoint or use the breakpoint preset by adding the <code> class="ui-responsive-panel"</code> to the page container.</p>
</div><!-- /content -->
<div class="jqm-footer">
<p class="jqm-version"></p>
<p>© 2010, 2013 jQuery Foundation and other contributors</p>
</div><!-- /jqm-footer -->
<style>
.nav-search .ui-btn-up-a {
background-image:none;
background-color:#333333;
}
.nav-search .ui-btn-inner {
border-top: 1px solid #888;
border-color: rgba(255, 255, 255, .1);
}
</style>
<div data-role="panel" data-position="left" data-position-fixed="false" data-display="reveal" id="nav-panel" data-theme="a">
<ul data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;" class="nav-search">
<li data-icon="delete" style="background-color:#111;">
<a href="#" data-rel="close">Close menu</a>
</li>
<li data-filtertext="wai-aria voiceover accessibility screen reader">
<a href="../about/accessibility.html">Accessibility</a>
</li>
<li data-filtertext="accordions collapsible set collapsible-set collapsed">
<a href="../content/content-collapsible-set.html">Accordions</a>
</li>
<li data-filtertext="ajax navigation model">
<a href="../pages/page-navmodel.html">Ajax navigation model</a>
</li>
<li data-filtertext="anatomy of page viewport">
<a href="../pages/page-anatomy.html">Anatomy of a page</a>
</li>
<li data-filtertext="events api animationComplete transition css">
<a href="../api/events.html">Animation events</a>
</li>
<li data-filtertext="listview autodivider">
<a href="../lists/lists-autodividers.html">Automatic listview dividers</a>
</li>
<li data-filtertext="button link submit cancel image reset mini buttonmarkup enable disable">
<a href="../buttons/buttons-types.html">Buttons</a>
</li>
<li data-filtertext="button icon">
<a href="../buttons/buttons-icons.html">Button icons</a>
</li>
<li data-filtertext="data-prefetch loadpage domCache data-dom-cache size clear cleanup pagehide lazyload spinner loader">
<a href="../pages/page-cache.html">Caching pages</a>
</li>
<li data-filtertext="input forms multi select checkbox checks grouped horizontal toggle legend">
<a href="../forms/checkboxes/">Checkbox</a>
</li>
<li data-filtertext="button icon">
<a href="buttons/buttons-icons.html">Button icons</a>
</li>
<li data-filtertext="data-prefetch loadpage domCache data-dom-cache size clear cleanup pagehide lazyload spinner loader">
<a href="../pages/page-cache.html">Caching pages</a>
</li>
<li data-filtertext="input forms multi select checkbox checks grouped horizontal toggle legend">
<a href="../forms/checkboxes/">Checkbox</a>
</li>
</ul>
<!-- panel content goes here -->
</div><!-- /panel -->
<style>
.userform { padding:.8em 1.2em; }
.userform h2 { color:#555; margin:0.3em 0 .8em 0; padding-bottom:.5em; border-bottom:1px solid rgba(0,0,0,.1); }
.userform label { display:block; margin-top:1.2em; }
.switch .ui-slider-switch { width: 6.5em !important }
.ui-grid-a { margin-top:1em; padding-top:.8em; margin-top:1.4em; border-top:1px solid rgba(0,0,0,.1); }
</style>
<div data-role="panel" data-position="right" data-position-fixed="false" data-display="overlay" id="add-form" data-theme="b">
<form class="userform">
<h2>Create new user</h2>
<label for="name">Name</label>
<input type="text" name="name" id="name" value="" data-clear-btn="true" data-mini="true">
<label for="email">Email</label>
<input type="email" name="email" id="status" value="" data-clear-btn="true" data-mini="true">
<label for="password">Password:</label>
<input type="password" name="password" id="password" value="" data-clear-btn="true" autocomplete="off" data-mini="true">
<div class="switch">
<label for="status">Status</label>
<select name="status" id="slider" data-role="slider" data-mini="true">
<option value="off">Inactive</option>
<option value="on">Active</option>
</select>
</div>
<div class="ui-grid-a">
<div class="ui-block-a"><a href="#" data-rel="close" data-role="button" data-theme="c" data-mini="true">Cancel</a></div>
<div class="ui-block-b"><a href="#" data-rel="close" data-role="button" data-theme="b" data-mini="true">Save</a></div>
</div>
</form>
<!-- panel content goes here -->
</div><!-- /panel -->
</div><!-- /page -->
</body>
如您所见，您需要首先导入您的javascript文件。 这里我们需要三个：jquery-min，jquery mobile和jquery mobile beta。 您要做的就是将这3个js保存在您的项目中，然后将它们导入到您的页面中，例如。 之后，您必须将按钮与脚本链接。 像这样
<a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
<a href="#add-form" data-icon="plus" data-iconpos="notext">Add</a>
然后应用一些CSS样式来制作一些漂亮的东西。 如果您以此为起点，那么最简单的开始方法是将页面和js保存在项目中，并使用代码来查看其工作方式。
希望这对您有所帮助;）
jQuery UI菜单幻灯片
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.