From PC to mobile I believe many front-end siege division to worry about Mobile, write the original soundtrack mobile phone side event is very laborious, and JQ's click has 300 milliseconds delay, now has a relatively good JQ plug-in Hammer, Hammer.js is an open source, lightweight JavaScript library, it can recognize the touch without relying on other things, mouse events support a variety of mobile phone events, such as Zoom, QQ left swipe to delete, enlarge, rotate and so on.
Here's a tab switch to introduce hammer.
Usage:
1, first introduce jq2.0 above and jquery.hammer.js.
2, get the element, like JQ, add hammer on the back to the var Hammertime = $ ('. Tabs a '). Hammer ();
3, you can directly add the event Hammertime.on (' Tap ', function (EV) {}) directly with the tap click event in Hammer. You can write your own JS in function.
hammer.dragstart =
function
(ev) { };
// 开始拖动</span>
hammer.drag =
function
(ev) { };
// 拖动中</span>
hammer.dragend =
function
(ev) { };
// 拖动结束</span>
hammer.onswipe =
function
(ev) { };
// 滑动</span>
hammer.tap =
function
(ev) { };
// 单击</span>
hammer.doubletap =
function
(ev) { };
//双击</span>
hammer.hold =
function
(ev) { };
// 长按</span>
hammer.release =
function
(ev) { };
// 手指离开屏幕</span>
Experience Link: http://hammerjs.github.io/
JS Code
1$(function() {2 varHammertime = $ ('. Tabs a '). Hammer ();3Hammertime.on (' Tap ',function(EV) {4$( This). addclass (' actives '). Siblings (). Removeclass (' actives ');//adds a class-sibling removal. 5 varIndex = $ ('. Tabs a '). Index ( This);//Index6$ ('. Tab-bott ')). EQ (index). Show (). siblings (). Hide (); 7 })8})
recommend a front end group: Group name: Html5/css3/js/jq/nodejs/div Group No.: 339840649 Welcome to join in the exchange.
The mobile side of those things; Hammer good JQ plugin.