1. 首頁
  2. 問答
  3. 試圖用幻燈片菜單創建應用程序，並使用應用程序界面創建JSON列表

試圖用幻燈片菜單創建應用程序，並使用應用程序界面創建JSON列表

2013-05-01 30 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

相關問題

 相關問題