JQuery Tools: jQuery UI library essential for Web Development

Document directory

• Tabs (Tab)
• Tooltip (Message tip)
• Overlay (mask, pop-up window)
• Scrollable (Information scrolling)
• Validator (Form Verification)
• Rangeinput (range selection)
• Dateinput (date selection)
• Expose (highlighted)
• Flashembed (embedded in Flash)
• Combinations)

Basic Introduction

JQuery Tools is based onJQueryDeveloped website interface library, including the most common Tabs (Tab), Tooltip (information tip), Overlay (mask, pop-up window), Scrollable (scroll Control) form Validator, Rangeinput, and Dateinput.JQuery ToolsIt provides a high-definition API interface that helps developers easily implement the required functions and give users a better user experience.

 

 

Compared with jQuery UI, jQuery Tools provides functions that are more required for website applications. jQuery Tools provides three functions: UI Tools, Form Tools, and Tools Box, the following sections describe each function module separately. In addition, jQuery Tools is more exquisite and customizable than jQuery UI interfaces. In addition, the core code of jQuery Tools is compressed with GZIP, which is only 3.9KB, And the search Extension function is only 14KB in time, which is much more lightweight than jQuery UI.

UI Tools

UI Tools consists of four functional modules: Tabs, Tooltip, Overlay, and Scrollable. The Demo of each functional module is as follows:

Tabs (Tab)

 

 

1. Minimal setup for tabs
2. Naming the tabs
3. 4 different skins with CSS
4. Using mouseover to switch tabs
5. Making wizards with the tabs
6. Making accordions with tabs
7. Customizing the accordion effect
8. Horizontal accordion using the tabs
9. Multiple tabs and accordion instances
10. Handling browsers back button
11. Loading tab contents with ajax
12. AJAXed tabs with history support
13. Slideshow plugin for the tabs

Tooltip (Message tip)

 

1. Basics of using the tooltip
2. Using any HTML inside the tooltip
3. Imitating browsers default tooltip
4. Using tooltips in form fields
5. Using tooltips in tables or lists
6. Custom tooltip effect
7. Dynamic positioning of the tooltip

Overlay (mask, pop-up window)

 

 

1. Minimal setup for overlay
2. The apple effect for overlay
3. Creating modal dialogs with overlay
4. Opening overlays programmatically
5. Overlays with different styles
6. Loading external pages into overlay
7. Multiple overlays on the same page
8. Creating a customized overlay effect

Scrollable (Information scrolling)

 

 

1. Minimal setup for scrollable
2. A vertical scrollable
3. A simple scrollable image gallery
4. Gallery with multiple scrollables
5. A scrollable registration wizard
6. Scrollable plugins in action
7. Browser back button navigation
8. JQuery tools home page setup
9. A complete navigational system
10. Add and remove items from scrollable
11. Customizing the scrolling animation

Form Tools

Form Tools consists of three functional modules: Validator, Rangeinput, and Dateinput. The Demo of each functional module is as follows:

 

 

Validator (Form Verification)

1. Minimal setup for validator
2. Custom input types and attributes
3. Server & client-side validation
4. Error Summary
5. Validator events in action
6. Localizing the validator

Rangeinput (range selection)

1. Minimal setup for rangeinput
2. A couple of vertical ranges
3. Multiple small ranges
4. A custom scrollbar for a DIV

Dateinput (date selection)

1. Minimal setup for dateinput
2. A large skin for Dateinput
3. Customizing Dateinput behavior
4. Prompting for start and end dates
5. Calendar that is always available
6. Localizing the Dateinput (french)

Tools Box

The Tools Box contains three functional modules: Expose, Flashembed, and Combinations. The Demo of each functional module is as follows:

 

 

Expose (highlighted)

1. Minimal setup for expose
2. Styling the mask
3. Exposing a form
4. Exposing videos with a custom mask

Flashembed (embedded in Flash)

1. Basics of Flash embedding
2. Flashembed and jQuery
3. Loading flash on a mouse click
4. Placing HTML on top of a flash object
5. Handling old flash versions
6. Flashembed and Flowplayer

Combinations)

1. HTML5 form inside an overlay
2. An artist's portfolio
3. Speeding up the portfolio

 

You may also like

 

• HTML5 Canvas-based image magnifiers
• RoboVoice.com: Make Your webpage speak
• 8 superb free high-quality icon search engines
• Share 5 interesting JavaScript code snippets
• We recommend a great free self-help website creation tool.

 

Link to this article: jQuery Tools: jQuery UI library essential for Web Development

Source: Dream sky ◆ focus on front-end development technology ◆ share web design resources