We will be undergoing scheduled maintenance on May 20th, 2013 at 02:00 GMT.
jQuery Tutorials
Creating a Form Field Highlighter Plugin / Creating the HTML and CSS
Subtitles of the Movie (jQuery / Creating a Form Field Highlighter Plugin / Creating the HTML and CSS)
As we continue with developing our first jQuery plugin, let's now create the HTML and CSS. The HTML and CSS parts of this are actually very simple and that is precisely the point of jQuery, we want to add functionality and enhance our html while keeping things very easy. First we'll need an HTML form with text fields. Then we'll need CSS to set the highlight style of the form fields. Continuing with the HTML document you created in the previous lesson, go ahead and add the HTML shown on lines fourteen through 22 as shown here. This is just a simple HTML form with three text fields and a Submit Button. Be sure to include the ID equals my form attribute as this is what we will use in our Selector when we use the plugin. Now go ahead and add the script block of code shown here on lines ten through fifteen. This is how we call our plugin. Note that we are using the pound sign my form selector. The document ready function means that this code will be executed as soon as the HTML has loaded. Now, let's create a style sheet to make our highlighted form fields look pretty. It is customary to use a directory structure like the one shown here when developing and distributing jQuery plugins. Your actual plugin will typically be contained in a folder called JS and the style sheets within a folder called CSS. Naming the CSS file with the same name as the plugin also helps to make your plugin easily reusable whether for your own projects or to post online to share with other developers. Go ahead and add the code shown here to your CSS file. This is actually a very simple style sheet. We have just set a nice background color and a border for our highlighted fields and set some nice padding for the text fields whether or not they are being highlighted. Now we have to link CSS file to our HTML document. To do this simply add the code shown here on line ten. Now that we have our HTML and CSS ready to go, let's move on to the next step and put our plugin to work.
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
