0

phonegapを使用して、Androidで巨大なビジネスアプリケーションを構築しています。私がしたいのは、同じコードを何度も書き直さないように、すべてのスクリプトタグ、ヘッダー、フッターが配置される .net の概念のようなマスターページを作成することだけです。

この .HTML ファイルをすべてのページで使用します。私は次のものを試しましたが、うまくいきませんでした。

メイン HTML

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
<link href="css/jquery.mobile-1.3.1.min.css" rel="stylesheet" />
<link href="css/jquery.mobile.structure-1.3.1.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.mobile.theme-1.3.1.css" rel="stylesheet" type="text/css" />
<link href="css/MyPersonnelTheme.css" rel="stylesheet" />
<script src="scripts/modernizr-2.6.2.js"></script>
<script src="scripts/jquery-1.9.1.min.js"></script>
<script src="scripts/jquery.mobile-1.3.0.min.js"></script>
<script src="scripts/jquery.validate.js" type="text/javascript"></script>
<script src="scripts/CustomJS/Common.js" type="text/javascript"></script>
<script src="scripts/CustomJS/AdditionalNotes.js" type="text/javascript"></script>
</head>
<body>


    <div class="content-area">
    <form action="" method="post" id="abc" name="abc">

    <ul data-role="listview" data-inset="true" width="100%">
        <li data-role="fieldcontain"  width="100%">
                <object name="foo" type="text/html" data="Memo.html"></object>
        </li>
    </ul>

    <ul data-role="listview" data-inset="true">



        <div data-role="header" data-theme="c">

        <h1>Additional Notes</h1>

        </div>
    <table align="center">
        <tr align="center">
            <td align="center">
                <div id="contentProgress" style="display: none" border="1">
                    <div align="center">
                        <h4>
                            Synchronization in progress...</h4>
                    </div>
                    <div align="center">
                        <img id="spin" src="Images/wait.gif" /></div>
                </div>
            </td>
        </tr>
    </table>

        <li data-role="fieldcontain">
            <label for="Reply">
                Additional Notes</label>
            <textarea cols="100" id="Reply" name="Reply" rows="20"></textarea>
        </li>

        <li data-role="fieldcontain">
            <table width="25%">
               <tr>
                    <td>
                        <input type="submit" id="submit" value="SAVE" data-mini="true" />
                    </td>

                </tr>
            </table>
        </li>
    </ul>
    </form>
    <script type="text/javascript">
        $(document).ready(function () {
            RetrieveFromDB();
            CheckSessionTimeout();
        });

        $('#submit').click(function (e) {
            e.preventDefault();
            savedata();
        });

    </script>
    </div>

</div>

メモ.html

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
<link href="css/jquery.mobile-1.3.1.min.css" rel="stylesheet" />
<link href="css/jquery.mobile.structure-1.3.1.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.mobile.theme-1.3.1.css" rel="stylesheet" type="text/css" />
<link href="css/MyPersonnelTheme.css" rel="stylesheet" />
<script src="scripts/modernizr-2.6.2.js"></script>
<script src="scripts/jquery-1.9.1.min.js"></script>
<script src="scripts/jquery.mobile-1.3.0.min.js"></script>
<script src="scripts/jquery.validate.js" type="text/javascript"></script>
<script src="scripts/CustomJS/Common.js" type="text/javascript"></script>
<script src="scripts/CustomJS/AdditionalNotes.js" type="text/javascript"></script>
<script type="text/javascript">
    document.addEventListener("deviceready", onDeviceReady, false);
    function onDeviceReady() {
        CheckOnlineOfflineStatus();
        SetImageOnlineOffline('#onlineOffline');
        document.addEventListener("online", onOnline, false);
        document.addEventListener("offline", onOffline, false);
    }

    function onOnline() {
        SetOnlineOfflineImageFromCSS("true");
    }

    function onOffline() { 
        SetOnlineOfflineImageFromCSS("false");
    }  
</script>
</head>


    <div class="header-custom">
        <a href="javascript:goToNextPage('index.html')"><span class="home-icon"></span></a>
        <a href="javascript:goToNextPage('index.html')"><span class="wrds-logo"></span></a>
        <a href="javascript:javascript:SetLogOut()"><span id="onlineOffline" class="user-icon-online"></span></a>
    </div>


</html>
4

1 に答える 1

1

このコードを試してください：

<head id="head">
 // you should import the Jquery.js
</head>
<script>
$(function(){
        var numItems = $('.include').length();
        if(numItems ==0 )
        $('#head').append('<script type="text/javascript" class="include" src="Include.js"></script>');
});
</script>

Include.js には、次のようなものが必要です。

    $(function(){
             $('#head').append('<script src="scripts/modernizr-2.6.2.js"></script>');
             $('#head').append('<script src="scripts/jquery-1.9.1.min.js"></script>');
             $('#head').append('<script src="scripts/jquery.mobile-1.3.0.min.js"></script>');
             $('#head').append('<script src="scripts/jquery.validate.js" type="text/javascript"></script>');
             $('#head').append('<script src="scripts/CustomJS/Common.js" type="text/javascript"></script>');
             $('#head').append('<script src="scripts/CustomJS/AdditionalNotes.js" type="text/javascript"></script>');
  });
于 2013-06-11T11:16:00.717 に答える