Jquery mobile 如何在jquery mobile中为不同的屏幕创建一个HTML文件和不同的js文件
我正在使用jquerymobile。我制作了两个和三个屏幕,但我在index.html上实现了所有功能。这太令人困惑了。我在谷歌上搜索了一下,发现你也可以在每个屏幕上创建不同的JS文件(包括)。但当我这么做的时候,它就不起作用了。我不明白为什么它不起作用。若项目太大而无法在同一页面中进行编码,那个么就太令人困惑了。我需要它使所有HTML在一个屏幕上(index.HTML)和JS在不同的屏幕上有所不同。这是我的密码Jquery mobile 如何在jquery mobile中为不同的屏幕创建一个HTML文件和不同的js文件,jquery-mobile,Jquery Mobile,我正在使用jquerymobile。我制作了两个和三个屏幕,但我在index.html上实现了所有功能。这太令人困惑了。我在谷歌上搜索了一下,发现你也可以在每个屏幕上创建不同的JS文件(包括)。但当我这么做的时候,它就不起作用了。我不明白为什么它不起作用。若项目太大而无法在同一页面中进行编码,那个么就太令人困惑了。我需要它使所有HTML在一个屏幕上(index.HTML)和JS在不同的屏幕上有所不同。这是我的密码 <!DOCTYPE html> <html> &l
<!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;
}
#家{
背景:透明
url(img/Background Screen.png)
无重复固定左下;
-webkit背景大小:100%100%;
-moz背景大小:100%100%;
-o-背景尺寸:100%100%;
背景尺寸:封面;
}
#文档屏幕{
背景:透明
url(img/Background Screen.png)
无重复固定左下;
-webkit背景大小:100%100%;
-moz背景大小:100%100%;
-o-背景尺寸:100%100%;
背景尺寸:封面;
}
#案例信息屏幕{
背景:透明
url(img/Background Screen.png)
无重复固定左下;
-webkit背景大小:100%100%;
-moz背景大小:100%100%;
-o-背景尺寸:100%100%;
背景尺寸:封面;
}
#用户设置屏幕{
背景:透明
url(img/Background Screen.png)
无重复固定左下;
-webkit背景大小:100%100%;
-moz背景大小:100%100%;
-o-背景尺寸:100%100%;
背景尺寸:封面;
}
我的案子
案例信息
案例名称:
案件日期:
文本区域:
用户设置
IP地址:
显示字体:
A.
B
$(文档)。on('pagebeforeshow','#Home',function(){
});
文件信息
姓名:
日期:
笔记:
我的文件
$(文档)。在('pagebeforeshow','#DocumentScreen',函数()上{
console.log(“init”);
loadFolderContent();
});
函数loadFolderContent(){
对于(i=0;i<40;i++){
$('folderInside_Data')。追加(
“”+“+”+” ”
);
}
$('folderInside'u Data')。列表视图('refresh');
}
$(文档).on('单击','.rowID',函数(){
$.mobile.changePage($(“#实时屏幕”){
过渡:“流行”,
反面:错,
changeHash:false
});
console.log(this.id)
});
文件名
“+””
);
}
$('#folderData')。listview('refresh');
}
index.js
/**
*QUnit v1.9.0-JavaScript单元测试框架
*
* http://docs.jquery.com/QUnit
*
*版权所有(c)2012约翰·雷斯格,Jörn Zaeffer
*MIT下的双重许可(MIT-LICENSE.txt)
*或GPL(GPL-LICENSE.txt)许可证。
*/
$(document).bind('pagecreate',函数(e){
如果(e.target.id=='Home'){
$(“#headerButtons”)。在(“单击”,“a”,函数()上{
如果($(this.attr(“id”)=“Add”){
$('#caseNameValue').val('');
$('#caseDate').val('');
$('#caseTextArea').val('');
}否则如果($(此).at