11个专为移动设备优化的JavaScript插件
webphp 13年前
<ul class="list"> <li><a href="/misc/goto?guid=4958188549303377295">Flexslider</a><br /> <img title="1.jpg" border="0" alt="1.jpg" src="https://simg.open-open.com/show/0472c939e9a6389795db7227da4c8ac8.jpg" /><br /> <span>Flexislider is the new breed of slider which adapt itself with the width/size of the webpage. Cut it short, it's responsive. It's free to use in private and commerical projects. The plugin includes fade and slide animations, customizable options as well as all the navigation options you would expect in such a plugin — touch gestures inclusive! </span> <ul class="arrow"> <li>Simple, semantic markup</li> <li>Supported in all major browsers</li> <li>Slide and Fade animations</li> <li>Highly customizable slider options</li> <li>Directional, keyboard, and touch swipe navigation</li> <li>Ultra Lightweight (5kb minified)</li> <li>Use any html elements in the slides</li> <li>Built for beginners and pros, alike</li> <li>Free to use under the MIT license</li> </ul> </li> <li><a href="/misc/goto?guid=4958188550221912949">Mobile Pagination</a> <br /> <img alt="Mobile Pagination" src="https://simg.open-open.com/show/4bad395c3e31b051f514bcc9d5226f8c.jpg" /> <br /> <span>The Pagination plugin creates touch-drag navigation between separate HTML pages. Simply add this plugin to your page and link together documents via ordinary HTML anchors. The linked pages will pre-fetch, and in browsers that support touch events, you'll be able to drag between the linked pages, while desktop users can navigate with mouse or keyboard. !</span> <ul class="arrow"> <li>touch swipe navigation</li> <li>Uses browser's history, bookmarking is supported</li> <li>Supports Back and forward buttons</li> </ul> </li> <li><a href="/misc/goto?guid=4958188550969170123">Pull-to-refresh</a><br /> <img alt="Pull-to-refresh" src="https://simg.open-open.com/show/c3f62b2a4ecd4d1eef5c70b170e3d946.jpg" /> <br /> <span>This is a prototype/proof of concept which gives a good idea of how to implement pull to refresh in javascript. It uses no javascript libraries so you could easily port it over to your favorite. I haven't tried this but it seems to be a rough implementation. Worth to mention as you will able to know how to build and perhaps enhance it to perfection.</span> </li> <li><a href="/misc/goto?guid=4958188551708647203">iScroll</a><br /> <img alt="iScroll" src="https://simg.open-open.com/show/59f8b3ed7da2e6c77241d2047720e0ed.jpg" /> <br /> <span>iScroll is the ultimate scrolling plugin you need for your mobile website. It's a complete rewrite and now it’s smoother than ever and adds some new important features: pinch/zoom, pull down to refresh, snap to elements and more custom events for a higher level of hackability.</span> <ul class="arrow"> <li>Pinch/Zoom</li> <li>Pull up/down to refresh</li> <li>Improve speed and momentum</li> <li>Snap to element</li> <li>Customizable scrollbars</li> </ul> </li> <li><a href="/misc/goto?guid=4958188552458911921">MiniApps Shake, Touch and Slider Plugins</a><br /> <img alt="iniApps Shake, Touch and Slider Plugins" src="https://simg.open-open.com/show/28ac2e09f1b8fd4fd653fecb978d8842.jpg" /> <br /> <span>These neat little plugins works on mobile web browsers using device acceleromter and touch-cable devices. WKShake is quite a cool implemetation and trigger an event once "shake" is detected, it works just like the undo feature in iOS deveices.</span> </li> <li><a href="/misc/goto?guid=4958188553188950575">VideoJS</a><br /> <img alt="VideoJS" src="https://simg.open-open.com/show/d1c52b9351c9a60594e5523959a682b3.jpg" /> <br /> <span>VideoJS is a HTML5 video player that compatible with wide arrray of platforms. It degrades gracefully back to flash player if there is an unsupported source.</span> <ul class="arrow"> <li>Free & Open Source</li> <li>Lightweight. NO IMAGES USED</li> <li>100% skinnable using CSS</li> <li>Library independent</li> <li>Easy to use</li> <li>Easy to understand & extend</li> <li>Consistent look between browsers</li> <li>Full Screen & Full Window Modes</li> <li>Volume Control</li> <li>Forced fallback to Flash (even when there is an unsupported source)</li> </ul> </li> <li><a href="/misc/goto?guid=4958184653445638717">Swipe Gestures</a><br /> <img alt="Swipe Gestures" src="https://simg.open-open.com/show/260c5d75bf9eb3ae12990fe65289bf8a.jpg" /> <br /> <span>This little plugin detect swipe gesture. For example, you can make a 400x400px div with swipe gesture (left or right) and execute an event when the correct gesture is detected.</span> </li> <li><a href="/misc/goto?guid=4958188109610829339">Touch Gallery</a><br /> <img alt="Touch Gallery" src="https://simg.open-open.com/show/bcbeabbeb6ac95617a67ac0697aecce7.jpg" /> <br /> <span>Touch-gallery brings the look and feel of native photo-viewing apps to your mobile browser. It is a lightbox gallery with touch support. For some reason, it works a little bit too slow</span> <ul class="arrow"> <li>Fullscreen photo gallery for touch-devices</li> <li>Optimized for Mobile Safari on the IPad of iPhone 4.</li> <li>Work on Desktop Safari, Firefox 4, Opera and Chome. Limited support for IE (no transition)</li> </ul> </li> <li><a href="/misc/goto?guid=4958184538124892418">Audio.js</a><br /> <img alt="Audio.js" src="https://simg.open-open.com/show/8091595039f13e944d83e321341c35ae.jpg" /> <br /> <span>audio.js is a drop-in javascript library that allows HTML5's tag to be used anywhere. It uses native where available and an invisible flash player to emulate for other browsers. It provides a consistent html player UI to all browsers which can be styled used standard css.</span> </li> <li><a href="/misc/goto?guid=4958184656266865134">PhotoSwipe</a><br /> <img alt="PhotoSwipe" src="https://simg.open-open.com/show/4db4fc0e7bd6db5664e93ae159ece14e.jpg" /> <br /> <span>Image gallery for mobile and touch devices. iPhone, iPad, Android, Blackberry 6 and Desktop all supported. PhotoSwipe is a self contained JavaScript library that can be easily integrated into your mobile websites. It is heavily optimized for mobile webkit browsers. However, if you need wider desktop browser support or you are using jQuery Mobile, PhotoSwipe comes packaged with a jQuery implementation as well.</span> </li> <li><a href="/misc/goto?guid=4958188556649243208">Diapo Slideshow</a><br /> <img alt="Diapo jQUery Slideshow" src="https://simg.open-open.com/show/7166e525fbdf4a01cc1734e833995172.jpg" /> <br /> <span>Diapo slideshow is an open source project. You can suggest changes or improvements if you want. You can download it and use for free, you can also include it in your projects and sell it as part of a bigger work (in this case please consider a donation). Diapo slideshow requires jQuery 1.4+ and other jQuery plugins are necessary if you want to use some functionalities: <a href="/misc/goto?guid=4958188557383566796">jQuery Easing</a>, <a href="/misc/goto?guid=4958188558139900337">jQuery HoverIntent</a>, <a href="/misc/goto?guid=4958183601317272178">jQuery Mobile</a></span> <ul class="arrow"> <li>Highly configurable</li> <li>Support images, videos and complex HTML content</li> <li>20++ transition effects</li> <li>Configuration for Mobile Devices - mobileNavigation, mobileNavHover, mobilePagination, mobileAutoAdvance</li> <li>Open source MIT license</li> </ul> </li> </ul>