jQuery移动javascript在多个HTML文件上

jQuery mobile javascript on multiple HTML files

本文关键字：HTML 文件 移动 javascript jQuery      更新时间：2023-09-26

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

包含javascript文件的最佳解决方案是，它可以双向运行（直接运行和通过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拆分为多个文件。

相关文章：