在Jquery中滑动页面

在Jquery中滑动页面

关注
发信
关注(28)粉丝(399)

在Jquery中滑动页面

本文介绍了在Jquery中滑动页面的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我在这里有一个小应用程序，其中包含一个欢迎页面和其他几个页面，供各个团队使用。这是我的 FIDDLE 我必须让事情变得简单。请检查出来。 在这里，我可以从欢迎页面滑动到迈阿密热火，再到纽约尼克斯，再回到欢迎页面。事情是，我不希望用户能够从休斯顿火箭页面滑回欢迎页面。所以我想知道我该怎么做？ 以下是我用于浏览页面的代码。 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 topageid = teamId [ind + 1]; } } $ .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 ='horizo​​ntal'>< 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 解决方案一种方法： UPDATED FIDDLE 如果您位于最后一页，请设置topageid等于空。然后在调用changepage之前检查topageid是否为空： if（e.type =='swiperight'）{ if（ind> 0）{ topageid = teamId [ind - 1]; } } else { rev = false; if（ind topageid = teamId [ind + 1]; } 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: UPDATED FIDDLEIf 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中滑动页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！
07-18 19:20
Powered by LMLPHP ©2025 在Jquery中滑动页面 0.043402