11. Creating a Fully Functional Dashboard | Mastering jQuery UI

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

Initializing the portlets

To initialize the portlets, we will turn the column div into jQuery UI's sortable components. Since there are two columns, we will make the connection as well so that portlets of a column could be dragged into another column. We will also add a toggle button to portlet header.

Write the following code inside the initPortlets method to initialize them:

$(".column").sortable(
{
  connectWith: ".column",
  handle: ".portlet-header",
  cancel: ".portlet-toggle",
  placeholder: "portlet-placeholder ui-corner-all"
});

$(".portlet")
  .addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
  .find(".portlet-header")
  .addClass("ui-widget-header ui-corner-all")
  .prepend("<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");

$(".portlet-toggle").click(function() 
{
  var icon = $(this);
  icon.toggleClass("ui-icon-minusthick ui-icon-plusthick");
  icon.closest(".portlet").find(".portlet-content").toggle('fast');
});
$('#loadingWeather...

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