Book Image

jQuery 2.0 Development Cookbook

By : Leon Revill
Book Image

jQuery 2.0 Development Cookbook

By: Leon Revill

Overview of this book

Related Content you might be interested in

Current Title:

Small book image
jQuery 2.0 Development Cookbook
Leon Revill
Feb, 2014 | 410 pages
No titles found
Table of Contents (17 chapters)
jQuery 2.0 Development Cookbook
jQuery 2.0 Development Cookbook
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
Document Object Model Manipulation
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
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
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
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
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
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
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
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
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
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

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:

  1. 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...
Previous Section
End of Section 8
Next Section