1. 首页
  2. 问答
  3. 试图用幻灯片菜单创建应用程序，并使用应用程序界面创建JSON列表

试图用幻灯片菜单创建应用程序，并使用应用程序界面创建JSON列表

2013-05-01 72 views
0

先谢谢谁能帮助我并为我的糟糕英语感到抱歉。我正在尝试使用jquery mobile ios设备创建PhoneGap应用程序。由于从json导入数据时数据幻灯片转换中的问题太多，结果并不糟糕，但非常缓慢。使用的样式是具有幻灯片效果http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/panels/panel-nav-form.html的侧边菜单。我看到了应用程序UI的非凡结果，尝试https://github.com/triceam/Fresh-Food-Finder该应用程序。我想用三个链接样式的facebook来实现一个幻灯片左侧菜单，在这个菜单中点击任何一个打开从json导入的列表，使用app-UI，这肯定更快，更高效。我试图实现，但我不是一个JavaScript的王牌，我有点沮丧。任何人都可以给我一些指导方针吗？谢谢试图用幻灯片菜单创建应用程序，并使用应用程序界面创建JSON列表

来源

2013-05-01 Bambo

回答

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>&copy; 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-01 08:22:20 dpfauwadel

+0

感谢您的帮助，真的非常感谢您。我已经在我的应用程序中实现了类似的代码。你可以在这里看到http://viaggiosullaluna.it/www.zip。如果你在iphone上试用这个应用程序，你会发现页面之间的幻灯片速度很慢，如果你打开下面的链接不起作用（通过json加载文件）。任何想法为什么？也许是因为我不使用本地数据库？我试过app-UI，你已经看到它更快更实用，但不知道如何实现代码以获得相同的结果:-( – Bambo 2013-05-01 09:35:22

+0

它发生在iphone上，jquery太大并且负载慢慢来，为了纠正这一点，只需保留你需要的东西，我用滑动功能来打开这个菜单。我会检查app-UI – dpfauwadel 2013-05-01 10:10:18

+0

非常感谢。真的 – Bambo 2013-05-01 10:47:38

相关问题

 相关问题