Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.10.2017, 19:37
Новичок на форуме
Отправить личное сообщение для AlexBes89 Посмотреть профиль Найти все сообщения от AlexBes89
 
Регистрация: 11.03.2015
Сообщений: 6

Как перейти по ссылке на следующую страницу методом SWYPE?
Делаю сайт из двух страниц ориентированный на iPhone 6 и iPad. Главная страница состоит из ссылок (новости). Как с помощью свайпа перейти на другую страницу (просмотр новости)? А с просмотра новости вернуться на список новостей с помощью свайпа?

Еще объяснение:

свайпаешь и влево - след страница

вправо - предыдущая
Ответить с цитированием
  #2 (permalink)  
Старый 10.10.2017, 19:50
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,795

Это как-то так, что ли?
var xhr=new XMLHttpRequest();
xhr.open('SWYPE','https://javascript.ru/',false);
xhr.send();

Swype - непрерывное движение касания по дисплею устройства?
Нужно повесить обработчики событий на события touchstart, tochend и touchmove (по желанию).
При touchStart записываете координаты начала движения, по touchEnd (или move) смотрите пройденный путь по вертикали и горизонтали.
Если пройденный путь по вертикали больше, чем по горизонтали, то игнорируем этот событие, т.к. это просто скролл страницы.
Если иначе, то выполняете то, что вам нужно.

Не сильно сложно.

Последний раз редактировалось Nexus, 10.10.2017 в 19:56.
Ответить с цитированием
  #3 (permalink)  
Старый 14.10.2017, 20:47
Новичок на форуме
Отправить личное сообщение для AlexBes89 Посмотреть профиль Найти все сообщения от AlexBes89
 
Регистрация: 11.03.2015
Сообщений: 6

Nexus, спасибо за ответ. У меня почти все получилось с помощью jquery mobile. Но появилась следующая проблема, прошу взглянуть на мой код:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1" name=viewport>
  <script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
  <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <title>test</title>
</head>
<body>
  <div class="wrapper">
    <section class="articles">
      <div class="section">
        <h2 class="title_section">Editorial:</h2>
        <article class="article">
          <div class="leopard_link">
            <h3 class="title_article">What's the Story?</h3>
            <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio ipsa deserunt nisi eaque veniam explicabo laborum aliquam odit et velit possimus est quae error doloremque, ullam iusto voluptatem quis recusandae!</div>
          </div>
        </article>
      </div>
      <div class="section">
        <h2 class="title_section">Recommended Products:</h2>
        <article class="article">
          <div class="cheetah_link">
            <h3 class="title_article">Buy put options to hedge your equity exposure</h3>
            <div class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio ipsa deserunt nisi eaque veniam explicabo laborum aliquam odit et velit possimus est quae error doloremque, ullam iusto voluptatem quis recusandae!</div>
          </div>
        </article>
      </div>
    </section>
  </div>

  <script>
    $(function() {
      var page_leopard = $('.leopard_link'),
          page_cheetah = $('.cheetah_link');

      page_leopard.on( "swipeleft", swipeleftHandler );
      function swipeleftHandler( event ){
        $(location).attr('href', 'http://kids.nationalgeographic.com/content/dam/kids/photos/animals/Mammals/H-P/Leopard-tree.ngsversion.1477048906275.adapt.945.1.jpg');
      }

      page_cheetah.on( "swipeleft", swipeleftHandler );
      function swipeleftHandler( event ){
        $(location).attr('href', 'http://kids.nationalgeographic.com/content/dam/kids/photos/animals/Mammals/A-G/cheetah-watching.ngsversion.1396530528126.adapt.945.1.jpg');
      }

    });
  </script>
</body>
</html>


На этой странице 2 разных ссылки, для примера я выбрал фото больших кошек: 1. Леопард; 2. Гепард. Почему когда происходит свайп по первой ссылке, переход происходит на вторую? Подскажите плизз, в чем моя ошибка?
Ответить с цитированием
  #4 (permalink)  
Старый 14.10.2017, 21:21
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 458

AlexBes89,
Потому что невозможно иметь несколько функций с одинаковым именем, в таком случае последняя перезапишет все предыдущие, надо разделять имена, например swipeleftHandler1 и swipeleftHandler2.
Ответить с цитированием
  #5 (permalink)  
Старый 14.10.2017, 21:47
Новичок на форуме
Отправить личное сообщение для AlexBes89 Посмотреть профиль Найти все сообщения от AlexBes89
 
Регистрация: 11.03.2015
Сообщений: 6

Rise, спасибо большое=)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как получить данные по http ссылке Ракун Events/DOM/Window 7 17.08.2017 17:11
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Как реализовать клик по ссылке, ключ у которой меняется Mayskiykot Общие вопросы Javascript 4 11.12.2013 10:35
Как сделать ссылку на страницу видимой при определенных условиях? zonkon Общие вопросы Javascript 2 03.10.2013 13:04
Help ! Как загрузить данные по ссылке из таблицы1 в таблицу2 ? asked86 Общие вопросы Javascript 1 25.03.2009 21:06