jQuery Tutorials
Creating a Form Field Highlighter Plugin / Manipulating CSS with Mouse Events
Subtitles of the Movie (jQuery / Creating a Form Field Highlighter Plugin / Manipulating CSS with Mouse Events)
Now it's time to delve into jQuery to give our plugins some functionality. Go ahead now and open the VTC Highlighter.jQuery.JS file you created earlier and the two lines of code you see here on lines three and five. On line five, we simply create a new variable called the form and assign it to this which refers to whichever HTML element selector was passed to the plugin. In this case it should always be a form that contains text fields. On line five we add the class VTC Highlighter to the form. These two lines will simplify the rest of our code as we go on. Now at the code you see here on line seven and the closing parenthesis and semi colon on line fifteen. Take a look at the selector we use on line seven. The greater than symbol means that we want to manipulate only the child elements of the item on the left. Since we added the VTC Highlighter class to the form, this means that we'll be able to manipulate any text fields on that form. The focus in event is fired when the user has clicked on the form field and remains in effect until the user clicks away from the field. Now add the code shown here on lines eight through ten. On line eight the Selector this now refers only to the text field and adds CSS class active field. This will effectively change the appearance of the text field. The only problem is we have to add code to change it back to normal once the user clicks away from it. To solve this problem add the code shown here on lines eleven through fourteen. We use the period on line eleven to chain another event to our selected element. This time using the focus out Event Handler. Within this function we use the remove class method to set the text field back to normal. Go ahead and view your HTML document in your browser. You should see that each text field is highlighted green when you click or type in it and returns to normal when you click away or move to another field. So there we have our first jQuery plugin.
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
