際際滷

際際滷Share a Scribd company logo
May 2012 - Data Fok
iScroll4
SwipeView
touchSwipe
PubSubJS
ICanHaz.js
Add2home
flot
Hyphenator.js
CSI (client side includes)
Features
 Solve iOS and Android browsers poor support for css
overflow:scroll and position:fix properties
 item list scrolling with fixed header and footer
 With elastic bouncing
 Pull up/down to refresh
 Snap to element
 Customizable scrollbars
 Support nested iScroll
 Use hardware accelerated CSS
 Compatibile Device: iPhone/iPod touch >=3.1.1, iPad >=3.2,
Android >=1.6, DesktopWebkit, Firefox, Opera desktop/mobile.
Demo
 http://cubiq.org/iscroll-4
Alternative
 Scrollability
http://joehewitt.github.com/scrollability/
Features
 Infinite Carousel
 Simple Structure, 3 pages, good for memory
conservation for mobile browser
 Use hardware accelerated CSS
 Use loading technique that is developed with the
limitation of mobile browser in mind
Demo
 http://cubiq.org/swipeview
Alterative
 SwipeJS http://swipejs.com/
Features
 jQuery Plugin for capturing touch event in iPad and
iPhone
 A good building block for creating touch base
application, provide various swipe event data
 Can detect swipe direction (left, right, up, down)
 Can detect 1 or 2 finger(s) swipe
 Can set threshold to for triggering a swipe
 Provide swipe status ( direction, swipe distance, swipe
phase)
 Can restrict swipe direction
Demo
 http://labs.skinkers.com/touchSwipe/
Alterative
 jGuesture http://jgestures.codeplex.com/
Features
 A JS library for Publishsubscribe pattern
 Pure JavaScript, no library dependencies
 Easy to use
 Much better performance compare with jQuery
custom event implementation
http://jsperf.com/pubsubjs-vs-jquery-custom-
events
Doc
 http://roderick.dk/2010/10/12/introducing-
pubsubjs-a-library-for-doing-publish-subscribe-in-
javascript/
Alternative
 http://www.joezimjs.com/projects/publish-
subscribe-jquery-plugin/
 http://amplifyjs.com/api/pubsub/
Features
 Simple and clean client side templating lib
 Inspired by Mustache, but with an intuitive
template definition
 Support features from Mustache, e.g. Partial,
Looping
 Support dynamically add template/partial, e.g.
pull template from server using ajax
Doc
 http://icanhazjs.com/
Alterative
 Handlebars.js http://handlebarsjs.com/
Features
 A simple library to show a bubble dialog telling user to
add to home when it detect the device is an iPhone or
iPad
 22 languages supported
 With lots of options
 Allow message customization
 Auto detect iPhone and iPad and display bubble
location differently
Doc
 http://cubiq.org/add-to-home-screen
Features
 Javascript plotting library for jQuery
 produces graphical plots of arbitrary datasets on-the-
fly client-side
 Easy to use
 Support Bar , Line, Stacked Bar, Pie Charts
 Support multiple series on a chart
 Support multiple y axes
 Comprehensive axis setting
 Support data point hovering
Demo
 http://people.iola.dk/olau/flot/examples/
Doc
 http://code.google.com/p/flot/
Alternative
 Rickshaw http://code.shutterstock.com/rickshaw/
Features
 Automatically hyphenate texts on website when
text exceed the container width
 runs on any modern browser that supports
JavaScript and the soft hyphen (­)
 automatically breaks URLs on any browser that
supports the zero width space
 Support 29 languages
 http://code.google.com/p/hyphenator/wiki/en_AddNew
Language
Demo
 http://hyphenator.googlecode.com/svn/tags/Versi
on%204.0.0/WorkingExample.html
Doc
 http://code.google.com/p/hyphenator/wiki/en_Ho
wToUseHyphenator
Features
 Client side "include" an external file into html
document using ajax
 Work even external file is not from a webserver, it
works for HTML5 offline case, while jquery .load()
does not work
Doc
 http://www.massimocorner.com/libraries/csi/
Demo
 http://www.massimocorner.com/libraries/csi/sam
ple.htm
Alternative
 jQuery .load() http://api.jquery.com/load/

More Related Content

Open source javascript libraries for mobile web applications in 2012