2013-04-09 2 views
1

У меня есть серия страниц внутри одного документа, я перемещаюсь со страницы на страницу с использованием салфетки на сенсорных устройствах.jQuery Mobile swipe navigation exception

То, что я не знаю, как это сделать, заключается в том, чтобы остановить событие салфетки, когда я достиг определенного идентификатора страницы.

Это код, я использую сформировать свою навигацию:

$('div.ui-page').live("swipeleft", function(){ 
var nextpage = $(this).next('div[data-role="page"]'); 
if (nextpage.length > 0) { 
$.mobile.changePage(nextpage, "slide", false, true); 
} 
}); 
$('div.ui-page').live("swiperight", function(){ 
var prevpage = $(this).prev('div[data-role="page"]'); 
if (prevpage.length > 0) { 
$.mobile.changePage(prevpage, {transition: "slide", 
reverse: true}, true, true); 
} 
}); 

Я использую JQM 1,3

Спасибо за вашу помощь

+0

Что такое ваш вопрос? Ваш код уже не позволяет прокручивать, если вы показываете первую и последнюю страницу, что вам нужно больше? – Gajotres

+0

Извините, я не понял, что происходит, что у меня есть скрытые страницы, которые вызывается с помощью событий click. Они не должны отображаться при регулярной навигационной навигации. Они были помещены внутри документа внизу, поэтому мне нужен способ предотвратить доступ к этим страницам таким образом. – user2109326

+0

Думаю, я понимаю, что вы хотите превратить swiperight или swipeleft, когда достигнете определенной страницы, я прав? – Gajotres

ответ

4

Вот рабочий пример: http://jsfiddle.net/Gajotres/GXex5/

$(document).off('swipeleft').on('swipeleft', '[data-role="page"]', function(event){  
    if($(this).attr('id') == 'article2') { 
     event.preventDefault(); 
     return false; 
    } 
    var nextpage = $.mobile.activePage.next('[data-role="page"]'); 
    // swipe using id of next page if exists 
    if (nextpage.length > 0) { 
     $.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true); 
    } 
    event.handled = true; 

}); 

$(document).off('swiperight').on('swiperight', '[data-role="page"]', function(event){ 
    var prevpage = $(this).prev('[data-role="page"]'); 
    if (prevpage.length > 0) { 
     $.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true); 
    } 
    event.handled = true; 
}); 

В основном все, что вам нужно это код:

if($(this).attr('id') == 'article2') { 
    event.preventDefault(); 
    return false; 
} 

Этот код будет проверять, если некоторые страницы имеет определенное имя и, если это поэтому он предотвратит действие по умолчанию (событие). Также не забудьте передать объект события в коде, так

изменения это:

$('div.ui-page').live("swiperight", function(){ 

к этому:

$('div.ui-page').live("swiperight", function(event){ 
+0

Фантастический пример. Я уже использую этот код. большое спасибо – user2109326

3

Используйте ниже, чтобы определить следующую и предыдущую страницу ID , если он равен странице, которую вы не хотите показывать, ничего не делайте.

var DoNothing = 'DoNothing'; 

// fetch ID of next page in DOM 
var nextpage = $.mobile.activePage.next('[data-role=page]')[0].id; 

// fetch ID of previous page in DOM 
var prevpage = $.mobile.activePage.prev('[data-role=page]')[0].id; 

// logic 
if(nextpage == DoNothing || prevpage == DoNothing) { 
// Do nothing! 
} 
Смежные вопросы