推荐30个jQuery Mobile插件和教程
fmms 13年前
<p>本文涉及的 jQuery Mobile 教程包括以下 5 大方面的内容：</p> <p style="text-indent:0em;"><a title="1. jQuery Mobile Swipe" href="http://www.open-open.com/news/view/ad9590#Swipe">1. <span style="text-decoration:underline;">jQuery Mobile</span> Swipe</a><br /> <a title="2. jQuery Mobile Gallery" href="http://www.open-open.com/news/view/ad9590#Gallery">2. jQuery Mobile Gallery</a>(移动相册)<br /> <a title="3. jQuery Mobile Menu" href="http://www.open-open.com/news/view/ad9590#Menu">3. jQuery Mobile Menu</a>(移动菜单)<br /> <a title="4. jQuery Mobile Datepickers" href="http://www.open-open.com/news/view/ad9590#Datepickers">4. jQuery Mobile Datepickers</a>(日期选择)<br /> <a title="5. jQuery Mobile Themes" href="http://www.open-open.com/news/view/ad9590#Themes">5. jQuery Mobile Themes</a>(主题/外观)</p> <hr /> <p><br /> <a name="Swipe"></a>1. jQuery Mobile Swipe</p> <p style="text-align:left;"><strong>1. <a title="How to Create a WordPress Theme in Photoshop" href="/misc/goto?guid=4958188099796022049">How to Create a WordPress Theme in Photoshop</a></strong></p> <p><a href="/misc/goto?guid=4958188099796022049"><img class="size-full wp-image-29 aligncenter" title="jQuery Mobile" alt="jQuery Mobile" src="https://simg.open-open.com/show/94c823ee1f2f5170829154b3512ea32e.jpg" /></a></p> <p style="text-align:left;"><strong>2. <a title="Swipe Gallery" href="/misc/goto?guid=4958188101222773498" rel="external nofollow" target="_blank">Swipe Gallery</a></strong></p> <p><a href="/misc/goto?guid=4958188101222773498" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Mobile" alt="jQuery Mobile" src="https://simg.open-open.com/show/2f447ba628e38c78ef0b14ceca75793c.jpg" /></a></p> <p style="text-align:left;"><strong>3. <a title="WipeTouch, a jQuery plugin for touch devices " href="/misc/goto?guid=4958188102632521468" rel="external nofollow" target="_blank">WipeTouch, a jQuery plugin for touch devices </a></strong></p> <p><a href="/misc/goto?guid=4958188102632521468" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Mobile" alt="jQuery Mobile" src="https://simg.open-open.com/show/aa47e0c3bfbfcca9045bb0c81728fed8.jpg" /></a></p> <p style="text-align:left;"><strong>4. <a title="Another experiment in jQuery Mobile swipe navigation" href="/misc/goto?guid=4958188104036345921" rel="external nofollow" target="_blank">Another experiment in jQuery Mobile swipe navigation</a></strong></p> <p><a href="/misc/goto?guid=4958188104036345921" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Mobile" alt="jQuery Mobile" src="https://simg.open-open.com/show/cc5593c20de18b5c2cc69e6be146b218.jpg" /></a></p> <p style="text-align:left;"><strong>5. <a title="jQswipe" href="/misc/goto?guid=4958188105453838525" rel="external nofollow" target="_blank">jQswipe</a></strong></p> <p><a href="/misc/goto?guid=4958188105453838525" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Mobile" alt="jQuery Mobile" src="https://simg.open-open.com/show/2751fcd2839eef44b4fb1e3679163947.jpg" /></a></p> <p style="text-align:left;"><strong>6. <a title="Multiswipe" href="/misc/goto?guid=4958188106856488063" rel="external nofollow" target="_blank">Multiswipe</a></strong></p> <p>一个简单的插件用于激活 Mobile Safari浏览器中的多点触摸Swipe事件。<br /> <a href="/misc/goto?guid=4958188106856488063" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Mobile" alt="jQuery Mobile" src="https://simg.open-open.com/show/7d166fd75d6eed6705d344b75244dc70.jpg" /></a></p> <hr /> <p><br /> <a name="Gallery"></a>2. jQuery Mobile Gallery</p> <p style="text-align:left;"><strong>7. <a title="Awesome Mobile Image Gallery Web App" href="/misc/goto?guid=4958184261545948026" rel="external nofollow" target="_blank">Awesome Mobile Image Gallery Web App</a></strong></p> <p>本教程将使用jQTouch jQuery插件来开发一个简单的移动相册。jQTouch这个jQuery插件为像iPhone, iPod Touch, G1, and Pre这样的移动浏览器提供了本地动画，自动导航和主题。<br /> <a href="/misc/goto?guid=4958184261545948026" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Mobile" alt="jQuery Mobile" src="https://simg.open-open.com/show/791b30ed8778328ae66d1ab4d586d8f4.jpg" /></a></p> <p style="text-align:left;"><strong>8. <a title="Touch Gallery" href="/misc/goto?guid=4958188109610829339" rel="external nofollow" target="_blank">Touch Gallery</a></strong></p> <p>这个插件专门为运行在iPad或iPhone 4上的Mobile Safari浏览器而优化。它还可以运行在桌面浏览器之上如：Safari, Firefox 4, Opera和 Chrome。<br /> <a href="/misc/goto?guid=4958188109610829339" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Mobile" alt="jQuery Mobile" src="https://simg.open-open.com/show/d2d933a67be10ebe86f03614224dcf6a.jpg" /></a></p> <p style="text-align:left;"><strong>9. <a title="Photo Swipe" href="/misc/goto?guid=4958184656266865134" rel="external nofollow" target="_blank">Photo Swipe</a></strong></p> <p>Image Gallery用于移动和触摸设备的相册<br /> <a href="/misc/goto?guid=4958184656266865134" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Mobile" alt="jQuery Mobile" src="https://simg.open-open.com/show/c1149a5f8f8c25070668ff2cc82255f2.jpg" /></a></p> <p style="text-align:left;"><strong>10. <a title="Mobile Photo Album JQuery plugin" href="/misc/goto?guid=4958188112361428947" rel="external nofollow" target="_blank">Mobile Photo Album JQuery plugin</a></strong></p> <p>Mobile Photo Album JQuery plugin is a easy to use JQuery plugin for web developer to build Javascript gallery for mobile device. The plugin is driven by xml or array data. Easy setup and only minimum programming knowledge is needed. Best for building photo album which target for view on mobile device.<br /> <a href="/misc/goto?guid=4958188112361428947" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Mobile" alt="jQuery Mobile" src="https://simg.open-open.com/show/8f0e0338fe22105e2974bfb678e513f6.jpg" /></a></p> <p style="text-align:left;"><strong>11. <a title="TN3 Gallery" href="/misc/goto?guid=4958184838306715873" rel="external nofollow" target="_blank">TN3 Gallery</a></strong></p> <p>TN3 Gallery is a full fledged HTML based customizable image gallery with slideshow, transitions and multiple album options. Compatible with all modern desktop and mobile browsers. Powered by jQuery. <a href="/misc/goto?guid=4958184838306715873" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Mobile" alt="jQuery Mobile" src="https://simg.open-open.com/show/8344dfd3bcbf32118af16cada466f007.jpg" /></a></p> <p style="text-align:left;"><strong>12. <a title="jQuery Mobile Gallery" href="/misc/goto?guid=4958188115119272660" rel="external nofollow" target="_blank">jQuery Mobile Gallery</a></strong></p> <p>For some time I was looking for jQuery Mobile gallery solutions and didn’t find much. So I made one. Just want to share my little experiment.<br /> <a href="/misc/goto?guid=4958188115119272660" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Mobile" alt="jQuery Mobile" src="https://simg.open-open.com/show/120244628487207456873e026e0d49ae.jpg" /></a></p> <hr /> <p><br /> <a name="Menu"></a>3. jQuery Mobile Menu</p> <p style="text-align:left;"><strong>13. <a title="Select menus" href="/misc/goto?guid=4958188116548584280" rel="external nofollow" target="_blank">Select menus</a></strong></p> <p>The select menus are driven off native select elements, but the native selects are hidden from view and replaced with a custom-styled select button that matches the look and feel of the jQuery Mobile framework. The replacement selects are ARIA-enabled and are keyboard accessible on the desktop as well.<br /> <a href="/misc/goto?guid=4958188117284352095" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Mobile" alt="jQuery Mobile" src="https://simg.open-open.com/show/2ade85cd37efc2e45835437efdcdfc06.jpg" /></a></p> <p style="text-align:left;"><strong>14. <a title="jQueryMobile Toolsbars & Navigation Menu’s " href="/misc/goto?guid=4958188118017576767" rel="external nofollow" target="_blank">jQueryMobile Toolsbars & Navigation Menu’s </a></strong></p> <p>In depth look at building jQuery Mobile header and footer menu’s. We also look at building navigation menu’s in the header and footer and creating iphone and android like fixed menu’s.<br /> <a href="/misc/goto?guid=4958188118017576767" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Mobile" alt="jQuery Mobile" src="https://simg.open-open.com/show/094de180ea36f0439af63cf7ba232c62.jpg" /></a></p> <p style="text-align:left;"><strong>15. <a title="dualColumn" href="/misc/goto?guid=4958188119430084364" rel="external nofollow" target="_blank">dualColumn</a></strong></p> <p>It adds a new data-role to the existing set. Just insert a</p> <div> your menu </div> <p>somewhere in the first page div and it’s ready. All links are loaded as usual. If the screen on the device is too small to be used with two columns – nothing happens. Site works as it would work without the plugin.<br /> <a href="/misc/goto?guid=4958188119430084364" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Mobile" alt="jQuery Mobile" src="https://simg.open-open.com/show/2ab5c2b14dc09e707190a6fe6bb755b7.jpg" /></a></p> <p style="text-align:left;"><strong>16. <a title="Horizontal Menu Drop Jquery" href="/misc/goto?guid=4958188120842008277" rel="external nofollow" target="_blank">Horizontal Menu Drop Jquery</a></strong></p> <p><a href="/misc/goto?guid=4958188120842008277" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Mobile" alt="jQuery Mobile" src="https://simg.open-open.com/show/cb82eeeacf993fa1ca230423fd7b2396.jpg" /></a></p> <div style="text-align:center;margin:0px 0pt;float:none;"> <ins style="border-bottom:medium none;position:relative;border-left:medium none;padding-bottom:0pt;margin:0pt;padding-left:0pt;width:336px;padding-right:0pt;display:inline-table;height:280px;visibility:visible;border-top:medium none;border-right:medium none;padding-top:0pt;"> <ins style="border-bottom:medium none;position:relative;border-left:medium none;padding-bottom:0pt;margin:0pt;padding-left:0pt;width:336px;padding-right:0pt;display:block;height:280px;visibility:visible;border-top:medium none;border-right:medium none;padding-top:0pt;" id="aswift_1_anchor"></ins> </ins> </div> <p style="text-align:left;"><strong>17. <a title="iPhone 2 Template – Sliding Dhtml Menu (jQquery-iPhone-Horizontal-Slider)" href="/misc/goto?guid=4958188122256363113" rel="external nofollow" target="_blank">iPhone 2 Template – Sliding Dhtml Menu (jQquery-iPhone-Horizontal-Slider)</a></strong></p> <p><a href="/misc/goto?guid=4958188122256363113" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Mobile" alt="jQuery Mobile" src="https://simg.open-open.com/show/d70f7cc3fdd55b264405fac9080e1c26.jpg" /></a></p> <p style="text-align:left;"><strong>18. <a title="Jquery Drop Bar" href="/misc/goto?guid=4958188123664308658" rel="external nofollow" target="_blank">Jquery Drop Bar</a></strong></p> <p><a href="/misc/goto?guid=4958188123664308658" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Mobile" alt="jQuery Mobile" src="https://simg.open-open.com/show/aea47be47025f50e4a9f748ed1626e24.jpg" /></a></p> <p style="text-align:left;"><strong>19. <a title="iPhone 6 Template – Code CSS Menu – (jQuery-Vertical-Menu-iPhone)" href="/misc/goto?guid=4958188125065614047" rel="external nofollow" target="_blank">iPhone 6 Template – Code CSS Menu – (jQuery-Vertical-Menu-iPhone)</a></strong></p> <p><a href="/misc/goto?guid=4958188125065614047" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Mobile" alt="jQuery Mobile" src="https://simg.open-open.com/show/2fbc37893f1537da0a51ecc485f02cf0.jpg" /></a></p> <p style="text-align:left;"><strong>20. <a title="jQuery iPad Menu jQuery Menu" href="/misc/goto?guid=4958188126486441348" rel="external nofollow" target="_blank">jQuery iPad Menu jQuery Menu</a></strong></p> <p><a href="/misc/goto?guid=4958188126486441348" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Mobile" alt="jQuery Mobile" src="https://simg.open-open.com/show/54d85b4ee9eaea5d36bcebebb8dbb64e.jpg" /></a></p> <hr /> <p><br /> <a name="Datepickers"></a>4. jQuery Mobile Datepickers</p> <p style="text-align:left;"><strong>21. <a title="jQuery UI’s Datepicker Styled for mobile" href="/misc/goto?guid=4958188127894020096" rel="external nofollow" target="_blank">jQuery UI’s Datepicker Styled for mobile</a></strong></p> <p>The included files extend the jQuery UI datepicker to make it suitable for touch devices. This plugin is not included in jQuery Mobile by default, so you’ll need to include the files yourself if you’d like to use them. Scroll down for usage instructions.<br /> <a href="/misc/goto?guid=4958188128631773727" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Mobile" alt="jQuery Mobile" src="https://simg.open-open.com/show/a0454f947c902e68f57b745f82b4eb96.jpg" /></a></p> <p style="text-align:left;"><strong>22. <a title="Android-Like Date Picker with jQuery mobile .2" href="/misc/goto?guid=4958188129359540784" rel="external nofollow" target="_blank">Android-Like Date Picker with jQuery mobile .2</a></strong></p> <p><a href="/misc/goto?guid=4958188129359540784" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Mobile" alt="jQuery Mobile" src="https://simg.open-open.com/show/93b6a3a5deaca90e8e18023a1a63a379.jpg" /></a></p> <p style="text-align:left;"><strong>23. <a title="Sound System Studio Web Layout" href="/misc/goto?guid=4958188130781688922" rel="external nofollow" target="_blank">Sound System Studio Web Layout</a></strong></p> <p>In this tutorial you will learn how to create a nice looking layout.<br /> <a href="/misc/goto?guid=4958188130781688922" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Mobile" alt="jQuery Mobile" src="https://simg.open-open.com/show/2b842f939cb89c4beb7d2f0c3c11c568.jpg" /></a></p> <hr /> <p><br /> <a name="Themes"></a>5. jQuery Mobile Themes</p> <p style="text-align:left;"><strong>24. <a title="Mobjectify – Easy Theming" href="/misc/goto?guid=4958188132196039758" rel="external nofollow" target="_blank">Mobjectify – Easy Theming</a></strong></p> <p><a href="/misc/goto?guid=4958188132196039758" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Mobile" alt="jQuery Mobile" src="https://simg.open-open.com/show/2c26d305e39209b1a1146c7602cbfab6.jpg" /></a></p> <p style="text-align:left;"><strong>25. <a title="jQuery Mobile – Mobile theme" href="/misc/goto?guid=4958188133615703909" rel="external nofollow" target="_blank">jQuery Mobile – Mobile theme</a></strong></p> <p>Built with the incredible jQuery Mobile plugin, this theme is perfect for those who want to make a good looking and easy to read version of their blog. It uses most of jQuery Mobile features to guarantee an optimal ease of reading on mobile devices such as the iPhone, Blackberries or Android.<br /> <a href="/misc/goto?guid=4958188133615703909" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Mobile" alt="jQuery Mobile" src="https://simg.open-open.com/show/33110855472411dfbfacf7258159f429.jpg" /></a></p> <p style="text-align:left;"><strong>26. <a title="Carrington Mobile" href="/misc/goto?guid=4958188135034499973" rel="external nofollow" target="_blank">Carrington Mobile</a></strong></p> <p>Carrington Mobile is an elegant mobile theme with that supports advanced touch browsers (iPhone, Android, BlackBerry, Pre) and is also backward compatible with older mobile devices.<br /> <a href="/misc/goto?guid=4958188135034499973" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Mobile" alt="jQuery Mobile" src="https://simg.open-open.com/show/6b34b9050d4e5c1f41f3b8d4c83d27ea.jpg" /></a></p> <p style="text-align:left;"><strong>27. <a title="Custom jQueryMobile Themes " href="/misc/goto?guid=4958184457489333613" rel="external nofollow" target="_blank">Custom jQueryMobile Themes </a></strong></p> <p>Want to stand out from the crowd? Then, you might be wondering how to create your own custom jQuery Mobile theme. Well, this screencast will teach you how to do exactly that. You will learn how to edit a default jQuery Mobile theme and add your css and theme changes in order to customize it to your needs.<br /> <a href="/misc/goto?guid=4958184457489333613" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Mobile" alt="jQuery Mobile" src="https://simg.open-open.com/show/028203a49f28d4cf3dceb480d03c7bc5.jpg" /></a></p> <p style="text-align:left;"><strong>28. <a title="Möbius" href="/misc/goto?guid=4958188137805934217" rel="external nofollow" target="_blank">Möbius</a></strong></p> <p>Let us introduce our first free WordPress theme optimized for mobile devices. Features are listed below:<br /> <a href="/misc/goto?guid=4958188137805934217" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Mobile" alt="jQuery Mobile" src="https://simg.open-open.com/show/ce7aeedbac26c1e7964bfb4ef6242932.jpg" /></a></p> <p style="text-align:left;"><strong>29. <a title="Smooci 2.1.0 WordPress Theme" href="/misc/goto?guid=4958188139208620187" rel="external nofollow" target="_blank">Smooci 2.1.0 WordPress Theme</a></strong></p> <p>Smooci is a WordPress theme for mobile phones and devices. Use this WordPress plugin to display the theme when your WordPress site is visited on mobiles<br /> <a href="/misc/goto?guid=4958188139208620187" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Mobile" alt="jQuery Mobile" src="https://simg.open-open.com/show/e65680fdb967ed6fffbe2ef7a419ab83.jpg" /></a></p> <p style="text-align:left;"><strong>30. <a title="A Drupal jQuery Mobile theme (tutorial)" href="/misc/goto?guid=4958188140624280868" rel="external nofollow" target="_blank">A Drupal jQuery Mobile theme (tutorial)</a></strong></p> <p>In an attempt to create a mobile Drupal iPhone app, I’m currently writing a Drupal mobile app using jQuery Mobile, and although I still have a few kinks to work out, the basics are now working.<br /> <a href="/misc/goto?guid=4958188140624280868" rel="external nofollow" target="_blank"><img class="size-full wp-image-29 aligncenter" title="jQuery Mobile" alt="jQuery Mobile" src="https://simg.open-open.com/show/f8b2a257baf1f801d29b3e50c4aa2224.jpg" /></a></p>