What are the jquery mobile libraries?

jquery mobile library includes: 1. Mobiscroll, used for rotation scrolling, date and time selection on touch screen devices; 2. "Ion.Sound", used for instant sound notification; 3. mmenu, used for Create a smooth drawer navigation menu; 4. Naver, used to create responsive navigation; 5. gShake, etc.

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

With the development of the mobile Internet, web pages from PC cannot fully adapt to the needs of mobile pages, which makes responsive design experience emerge and become a trend. It is such a demand that promotes jQuery Mobile of popularity. jQuery Mobile, a framework based on jQuery and jQuery UI, inherits the essence of jQuery's "write less, do more", has good scalability and customizability, and is fully compatible with various platform devices. For unsupported mobile phone types, Basic styles will also be given.

This article details 15 very excellent and practical jQuery Mobile plug-ins (libraries), with a wide range of types, ranging from date/time selection, instant sound notification, drawer navigation menu, iOS style, accordion navigation, From hiding/showing passwords and lightbox effects to cool interactive maps, page vibrations, Native, photo album/gallery displays, etc., there is always something that will fascinate you.

1. Mobiscroll

https://mobiscroll.com/

For many developers, Mobiscroll is not unfamiliar, it can even be said that It's quite familiar. Mobiscroll is a very good jQuery Mobile plug-in, mainly used for rotation scrolling/date and time selection on touch screen devices. Through it, users can make date and time selections by simply sliding numbers (click the link to view Demo).

Mobiscroll not only supports any custom values, allowing users to fully customize the theme, but can also be used for local selection control of drop-down lists. In addition, it is also very convenient to use. It not only provides developers with a very advanced color scheme, but also can be completely modified through CSS files. Supports all mainstream mobile and desktop browsers including iOS, Android, WP8, Windows 8, BlackBerry, etc.

2, Ion.Sound

http://ionden.com/a/plugins/ion.sound/en.html

this day Today, both web and mobile websites are full of various events, such as new emails, new chat messages, content updates, etc. But there is often a problem that instant notifications cannot immediately attract the user's attention. Through the Ion.Sound plug-in, this task can be achieved very well.

Ion.Sound is a jQuery plug-in for playing event sounds. It adopts the MIT license and contains 25 free sounds. Up to now, Ion.Sound has been successfully used in desktop browsers such as Google Chrome, Mozilla Firefox, Opera, Safari, and IE (9.0), and supports all major mobile browsers.

3.jQuery.mmenu

http://mmenu.frebsite.nl/

jQuery.mmenu is a tool for creating smooth The jQuery plug-in for the drawer navigation menu requires only one line of JavaScript code to implement a very cool sliding menu similar to the appearance of a mobile app on a mobile website.

Through jQuery.mmenu, developers can convert unordered lists into menu items and make customized settings. jQuery.mmenu not only provides developers with the customization of common menus such as opening, closing, switching, etc., but also provides settings for menu position (left/right), whether to display the menu item counter, and other options.

4, Naver

http://www.benplum.com/formstone/naver/

Naver is a tool specially used to create responses jQuery plugin for style navigation. Through it, developers can easily create navigation effects that are very friendly to mobile terminals, and can also create dynamic navigation. Naver is compatible with Firefox, Chrome, Safari, and IE(7), and is released under the MIT license. It can be used freely and for free, whether in personal or commercial projects.

5, iosOverlay.js

http://taitems.github.io/iOS-Overlay/

iosOverlay.js is a A jQuery plug-in for creating iOS-style prompt/notification effects, supporting IE7, Google Chrome, Firefox, Opera, and Safari (desktop and mobile versions). It should be reminded that if you want to prevent the icon from flickering when loading, developers need to preload image resources.

In addition, iosOverlay.js also has two optional dependencies, namely Spin.js and jQuery. If developers want to use its drop-down list object, they must use Spin.js, and for browsers that are not compatible with CSS animation, jQuery is required to provide support.

6、Easy Responsive Tabs

https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion

Easy Responsive Tabs is a lightweight responsive Tab tab/accordion navigation jQuery plug-in that supports multiple examples on the same page and supports cross-platform web, tablets and mobile devices. This plug-in can adapt to the screen size. The default style is horizontal/vertical Tab. As the window becomes smaller, it will automatically switch to the accordion style.

7、Hide/Show Password

https://github.com/cloudfour/hideShowPassword

