Date post: | 30-Nov-2014 |
Category: |
Technology |
Upload: | kreativekk |
View: | 2,602 times |
Download: | 5 times |
Wordpress:Swipe im Browser
Dipl.-Ök. Joerg Niemannim Rahmen des 3. WP-Blogger Rhein-Ruhr
Übersicht
➲ Was?
Touch-Steuerung / Swipe im Browser
➲ Wo?
Artikel in Wordpress Siehe WordPress Theme iYoko 0.1 – Swipe-Demo
➲ Wie?
Javascript
➲ Umsetzung
http://www.PadLive.de/ (nur via iOS-Device)
➲ Was jetzt?
Wohttp://padlive.de/
WieJavascript & AJAX
Webserver
Artikel B Artikel CArtikel A
Umsetzung
Javascript (I)• jQuery(document).ready(function($) {
if (navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod') {
jQuery("#swipeBox").show(); }; });
<div id="swipeBox" align="center" ontouchstart="touchStart(event,'swipeBox');" ontouchend="touchEnd(event);" ontouchmove="touchMove(event);" ontouchcancel="touchCancel(event);"><div style="float:left;"><img style="float:left;" src="arrow-3D-green-left.jpg" /></div>
<div class="swipeText">Swipe here!</div><div style="float:right;"><img style="float:right;" src="arrow-3D-green-right.jpg" /></div>
</div>
Javascript (II)• <script src="padilicious.js" type="text/javascript"></script>
function processingRoutine() { var swipedElement = document.getElementById(triggerElementID); if ( swipeDirection == 'left' ) { getAdjacentLink('','next'); if(ajaxLink) window.document.location = ajaxLink; } else if ( swipeDirection == 'right' ) { getAdjacentLink('','prev'); if(ajaxLink) window.document.location = ajaxLink; } else if ( swipeDirection == 'up' ) {
... } else if ( swipeDirection == 'down' ) {
... } }