jQuery Tutorials
Creating a Form Field Highlighter Plugin / Setting Up for Plugin Development
Subtitles of the Movie (jQuery / Creating a Form Field Highlighter Plugin / Setting Up for Plugin Development)
As a developer learning jQuery you may have already downloaded and used some of the many freely available jQuery plugins. jQuery plugins provide useful functionality in a easily reusable package. Knowing how to create plugins yourself will open up a world of possibilities, so let's get started. Before any coding project, of course, you want to understand precisely what we are expected to do. In this case, let's say a client has asked you for a feature that highlights form text fields when they are clicked and in focus and then that highlighting disappears when not in focus. We also suppose that the clients website may have many forms, so we want to create code that is easily reusable. This is a perfect scenario for a jQuery plugin. Create a new file named VTC highlighter.jQuery.JS. If you use a subdirectory for JavaScript files, such as one called JS or scripts, then save it to that directory. Also be sure to note the location of your jQuery.JS file which will often be in the same directory. Go ahead and type this code into your new JS file. This is how we would start any jQuery plugin. It begins with jQuery.FN.function name equals, followed by an empty anonymous function definition. Note that it all ends in a semi colon as we are really just ending a line of code that assigns the entire function to jQuery.FN.VTC Highlighter variable. Once again, I take the time to point this out, as the placement of semi colons, parenthesis and curly brackets in jQuery may initially seem odd to those used to programming languages such as PHP, Java and conventional JavaScript, but upon closer inspection, it really is just JavaScript. Next, we need to create an HTML document that we can use to test the plugin. Create a simple document as shown here, be sure to enter the script tags as shown on line seven and eight, with the first script tag source attributes set to the location of your jQuery file and the second one pointing to your plugin JS file. It is important whenever using jQuery plugins to make sure that jQuery itself is brought in before your plugin, otherwise your plugin won't work. This is the process you most often be using to get ready to create a plugin. Now, let's move on to the next steps.
Tutorial Information
| Course: | jQuery |
| Author: | John Fontana |
| SKU: | 34277 |
| ISBN: | 978-1-61866-020-6 |
| Release Date: | 2011-11-18 |
| Duration: | 7 hrs / 102 lessons |
| Work Files: |
Yes |
| Captions: | No |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 81,350 Video Tutorials (14,200 free)
- Video Available as Flash or QuickTime
- Over 715 Courses
- $30 for One Month Access
- Multi-User Discounts Available
