Discussion :

[razily]

Bonjour à tous ;
oilà je ne sais pas si parmi vous a déjà essayé le plugin jquery Jlabel :

http://www.wduffy.co.uk/jLabel/

en fait je souhaiterai l'appliquer sur un textarea et il marche sauf que je souhaiterai le déplacer de position :

voici le code html

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<label for="message" title="Description" >Mombamomba-Description</label><br/>
 
                 <textarea name="description" cols="40" rows="10" id="message" ></textarea>

voici le code javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
// qui fait l'opacité et la vitesse 
  $('#message').jLabel({ speed : 1000, opacity : 0.1  });

le code javascript de ce JLABEL

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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);

et d'après ce code je ne sais pas comment écrire pour le positionner
j'ai tenté ceci mais c le textarea qui change : normalement il faut mettre à l'intérieur de Jlabel

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
 $('#message').css("position","relative");
 
                  $('#message').css("left","40px");

est ce quelqu'un aune idée ??

merci

[SpaceFrog]

Pourquoi vouloir en changer la position ? le but est qu'il soit DANS l'input à la place du texte ...

Sinon si tu regarde le code de developpement:
c'est là que ça se passe

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
      $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'
					});