Hanami Design: Blog, Lab, and Portfolio

jQuery Inline Help Plugin with JSON

In this experiment, I’m playing with using a JSON file to dynamically creating inline help guides for form fields.

When the page loads, the JavaScript adds a slug for help text to anything with the class hd_inline_help. Next it loads and parses the JSON file. Once ready, it steps through the data and tries to match help text with IDs, adding where appropriate. When a user clicks a field, help guides are shown (if available).

Here’s the JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

// Hanami Design inline help experiment
(function($){
	$.fn.hd_inline_help_json = function(options) {
 
		var defaults = {
			fade: false,
			position: inline							
		}
 
		var options = $.extend(defaults,options);
 
		return this.each(function(){
 
			$('.hd_inline_help').each(function(){
 
				var helpItem = "<span class='help'></span>";
				$(this).after(helpItem);
 
				$(this).focus(function() {				
					$(this).closest(".form-row").children(".help").fadeIn();
				})
				$(this).blur(function() {				
					$(this).closest(".form-row").children(".help").fadeOut();
				})			
			});
 
		$.getJSON("js/inline-help.js",function(json) {
 
 				   $.each(json.fields, function(i,field){
 
					$("#"+field.id).closest(".form-row").children(".help").append(field.val);
					console.log("#"+field.id);					
 				   });
 				 });		
		})			
	}	
})(jQuery);

I’m interested in adding more default and positioning options, but you can see version 0.0.1 below.

View experiment

Related Posts:

• Experiment with Simple Inline Bar Charts – Now with Drop Shadows (jQuery Plugin)
• jQuery Inline Percent Scale Plugin
• [Updated] jQuery Plugin for Changing Measurement Units and Converting Values
• Duplicating the iTunes Smart Playlist Form with jQuery & CSS3
• A jQuery Plugin For Changing Measurement Units Inline

This entry was posted on Sunday, August 7th, 2011 at 3:11 pm and is filed under laboratory . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.