Hide/show Password plug-in allows you to easily hide and show the contents of the password input box. The coolest thing about this plugin is the “innerToggle” option. When set to on, developers can custom create very beautiful hide/show controls. And it maintains input focus when swiping in touch-screen browsers.

8, Swipebox

http://brutaldesign.github.io/swipebox/

Swipebox is an exquisite jQuery light box special effects plug-in. Available for desktop, mobile and tablet devices. On mobile, swipe gesture navigation is supported, while on desktop, keyboard navigation is available. Browsers that do not support CSS3 transition features can use jQuery downgrade processing, support retina displays, and can be easily customized through CSS.

When the user clicks on the target picture, the photo will be displayed in full size. In addition, the user can also switch the pictures in the same group left and right to view, which is very suitable for making photo galleries and viewing large pictures. Dimensions picture.

9、App Folder

http://app-folders.com/

If you are an iOS fanatic, then for iOS The style folder must be very familiar. "Click on the folder to blur the surrounding elements by deepening the transparency, and then display the contents of the folder." App Folders is just such a jQuery plug-in that can achieve the effect of iOS folders. This plug-in can work on both desktop and mobile browsers, and its adaptability is very good.

The folder elements of App Folders can contain any HTML elements, such as images, text, videos, etc., and each folder has its own URL for direct clicks. Of course, developers don’t need to stick to the same effects as iOS folders. Through App Folders, developers can customize more creative layouts and special effects.

10.jQuery Flip

http://amegan.github.io/jquery-flip/

jQuery Flip is a tool that can make any A jQuery plug-in that produces very beautiful Flipboard-like flipping effects on HTML, text or jQuery elements, released under the MIT license. Using CSS 3D transformation, the flip speed can also be set, and it fully supports WebKit browsers such as Chrome and Safari, as well as Firefox 11.

11, jQuery UI Map

https://code.google.com/p/jquery-ui-map/

For map applications For developers, jQuery UI Map is definitely an essential tool for development. Such a lightweight jQuery plug-in is different from the Google Map API. Through jQuery UI Map, developers can not only use Google event listeners for simple events such as clicks, but also use jQuery click events on maps and markers. .

jQuery UI Map is not only very flexible, but also highly customizable. To display scheduled events on a map, jQuery UI Map integrates with Google Maps, allowing developers to easily create interactive maps. The biggest feature of jQuery UI Map is that when the client does not support JavaScript, developers can use HTML data formats such as microformats, RDFa or microdata to achieve synchronization on the alternate site.

12, gShake

https://github.com/GerManson/gShake

gShake is a jQuery plug-in that can achieve vibration effects. With just a few lines of code, you can make the navigation, images, and even the page itself shake, making the page dynamic and fun. It supports iOS 4.2.

13, jQTouch

http://jqtjs.com/

Compared with the many jQuery plug-ins that can be used for mobile development introduced in this article, jQTouch is obviously more famous. With jQTouch, developers can create very powerful mobile apps using only HTML, CSS, and jQuery. What's even more awesome is that developers can build a completely customized UI using only core CSS files.

jQTouch can implement common UI effects such as animation, list navigation, default styles, etc. on mobile devices' WebKit browsers. However, if you want to achieve more native effects, you need to add additional CSS files. For iOS developers, there is no need to worry about this, because jQTouch provides a rich set of native effect CSS files for iOS development.

14. PhotoSwipe

http://www.photoswipe.com/

PhotoSwipe is an open source and free software designed for mobile touch screen devices The designed photo album/gallery display package is compatible with iOS, Android, Blackberry and other mainstream platforms and desktop browsers. Its underlying implementation is based on HTML, CSS and JavaScript and does not rely on any framework. It is very suitable for designers and developers who want to make the photo album experience of mobile sites the same as that of native apps.

PhotoSwipe is a standalone JavaScript library that is easily integrated into mobile websites and heavily optimized for mobile browsers. In addition, in the source code, PhotoSwipe also provides support for desktop browsers and the use of jQuery Mobile.

15. Touch Gallery

http://neteye.github.io/touch-gallery.html

Like PhotoSwipe, so is Touch Gallery An image display plug-in, through which developers can achieve image display effects similar to native photo album applications on mobile browsers. It supports gesture browsing operations and can also be used on desktop browsers such as Safari, Firefox, Opera and Chrome, but some functions cannot be implemented.

[Recommended learning: jQuery video tutorial, web front-end video]

The above is the detailed content of What are the jquery mobile libraries?. For more information, please follow other related articles on the PHP Chinese website!