02.06.2013 Views

jQuery Cookbook - Cdn.oreilly.com - O'Reilly

jQuery Cookbook - Cdn.oreilly.com - O'Reilly

jQuery Cookbook - Cdn.oreilly.com - O'Reilly

SHOW MORE
SHOW LESS

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

If you use this technique, you will not be able to use other libraries’<br />

methods within the encapsulated function that expect the $.<br />

3.8 Adding Functionality with Plugins<br />

Problem<br />

The <strong>jQuery</strong> library is a small, slick, powerful JavaScript library, but it doesn’t <strong>com</strong>e<br />

preloaded with every piece of functionality that you may need.<br />

Solution<br />

<strong>jQuery</strong> was built with extensibility in mind. If the core <strong>jQuery</strong> library can’t do what<br />

you want, chances are a <strong>jQuery</strong> plugin author has written a plugin that will handle your<br />

need, probably in as little as one line of code.<br />

To include a plugin on your page, all you need to do is download the plugin .js file,<br />

include the <strong>jQuery</strong> library on the page, then immediately after, include your plugin on<br />

the page. Then, in either another .js file or in a script block on the page, you’ll typically<br />

need to call the plugin and provide any options that may be required.<br />

Here is an example using the <strong>jQuery</strong> cycle plugin developed by Mike Alsup:<br />

<br />

<br />

<br />

<br />

Chapter 3 - Recipe 8 - Adding Functionality with Plugins<br />

<br />

.pics {<br />

height: 232px;<br />

width: 232px;<br />

padding: 0;<br />

margin: 0;<br />

}<br />

.pics img {<br />

padding: 15px;<br />

border: 1px solid #ccc;<br />

background-color: #eee;<br />

width: 200px;<br />

height: 200px;<br />

top: 0;<br />

left: 0<br />

}<br />

<br />

<br />

<br />

72 | Chapter 3: Beyond the Basics

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!