提前感谢你会帮助我，并为我的英语不好感到抱歉。我正在尝试使用 jquery 移动 ios 设备创建一个 PhoneGap 应用程序。结果还不错，但是很慢，因为从json导入数据时数据幻灯片转换的问题太多了。使用的样式是带有幻灯片效果的侧边菜单http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/panels/panel-nav-form.html。我已经看到了 app-UI 的非凡结果，尝试https://github.com/triceam/Fresh-Food-Finder应用程序。我想用三个链接样式的 facebook 实现一个幻灯片左侧菜单，单击其中任何一个会打开一个从 json 导入的列表，使用 app-UI，这肯定更快、更高效。我试图实现，但我不是 javascript 的高手，而且我有点士气低落。谁能给我一些指导方针？谢谢你
问问题
1270 次
1 回答
0
嘿，这是页面的代码
<!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，然后使用代码来看看它是如何工作的。
希望这对您有所帮助；）
于 2013-05-01T08:22:20.233 回答