在Jquery中滑动页面 [英] Swiping Pages in Jquery
本文介绍了在Jquery中滑动页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在这里有一个小应用程序，其中包含一个欢迎页面和其他几个页面，供各个团队使用。这是我的 FIDDLE 我必须让事情变得简单。请检查出来。
在这里，我可以从欢迎页面滑动到迈阿密热火，再到纽约尼克斯，再回到欢迎页面。事情是，我不希望用户能够从休斯顿火箭页面滑回欢迎页面。所以我想知道我该怎么做？
以下是我用于浏览页面的代码。
< sortable（{
stop：function（event，ui）{
teamNames = [];
teamId = $ {code> $（＃items [];
$（。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（） ; $（$＃
$ b $（＃chkSort）。on（change，function（）{
var sort = $（this）.prop（checked）;
if （sort）{
$（#items）.sortable（'enable'）;
} else {
$（＃items）。sortable（'disable'）;
}
}）;
$ b $（document）.on（swipeleft，＃page2，function（）{
$ .mobile.changePage（＃+ teamId [0]，{transition： slide，reverse：false}）;
}）;
}）;
$ b $（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
}
}
$ .mobile.changePage（＃+ topageid，{transition：slide，reverse：rev}）;
}）;
以下是用于调整FOOTER的更新代码的代码。
var widgetNames = new Array（）;
var widgetId = new Array（）;
var pageId =''
$ b $（document）.on（pagecreate，function（）{
$（ （）;
}）;
$ b $（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）;
（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] *？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]，一世）;
}
}
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-iconpost ='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'>< 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'>;
$ b 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>;
$ b $ 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>';
$ b if（testwidget [i] .substring（0,3）==var）{
widgetPart [i] ='< DIV id = widgetContainer _'+ widgetId [i] +'>< / DIV>< SCRIPT>'+'function UpdateWidgetDiv'+ widgetId [i] +'（）{ '+ testwidget [i] +'}'+'< / SCRIPT>';
}
else {
$ b}
AllWidgets + ='< a href =＃'+ widgetId [i] +'class =widgetLinkdata-theme =bdata-role =button>'+ widgetNames [i] +'<一个>';
var makePage = $（pageHeaderPart + check + widgetPart [i] + pageFooterPart）;
makePage.appendTo（$。mobile.pageContainer）;
$（'＃items'）。prepend（AllWidgets）.trigger（'create'）;
$ b函数UpdateActivePage（）{
pageId = $（：mobile-pagecontainer）.pagecontainer （ 'getActivePage'）丙（ ID）。
var idx;
for（var i = 0; i< widgetId.length; i ++）{
if（widgetId [i] == pageId）{
idx = i;
休息;
}
}
eval（testwidget [idx]）;
if（counterValue == false）{
//不需要重新创建数据表
return;
} else {
$ b $（＃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'）;
$ b $（'＃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'）;
}）;
}
}
函数CreateGridUpdateFunction（oldUpdatefunction，thisWidgetID）
{
var updateLines = oldUpdatefunction.split（\\\
）;
var updateFunctionCode =;
for（var i = 0; i< updateLines.length; i ++）
{
if（updateLines [i] .indexOf（var url =）>
{
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 + =};
}
}
returnvar counterValue = \\;+ updateFunctionCode;
$ b $（：mobile-pagecontainer）.on（pagechange，function（）{UpdateActivePage（）;}）
setInterval（UpdateActivePage，3000）;
$ b}
}）;
}）;
}）;
函数startsWith（searchString，searchVal）{
console.log（searchString）;
var search = searchString.trim（）;
返回search.indexOf（searchVal）> = 0;
函数createTableStringFromXML（serverXML，thisWidgetID）{
$ b console.log（serverXML ）;
var xmlDoc = $ .parseXML（serverXML）;
var $ xml = $（xmlDoc）;
var xmlLines = serverXML.split（\\\
）;
var returnTable =;
if（$（＃grid_+ thisWidgetID）.length> 0）{
var oTable = $ （#grid_+ thisWidgetID）.dataTable（）;
oTable.fnClearTable（）;
$ b $ 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 {
（var i = 0; i
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]。匹配（/>（*）<？/ I）[1] + < /第> 中;
}
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]。匹配（/>（*）<？/ I）[1] + < / TD> 中;
}
console.log（returnTable）;
}
}
return returnTable;
}
//代码用于拖拽和拖拽动态创建的页面
$（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'）;
}
}）;
$ b $（document）.on（swipeleft，＃page2，function（）{
$ .mobile.changePage（＃+ widgetId [0]，{transition： slide，reverse：false}）;
}）;
$ b $（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}）;
}
}）;
}）;
$ b // ADJUST FOOTER
$（document）.on（pagecontainershow，function（）{
SetMinHeight（） ;
}）;
$ b $（window）.on（resize orientationchange，function（）{
SetMinHeight（）;
}）;
函数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;
背景：无重复滚动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;
}
＃标题h5 {
颜色：＃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;
明确：两者;
}
#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-颜色：＃4289C1;
颜色：白色;
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;
身高：98％！重要;
溢出：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： 150像素;
}
#example_filter {
display：none;
}
标签{
宽度：140px;
}
#example_wrapper {
margin：auto;
}
#example_filter {
margin：-5px 0 0 90px;
}
table.dataTable tr.odd td.sorting_1 {
background-color ：＃E3EEF8！重要;
}
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;
$ / code $ / pre
解决方案一种方法：
如果您位于最后一页，请设置topageid等于空。然后在调用changepage之前检查topageid是否为空：
if（e.type =='swiperight'）{
if（ind> 0）{
topageid = teamId [ind - 1];
}
} else {
rev = false;
if（ind
} else {
//不返回到page2
topageid = null;
if（topageid）{
$ .mobile.changePage（＃+ topageid，{transition：slide，reverse：rev}）;
}
I have a small app here which consist of a welcome page and a few other pages for various teams. Here is my FIDDLE i have to make things easy. PLEASE check it out.
In this i can swipe from the welcome page to miami heat to new york knicks to houston rockets and back to welcome page. The thing is i don't want users to be able to swipe from houston rockets page back to welcome page. So i was wondering how can i do that?
The following is my code i use for swiping through pages.
$("#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});
});
Following is code with the updated code for adjusting 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");
}
Following is my 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;
}
解决方案 Here is a way to do it:
If you are on the last page, set topageid equal to null. Then check that topageid is not null before calling changepage:
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});
}
这篇关于在Jquery中滑动页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
