jQuery UI Cookbook

jQuery UI Cookbook

By : Adam Boduch

Buy this Book

jQuery UI Cookbook

By: Adam Boduch

Buy this Book

Overview of this book

jQuery UI is the quintessential framework for creating professional user interfaces. While jQuery core lays the foundation for interaction with the DOM and handling events, jQuery UI fills in the user interaction gap. This book will give you a huge productivity boost out of the box with jQuery UI, and help you understand the framework, inside and out."jQuery UI Cookbook" provides you with practical recipes featuring in-depth coverage of every widget in the framework, including how to address limitations that impact your everyday development activities with these widgets. You'll get a better idea of the big picture ‚Äì how the framework is composed, how the widgets relate to one another, and how to build on those patterns.Be it a minor tweak on the visual design of a progress bar or a fundamental change in a widget to meet your needs, "jQuery UI Cookbook" covers scenarios both big and small. You can show reminders as tooltips, apply a variety of effects to the menu widget, and start interactions between the dialog widget and API data using deferred objects. These and many more interesting tasks are covered in this book, which can be done with smooth learning and great understanding. You will see how button widgets can fill the width of their containing element, making the layout more consistent. Tabs can be sorted and moved between widgets. You will learn how to do all these things within the context of the big picture, by finding out why the components work the way they do, making you well-versed in jQuery UI.

jQuery UI Cookbook

Credits

About the Author

About the Reviewers

www.PacktPub.com

Preface

Free Chapter

Creating Accordions

Introduction

Section navigation using the Tab key

Dynamically changing the height style

Resizable content sections

Controlling spacing with themes

Sorting accordion sections

Dragging-and-dropping between accordions

Including Autocompletes

Introduction

Styling the default input with themes

Building data sources using select options

Using multiple data sources

Remote autocomplete filtering

Custom data and categories

Applying effects to the drop-down menu

Crafting Buttons

Introduction

Making simple checklists

Controlling the spacing with buttonsets

Filling space with buttons automatically

Sorting buttons within a group

Using effects with the button hover state

Button icons and hiding text

Developing Datepickers

Introduction

Working with different date formats

Making a full-sized calendar widget

Displaying month-to-month effects

Appointment reminders as tooltips

Restricting the date range

Hiding the input field

Additional calendar data and controls

Adding Dialogs

Introduction

Applying effects to dialog components

Waiting for API data to load

Using icons in the dialog title

Adding actions to the dialog title

Applying effects to dialog resize interactions

Using modal dialogs for messages

Making Menus

Introduction

Creating sortable menu items

Highlighting the active menu item

Using effects with menu navigation

Building menus dynamically

Controlling the position of submenus

Applying themes to submenus

Progress Bars

Introduction

Displaying file upload progress

Animating progress changes

Creating progressindicator widgets

Using states to warn about thresholds

Giving progressbars labels

Using Sliders

Introduction

Controlling the size of the slider handle

Removing the handle focus outline

Using master sliders and child sliders

Marking step increments

Getting range values

Changing the slider orientation

Using Spinners

Introduction

Removing the input focus outline

Formatting currencies for local cultures

Formatting time for local cultures

Controlling the step between values

Specifying the spin overflow

Simplifying the spinner buttons

Using Tabs

Introduction

Working with remote tab content

Giving tabs an icon

Simplifying the tab theme

Using tabs as URL navigation links

Creating effects between tab transitions

Sorting tabs using the sortable interaction

Setting the active tab using href

Using Tooltips

Introduction

Changing the tooltip state

Using custom markup in tooltips

Displaying the mouse movement

Applying effects to the tooltip display

Tooltips for selected text

Widgets and More!

Introduction

Accordions to tabs, and back again

Building a custom widget from scratch

Building an observer widget

Using widgets with Backbone applications

Index

Customer Reviews

5 star

4 star

3 star

2 star

1 star

Using icons in the dialog title

With some dialogs, depending on the nature of the application and the content of the dialog itself, it may be beneficial to place an icon beside the dialog title. This could be beneficial in the sense that it provides additional context to the user. For example, an edit dialog might have a pencil icon, whereas a user profile dialog might contain a person icon.

Getting ready...

To illustrate adding an icon to the title bar of the dialog widget, we'll use the following as our basic HTML:

<div id="dialog" title="Edit">
    <div>
        <label>Field 1:</label>
        <input type="text"/>
    </div>
    <div>
        <label>Field 2:</label>
        <input type="text"/>
    </div>
</div>

How to do it...

The first thing we'll need to define is a custom CSS class used to properly align the icon once we place it in the title bar of the dialog. The CSS looks like this:

.ui-dialog-icon {
    float: left...

jQuery UI Cookbook

By : Adam Boduch

jQuery UI Cookbook

By: Adam Boduch

Overview of this book

Related Content you might be interested in

Current Title:

jQuery UI Cookbook

Using icons in the dialog title

Getting ready...

How to do it...