我这里有一个小应用程序，其中包含欢迎页面和其他几个不同团队的页面。这是我的FIDDLE我必须让事情变得简单。请检查一下。
在此我可以从欢迎页面滑动到迈阿密热火队到纽约尼克斯队到休斯顿火箭队并回到欢迎页面。问题是我不希望用户能够从休斯顿火箭页面刷回欢迎页面。所以我想知道我该怎么做？
以下是我用于浏览网页的代码。
$("#items").sortable({
stop: function( event, ui ) {
teamNames = [];
teamId = [];
$(".teamLink").each(function() {
var href = $(this).prop('href');
var name = $(this).text();
var id = href.substr(href.lastIndexOf("#") + 1);
teamId.push(id);
teamNames.push(name)
});
alert(teamNames);
$("#items").listview('refresh');
}
}).disableSelection();
$("#chkSort").on("change", function(){
var sort = $(this).prop("checked");
if (sort){
$( "#items" ).sortable('enable');
} else {
$("#items").sortable('disable');
}
});
$(document).on("swipeleft", "#page2", function() {
$.mobile.changePage("#"+teamId[0], {transition: "slide", reverse: false});
});
});
$(document).on("swiperight swipeleft", ".dynPageClass", function(e) {
var curPageID = $(this).prop("id");
var ind=0;
for(var i = 0; i<teamId.length; i++){
if (curPageID == teamId[i]){
ind = i;
break;
}
}
var topageid = "page2";
var rev = true;
if (e.type == 'swiperight'){
if (ind > 0){
topageid = teamId[ind - 1] ;
}
} else {
rev = false;
if (ind < teamId.length - 1){
topageid = teamId[ind + 1] ;
}
}
$.mobile.changePage("#" + topageid, {transition: "slide", reverse: rev});
});
以下是包含用于调整FOOTER的更新代码的代码。
var widgetNames = new Array();
var widgetId = new Array();
var pageId = ''
$( document ).on( "pagecreate", function() {
$( "body > [data-role='panel']" ).panel().enhanceWithin();
});
$(document).on('pagecreate', '#page1', function() {
$("#log").on('click', function(){
$.ajax({
url: "script.login",
type: "GET",
data: { 'page':'create_user', 'access':'user','username':$("input[name='username']").val(), 'password':$("input[name='password']").val()},
dataType: "text",
success: function (html) {
widgetNames = new Array();
widgetId = new Array();
var res = html.match(/insertNewChild(.*);/g);
for(var i =0;i<res.length;i++){
var temp = res[i].split(',');
if(temp.length >= 3){
widgetNames[i] = (temp[2].replace('");','')).replace('"','');
widgetId[i] = temp[1].replace("'","").replace("'","").replace(/ /g,'');
}
}
var AllWidgets = ''
var testwidget = new Array();
var tempWidgetContent = html.match(/w\d+\.isHidden(.*)\(\) == false\)[\s\S]*?catch\(err\)\{ \}/gm);
for(var i =0;i<tempWidgetContent.length;i++){
var widgetContent = tempWidgetContent[i].substring(tempWidgetContent[i].indexOf('{')+1);
testwidget[i] = widgetContent.replace("site +","");
if(testwidget[i].indexOf('grid') > 0){
testwidget[i] = CreateGridUpdateFunction(testwidget[i],i);
}
}
var widgetPart = new Array();
for(var i = 0; i<widgetNames.length; i++){
if(testwidget[i].substring(0,3)== "var"){
// alert('WORKING');
var pageHeaderPart = "<div data-role= 'page' id='"+widgetId[i]+"' data-pageindex='"+i+"' class='dynPageClass'><div data-role='header' id='header1' data-position='fixed' data-theme='a'><a href='#panel' data-icon='bars' data-iconpos='notext' class='ui-btn-left'></a><a data-icon='search' id='searchicon_"+i+"' data-iconpos='notext' class='ui-btn-left' style='margin-left: 35px'></a><h1 id='test1'>Basketball Fanatico</h1><a href='#page1' data-icon='delete' data-iconpos='notext' class='ui-btn-right'></a><a href='#page2' data-icon='home' data-iconpos='notext' class='ui-btn-right' style='margin-right: 35px;'></a></div><div data-role='content'>";
}
else{
var pageHeaderPart = "<div data-role='page' id='"+widgetId[i]+"' data-pageindex='"+i+"' class='dynPageClass'><div data-role='header'data-position='fixed' data-theme='a'><a data-iconpos='notext' href='#panel' data-role='button'data-icon='bars'></a><h1 class='ui-title'role='heading'>Basketball Fanatico</h1><div class='ui-btn-right' data-type='horizontal'><a data-iconpos='notext' href='#page2' data-role='button'data-icon='home'style=\" margin-right:5px; \"></a><a data-iconpos='notext' href='#page1' data-role='button'data-icon='delete'></a></div></div><div data-role='content'>";
}
var pageFooterPart = "</div><div data-role='footer' data-position='fixed' id='footer' ><span class='ui-title'><div id='navigator'></div></span></div></div>";
if(testwidget[i].substring(0,3)== "var"){
// alert('i am a grid');
var check = "<div data-role='tbcontent'><ul data-role='listview'data-insert='true'><li data-role='list-divider' data-theme='a'>"+widgetNames[i]+"";
}
var check = "<div data-role='content' id='widgname'><ul data-role='listview'data-insert='true'><li data-role='list-divider' data-theme='a'>"+widgetNames[i]+"</div>";
if(testwidget[i].substring(11,31)== "var counterValue = 0"){
// alert('i am a counter');
widgetPart[i] = '<DIV style=\" text-align: center; background-color:#EDEDED; padding-bottom: auto; font-size: 55pt;\" id=widgetContainer_'+widgetId[i]+'></DIV><SCRIPT>' + 'function UpdateWidgetDiv'+widgetId[i]+'() {' + testwidget[i] + '$(\"#widgetContainer_'+widgetId[i]+'").html(counterValue);' + '}' + '</SCRIPT>';
}
if(testwidget[i].substring(0,3)== "var"){
widgetPart[i] = '<DIV id=widgetContainer_'+widgetId[i]+'></DIV><SCRIPT>' + 'function UpdateWidgetDiv'+widgetId[i]+'() {' +testwidget[i] + '}' + '</SCRIPT>';
}
else{
}
AllWidgets +='<a href="#'+widgetId[i]+'" class="widgetLink" data-theme="b" data-role="button" >'+widgetNames[i]+'</a>';
var makePage = $(pageHeaderPart + check + widgetPart[i] + pageFooterPart);
makePage.appendTo($.mobile.pageContainer);
}
$('#items').prepend(AllWidgets).trigger('create');
function UpdateActivePage(){
pageId = $(":mobile-pagecontainer" ).pagecontainer('getActivePage').prop("id");
var idx;
for (var i=0; i<widgetId.length; i++){
if (widgetId[i] == pageId){
idx = i;
break;
}
}
eval(testwidget[idx]);
if (counterValue == false) {
//no need to recreate datatable
return;
} else {
$("#widgetContainer_" + pageId).html(counterValue);
$('#grid_'+idx).dataTable( {
"bPaginate": false,
"bFilter": true,
"bAutoWidth": false,
"oLanguage": { "sSearch": "" }
} );
$('.dataTables_filter input').attr("placeholder", "Search");
$('.dataTables_filter').css('float','none');
$('.dataTables_filter').css('padding-right','0px');
$("#grid_"+idx+"_filter").css('display', 'none');
$('#searchicon_'+i).click(function() {
var searchwidth1 = $("#widgetContainer_"+widgetId[i]).width();
var searchwidth1 = searchwidth1 - 20;
$('#grid_'+idx+'_filter').toggle();
$("#grid_"+idx+"_filter :input").css('width', searchwidth1 + 'px');
});
}
}
function CreateGridUpdateFunction(oldUpdatefunction,thisWidgetID)
{
var updateLines = oldUpdatefunction.split("\n");
var updateFunctionCode = "";
for (var i=0; i<updateLines.length;i++)
{
if(updateLines[i].indexOf(" var url = ") > 0)
{
var updateURL = updateLines[i];
if(updateURL.indexOf("&windowWidth=") > 0){
updateURL = updateURL.substr(0,updateURL.lastIndexOf("&windowWidth=")) + "';";
}
updateFunctionCode += updateURL;
updateFunctionCode += " var loader = dhtmlxAjax.getSync(url);";
updateFunctionCode += " if(loader.xmlDoc.responseText.length > 0){";
updateFunctionCode += " counterValue = createTableStringFromXML(loader.xmlDoc.responseText,"+thisWidgetID+");";
updateFunctionCode += " } ";
}
}
return "var counterValue = \"\"; "+updateFunctionCode ;
}
$(":mobile-pagecontainer" ).on( "pagechange", function() { UpdateActivePage(); } )
setInterval(UpdateActivePage, 3000);
}
});
});
});
function startsWith(searchString,searchVal){
console.log(searchString);
var search = searchString.trim();
return search.indexOf(searchVal) >= 0;
}
function createTableStringFromXML(serverXML,thisWidgetID){
console.log(serverXML);
var xmlDoc = $.parseXML(serverXML);
var $xml = $( xmlDoc );
var xmlLines = serverXML.split("\n");
var returnTable = "";
if ( $("#grid_" + thisWidgetID).length > 0){
var oTable = $("#grid_" + thisWidgetID).dataTable();
oTable.fnClearTable();
$xml.find("row").each(function(index){
var $cells = $(this).find("cell");
var rowData = [];
$cells.each(function(cellIndex){
rowData.push($(this).text());
});
oTable.fnAddData( rowData);
});
return false;
} else {
for (var i=0; i<xmlLines.length;i++)
{
if(startsWith(xmlLines[i],"<rows"))
{
returnTable += "<table cellpadding=\"2\" cellspacing=\"2\" border=\"0\" class=\"display\" id=\"grid_"+thisWidgetID+"\" width=\"100%\">";
}
else if(startsWith(xmlLines[i],"</rows>"))
{
returnTable += "</tbody></table>";
}
else if(startsWith(xmlLines[i],"<head>"))
{
returnTable += "<thead><tr>";
}
else if(startsWith(xmlLines[i],"</head>"))
{
returnTable += "</tr></thead><tbody>";
}
else if(startsWith(xmlLines[i],"<column"))
{
returnTable += "<th>"+xmlLines[i].match(/>(.*?)</i)[1]+"</th>";
}
else if(startsWith(xmlLines[i],"<row"))
{
returnTable += "<tr>";
}
else if(startsWith(xmlLines[i],"</row"))
{
returnTable += "</tr>";
}
else if(startsWith(xmlLines[i],"<cell"))
{
returnTable += "<td>"+xmlLines[i].match(/>(.*?)</i)[1]+"</td>";
}
console.log(returnTable);
}
}
return returnTable ;
}
//CODE FOR DRAG AND DROP AND SWIPING DYNAMICALLY CREATED PAGES
$(document).on('pagecreate', '#page2', function() {
$("#items").sortable({
stop: function( event, ui ) {
widgetNames = [];
widgetId = [];
$(".widgetLink").each(function() {
var href = $(this).prop('href');
var name = $(this).text();
var id = href.substr(href.lastIndexOf("#") + 1);
widgetId.push(id);
widgetNames.push(name)
});
//alert(widgetNames);
$("#items").listview('refresh');
}
}).disableSelection();
$("#chkSort").on("change", function(){
var sort = $(this).prop("checked");
if (sort){
$( "#items" ).sortable('enable');
} else {
$("#items").sortable('disable');
}
});
$(document).on("swipeleft", "#page2", function() {
$.mobile.changePage("#"+widgetId[0], {transition: "slide", reverse: false});
});
$(document).on("swiperight swipeleft", ".dynPageClass", function(e) {
var curPageID = $(this).prop("id");
var ind=0;
for(var i = 0; i<widgetId.length; i++){
if (curPageID == widgetId[i]){
ind = i;
break;
}
}
var topageid = "page2";
var rev = true;
if (e.type == 'swiperight'){
if (ind > 0){
topageid = widgetId[ind - 1] ;
}
} else {
rev = false;
if (ind < widgetId.length - 1){
topageid = widgetId[ind + 1] ;
} else {
topageid = null;
}
}if(topageid){
$.mobile.changePage("#" + topageid, {transition: "slide", reverse: rev});
}
});
});
//ADJUST FOOTER
$(document).on("pagecontainershow", function () {
SetMinHeight();
});
$(window).on("resize orientationchange", function () {
SetMinHeight();
});
function SetMinHeight() {
var screen = $.mobile.getScreenHeight();
var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();
var content = screen - header - footer - contentCurrent;
$(".ui-content").css("min-height", content + "px");
}
以下是我的CSS
.login-box {
margin: auto;
padding: auto;
background: none repeat scroll 0% 0% rgb(241, 241, 241);
border: 1px solid rgb(229, 229, 229);
width:300px;
}
.ui-field-contain {
border-bottom-width: 0px;
}
#loginbtn {
text-align: center;
width: 150px;
margin: auto;
}
#loginprompt{
text-align: right;
}
#loginprompt h4{
text-align: left;
font-size: 14px;
}
#header{
text-align: center;
}
#header h5{
color: #373E4A;
font-size: 11px;
font-family: Courier;
}
#header h3{
font-family: sans-serif;
}
#login{
width: 85%;
margin:auto;
}
#icons{
text-align: right;
}
#icons{
text-align: right;
clear:both;
}
#icons .left{
float: left;
padding-top:5px;
margin: 2px;
}
#nav hr{
width: 119%;
}
a#log.ui-link.ui-btn.ui-btn-a.ui-shadow.ui-corner-all {
background-color: #4289C1;
color: white;
font-size: 16px;
font-family: sans-serif;
}
}
.ui-panel {
bottom: 0 !important;
}
.ui-panel-inner{
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-left: 4px !important;
padding-right: 30px !important;
height: 98% !important;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.ui-panel-inner .ui-btn {
white-space: normal;
font-size: 15px;
width: 170px;
}
.ui-btn.ui-corner-all.ui-btn-inherit.ui-btn-icon-left.ui-checkbox-on{
width: 150px;
}
#example_filter{
display: none;
}
label{
width: 140px;
}
#example_wrapper{
margin: auto;
}
#example_filter{
margin: -5px 0 0 90px;
}
table.dataTable tr.odd td.sorting_1 {
background-color: #E3EEF8 !important;
}
table.dataTable tr.even td.sorting_1{
background-color: white !important;
text-shadow:none !important;
}
table.dataTable tr.odd {
background-color: #E3EEF8!important;
text-shadow: none !important;
}
table.dataTable tr.even {
background-color: white !important;
}
.sorting_asc {
background-color: #E3EEF8 !important;
}
#sclassic{
width: 50px;
}
h6{
text-align: center;
}
答案 0 :(得分：1)
这是一种方法：
<强> UPDATED FIDDLE
如果您在最后一页，请将topageid设置为null。然后在调用changepage之前检查topageid是否为null：
if (e.type == 'swiperight'){
if (ind > 0){
topageid = teamId[ind - 1] ;
}
} else {
rev = false;
if (ind < teamId.length - 1){
topageid = teamId[ind + 1] ;
} else {
//don't go back to page2
topageid = null;
}
}
if (topageid){
$.mobile.changePage("#" + topageid, {transition: "slide", reverse: rev});
}