Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.05.2016, 11:47
Кандидат Javascript-наук
Отправить личное сообщение для ligisayan Посмотреть профиль Найти все сообщения от ligisayan
 
Регистрация: 19.06.2015
Сообщений: 114

Можно ли на смартфонах раскрывать список не табом, а пальцем?
Всем привет! Есть у меня блок со сворачивающимся-раскрывающимся списком по клику. Ссылка на фидл
Интересует: можно ли на смартфонах раскрывать список не табом, а проводя пальцем по экрану?
$('#bottom-arrow').click(function() {
  $(this).toggleClass('toggled');
  $('#fix-bot').toggle('slow');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div id="bottom">
  <div id="bottom-arrow"></div>
  <div id="fix-bot">
    <p>Контейнер</p>
  </div>
</div>

Код:
#bottom {
  position: fixed;
  width: 100%;
  bottom: 0;
  background: rgba(153, 0, 0, 0.8);
  text-align: center;
}
#fix-bot {
  height: 50px;
}
#fix-bot p {
  color: #fff;
}
#bottom-arrow {
  width: 100%;
  pointer-events: none;
  height: 23px;
  background: rgba(153, 0, 0, 0.8);
}
#bottom-arrow:before {
  pointer-events: all;
  content: "\f106";
  font-family: 'FontAwesome';
  color: #fff;
  font-size: 50px;
  font-weight: 400;
  line-height: 17px;
  transition: transform linear 0.5s;
  display: inline-block;
}
#bottom-arrow.toggled:before {
  content: "\f107";
}
body {
  margin: 0;
}
Ответить с цитированием
  #2 (permalink)  
Старый 20.05.2016, 11:54
Кандидат Javascript-наук
Отправить личное сообщение для yazonnile Посмотреть профиль Найти все сообщения от yazonnile
 
Регистрация: 25.05.2012
Сообщений: 133

можно.
hammerjs
Ответить с цитированием
  #3 (permalink)  
Старый 20.05.2016, 12:21
Кандидат Javascript-наук
Отправить личное сообщение для ligisayan Посмотреть профиль Найти все сообщения от ligisayan
 
Регистрация: 19.06.2015
Сообщений: 114

Сообщение от yazonnile Посмотреть сообщение
можно.
hammerjs
yazonnile, спасибо - а как это сделать?
Ответить с цитированием
  #4 (permalink)  
Старый 20.05.2016, 12:31
Кандидат Javascript-наук
Отправить личное сообщение для yazonnile Посмотреть профиль Найти все сообщения от yazonnile
 
Регистрация: 25.05.2012
Сообщений: 133

hammerjs - библиотека, что позволяет контролировать то, что вам нужно. Погуглите
Ответить с цитированием
  #5 (permalink)  
Старый 20.05.2016, 13:12
Кандидат Javascript-наук
Отправить личное сообщение для ligisayan Посмотреть профиль Найти все сообщения от ligisayan
 
Регистрация: 19.06.2015
Сообщений: 114

Сообщение от yazonnile Посмотреть сообщение
hammerjs - библиотека, что позволяет контролировать то, что вам нужно. Погуглите
допустим, вот так пробую
В чем ошибка?
Ответить с цитированием
  #6 (permalink)  
Старый 20.05.2016, 19:23
Кандидат Javascript-наук
Отправить личное сообщение для yazonnile Посмотреть профиль Найти все сообщения от yazonnile
 
Регистрация: 25.05.2012
Сообщений: 133

На эмуляторе работает
Ответить с цитированием
  #7 (permalink)  
Старый 20.05.2016, 20:50
Кандидат Javascript-наук
Отправить личное сообщение для ligisayan Посмотреть профиль Найти все сообщения от ligisayan
 
Регистрация: 19.06.2015
Сообщений: 114

Сообщение от yazonnile Посмотреть сообщение
На эмуляторе работает
yazonnile интересно, что здесь тап работает как клик jsfiddle.net/JfGVE/1354 а здесь свайп не работает никак jsfiddle.net/JfGVE/1355
я говорю за реальный девайс
Ответить с цитированием
Ответ



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

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