Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Mastering jQuery UI

By : Joshi

Mastering jQuery UI

By: Joshi

Overview of this book

If you are a frontend developer with considerable knowledge of jQuery UI and want to take this expertise to the next level, then this book is for you.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Free Chapter

1. Designing a Simple Quiz Application

1. 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

2. Building a Jigsaw Puzzle Game

Getting ready

Creating the layout

Making the puzzle functional

Improving the puzzle

Summary

3. Creating a Website Tour

3. Creating a Website Tour

Getting ready

Designing the home page

Making the tour functional

Improving the tour

Summary

4. Creating a Tabbed News Reader

4. 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

5. 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

6. 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

7. 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

8. 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

9. 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

10. 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

11. 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

A. Best Practices for Developing with jQuery UI

A. Best Practices for Developing with jQuery UI

General Guidelines

Using jQuery UI Themeroller to customize a theme

Index

Index

Chapter 4. Creating a Tabbed News Reader

jQuery UI offers a number of components that can be used in a variety of combinations to create rich interfaces. We saw such a combination in the previous chapter, Chapter 3, Creating a Website Tour, where we used dialog, buttons, tooltips, and other components to create a neat website tour feature.

Moving forward, let's talk about tabs. Tabs are a very useful widget for the presentation layer, that is, the user interface (UI). Most common use cases for tabbed interfaces are UIs where there is limited space. Tabs have multiple panels in which different contents can be displayed. Clicking on a tab opens its corresponding panel.

In this chapter, you will focus on tabs and dialog components and learn to integrate the reddit API with the tabs. If you are not familiar with reddit, it is a news aggregation website where all the content is submitted by the users. There are different "subreddits" created by users for different topics...

Visually different images

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Mastering jQuery UI

Search

Your notes and bookmarks