Как реализовать переход страницы JQuery?

Question

Как реализовать переход страницы JQuery?

0

Я разрабатываю приложение для телефонных разговоров. Я хочу добавить встроенный переход слайдов при переключении страниц. Я не использую jQuery mobile. Вместо этого я использую бутстрап. Но проблема в том, что в загрузке нет ничего для переходов страниц. так есть ли какой-либо путь в jquery или javascript, с помощью которого он может быть реализован в приложении. Я много искал, но весь пример относится только к переходам div.

Sudhir 27 май 2014, в 10:33

Источник

Теги:

javascript

jquery

ios

cordova

1 ответ

Ещё вопросы

Nitish Dhar · Accepted Answer · 2014-05-27T06-43-00.000Z

Вы можете использовать библиотеку CSS под названием Animate.css(http://daneden.github.io/animate.css/). Вы можете добавлять классы анимации на страницы и слайд, а затем влево и вправо. У меня было некоторое время, поэтому была сделана рабочая демонстрация того, как она будет работать -

РАБОЧАЯ ДЕМО - http://codepen.io/nitishdhar/pen/FIzst

Поэтому в основном я создал структуру страницы и нажимаю ссылки на странице, я назначаю им необходимый класс для эффекта слайда. Это также обрабатывает следующую и предыдущую обработку страниц, поэтому, если вы перейдете с первой страницы на вторую, слайд будет справа налево, и если вы перейдете от 2-го до 1-го, то слайд будет слева направо.

Структура HTML

<ul class="nav navbar-nav">
    <li><a class="page-link" href="#" data-page="1">Page 1</a></li>
    <li><a class="page-link" href="#" data-page="2">Page 2</a></li>
    <li><a class="page-link" href="#" data-page="3">Page 3</a></li>
</ul> 
<div class="container">
    <div class="page active" id="page-1" data-page="1">
        <h1>Page 1</h1>
        <p>
            <a href="#"  class="page-link btn btn-lg btn-primary" data-page="2" role="button">Next &raquo;</a>
        </p>
    </div>
    <div class="page" id="page-2"  data-page="2">
        <h1>Page 2</h1>
        <p>
            <a href="#"  class="page-link btn btn-lg btn-primary" data-page="1" role="button">&laquo; Prev</a>
            <a href="#"  class="page-link btn btn-lg btn-primary" data-page="3" role="button">Next &raquo;</a>
        </p>
    </div>

    <div class="page" id="page-3"  data-page="3">
        <h1>Page 3</h1>
        <p>
            <a href="#"  class="page-link btn btn-lg btn-primary" data-page="2" role="button">&laquo; Prev</a>
        </p>
    </div>

        </div> <!-- /container -->

Код jQuery

$(document).ready(function(){
  $('.page-link').click(function(){
     var goToPage = $(this).data('page');
     var nextPage = $('#page-' + goToPage);
     var currPage = $('.page.active');
     if(goToPage > currPage.data('page')) {
       currPage.addClass('animated slideOutLeft');
       nextPage.addClass('active animated slideInRight');
     } else if(goToPage < currPage.data('page')) {
       currPage.addClass('animated slideOutRight');
       nextPage.addClass('active animated slideInLeft');
     }
     currPage.removeClass('active animated slideInRight slideInLeft slideOutRight slideOutLeft');
  });
});