jQuery モバイルを使用しています。2 画面と 3 画面を作成しますが、すべての機能を index.html に実装します。混乱しすぎです。私はそれをグーグルで検索し、画面ごとに異なるJSファイルを作成することもできることを発見しました（インクルードを使用）。しかし、私がそうするとき、それはうまくいきません。なぜ機能しないのかわかりません。プロジェクトが大きい場合、同じページでコーディングを行うのは混乱しすぎます。1 つの画面 (index.html) 内のすべての 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;
}