Как использовать jQuery Mobile только для поддержки сенсорных событий (без улучшений пользовательского интерфейса)?

Question

Я работаю над веб-приложением, которое имеет свой собственный внешний вид.Я хочу использовать jQuery Mobile только для поддержки сенсорных событий.

Когда я связываю jquery.mobile.min.js (без ссылки на css), макет моей страницы нарушается.

Как настроить (инициализировать) jQuery Mobile для использования только поддержки сенсорных событий?Буду ли я связывать события в хуке готовности документа jQuery, поскольку у меня не было бы события, связанного со страницей JQM?

Изменить

См. Этот пример в jsfiddle: http://jsfiddle.net/redhotsly/JGgrw/. HTML содержит <button>, но jQuery Mobile создал <span> слева от него.Если вы проверите полученную разметку (F12), вы увидите, что jQuery Mobile также добавил класс CSS к моей кнопке.

Редактировать:

Мне нужно решение, в котором яне придется изменять скрипт JQM.Мне нужно использовать официальный скрипт с CDN.

Answer 1

Если вы просто хотите привязать события касания / жеста, я бы вместо этого использовал jGestures:

http://jgestures.codeplex.com/

Хороший маленький плагин jquery, который я использовал в проектах с большим количеством событий для привязки:

Доступные события:

Ориентация Устройство поворачивается по часовой стрелке или против часовой стрелки. Это событие вызывается устройством и может использовать внутренний гироскоп.

щипок Срабатывает во время жеста щипка (два пальца движутся друг от друга или навстречу друг другу).

поворот Запускается во время жеста вращения (два пальца вращаются по часовой стрелке или против часовой стрелки).

swipemove Запускается во время жеста движения пальцем (пальцы перемещаются вокруг устройства, например, перетаскивание)

swipeone Запускается после жеста перемещения пальцем с помощью одной точки касания (один палец был перемещен вокруг устройства)

swipetwo Запускается после жеста движения смахивания с двумя точками касания (два пальца были перемещены вокруг устройства)

swipethree Запускается после жеста движения смахивания с тремя точками касания (три пальца были перемещены вокруг устройства)

swipefour Запускается после жеста перемещения пальцем с помощью четырех точек касания (четыре пальца были перемещены вокруг устройства)

swipeup Запускается после жесткого жеста движения вверх

swiperightup Запускается после жеста движения вправо и вверх

swiperight Запускается после жесткого жеста движения вправо

swiperightdown Срабатывает после установки * жест движения пальцем вверх и вниз

swipedown Срабатывает после жесткого движения пальцем вниз

смахивание вниз Запускается после жеста смахивания влево и вниз

swipeleft Запускается после жесткого движения пальцем влево

swipeleftup Срабатывает после жеста смахивания влево и вверх

tapone Запускается после одного касания (одним пальцем)

taptwo Запускается после жеста касания двойным (двумя пальцами)

tapthree Запускается после трехкратного касания (три пальца)

pinchopen Запускается, когда происходит жест pinchopen (два пальца отходят друг от друга) и точки прикосновения (пальцы) снял устройство.

pinchclose Запускается, когда происходит жест pinchclose (два пальца движутся навстречу друг другу) и точки прикосновения (пальцы) снял устройство.

rotatecw Запускается, когда происходит жест вращения по часовой стрелке (два пальца вращаются по часовой стрелке) и точки касания (пальцы) снял устройство.

rotateccw Запускается, когда возникает жест вращения против часовой стрелки (два пальца вращаются против часовой стрелки) и точки касания (пальцы) убираются устройством.

Answer 2

Если вы хотите использовать jQuery mobile только для сенсорных событий, добавьте этот фрагмент сценария до загрузки библиотеки jQuery для мобильных устройств:

<script type="text/javascript">$(document).bind("mobileinit", function(){$.extend(  $.mobile , {autoInitializePage: false})});</script>

.страницы и касаясь DOM, оставляя ваш макет в покое.

Answer 3

jQuery Mobile теперь имеет Download Builder, который позволяет вам выбирать только те части, которые вам нужны, в этом случае вам нужно только установить флажок Touch в разделе Event.

http://jquerymobile.com/download-builder/

Answer 4

jQM теперь отделен:

• http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/

