Slip.js: Kleines Script zur Touch-Optimierung von Listen in Web-Apps
Slip.js begegnete mir schon vor einigen Wochen, hinterließ jedoch auf den ersten Blick nicht genug Eindruck. Nun aber hatte ich einen konkreten Anwendungsfall und ich erinnerte mich, Sie kennen das, da doch etwas gesehen zu haben. Jetzt, in der konkreten Umsetzung muss ich einräumen, dass Slip.js für die Erstellung sortierbarer, oder generell bearbeitbarer Listen per Touch eine ziemlich clevere Sache ist.
Noch mehr JavaScript-Scripts gibt es hier.
Slip.js: Swipen, was das Zeug hält
Slip.js stammt aus den Hirnwindungen des in London ansässigen Polen Kornel Lesinski, der auf Twitter lediglich unter dem Namen Kornel und mit einer Website namens Pornel auftritt. Hmm. Seine Brötchen verdient er bei der Financial Times, im dortigen FT Lab. Hier werkelt er an Konzepten mit (hoffentlich) Zukunft. Kornel ist kein Unbekannter. Aus seiner Feder stammen die populären Bildverkleinerer ImageOptim, ImageAlpha und pngquant. Slip.js schlägt jedoch bereits zum jetzigen Zeitpunkt alle seiner bisherigen Projekte in Sachen Popularität um ein Mehrfaches.
Dabei ist Slip.js auf den ersten Blick eher unspektakulär. Smartphone-Nutzer sind es gewohnt, Listen per Swipegesten umsortieren, Elemente löschen, sie generell per Touch bearbeiten zu können. Bedenken muss man dabei allerdings, dass dieses Feature nur für native Apps einfach umzusetzen war. Das Besondere an Slip.js ist, dass es Swipegesten wie in nativen Apps für Web-Apps zugänglich macht.
Mit Slip.js lassen sich Listen-Items per Swipe an eine andere Position bringen, löschen oder mit Interaktion versehen. Das folgende kleine GIF zeigt ziemlich gut, was Sie erwarten dürfen:
Das Swipen nach rechts und links lässt sich mit Features, wie Löschen oder Teilen versehen. Das Ganze funktioniert mit benutzerdefinierten DOM-Events und ist recht code-sparend umzusetzen. Slip.js funktioniert vollkommen unabhängig von anderen Bibliotheken. Völlig ungewohnterweise ;-) müssen Sie lediglich slip.js in den Head Ihres Projektes einbinden, um die Funktionalität voll nutzen zu können.
Das kleine Script ist frei verwendbar und mit einer BSD-Lizenz versehen. Slip.js läuft mit allen erwähnenswerten mobilen Browsern, als da wären iOS Safari, Firefox Mobile, Chrome Mobile und die beiden Versionen von Opera Mobile.
Das Script ist noch nicht perfekt. Die nächsten Features werden wohl das Scrollen des Browserfensters, wenn man den Rand des Viewports erreicht, das Sichtbarmachen der UI hinter dem Listenelement, sowie anpassbare Verzögerungen und Animationen sein. Schaumermal…
Links zum Beitrag
