2013-06-10 2 views
1

Я запускаю веб-приложение, используя backbone.js и jquery mobile. Я хочу добавить обратный эффект скольжения ко всей кнопке «назад» класса.jQuery мобильный мобильный обратно с переходом?

код выглядит так,

$('.ico_back').live('click', function(event) { 
$.mobile.back(); 
return false; 
}); 

Кто-нибудь знает, как добавить обратный эффект $.mobile.back() функции?

(Это одностраничный приложение, так что я не могу сделать это с Tranditional JQM образом: как добавить простой data-transition="slide")

+2

установить '.ico-back' элемент внутри' Ā' тег и добавить 'данных отн = back' приписывать ему. Вы можете добавить к нему переходы, используя атрибут 'data-transition = "slide" ' – krishgopinath

+0

. Я использую backbone.js для изменения представлений между разными URL-адресами, я устанавливаю $ .mobile.ajaxEnabled = false; $ .mobile.linkBindingEnabled = false; поэтому я могу использовать только функции JQM для изменения страницы. – vikingmute

+0

Также замените '.live'' .on ('click', '.ico-back', function' – Omar

ответ

3

Используйте следующий код для динамического изменения на предыдущую страницу.

Demo

$(document).on('click', '.ico-back', function() { 
var previous = $.mobile.activePage.prev('[data-role=page]'); 
$.mobile.changePage(previous, { 
    transition: 'slide', 
    reverse: true }); 
}); 

РЕДАКТИРОВАТЬ: на основе кода в репозиторий при условии, сделайте следующие изменения в следующем блоке кода.

if (this.firstPage) { 
transition = 'slide'; 
this.firstPage = false; 
} 
$.mobile.changePage($(page.el), {changeHash:false, transition: transition, reverse:true }); 
+0

thx для справки, в этом проекте нет мучительных страниц , поэтому приведенный выше код вызывает некоторую ошибку, я использую код из этого github repo, вы можете проверить его https://github.com/ccoenraets/backbone-jquerymobile/blob/master/js/main.js – vikingmute

+0

какая ошибка вы видите на консоли @vikingmute? – krishgopinath

+0

TypeError: b.data (...) не определено – vikingmute

1

В каждом элементе с классом .ico_back добавляет атрибуты data-rel и data-transition. Таким образом, вам не нужно найти, какая из предыдущих страниц или добавить дополнительную логику внутри вашего кода. jQM управляет переходом на обратную страницу для вас.

$(document) 
    .on("pageinit", "#page-id", function() { 
     $('.ico_back') 
      .each(function (index) { 
       $(this) 
        .attr("data-rel", "back"); 
       $(this) 
        .attr("data-transition", "slide"); 
      }); 
}); 

Надеюсь, это поможет.

1

На линиях ответа ТОЛИС Эммануилидис, вы могли бы wrap ваши ico_back классы с a

$(document).on("pageinit", "#page-id", function() { 
    $('.ico_back').wrap($('<a/>', { "data-rel":"back", "data-transition" : "slide" })); 
}); 

ПРИМЕЧАНИЕ: Это будет применяться, если и только если ico_back разве якорь тег.

+1

+1 приятное решение. Btw у вас отсутствует скобка :) –

+0

oops :) отредактировал :) – krishgopinath

0

вы можете даже использовать history.back() при нажатии кнопки

Смежные вопросы