PhoneGap / JQuery mobile - 导航问题,仅限移动设备

时间:2017-05-24 08:40:01

标签: javascript jquery-mobile mobile navigation phonegap

我正在创建一个移动应用程序(PhoneGap / JQuery mobile),用于学习新语言。我在移动设备上导航时遇到问题。我能够在浏览器上运行它。

应用的结构
我有一个名为chapters的文件夹。该文件夹包含所有章节(1,2,3)。 每章都有自己的练习和语法文件。

结构示例 chapterters / 1 / exercise / exercise1.html(第1章,练习1)
chapterters / 2 / exercise / exercise1.html(第2章,练习1)

导航包含在所有页面上 这是一个滑出的汉堡菜单。
导航的位置。
共享/ _nav.html

exercise1.html,包含导航部分。

  $(document).on('pagebeforeshow', '[data-role="page"]', function(){       
            $.mobile.activePage.find('[data-role="panel"]').load("../../../shared/_nav.html", function(){ 
                $(this).parent().enhanceWithin('create');
                $('#chapter1').collapsible('expand');
                $(this).parent().enhanceWithin('create');
            }); 
    });

主导航部分。 (shared / _nav.html文件)

<div id="chapter1" data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" data-collapsed="true">
            <h3>1</h3>
            <ul data-role="listview">
                <li><h4><a href="http://11.4.33.55:3007/chapters/1/exercises/exercise1.html" data-transition="slide" data-ajax="false">Exercise 1.1</a></h4></li>
                <li><h4><a href="http://11.4.33.55:3007/chapters/1/exercises/exercise2.html" data-transition="slide" data-ajax="false">Exercise 1.2</a></h4></li>
                <li><h4><a href="http://11.4.33.55:3007/chapters/1/exercises/exercise3.html" data-transition="slide" data-ajax="false">Exercise 1.3</a></h4></li>
            </ul>
        </div>

我希望将我的练习保存在单独的html文件中,因为它们已经过多了。

我尝试了许多不同的方式来编写链接。但无法让它发挥作用。

最后的问题。
我想在Apple应用商店发布该应用。像我这样的文件夹结构会成为获得应用程序批准的问题吗?

任何帮助都将不胜感激。

0 个答案:

没有答案