0

我正在使用 jQuery 手机。我制作了两个和三个屏幕,但我在 index.html 上实现了所有功能。这太令人困惑了。我用谷歌搜索了它,发现您还可以在每个屏幕上制作不同的 JS 文件(使用包含)。但是当我这样做时,它不起作用。我不明白为什么它不起作用。如果项目很大而无法在同一页面中进行编码,那就太令人困惑了。我需要这样才能使一个屏幕中的所有 HTML(index.html)和不同屏幕的 JS 不同。这是我的代码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <title></title>
        <!--link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css"-->
        <link rel="stylesheet" href="css/jquery.mobile-1.3.1.css">
        <link rel="stylesheet" href="css/jquery.mobile.structure-1.3.1.css">
        <link rel="stylesheet" href="css/jquery.mobile.structure-1.3.1.min.css">
        <link rel="stylesheet" href="css/jquery.mobile.theme-1.3.1.css">
    <ink rel="stylesheet" href="css/jquery.mobile.theme-1.3.1.min.css">
        <!-- Extra Codiqa features -->
        <!-- jQuery and jQuery Mobile -->
        <script src="js/jquery-1.9.1.min.js"></script>
        <script src="js/cordova-2.7.0.js"></script>
        <!--script src="js/jquery.mobile-1.3.1.min.js"></script-->
        <!--script src="js/jquery.mobile-1.3.1.min.js"></script-->
        <script src="js/jquery.mobile-1.3.1.js"></script>
          <script src="js/index.js"></script>

        <!-- Extra Codiqa features -->

    </head>
    <style>

        #Home{

            background : transparent
                url(img/Background-Screen.png)
                no-repeat fixed left bottom;
            -webkit-background-size :100% 100%;
            -moz-background-size :100% 100%;
            -o-background-size :100% 100%;

            background-size : cover;
        }

        #DocumentScreen{

            background : transparent
                url(img/Background-Screen.png)
                no-repeat fixed left bottom;
            -webkit-background-size :100% 100%;
            -moz-background-size :100% 100%;
            -o-background-size :100% 100%;

            background-size : cover;
        }
        #CaseInformationScreen {

            background : transparent
                url(img/Background-Screen.png)
                no-repeat fixed left bottom;
            -webkit-background-size :100% 100%;
            -moz-background-size :100% 100%;
            -o-background-size :100% 100%;
            background-size : cover;
        }


        #UserSettingScreen {

            background : transparent
                url(img/Background-Screen.png)
                no-repeat fixed left bottom;
            -webkit-background-size :100% 100%;
            -moz-background-size :100% 100%;
            -o-background-size :100% 100%;
            background-size : cover;
        }


    </style>

    <body>
        <!--page one My Cases Screen------------->
        <div data-role="page" id="Home" > 
            <div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false" >
                <h1 class="ui-title"  id="hdr" style="text-align:left;margin-left: 100px;">My Cases</h1>
                <div class="ui-btn-right" id="headerButtons" data-role="controlgroup" data-type="horizontal">
                    <a href="#UserSettingScreen" data-role="button" data-inline="true" data-iconpos="notext" data-icon="gear" data-theme="b" id="Setting" data-rel="popup" data-position-to="window">Setting</a>
                    <a href="#CaseInformationScreen" data-role="button" data-iconpos="notext" data-inline="true" data-icon="plus" data-theme="b" data-rel="popup" id="Add" data-position-to="window">Add</a>
                    <a href="#newevent1" data-role="button" data-inline="true" data-theme="b" data-rel="dialog"id="Edit">Edit</a>
                </div>
            </div>

            <div data-role="content">

                <ul data-role="listview" data-inset="true" id="folderData" >
                </ul>
                 <!--   Case Information Pop up-------------------------->
                <div data-role="popup" id="CaseInformationScreen" data-close-btn="none" style="max-width:600px !important; width: 600px !important" data-overlay-theme="a" data-dismissible="false">
                    <div data-role="header" data-theme="b" >

                        <a href="#" data-role="button" data-corners="false" id="Cancel">Cancel</a>
                        <h1>Case Information</h1>
                        <a href="#" ddata-role="button" data-corners="false" id="AddButton">Add</a>
                    </div>

                     <div data-role="content">
                    <div><img src="img/Documents.png"/></div>
                    <div data-role="fieldcontain">
                        <label for="text-12" style="text-align:top;margin-left: 0px;">Case Name:</label>
                        <input name="text-12" id="caseNameValue" value="" type="text">
                    </div>
                    <div data-role="fieldcontain">
                        <label for="text-12" style="text-align:left;margin-left: 0px;">Case Date:</label>
                        <input name="text-12" id="caseDate" value="" type="text">
                    </div>
                    <div data-role="fieldcontain">
                        <label for="textarea-12">Textarea:</label>
                        <textarea cols="40" rows="8" name="textarea-12" id="caseTextArea"></textarea>
                    </div>
                    </div>
                </div>
              <!--   Case Information Pop up End-------------------------->

                  <!--   User setting Pop up-------------------------->
              <div data-role="popup" id="UserSettingScreen" data-close-btn="none" style="max-width:300px !important; width: 300px !important" data-overlay-theme="a" data-dismissible="false">
            <div data-role="header" data-theme="b" >
                <a href="#" data-role="button" data-corners="false" id="CancelSettingButton">Cancel</a>
                <h1>User Settings</h1>
                <a href="#" ddata-role="button" data-corners="false">Ok</a>
            </div>

            <div data-role="content">
                 <div><img src="img/Documents.png"/></div>
                <div data-role="fieldcontain">
                    <label for="text-12" style="text-align:top;margin-left: 0px;">IP Address:</label>
                    <input name="text-12" id="text-12" value="" type="text"/>
                </div>  
                <div data-role="fieldcontain">
                    <label for="text-12" style="text-align:left;margin-left: 0px;">Display Font:</label>
                    <select name="select-choice-1" id="select-choice-1">
                        <option value="standard">A</option>
                        <option value="rush">B</option>
                    </select>
                </div>
            </div>                
        </div>
             <!--   User setting Pop up End-------------------------->

            </div>

            <script>

                        $(document).on('pagebeforeshow', '#Home', function() {

                       });

               </script>
        </div>

        <!--  Document Information Pop up-------------------------->  
        <div data-role="page" >
            <div data-role="header" data-theme="b" data-position="fixed">
                <a href="#" data-role="button" data-corners="false">Cancel</a>
                <h1>Document Information</h1>
                <a href="#" ddata-role="button" data-corners="false">Ok</a>
            </div>
            <div data-role="fieldcontain">
                <label for="text-12" style="text-align:top;margin-left: 0px;">Name:</label>
                <input name="text-12" id="text-12" value="" type="text">
            </div>  
            <div data-role="fieldcontain">
                <label for="text-12" style="text-align:left;margin-left: 0px;">Date:</label>
                <input name="text-12" id="text-12" value="" type="text">
            </div>
            <div data-role="fieldcontain">
                <label for="textarea-12">Notes:</label>
                <textarea cols="40" rows="8" name="textarea-12" id="textarea-12"></textarea>
            </div>

        </div>
      <!--  Document Information Pop up End-------------------------->   

        <!-----------Document screen------------------->
        <div data-role="page" id="DocumentScreen" > 
            <div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false" >
                <a href="#Home" data-role="button" data-inline="true" data-theme="b" style="text-align:left;margin-left: 20px; margin-bottom: 10px;" >Back</a>
                <h1 class="ui-title"  id="hdr" style="text-align:left;margin-left: 100px;">My Documents</h1>
                <div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
                    <div><img src="img/Connect-Realtime.png" id="realTimeImaage"/></div>

                </div>
            </div>

            <div data-role="content">

                <ul data-role="listview" data-inset="true" id="folderInside_Data" >
                </ul>

            </div>

            <script>


                $(document).on('pagebeforeshow', '#DocumentScreen', function() {
                console.log("init");
                 loadFolderContent();
                });
                        function loadFolderContent() {

                        for (i = 0; i < 40; i++) {
                        $('#folderInside_Data').append(
                          '<li class="rowID" id="' + i + '">' + '<a href="#">' + '<img src="img/Blue-Folder.png">' + '<h2>Broken Bells</h2>' + '<p>Broken Bells</p>' + '<span class="ui-li-count">' + i + '</span></a>' + '</li>'
                                );
                        }
                        $('#folderInside_Data').listview('refresh');
                        }


                $(document).on('click', '.rowID', function() {
                $.mobile.changePage($("#realTimeScreen"), {
                transition: "pop",
                        reverse: false,
                        changeHash: false
                });
                    console.log(this.id)
                });</script>
        </div>
       <!-----------Document screen End------------------->

        <!-----------------------Real Time screen----------------------------->

        <div data-role="page" id="realTimeScreen" > 
            <div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false">
                <a href="#DocumentScreen" data-role="button" data-inline="true" data-theme="b" style="text-align:left;margin-left: 20px; margin-bottom: 10px;">Back</a>
                <h1 class="ui-title"  id="" style="text-align:left;margin-left: 100px;">Document name</h1>
                <div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
                    <a><img src="img/Follow-Realtime.png" id=""/></a>
                    <a><img src="img/Stop-Realtime.png" id=""/></a>
                    <a><img src="img/Email-Document.png" id=""/></a>
                    <a><img src="img/Connect-Realtime.png" id=""/></a>
                    <a><img src="img/Manage-Case-Folders.png" id=""/></a>
                    <a><img src="img/Export-Realtime.png" id=""/></a>
                </div>
            </div>
            <div data-role="content" data-theme="d">
                <div id="realTimeContents"></div>
            </div>
            <script>
         <!-----------------------add data Time screen----------------------------->
                for (i = 0; i < 400; i++) {
                $('#realTimeContents').append(
                        '<span style="margin-left:5%;">' + 12.01 + '</span><span style="margin-left: 10%;">' + 'A' + '</span><span style="margin-left: 20%;">' + 'I was deputy canine devision' + '</span>' + '<br>'+ '<br>'+ '<br>'
                        );
                }


            </script>

        </div>

