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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
(function($) {
// Public: jLabel Plugin
$.fn.jLabel = function(options) {
var states = new Array();
var opts = $.extend({}, $.fn.jLabel.defaults, options);
return this.each(function() {
$this = $(this);
states.push(new state($this));
$this
.focus(function() { focus($(this)); })
.blur(function() { blur($(this)); })
.keyup(function() { keyup($(this)); });
});
// Private: state object
function state($input) {
// Public Method: equals
this.equals = function($input) {
return $input.attr('id') == this.input.attr('id');
};
// Public Properties
this.input = $input;
this.label = getLabel($input);
// Construction code
if (this.input.val() != '') this.label.hide();
};
// Private: Get an input's related state
function getState($input) {
var state;
$.each(states, function() {
if (this.equals($input)) {
state = this;
return false; // Stop the jQuery loop running
};
});
return state;
};
// Private: Get an input's related label, or create a new one if none found
function getLabel($input) {
// Get the label related to the passed input
var $label = $('label[for=' + $input.attr('id') + ']');
// If no label has been found create one
if ($label.size() == 0) {
$label = $('<label>')
.attr('for', $input.attr('id'))
.text($input.attr('title'));
};
// If this is a new label insert it into the DOM, if not then move it directly before it's related input
$input.before($label);
// Style the label to mimic it's textbox formatting
$label
.css({
'font-family' : $input.css('font-family'),
'font-size' : $input.css('font-size'),
'font-style' : $input.css('font-style'),
'font-variant' : $input.css('font-variant'),
'font-weight' : $input.css('font-weight'),
'letter-spacing' : $input.css('letter-spacing'),
'line-height' : $input.css('line-height'),
'text-decoration' : $input.css('text-decoration'),
'text-transform' : $input.css('text-transform'),
'color' : $input.css('color'),
'cursor' : $input.css('cursor'),
'display' : 'inline-block'
});
// Stop the label from being selectable and position it relative to it's input
$label
.mousedown(function() { return false; })
.css({
'position' : 'relative',
'z-index' : '100',
'margin-right' : -$label.width(),
'left' : opts.xShift + parseInt($input.css("padding-left")) + 'px',
'top' : opts.yShift + 'px'
});
return $label;
};
// Private: Toggle label opacity on input focus
function focus($input) {
if ($input.val() == '') {
getState($input).label.stop().fadeTo(opts.speed, opts.opacity);
};
};
// Private: Toggle label opacity on input blur
function blur($input) {
if ($input.val() == '') {
getState($input).label.stop().fadeTo(opts.speed, 1);
};
};
// Private: Toggle label opacity on input key up
function keyup($input) {
var $label = getState($input).label;
if ($input.val() == '') {
$label.stop().fadeTo(opts.speed, opts.opacity);
} else {
if ($label.is(":visible")) $label.stop().fadeTo(opts.speed, 0, function() { $label.hide(); });
};
};
};
// Public: Default values
$.fn.jLabel.defaults = {
speed : 200,
opacity : 0.4,
xShift : 2,
yShift : 0
};
})(jQuery); |
