Tutorial for How to Install jQuery Plugins

by Chris Hoffman

The jQuery JavaScript library includes a plugin architecture. JQuery plugins can add user interface features to your Web page, extend jQuery’s syntax or add additional functions. You can add jQuery plugins to a Web page the same way you install jQuery itself, by uploading the plug-in’s JS file to your Web server and including the plugin with an HTML script tag. The plugin’s script tag must appear after jQuery’s script tag in the HTML code.

1

Locate and download a jQuery plugin from the plugins page the jQuery website.

2

Open the downloaded plugin’s archive file and extract the “.js” file inside it. Some plugins may contain multiple JS files.

3

Open your Web page’s HTML file in a text editor.

4

Locate the line that begins with “<script src="jquery.js” your Web page’s HTML file. Use your text editor’s search feature to locate this line.

5

Add the following text onto a new line immediately after the “jquery.js” line, replacing “jquery.plugin.js” with the file name of the plugin’s JS file. <script src="jquery.plugin.js"></script>

6

Add additional “<script” lines for each plugin JS file you want to install on the Web page.

7

Save your Web page’s HTML file. Upload the HTML file and the plugin JS files to the same directory on your Web server.

Tips

  • Use a jQuery plugin on additional Web pages by adding the plugin's script tag to each Web page's HTML file.
  • Consult each plugin’s documentation for information on usage.

Warning

  • Only install plugins you trust. Malicious plug-ins could steal personal data or have other negative effects on your website.

Video of the Day

Brought to you by Techwalla
Brought to you by Techwalla

About the Author

Chris Hoffman is a technology writer and all-around tech geek who writes for PC World, MakeUseOf, and How-To Geek. He's been using Windows since Windows 3.1 was released in 1992.

More Articles

Photo Credits