Виджеты: теперь отсоединены для гибких сборок

Мы хотели бы отделить все наши виджеты от плагина страницы для долгое время, и мы рады объявить, что мы наконец-то приземлились менять. Так что именно означает в любом случае развязанный? Ну, то отдельные виджеты и утилиты всегда были разбиты на отдельные файлы скриптов. Тем не менее, плагин страницы был ответственным за обработка автоматической инициализации всех официальных плагинов, найденных в разметка при создании страницы. Эта ситуация сделала невозможным удаляйте ненужные плагины, не вызывая ошибок, и обычно установить плохой прецедент для будущих добавлений виджетов.

Теперь почти все виджеты пользовательского интерфейса в библиотеке jQuery Mobile полностью отделены, поэтому их можно просто удалить, если они не нужны для конкретный проект. Это изменение позволяет резко уменьшить размер библиотеки, включая только определенный набор виджетов или функции, которые вам нужны, в дополнение к горстке необходимых файлов ядра. В то время как мы все еще планируем сделать больше разъединения и очистки, следующее файлы теперь отделены и могут быть безопасно удалены из файла make перед выполнением пользовательской сборки:

• верхний колонтитул страницы / содержание / нижний колонтитул
• разборные
• controlgroup
• fieldcontain
• fixheaderfooter
• кнопка
• checkboxradio
• выберите
• Слайдер
• TextInput
• ссылки на темы
• ListView
• Navbar
• сетка

Мы будем работать с картой зависимостей, потому что некоторые виджеты полагаются на другие работать. Например, плагин разметки кнопок вызывается многими виджеты выше, так что это может быть исключено только, но если вы не используете любой из виджетов, которые зависят от кнопок.

Мы все еще разрабатываем наши рекомендации по подключению плагина зависимости и развязывание вещей еще дальше. В конечном итоге это будет Будьте в курсе событий в инструменте загрузки, так что следите за обновлениями!

Вы можете зайти в их GIT Repo и просто скачать то, что вы хотите:

• https://github.com/jquery/jquery-mobile/tree/master/js

Answer 5

Еще одна новая опция - jQuery-Mobile-Events , я боролся с этой проблемой и считаю этот плагин только полезным.

Моя сборка из Download Builder от jQuery Mobile не работает для меня. И у jGestures нет события taphold, которое мне нужно.

Answer 6

В случае, если кто-то еще столкнется с этим (и ему не нужен файл из одного из CDN jQuery), вот шаги, которые я предпринял, чтобы извлечь только триггеры событий JQM:

1. git clone git@github.com:jquery/jquery-mobile
2. cd jquery-mobile
3. изменить js/jquery.mobile.js в вашем любимом редакторе
4. заменить оператор define(...); на define(['./events/touch', './events/orientationchange']);
5. make
6. ваш JQM, предназначенный только для событий, теперь находится в compiled/jquery.mobile.js и compiled/jquery.mobile.min.js

Теперь вы можете использовать $(el).tap(fn) и т. П., Не беспокоясь о том, что JQM нанесет удар по вашей разметке!

Answer 7

позаботиться об этой конкретной проблеме во время инициализации практически невозможно, лучше всего использовать data-role = "none" для элемента пользовательского интерфейса, для которого не требуется, чтобы стиль по умолчанию выполнялся как таковой:

<button type="button" data-role="none">Click Me!</button>​​​​​​​​​

проверить на http://jsfiddle.net/JGgrw/13/

Answer 8

Перейдите по ссылке ниже и выберите только TOUCH. Функции, которые будут добавлены, перечислены под каждым флажком, поэтому выберите только то, что вам нужно и, возможно, будет использоваться.CDN всегда будет включать все функции и будет замедляться, так как размер файла будет больше, но не намного.Я протестировал и работаю:)

Рабочий пример, но (Full jQuery Mobile) со всеми функциями, просто используйте приведенную ниже или загрузите последний скрипт официального сайта, который является Custom: https://codepen.io/binaryfever/pen/RGjKGP

http://jquerymobile.com/download-builder/ Сценарий ниже поддерживает только следующие функции: сенсорные события, в том числе: сенсорный запуск, сенсорное движение, касание, касание, нажатие, нажатие, пролистывание, пролистывание, прокрутка, прокрутка.1011 *