</body>
<script>

                <!--<-------------------Pop Up Functionality----------------------------------------->-->
                      $(document).on('popupafteropen', '[data-role="popup"]', function(event, ui) {
                      $('body').css('overflow', 'hidden');
                      }).on('popupafterclose', '[data-role="popup"]', function(event, ui) {
                     $('body').css('overflow', 'auto');
                      });

                 <!--<-------------------Pop Up Functionality End----------------------------------------->-->


                  <!--<-------------------Ready  Functionality----------------------------------------->-->
                     $(document).ready(function() {

                     $.mobile.loading('hide');
                     onDeviceReady();
                     });

                <!--<-------------------Ready  Functionality End----------------------------------------->-->






    document.addEventListener("deviceready", onDeviceReady, false);
    var db = "";
     //will create database Dummy_DB or open it

    //function will be called when device ready
    function onDeviceReady(){
         db = window.openDatabase("Casepad", "1.0", "Casepad", 200000);
         if(window.localStorage.getItem("isAddSomeData")=="yes"){
          alert("Yes");   
         db.transaction(queryDB,errorCB);
          }
       //   db.transaction(populateDB, errorCB, successCB);
    }
    function insertData(){
    db.transaction(populateDB, errorCB, successCB);
    }

    //create table and insert some record
    function populateDB(tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS CaseTable (id INTEGER PRIMARY KEY AUTOINCREMENT, CaseName TEXT NOT NULL,CaseDate INTEGER ,TextArea TEXT NOT NULL)');
        tx.executeSql('INSERT INTO CaseTable(CaseName,CaseDate,TextArea) VALUES ("'+$('#caseNameValue').val()+'", "'+$('#caseDate').val()+'","'+$('#caseTextArea').val()+'")');
    }

    //function will be called when an error occurred
    function errorCB(err) {
        alert("Error processing SQL: "+err.code);
    }

    //function will be called when process succeed
    function successCB() {
        console.log("success!");
        db.transaction(queryDB,errorCB);
    }

    //select all from SoccerPlayer
    function queryDB(tx){
        tx.executeSql('SELECT * FROM CaseTable',[],querySuccess,errorCB);
    }

    function querySuccess(tx,result){
     var len = result.rows.length;
      $('#folderData').empty();
      for (var i=0; i<len; i++){

              $('#folderData').append(
               '<li class="caseRowClick" id="' + i + '">' + '<a href="#">' + '<img src="img/Blue-Folder.png">' + '<h2>'+result.rows.item(i).CaseName+'</h2>' + '<p>'+result.rows.item(i).CaseDate+'</p>' + '<p>'+result.rows.item(i).TextArea+'</p>'+'<span class="ui-li-count">'+ i+'</span></a>' + '</li>'
            );
        } 
        $('#folderData').listview('refresh');

    }
    </script>
