6. User Interface | jQuery 2.0 Development Cookbook

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents
Feedback & Rating

jQuery 2.0 Development Cookbook

By : Leon Revill

4.2 (12)

jQuery 2.0 Development Cookbook

4.2 (12)

By: Leon Revill

Overview of this book

Taking a recipe-based approach, this book presents numerous practical examples that you can use directly in your applications. The book covers the essential issues you will face while developing your web applications and gives you solutions to them. The recipes in this book are written in a manner that rapidly takes you from beginner to expert level. This book is for web developers of all skill levels. Although some knowledge of JavaScript, HTML, and CSS is required, this Cookbook will teach jQuery newcomers all the basics required to move on to the more complex examples of this book, which will benefit the more seasoned jQuery developer. If you want to learn how to create modern website features quickly, using best practice techniques, 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. Document Object Model Manipulation

1. Document Object Model Manipulation

Introduction

Selecting elements

Finding and selecting sibling elements

Creating DOM elements

Inserting content into an element

Modifying the DOM element properties

Adding and removing CSS classes to dynamically change their style

Enabling and disabling buttons by changing their properties

Updating an image within a page

Populating list elements

Understanding pagination

Removing DOM elements

Re-using DOM elements

2. Interacting with the User by Making Use of jQuery Events

2. Interacting with the User by Making Use of jQuery Events

Introduction

Detecting button clicks

Detecting element clicks

Detecting change

Updating content based on user input

Detecting key press events on inputs

Restricting input character length

Changing page elements on mouse hover

Triggering events manually

Preventing event triggers

Creating a custom event

3. Loading and Manipulating Dynamic Content with AJAX and JSON

3. Loading and Manipulating Dynamic Content with AJAX and JSON

Introduction

Loading HTML from a web server into a page

Using AJAX and handling server errors

Processing JSON data

Searching JavaScript objects

Sorting JavaScript objects

Caching JSON and AJAX requests

Creating a search feature

Creating an autosuggest feature

Waiting for an AJAX response

4. Adding Attractive Visuals with jQuery Effects

4. Adding Attractive Visuals with jQuery Effects

Introduction

Sliding page elements

Hiding and showing elements

Fading elements

Toggling effects

Stopping effects

Chaining effects

Creating a basic photo gallery

Creating a blinking button

Removing elements with effects

5. Form Handling

5. Form Handling

Introduction

Implementing basic form validation

Adding number validation

Adding credit card number validation

Adding date validation

Adding e-mail address validation

Implementing live form validation

Adding a password strength indicator

Adding anti-spam measures

Implementing input character restrictions

6. User Interface

6. User Interface

Introduction

Manipulating element CSS

Creating a news ticker

Creating sticky elements

Implementing smooth scrolling

Creating a dynamic table of contents

Creating a basic drag-and-drop functionality

Creating a dynamic animated tree menu

Creating an accordion content slider

Creating tabbed content

Creating a modal pop up

Creating a draggable content pop up

7. User Interface Animation

7. User Interface Animation

Introduction

Creating an animated login form

Adding photo zoom

Creating an animated content slider

Animating background images

Creating an animated navigation menu

8. Understanding Plugin Development

8. Understanding Plugin Development

Introduction

Creating a plugin template

Creating a tooltip plugin

Building a content and image slider plugin

Creating an RSS feed reader plugin

Coding an image cropper plugin from scratch

9. jQuery UI

9. jQuery UI

Introduction

Creating stylish and functional buttons

Creating dialog boxes for user information and input

Implementing progress bars within your application

Adding date picker interfaces to input boxes quickly

Creating an autocomplete search feature

10. Working with jQuery Mobile

10. Working with jQuery Mobile

Introduction

Creating a basic mobile website template

Building a complete static website

Building a dynamic mobile website

Implementing the quick call functionality

Implementing the send SMS functionality

Adding mobile-friendly lists

Using touch-oriented events

Creating mobile-compatible forms

Building a complete registration and login system

Building a complete mobile web app

Index

Index

Customer Reviews

4.2 (12)

5 star

33.3%

4 star

50%

3 star

16.7%

2 star

0%

1 star

0%

Creating a basic drag-and-drop functionality

It is possible to create interesting and intuitive interfaces by adding drag-and-drop elements to your site. jQuery UI comes with a built-in plugin for drag-and-drop interfaces. This recipe will show you how to create a basic drag-and-drop functionality without the use of any plugins, giving you the freedom and understanding to expand the code.

Getting ready

Create a blank HTML page called recipe-6.html with the recipe-6.css and recipe-6.js files in the same directory as the latest version of the jQuery library.

How to do it…

Carry out the following step-by-step instructions to complete this recipe:

Add the following HTML code to recipe-6.html, creating a basic HTML page with three draggable elements in a container div:

<!DOCTYPE html>
<html>
<head>
    <title>Chapter 6 :: Recipe 6</title>
    <link href="recipe-6.css" rel="stylesheet" type="text/css" />
    <script src="jquery.min.js"></script>
    &lt...

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.

jQuery 2.0 Development Cookbook

Search

Your notes and bookmarks