I try to do a swipe event/effect from left to right in Sencha Touch or HTML5. So if the HTML page runs on iOS then it should start an animation if the user touche ans moves/swipe with the finger from the left to the right on the screen.
Any ideas how this can be done 'easily'?
If I understood you correctly, you want to switch content if the user swipes the screen to either left/right. I believe the easiest approach is to use a Carousel. Please have a look at the Sencha Touch Kitchen Sink example (User Interface -> Carousel): http://dev.sencha.com/deploy/touch/examples/kitchensink/
Below is a code example taken from the Kitcen Sink that demonstrates the use of a Carousel:
new Ext.Panel({
cls: 'cards',
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [{
xtype: 'carousel',
items: [{
html: '<p>Navigate the carousel on this page by swiping left/right.</p>',
cls: 'card card1'
},
{
html: '<p>Clicking on either side of the indicators below</p>',
cls: 'card card2'
},
{
html: 'Card #3',
cls: 'card card3'
}]
}]
});
You can add gesture swipe event something like this.
tabpanel.element.on('swipe', function(e) {
if(e.direction === 'left') {
// left slide event here
}
if(e.direction === 'right') {
// right slide event here
}
if(e.direction === 'up') {
// up slide event here
}
if(e.direction === 'down') {
// down slide event here
}
}, tabpanel);Hope this help you.
Hmm... So, in a carousel, what if one wants to capture that swipe event, when a user actually swipes the screen, from left to right or viceversa... and capture that data as well, which direction it was swiped?
