jQuery Tutorials
Creating a Form Field Highlighter Plugin / Allowing Users to Customize
Subtitles of the Movie (jQuery / Creating a Form Field Highlighter Plugin / Allowing Users to Customize)
So we now have a working plugin but it's not very versatile. What if the user wants to be able to have different highlight colors to use on different forms? They can't simply edit the CSS because that will change the highlight colors everywhere the plugin is used. So, now let's see how we can allow users to customize the highlight color whenever they use the plugin. Open the HTML document you used to test the plugin and add the CSS style code shown here on lines twelve through nineteen. Now we have a class with a dark blue background, red border and yellow text which will look quite different from the default style we set up before. Insert the code shown on line 24 between parenthesis after the VTC Highlighter function is called on line 23. This consists of a pair of curly brackets containing the name of the parameter we want to customize, which we'll call custom class and the new value my class, which refers to the CSS we created above it in the same document. You can also refer to the file, highlight.html included with this course. This is how users will be able to customize the class used to highlight the form fields but we have to make some important changes to the plugin, in order for this to work. Now open up your plugin.JS file and add the block of code shown here on line seven through nine. Also add the keyword options between the parenthesis at the end of line one. This options keyword allows us to read the parameters provided by the user when the plugin is called from the HTML file. The settings block allows us to set default values so that these parameters will be optional and the plugin will still work if the user does not provide them. Now insert the code shown here on lines eleven through fourteen and also insert the code shown on line 26 which is an ending curly bracket, ending parenthesis and semi colon. This code will conditionally assign any user supplied options to the settings. Now we can access these settings, change the quotes active field text on line eighteen and 22 to settings.custom class. This will now either contain the value of our default which we set on line eight or whatever custom class was supplied by the user. Go ahead and test your HTML file in your browser. When you focus on a text field you should now see your custom class. If you remove the line of code from your HTML file on line 24, then you will see our default green highlight. I highly recommend that you practice this technique on your own and refer to the VTC Highlighter.jQuery.JS and Highlight.html files included with this course, for future jQuery products, where optional parameters will be required.
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
