多个HTML文件上的jQuery移动javascript_Javascript_Jquery Mobile

多个HTML文件上的jQuery移动javascript

javascript jquery-mobile

多个HTML文件上的jQuery移动javascript,javascript,jquery-mobile,Javascript,Jquery Mobile,我正在构建一个包含多个HTML文件的jQuery移动站点，并使用一些外部javascript文件。这一切都很好，加载后脚本在页面上运行，等等。但是当我直接调用第二个页面时，没有包含jquery和jquery移动javascript文件，因为我只在index.html中包含它包含javascript文件的最佳解决方案是什么？它可以直接运行在index.html中的链接上，也可以通过index.html中的链接运行，并且重复次数最少实际设置如下所示： index.html： <html&g

我正在构建一个包含多个HTML文件的jQuery移动站点，并使用一些外部javascript文件。这一切都很好，加载后脚本在页面上运行，等等。但是当我直接调用第二个页面时，没有包含jquery和jquery移动javascript文件，因为我只在index.html中包含它

包含javascript文件的最佳解决方案是什么？它可以直接运行在index.html中的链接上，也可以通过index.html中的链接运行，并且重复次数最少

实际设置如下所示：

index.html：

<html>
    <head>
      ..............
    </head>

    <body>     
        <div data-role="panel" id="left-panel" data-theme="b">
            <ul data-role="listview" data-inset="false" data-theme="a" id="navigation">
               <a href="trainings.html">Training</a>
            </ul>               
        </div><!-- /panel -->   

        <div data-role="page" id="main-page">
            <div data-role="header" data-theme="b">
                <h1>News</h1>
                <a href="#left-panel" data-icon="grid" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-nodisc-icon">Open left panel</a>
                <a href="settings.html" data-icon="gear" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-nodisc-icon" rel="external">Settings</a>
            </div><!-- /header -->
            <div role="main" class="ui-content">
                <ul data-role="listview" data-ajax="false" data-inset="false" id="list">

                </ul>
            </div><!-- /content -->
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="PushNotification.js"></script>
        <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.4.3.min.js"></script>
        ... Project specific import ...
        <script>
            $(document).one('pagebeforecreate', function () {
              $("#left-panel").panel();
            });

            $( document ).on( "pagecreate", "#main-page", function() {
                getNewsFromUrl(getAPIUrl() + '/content.php', 'news.html');
            });     
        </script>
    </body>
</html>

trainings.html：

<html>
    <head>
        <title>Slidebars Basic Template</title>
    </head>

    <body> 
        <div data-role="page" id="trainings">
            <div data-role="header" data-theme="b">
                <h1>Trainings</h1>
                <a href="#left-panel" data-icon="grid" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-nodisc-icon">Open left panel</a>
                <a href="settings.html" data-icon="gear" data-iconpos="notext" data-shadow="false" data-iconshadow="false" class="ui-nodisc-icon" rel="external">Settings</a>
            </div>
            <div role="main" class="ui-content">
                <ul data-role="listview" data-ajax="false" data-inset="false" id="trainingList">

                </ul>
            </div><!-- /content -->
            <script>            
                $( document ).on( "pagecreate", "#trainings", function() {
                    getSigninObjectFromUrl(getAPIUrl() + '/training.php', 'trainingRiege');
                });         
            </script>   
        </div>
    </body>
</html>

如果我直接调用./trainings.html，会出现错误“Uncaught ReferenceError:$is not defined”，这对我来说是可以理解的，但我如何才能让它工作。

你应该有一个footer.html，你应该在每个视图的末尾都包含它。此页脚应包含您的javascript文件和函数。

使用JQueryMobile，您可以创建移动应用程序，而不是移动网站。您的应用程序是用index.html及其资源编写的。其他HTML文件用于将应用程序的所有HTML拆分为多个文件。

类似于：$'footerDiv'。加载'Shared/Footer.HTML'。triggercreate；谢谢你的意思是，如果我创建了一个新的html文件，它应该与其他html文件分离吗？对于JQueryMobile，一个页面是一个div，其数据角色=页面，你可以在主应用程序页面index.html中声明多个，在每个外部页面training.html中声明一个。如果您的应用程序包含一百个页面，那么使用外部页面可以比数据角色=页面的一百个div更轻。Externals页面不是独立的。确切地说，我创建了与此相关的外部页面，但我不想在每个html文件中包含相同的javascript