Book Image

Mastering jQuery UI

By : Vijay Joshi
Book Image

Mastering jQuery UI

By: Vijay Joshi

Overview of this book

Related Content you might be interested in

Current Title:

Small book image
Mastering jQuery UI
Vijay Joshi
Feb, 2015 | 312 pages
No titles found
Table of Contents (19 chapters)
Mastering jQuery UI
Mastering jQuery UI
Credits
Credits
About the Author
About the Author
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Designing a Simple Quiz Application
Designing a Simple Quiz Application
Setting up jQuery UI
Creating the layout
Making the quiz functional
Improving the quiz
Summary
2
Building a Jigsaw Puzzle Game
Building a Jigsaw Puzzle Game
Getting ready
Creating the layout
Making the puzzle functional
Improving the puzzle
Summary
3
Creating a Website Tour
Creating a Website Tour
Getting ready
Designing the home page
Making the tour functional
Improving the tour
Summary
4
Creating a Tabbed News Reader
Creating a Tabbed News Reader
Creating the folder structure
Designing the page
Getting the code structure ready
Adding event handlers in the init method
Displaying posts of a subreddit
Getting comments for a post
Improving MyjqReddit
Summary
5
Implementing CAPTCHA using Draggable and Droppable
Implementing CAPTCHA using Draggable and Droppable
Creating the folder structure
Implementing the drag and drop CAPTCHA
Creating the slider CAPTCHA
Creating the number CAPTCHA
Summary
6
Creating an Event Timeline Using a Slider
Creating an Event Timeline Using a Slider
Creating the folder structure
Designing the page
Styling the content
Getting the code structure ready
Creating the timeline markup from data
Implementing the timeline functionality
Improving the timeline
Summary
7
Using jQuery UI with Google Maps API
Using jQuery UI with Google Maps API
Creating the folder structure
Designing the page
Displaying the map
Improving the functionality
Summary
8
Creating a Photo Album Manager
Creating a Photo Album Manager
Creating the folder structure
Designing the page
Creating the JSON file for albums
Getting code structure ready
Implementing the initialize method
Filling album names
Editing, deleting, and rearranging pictures
Improving album manager
Summary
9
Creating Widgets Using the Widget Factory
Creating Widgets Using the Widget Factory
The folder structure
Creating a widget to search data in a table
Improving the searchable widget
Creating a widget to display a slideshow
Improving the banner widget
Summary
10
Building a Color Picker with Hex RGB Conversion
Building a Color Picker with Hex RGB Conversion
Setting up the folder structure
Writing markup for the page
Styling the content
Implementing the color picker
Improving the Colorpicker
Summary
11
Creating a Fully Functional Dashboard
Creating a Fully Functional Dashboard
Setting up the stage
Designing the page
Getting the code structure ready
Initializing the portlets
Implementing sharing buttons
Displaying Flickr photos
Creating a weather widget
Displaying posts from the reddit front page
Creating an image display widget
Improving the portlets
Summary
Best Practices for Developing with jQuery UI
Best Practices for Developing with jQuery UI
General Guidelines
Using jQuery UI Themeroller to customize a theme
Index
Index

Setting up jQuery UI

We will need the jQuery and jQuery UI libraries before going ahead. Throughout this book, we'll use jQuery Version 1.10.2 and jQuery UI Version 1.10.4 with the UI lightness theme . Note that the jQuery UI files also contain a copy of the jQuery source file.

Downloading the required files

To download jQuery, visit the download page on the jQuery website at http://jquery.com/download/.

Tip

Make sure that you download the correct version as per your requirements.

For jQuery UI, visit the download page at http://jqueryui.com/download/ to download the jQuery UI library.

Tip

Since we will cover all components throughout the book, download the full version of the library.

Using jQuery/jQuery UI libraries with a CDN

You might be aware that Content Delivery Networks (CDN) host many popular libraries. Since the browsers cache JavaScript files, your page will not have to load a JavaScript file again if it is referenced from a CDN and already cached in browser. You can link jQuery and jQuery UI among CDN's many other libraries.

Tip

Make sure that you are connected to the Internet if you have referenced the libraries from the CDN in your pages.

Google, Microsoft, and some other companies provide CDN for jQuery, jQuery UI, and other libraries. Here are the links to pages for downloading these libraries:

Setting up the folder structure for the JavaScript and CSS files

We will now set up the folder structure that we will use for all the chapters in this book. The steps are as follows:

  1. In your document root, create a folder named MasteringjQueryUI. Then, create a folder for each chapter inside it.

  2. For this chapter, create a new folder named Chapter1 inside MasteringjQueryUI and two more folders named js and css inside the Chapter1 folder.

  3. Now extract the jQuery UI files into a separate folder and go to its js folder. You will see three files: jQuery source file and full and minified versions of jQuery UI.

  4. Copy the jQuery source file and any one version of jQuery UI source files and place them inside the js folder that you created inside Chapter1 of the MasteringjQueryUI folder.

  5. Also, copy the ui-lightness folder from the css folder from the downloaded jQuery UI to the css folder of Chapter1.

Now we are ready to experiment with jQuery UI and create some informative and fun examples. Let's start our journey by creating the quiz application.

Previous Section
End of Section 2
Next Section