6
मैंने एक HTML पृष्ठ में एक छोटा jquery मोबाइल ऐप बनाया है। मुझे जिस समस्या का सामना करना पड़ रहा है वह यह है कि मोबाइल उपकरणों में पृष्ठ संक्रमण का प्रदर्शन भयानक है। अगले पृष्ठ पर गेटो करने के बाद, मैं पृष्ठ बदलता 3-4 सेकंड के लिए इंतजार कर रहा हूं। कोई विचार है कि मैं इसे कैसे सुधार सकता हूं?मैं अपने Jquery मोबाइल ऐप के लिए पेज संक्रमण कैसे सुधार सकता हूं?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi-page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="http://jquerymobile.com/branches/tables/css/themes/default/jquery.mobile.css">
<link rel="stylesheet" href="http://jquerymobile.com/branches/tables/docs/_assets/css/jqm-docs.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<form id="test" method="post">
<!-- Start of page: #p01 -->
<div data-role="page" id="p01" data-theme="b" data-prefetch>
<div data-role="header" data-theme="a">
<h1>Page 01 of 05</h1>
</div><!-- /header -->
<div data-role="content" >
<h3>Please provide these details about the child</h3>
<br/>
<fieldset>
<label>Child's Full Name:</label>
<fieldset>
<input id = "p01_childFirstName_text" type="text" placeholder="First Name...">
<input id = "p01_childMidName_text" type="text" placeholder="Middle Name...">
<input id = "p01_childLastName_text" type="text" placeholder="Last Name...">
</fieldset>
</fieldset>
<br/>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Child's Gender:</legend>
<input data-theme="a" type="radio" name="radio-choice" id="p01_childGenderMale_radio" value="choice-1" checked="checked" />
<label for="p01_childGenderMale_radio">Female</label>
<input data-theme="a" type="radio" name="radio-choice" id="p01_childGenderFemale_radio" value="choice-2" />
<label for="p01_childGenderFemale_radio">Male</label>
<input data-theme="a" type="radio" name="radio-choice" id="p01_childGenderOther_radio" value="choice-3" />
<label for="p01_childGenderOther_radio">Other</label>
</fieldset>
<br/>
<fieldset>
<label for = "p01_childEthnGroup_text">Child's Ethnic Group or Race:</label>
<input id = "p01_childEthnGroup_text" type="text" placeholder="Ethnic Group...">
</fieldset>
<br/>
<fieldset>
<label for="p01_childBirthDate_text">Child's Birth Date:</label>
<input id = "p01_childBirthDate_text" type="text" placeholder="DD/MM/YYYY">
</fieldset>
<br/>
<fieldset>
<label for="p01_childBirthDate_text">Child's Grade in School:</label>
<input id = "p01_childBirthDate_text" type="text" placeholder="DD/MM/YYYY">
</fieldset>
<br/>
<fieldset>
<label for="flip-1">Is the Child attending a School?</label>
<select name="flip-1" id="flip-1" data-role="slider" data-theme="a">
<option value="off">Yes</option>
<option value="on">No</option>
</select>
</fieldset>
</div><!-- /content -->
<div data-role="footer" data-theme="a">
<p class = "footer_text"><small><em>Please swipe the page to the sides to go to the next page, or to return to the previous one.</em></small></p>
</div><!-- /footer -->
</div><!-- /page one -->
<!-- Start of page: #p02 -->
<div data-role="page" id="p02" data-theme="b" data-prefetch>
<div data-role="header" data-theme="a">
<h1>Page 02 of 05</h1>
</div><!-- /header -->
<div data-role="content" data-theme="b">
<h3>Please provide these details about the child's parent</h3>
<p><small><em>Please enter these details even if the parents are not working now.
Be specific - for example: auto mechanic, high school teacher, home maker,
day labourer, lathe operator, army sergeant etc.
</em></small></p>
<br/>
<fieldset>
<label for="p02_fatherWorkType_text">Father's Type of Work:</label>
<input id = "p02_fatherWorkType_text" type="text" placeholder="Type of Work...">
</fieldset>
<br/>
<fieldset>
<label for="p02_motherWorkType_text">Mother's Type of Work:</label>
<input id = "p02_motherWorkType_text" type="text" placeholder="Type of Work...">
</fieldset>
<br/>
<fieldset>
<label>Your Full Name:</label>
<fieldset>
<input id = "p02_userFirstName_text" type="text" placeholder="First Name...">
<input id = "p02_userMidName_text" type="text" placeholder="Middle Name...">
<input id = "p02_userLastName_text" type="text" placeholder="Last Name...">
</fieldset>
</fieldset>
<br/>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Your Gender:</legend>
<input data-theme="a" type="radio" name="radio-choice" id="p02_userGenderMale_radio" value="choice-1" checked="checked" />
<label for="p02_userGenderMale_radio">Female</label>
<input data-theme="a" type="radio" name="radio-choice" id="p02_userGenderFemale_radio" value="choice-2" />
<label for="p02_userGenderFemale_radio">Male</label>
<input data-theme="a" type="radio" name="radio-choice" id="p02_userGenderOther_radio" value="choice-3" />
<label for="p02_userGenderOther_radio">Other</label>
</fieldset>
<br/>
<fieldset data-role="controlgroup">
<legend>Your Relation with the Child:</legend>
<input data-theme="a" type="radio" name="radio-choice" id="p02_userRelationBio_radio" value="choice-1" checked="checked" />
<label for="p02_userRelationBio_radio">Biological Parent</label>
<input data-theme="a" type="radio" name="radio-choice" id="p02_userRelationAdopt_radio" value="choice-2" />
<label for="p02_userRelationAdopt_radio">Adoptive Parent</label>
<input data-theme="a" type="radio" name="radio-choice" id="p02_userRelationStep_radio" value="choice-3" />
<label for="p02_userRelationStep_radio">Step Parent</label>
<input data-theme="a" type="radio" name="radio-choice" id="p02_userRelationGrand_radio" value="choice-3" />
<label for="p02_userRelationGrand_radio">Grand Parent</label>
<input data-theme="a" type="radio" name="radio-choice" id="p02_userRelationFoster_radio" value="choice-3" />
<label for="p02_userRelationFoster_radio">Foster Parent</label>
<input data-theme="a" type="radio" name="radio-choice" id="p02_userRelationOther_radio" value="choice-3" />
<label for="p02_userRelationOther_radio">Others (Please Specify)</label>
<input class= "p02_input_hidden_text" id = "p02_userRelationOther_text" type="text" placeholder="Specify Relation...">
</fieldset>
</div><!-- /content -->
<div data-role="footer" data-theme="a">
<p class = "footer_text"><small><em>Please swipe the page to the sides to go to the next page, or to return to the previous one.</em></small></p>
</div><!-- /footer -->
</div><!-- /page two -->
<!-- Start of page: #p05 -->
<div data-role="page" id="p05" data-theme="b" data-prefetch>
<div data-role="header" data-theme="a">
<h1>Last Page</h1>
</div><!-- /header -->
<div data-role="content" data-theme="b">
<h2>Congratulations! You have filled out the Child Behaviour Checklist.</h2>
<p><small><em>Please click on the "SUBMIT" button below to send us the checklist.</em></small></p>
<br/>
<br/>
<br/>
<button type="submit" data-theme="a" class="ui-btn-hidden" data-disabled="false">Submit</button>
</div><!-- /content -->
</div><!-- /page five -->
</form>
<style>
.footer_text {
text-align:center;
}
</style>
<script>
$(document).on('mobileinit', function(){
$.mobile.loader.prototype.options.text = "loading...";
$.mobile.loader.prototype.options.textVisible = false;
$.mobile.loader.prototype.options.theme = "a";
$.mobile.loader.prototype.options.html = "";
});
$(document).on ('pageshow', function (e, data) {
// keep all previously-visited pages in the DOM. Remove this option later when application becomes large.
$.mobile.page.prototype.options.domCache = true;
var activePage = $.mobile.activePage.attr("id");
var previousPage = (parseInt(activePage.slice(1,3))-1).toString();
var nextPage = (parseInt(activePage.slice(1,3))+1).toString();
window.myActivePage = activePage;
window.myPreviousPage = "#p0" + previousPage;
window.myNextPage = "#p0" + nextPage;
});
// page navigation on using swipes
$(document).on('swipeleft',function(event, ui){
$.mobile.changePage(window.myNextPage, { transition: "slide"});
});
$(document).on('swiperight',function(event, ui){
$.mobile.changePage(window.myPreviousPage, { transition: "slide", reverse:true});
});
// Code to show and hide fields. Spaghetti code. Refactor this when working on actual app.
$(document).ready(function() {
$('[id=p02_userRelationOther_text]').hide()
$('[type=radio]').click(function(eventName) {
if (this.id == 'p02_userRelationOther_radio') {
$('[id=p02_userRelationOther_text]').show('slow')
}
else {
$('[id=p02_userRelationOther_text]').hide('slow')
}
});
$('[id=p03_noSports_check]').click(function(eventName) {
if ($('[id=p03_noSports_check]').is(":checked")) {
$('[class=p03_hidden_container]').hide('slow')
}
else {
$('[class=p03_hidden_container]').show('slow')
}
});
$('[id=p04_noHobby_check]').click(function(eventName) {
if ($('[id=p04_noHobby_check]').is(":checked")) {
$('[class=p04_hidden_container]').hide('slow')
}
else {
$('[class=p04_hidden_container]').show('slow')
}
});
});
</script>
</body>
</html>
समय देने के लिए धन्यवाद। मैं आपके सुझावों का प्रयास करूंगा। –