</html>

<----------------------------------------------------------------------------------->
index.js

    /**
     * QUnit v1.9.0 - A JavaScript Unit Testing Framework
     *
     * http://docs.jquery.com/QUnit
     *
     * Copyright (c) 2012 John Resig, Jörn Zaefferer
     * Dual licensed under the MIT (MIT-LICENSE.txt)
     * or GPL (GPL-LICENSE.txt) licenses.
     */

    $(document).bind('pagecreate', function(e) {
        if (e.target.id == 'Home') {
            $("#headerButtons").on("click", "a", function() {

                if ($(this).attr("id") == "Add") {
                    $('#caseNameValue').val('');
                    $('#caseDate').val('');
                    $('#caseTextArea').val('');
                } else if ($(this).attr("id") == "Setting") {
                } else if ($(this).attr("id") == "Edit") {
                }
            });

        }


        $(document).on('click', '.caseRowClick', function() {
            $.mobile.changePage($("#DocumentScreen"), {
                transition: "slide",
                reverse: false,
                changeHash: false
            });
            console.log(this.id)
        });


        $("#AddButton").click(function() {
            var isvalid = validationField();
            if (isvalid) {
                insertData();
                window.localStorage.setItem("isAddSomeData", "yes");
                $.mobile.changePage($("#Home"), {
                    transition: "slide",
                    reverse: false,
                    changeHash: false
                });
            }
        });


        $("#Cancel").click(function() {
            $('.ui-dialog').dialog('close')
            $.mobile.changePage($("#Home"), {
                transition: "pop",
                reverse: false,
                changeHash: false
            });
        });


        $("#CancelSettingButton").click(function() {
            $.mobile.changePage($("#Home"), {
                transition: "slide",
                reverse: false,
                changeHash: false
            });
        });

    });

    function validationField() {
        if ($('#caseNameValue').val() == '') {
            alert("Please Enter the Case Name");
            return false;
        } else if ($('#caseDate').val() == '') {
            alert("Please Enter the Case Date");
            return false;
        } else if ($('#caseTextArea').val() == '') {
            alert("Please Enter the Case Text Area");
            return false;
        }
        return true;

    }
4

1 回答 1

0

您不必为不同的页面使用不同的 js 文件。如果您使用的是 jquery mobile 并且您有一个 html,那么不同的是具有 data-role="page" 属性的 div。如果您阅读 jquery mobile 的文档,它会说明如何处理此职业。在此处查看页面结构在此处查看页面上的事件。特别注意 pageinit、pagecreate、pageshow 事件。这些是基本的。

于 2013-06-19T07:51:05.960 回答