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

Building a content and image slider plugin

In Chapter 7, User Interface Animation, you were shown how to create a simple content slider using jQuery. This recipe will show you how to turn that recipe into a reusable jQuery plugin with the addition of being able to add images to the slider. You do not need to read the previous recipe to complete this one, but it is recommended to do so for you to get a better understanding of how the code works.

Getting ready

Copy the jquery.plugin-template.js file and rename it to jquery.slider.js, which will become the plugin for this recipe. You will also need to find an image 600 pixels wide and 250 pixels high that will be used in the slider. Finally, create recipe-3.html, slider.css, and recipe-3.js in the same directory as the jquery.slider.js file and the jQuery library.

How to do it…

Perform the following steps to create your image and a content slider plugin:

  1. Add the following HTML to recipe-3.html:

    <!DOCTYPE html>
<html>
<head>
  ...
Previous Section
End of Section 5
Next Section