http://www.gamemania.co.kr/Scripts/jquery-labelauty/jquery-labelauty.js?v=200507

1/*!
2 * LABELAUTY jQuery Plugin
3 *
4 * @file: jquery-labelauty.js
5 * @author: Francisco Neves (@fntneves)
6 * @site: www.francisconeves.com
7 * @license: MIT License
8 */
9
10(function( $ ){
11
12	$.fn.labelauty = function( options )
13	{
14		/*
15		 * Our default settings
16		 * Hope you don't need to change anything, with these settings
17		 */
18		var settings = $.extend(
19		{
20			// Development Mode
21			// This will activate console debug messages
22			"development": false,
23
24			// Trigger Class
25			// This class will be used to apply styles
26			"class": "labelauty",
27
28			// Use icon?
29			// If false, then only a text label represents the input
30			"icon": true,
31
32			// Use text label ?
33			// If false, then only an icon represents the input
34			"label": true,
35
36			// Separator between labels' messages
37			// If you use this separator for anything, choose a new one
38			"separator": "|",
39
40			// Default Checked Message
41			// This message will be visible when input is checked
42			"checked_label": "Checked",
43
44			// Default UnChecked Message
45			// This message will be visible when input is unchecked
46			"unchecked_label": "Unchecked",
47
48			// Force random ID's
49			// Replace original ID's with random ID's,
50			"force_random_id": false,
51
52			// Minimum Label Width
53			// This value will be used to apply a minimum width to the text labels
54			"minimum_width": false,
55
56			// Use the greatest width between two text labels ?
57			// If this has a true value, then label width will be the greatest between labels
58			"same_width": true
59		}, options);
60
61		/*
62		 * Let's create the core function
63		 * It will try to cover all settings and mistakes of using
64		 */
65		return this.each(function()
66		{
67			var $object = $( this );
68			var selected = $object.is(':checked');
69			var type = $object.attr('type');
70			var use_icons = true;
71			var use_labels = true;
72			var labels;
73			var labels_object;
74			var input_id;
75			
76			//Get the aria label from the input element
77			var aria_label = $object.attr( "aria-label" );
78			
79			// Hide the object form screen readers
80			$object.attr( "aria-hidden", true );
81			
82			// Test if object is a check input
83			// Don't mess me up, come on
84			if( $object.is( ":checkbox" ) === false && $object.is( ":radio" ) === false )
85				return this;
86
87			// Add "labelauty" class to all checkboxes
88			// So you can apply some custom styles
89			$object.addClass( settings["class"] );
90			
91			// Get the value of "data-labelauty" attribute
92			// Then, we have the labels for each case (or not, as we will see)
93			labels = $object.attr( "data-labelauty" );
94			
95			use_labels = settings.label;
96			use_icons = settings.icon;
97
98			// It's time to check if it's going to the right way
99			// Null values, more labels than expected or no labels will be handled here
100			if( use_labels === true )
101			{
102				if( labels == null || labels.length === 0 )
103				{
104					// If attribute has no label and we want to use, then use the default labels
105					labels_object = [settings.unchecked_label, settings.checked_label]
106				}
107				else
108				{
109					// Ok, ok, it's time to split Checked and Unchecked labels
110					// We split, by the "settings.separator" option
111					labels_object = labels.split( settings.separator );
112
113					// Now, let's check if exist _only_ two labels
114					// If there's more than two, then we do not use labels :(
115					// Else, do some additional tests
116					if( labels_object.length > 2 )
117					{
118						use_labels = false;
119						debug( settings.development, "There's more than two labels. LABELAUTY will not use labels." );
120					}
121					else
122					{
123						// If there's just one label (no split by "settings.separator"), it will be used for both cases
124						// Here, we have the possibility of use the same label for both cases
125						if( labels_object.length === 1 )
126							debug( settings.development, "There's just one label. LABELAUTY will use this one for both cases." );
127					}
128				}
129			}
130
131			/*
132			 * Let's begin the beauty
133			 */
134
135			// Start hiding ugly checkboxes
136			// Obviously, we don't need native checkboxes :O
137			$object.css({ display : "none" });
138						
139			// We don't need more data-labelauty attributes!
140			// Ok, ok, it's just for beauty improvement
141			$object.removeAttr( "data-labelauty" );
142			
143			// Now, grab checkbox ID Attribute for "label" tag use
144			// If there's no ID Attribute, then generate a new one
145			input_id = $object.attr( "id" );
146
147			if( settings.force_random_id || input_id == null || input_id.trim() === "")
148			{
149				var input_id_number = 1 + Math.floor( Math.random() * 1024000 );
150				input_id = "labelauty-" + input_id_number;
151
152				// Is there any element with this random ID ?
153				// If exists, then increment until get an unused ID
154				while( $( input_id ).length !== 0 )
155				{
156					input_id_number++;
157					input_id = "labelauty-" + input_id_number;
158					debug( settings.development, "Holy crap, between 1024 thousand numbers, one raised a conflict. Trying again." );
159				}
160
161				$object.attr( "id", input_id );
162			}
163
164			// Now, add necessary tags to make this work
165			// Here, we're going to test some control variables and act properly
166			
167			var element = jQuery(create( input_id, aria_label, selected, type, labels_object, use_labels, use_icons ));
168			
169			element.click(function(){
170				if($object.is(':checked')){
171					$(element).attr('aria-checked', false);
172				}else{
173					$(element).attr('aria-checked', true);
174				}
175			});
176			
177			element.keypress(function(event){
178				event.preventDefault();
179				if(event.keyCode === 32 || event.keyCode === 13){		
180					if($object.is(':checked')){
181						$object.prop('checked', false);

182						$(element).attr('aria-checked',false);
183					}else{
184						$object.prop('checked', true);
185						$(element).attr('aria-checked', true);
186					}
187				}
188			});
189			
190			$object.after(element);
191			
192			// Now, add "min-width" to label
193			// Let's say the truth, a fixed width is more beautiful than a variable width
194			if( settings.minimum_width !== false )
195				$object.next( "label[for=" + input_id + "]" ).css({ "min-width": settings.minimum_width });
196
197			// Now, add "min-width" to label
198			// Let's say the truth, a fixed width is more beautiful than a variable width
199			if( settings.same_width != false && settings.label == true )
200			{
201				var label_object = $object.next( "label[for=" + input_id + "]" );
202				var unchecked_width = getRealWidth(label_object.find( "span.labelauty-unchecked" ));
203				var checked_width = getRealWidth(label_object.find( "span.labelauty-checked" ));
204
205				if( unchecked_width > checked_width )
206					label_object.find( "span.labelauty-checked" ).width( unchecked_width );
207				else
208					label_object.find( "span.labelauty-unchecked" ).width( checked_width );
209			}
210		});
211	};
212
213	/*
214	 * Tricky code to work with hidden elements, like tabs.
215	 * Note: This code is based on jquery.actual plugin.
216	 * https://github.com/dreamerslab/jquery.actual
217	 */
218	function getRealWidth( element )
219	{
220		var width = 0;
221		var $target = element;
222		var css_class = 'hidden_element';
223
224		$target = $target.clone().attr('class', css_class).appendTo('body');
225		width = $target.width(true);
226		$target.remove();
227
228		return width;
229	}
230
231	function debug( debug, message )
232	{
233		if( debug && window.console && window.console.log )
234			window.console.log( "jQuery-LABELAUTY: " + message );
235	}
236
237	function create( input_id, aria_label, selected, type, messages_object, label, icon )
238	{	
239		var block;
240		var unchecked_message;
241		var checked_message;
242		var aria = "";
243		
244		if( messages_object == null )
245			unchecked_message = checked_message = "";
246		else
247		{
248			unchecked_message = messages_object[0];
249
250			// If checked message is null, then put the same text of unchecked message
251			if( messages_object[1] == null )
252				checked_message = unchecked_message;
253			else
254				checked_message = messages_object[1];
255		}
256		
257		if(aria_label == null)
258			aria = "";	
259		else
260			aria = 'tabindex="0" role="' + type + '" aria-checked="' + selected + '" aria-label="' + aria_label + '"';
261		
262		if( label == true && icon == true)
263		{
264			block = '<label for="' + input_id + '" ' + aria + '>' +
265						'<span class="labelauty-unchecked-image"></span>' +
266						'<span class="labelauty-unchecked">' + unchecked_message + '</span>' +
267						'<span class="labelauty-checked-image"></span>' +
268						'<span class="labelauty-checked">' + checked_message + '</span>' +
269					'</label>';
270		}
271		else if( label == true )
272		{
273			block = '<label for="' + input_id + '" ' + aria + '>' +
274				'<span class="labelauty-unchecked">' + unchecked_message + '</span>' +
275				'<span class="labelauty-checked">' + checked_message + '</span>' +
276				'</label>';
277		}
278		else
279		{
280			block = '<label for="' + input_id + '" ' + aria + '>' +
281						'<span class="labelauty-unchecked-image"></span>' +
282						'<span class="labelauty-checked-image"></span>' +
283					'</label>';
284		}
285		
286		return block;
287	}
288
289}( jQuery ));