Lines 1-366
Link Here
|
1 |
/* |
|
|
2 |
* |
3 |
* jqTransform |
4 |
* by mathieu vilaplana mvilaplana@dfc-e.com |
5 |
* Designer ghyslain armand garmand@dfc-e.com |
6 |
* |
7 |
* |
8 |
* Version 1.0 25.09.08 |
9 |
* Version 1.1 06.08.09 |
10 |
* Add event click on Checkbox and Radio |
11 |
* Auto calculate the size of a select element |
12 |
* Can now, disabled the elements |
13 |
* Correct bug in ff if click on select (overflow=hidden) |
14 |
* No need any more preloading !! |
15 |
* |
16 |
******************************************** */ |
17 |
|
18 |
(function($){ |
19 |
var defaultOptions = {preloadImg:true}; |
20 |
var jqTransformImgPreloaded = false; |
21 |
|
22 |
var jqTransformPreloadHoverFocusImg = function(strImgUrl) { |
23 |
//guillemets to remove for ie |
24 |
strImgUrl = strImgUrl.replace(/^url\((.*)\)/,'$1').replace(/^\"(.*)\"$/,'$1'); |
25 |
var imgHover = new Image(); |
26 |
imgHover.src = strImgUrl.replace(/\.([a-zA-Z]*)$/,'-hover.$1'); |
27 |
var imgFocus = new Image(); |
28 |
imgFocus.src = strImgUrl.replace(/\.([a-zA-Z]*)$/,'-focus.$1'); |
29 |
}; |
30 |
|
31 |
|
32 |
/*************************** |
33 |
Labels |
34 |
***************************/ |
35 |
var jqTransformGetLabel = function(objfield){ |
36 |
var selfForm = $(objfield.get(0).form); |
37 |
var oLabel = objfield.next(); |
38 |
if(!oLabel.is('label')) { |
39 |
oLabel = objfield.prev(); |
40 |
if(oLabel.is('label')){ |
41 |
var inputname = objfield.attr('id'); |
42 |
if(inputname){ |
43 |
oLabel = selfForm.find('label[for="'+inputname+'"]'); |
44 |
} |
45 |
} |
46 |
} |
47 |
if(oLabel.is('label')){return oLabel.css('cursor','pointer');} |
48 |
return false; |
49 |
}; |
50 |
|
51 |
/* Hide all open selects */ |
52 |
var jqTransformHideSelect = function(oTarget){ |
53 |
var ulVisible = $('.jqTransformSelectWrapper ul:visible'); |
54 |
ulVisible.each(function(){ |
55 |
var oSelect = $(this).parents(".jqTransformSelectWrapper:first").find("select").get(0); |
56 |
//do not hide if click on the label object associated to the select |
57 |
if( !(oTarget && oSelect.oLabel && oSelect.oLabel.get(0) == oTarget.get(0)) ){$(this).hide();} |
58 |
}); |
59 |
}; |
60 |
/* Check for an external click */ |
61 |
var jqTransformCheckExternalClick = function(event) { |
62 |
if ($(event.target).parents('.jqTransformSelectWrapper').length === 0) { jqTransformHideSelect($(event.target)); } |
63 |
}; |
64 |
|
65 |
/* Apply document listener */ |
66 |
var jqTransformAddDocumentListener = function (){ |
67 |
$(document).mousedown(jqTransformCheckExternalClick); |
68 |
}; |
69 |
|
70 |
/* Add a new handler for the reset action */ |
71 |
var jqTransformReset = function(f){ |
72 |
var sel; |
73 |
$('.jqTransformSelectWrapper select', f).each(function(){sel = (this.selectedIndex<0) ? 0 : this.selectedIndex; $('ul', $(this).parent()).each(function(){$('a:eq('+ sel +')', this).click();});}); |
74 |
$('a.jqTransformCheckbox, a.jqTransformRadio', f).removeClass('jqTransformChecked'); |
75 |
$('input:checkbox, input:radio', f).each(function(){if(this.checked){$('a', $(this).parent()).addClass('jqTransformChecked');}}); |
76 |
}; |
77 |
|
78 |
/*************************** |
79 |
Buttons |
80 |
***************************/ |
81 |
$.fn.jqTransInputButton = function(){ |
82 |
return this.each(function(){ |
83 |
var newBtn = $('<button id="'+ this.id +'" name="'+ this.name +'" type="'+ this.type +'" class="'+ this.className +' jqTransformButton"><span><span>'+ $(this).attr('value') +'</span></span>') |
84 |
.hover(function(){newBtn.addClass('jqTransformButton_hover');},function(){newBtn.removeClass('jqTransformButton_hover')}) |
85 |
.mousedown(function(){newBtn.addClass('jqTransformButton_click')}) |
86 |
.mouseup(function(){newBtn.removeClass('jqTransformButton_click')}) |
87 |
; |
88 |
$(this).replaceWith(newBtn); |
89 |
}); |
90 |
}; |
91 |
|
92 |
/*************************** |
93 |
Text Fields |
94 |
***************************/ |
95 |
$.fn.jqTransInputText = function(){ |
96 |
return this.each(function(){ |
97 |
var $input = $(this); |
98 |
|
99 |
if($input.hasClass('jqtranformdone') || !$input.is('input')) {return;} |
100 |
$input.addClass('jqtranformdone'); |
101 |
|
102 |
var oLabel = jqTransformGetLabel($(this)); |
103 |
oLabel && oLabel.bind('click',function(){$input.focus();}); |
104 |
|
105 |
var inputSize=$input.width(); |
106 |
if($input.attr('size')){ |
107 |
inputSize = $input.attr('size')*10; |
108 |
$input.css('width',inputSize); |
109 |
} |
110 |
|
111 |
$input.addClass("jqTransformInput").wrap('<div class="jqTransformInputWrapper"><div class="jqTransformInputInner"><div></div></div></div>'); |
112 |
var $wrapper = $input.parent().parent().parent(); |
113 |
$wrapper.css("width", inputSize+10); |
114 |
$input |
115 |
.focus(function(){$wrapper.addClass("jqTransformInputWrapper_focus");}) |
116 |
.blur(function(){$wrapper.removeClass("jqTransformInputWrapper_focus");}) |
117 |
.hover(function(){$wrapper.addClass("jqTransformInputWrapper_hover");},function(){$wrapper.removeClass("jqTransformInputWrapper_hover");}) |
118 |
; |
119 |
|
120 |
/* If this is safari we need to add an extra class */ |
121 |
$.browser.safari && $wrapper.addClass('jqTransformSafari'); |
122 |
$.browser.safari && $input.css('width',$wrapper.width()+16); |
123 |
this.wrapper = $wrapper; |
124 |
|
125 |
}); |
126 |
}; |
127 |
|
128 |
/*************************** |
129 |
Check Boxes |
130 |
***************************/ |
131 |
$.fn.jqTransCheckBox = function(){ |
132 |
return this.each(function(){ |
133 |
if($(this).hasClass('jqTransformHidden')) {return;} |
134 |
|
135 |
var $input = $(this); |
136 |
var inputSelf = this; |
137 |
|
138 |
//set the click on the label |
139 |
var oLabel=jqTransformGetLabel($input); |
140 |
oLabel && oLabel.click(function(){aLink.trigger('click');}); |
141 |
|
142 |
var aLink = $('<a href="#" class="jqTransformCheckbox"></a>'); |
143 |
//wrap and add the link |
144 |
$input.addClass('jqTransformHidden').wrap('<span class="jqTransformCheckboxWrapper"></span>').parent().prepend(aLink); |
145 |
//on change, change the class of the link |
146 |
$input.change(function(){ |
147 |
this.checked && aLink.addClass('jqTransformChecked') || aLink.removeClass('jqTransformChecked'); |
148 |
return true; |
149 |
}); |
150 |
// Click Handler, trigger the click and change event on the input |
151 |
aLink.click(function(){ |
152 |
//do nothing if the original input is disabled |
153 |
if($input.attr('disabled')){return false;} |
154 |
//trigger the envents on the input object |
155 |
$input.trigger('click').trigger("change"); |
156 |
return false; |
157 |
}); |
158 |
|
159 |
// set the default state |
160 |
this.checked && aLink.addClass('jqTransformChecked'); |
161 |
}); |
162 |
}; |
163 |
/*************************** |
164 |
Radio Buttons |
165 |
***************************/ |
166 |
$.fn.jqTransRadio = function(){ |
167 |
return this.each(function(){ |
168 |
if($(this).hasClass('jqTransformHidden')) {return;} |
169 |
|
170 |
var $input = $(this); |
171 |
var inputSelf = this; |
172 |
|
173 |
oLabel = jqTransformGetLabel($input); |
174 |
oLabel && oLabel.click(function(){aLink.trigger('click');}); |
175 |
|
176 |
var aLink = $('<a href="#" class="jqTransformRadio" rel="'+ this.name +'"></a>'); |
177 |
$input.addClass('jqTransformHidden').wrap('<span class="jqTransformRadioWrapper"></span>').parent().prepend(aLink); |
178 |
|
179 |
$input.change(function(){ |
180 |
inputSelf.checked && aLink.addClass('jqTransformChecked') || aLink.removeClass('jqTransformChecked'); |
181 |
return true; |
182 |
}); |
183 |
// Click Handler |
184 |
aLink.click(function(){ |
185 |
if($input.attr('disabled')){return false;} |
186 |
$input.trigger('click').trigger('change'); |
187 |
|
188 |
// uncheck all others of same name input radio elements |
189 |
$('input[name="'+$input.attr('name')+'"]',inputSelf.form).not($input).each(function(){ |
190 |
$(this).attr('type')=='radio' && $(this).trigger('change'); |
191 |
}); |
192 |
|
193 |
return false; |
194 |
}); |
195 |
// set the default state |
196 |
inputSelf.checked && aLink.addClass('jqTransformChecked'); |
197 |
}); |
198 |
}; |
199 |
|
200 |
/*************************** |
201 |
TextArea |
202 |
***************************/ |
203 |
$.fn.jqTransTextarea = function(){ |
204 |
return this.each(function(){ |
205 |
var textarea = $(this); |
206 |
|
207 |
if(textarea.hasClass('jqtransformdone')) {return;} |
208 |
textarea.addClass('jqtransformdone'); |
209 |
|
210 |
oLabel = jqTransformGetLabel(textarea); |
211 |
oLabel && oLabel.click(function(){textarea.focus();}); |
212 |
|
213 |
var strTable = '<table cellspacing="0" cellpadding="0" border="0" class="jqTransformTextarea">'; |
214 |
strTable +='<tr><td id="jqTransformTextarea-tl"></td><td id="jqTransformTextarea-tm"></td><td id="jqTransformTextarea-tr"></td></tr>'; |
215 |
strTable +='<tr><td id="jqTransformTextarea-ml"> </td><td id="jqTransformTextarea-mm"><div></div></td><td id="jqTransformTextarea-mr"> </td></tr>'; |
216 |
strTable +='<tr><td id="jqTransformTextarea-bl"></td><td id="jqTransformTextarea-bm"></td><td id="jqTransformTextarea-br"></td></tr>'; |
217 |
strTable +='</table>'; |
218 |
var oTable = $(strTable) |
219 |
.insertAfter(textarea) |
220 |
.hover(function(){ |
221 |
!oTable.hasClass('jqTransformTextarea-focus') && oTable.addClass('jqTransformTextarea-hover'); |
222 |
},function(){ |
223 |
oTable.removeClass('jqTransformTextarea-hover'); |
224 |
}) |
225 |
; |
226 |
|
227 |
textarea |
228 |
.focus(function(){oTable.removeClass('jqTransformTextarea-hover').addClass('jqTransformTextarea-focus');}) |
229 |
.blur(function(){oTable.removeClass('jqTransformTextarea-focus');}) |
230 |
.appendTo($('#jqTransformTextarea-mm div',oTable)) |
231 |
; |
232 |
this.oTable = oTable; |
233 |
if($.browser.safari){ |
234 |
$('#jqTransformTextarea-mm',oTable) |
235 |
.addClass('jqTransformSafariTextarea') |
236 |
.find('div') |
237 |
.css('height',textarea.height()) |
238 |
.css('width',textarea.width()) |
239 |
; |
240 |
} |
241 |
}); |
242 |
}; |
243 |
|
244 |
/*************************** |
245 |
Select |
246 |
***************************/ |
247 |
$.fn.jqTransSelect = function(){ |
248 |
return this.each(function(index){ |
249 |
var $select = $(this); |
250 |
|
251 |
if($select.hasClass('jqTransformHidden')) {return;} |
252 |
if($select.attr('multiple')) {return;} |
253 |
|
254 |
var oLabel = jqTransformGetLabel($select); |
255 |
/* First thing we do is Wrap it */ |
256 |
var $wrapper = $select |
257 |
.addClass('jqTransformHidden') |
258 |
.wrap('<div class="jqTransformSelectWrapper"></div>') |
259 |
.parent() |
260 |
.css({zIndex: 1000-index}) |
261 |
; |
262 |
|
263 |
/* Now add the html for the select */ |
264 |
$wrapper.prepend('<div><span></span><a href="#" class="jqTransformSelectOpen"></a></div><ul></ul>'); |
265 |
var $ul = $('ul', $wrapper).css('width',$select.width()).hide(); |
266 |
/* Now we add the options */ |
267 |
$('option', this).each(function(i){ |
268 |
var oLi = $('<li><a href="#" index="'+ i +'">'+ $(this).html() +'</a></li>'); |
269 |
$ul.append(oLi); |
270 |
}); |
271 |
|
272 |
/* Add click handler to the a */ |
273 |
$ul.find('a').click(function(){ |
274 |
$('a.selected', $wrapper).removeClass('selected'); |
275 |
$(this).addClass('selected'); |
276 |
/* Fire the onchange event */ |
277 |
if ($select[0].selectedIndex != $(this).attr('index') && $select[0].onchange) { $select[0].selectedIndex = $(this).attr('index'); $select[0].onchange(); } |
278 |
$select[0].selectedIndex = $(this).attr('index'); |
279 |
$('span:eq(0)', $wrapper).html($(this).html()); |
280 |
$ul.hide(); |
281 |
return false; |
282 |
}); |
283 |
/* Set the default */ |
284 |
$('a:eq('+ this.selectedIndex +')', $ul).click(); |
285 |
$('span:first', $wrapper).click(function(){$("a.jqTransformSelectOpen",$wrapper).trigger('click');}); |
286 |
oLabel && oLabel.click(function(){$("a.jqTransformSelectOpen",$wrapper).trigger('click');}); |
287 |
this.oLabel = oLabel; |
288 |
|
289 |
/* Apply the click handler to the Open */ |
290 |
var oLinkOpen = $('a.jqTransformSelectOpen', $wrapper) |
291 |
.click(function(){ |
292 |
//Check if box is already open to still allow toggle, but close all other selects |
293 |
if( $ul.css('display') == 'none' ) {jqTransformHideSelect();} |
294 |
if($select.attr('disabled')){return false;} |
295 |
|
296 |
$ul.slideToggle('fast', function(){ |
297 |
var offSet = ($('a.selected', $ul).offset().top - $ul.offset().top); |
298 |
$ul.animate({scrollTop: offSet}); |
299 |
}); |
300 |
return false; |
301 |
}) |
302 |
; |
303 |
|
304 |
// Set the new width |
305 |
var iSelectWidth = $select.outerWidth(); |
306 |
var oSpan = $('span:first',$wrapper); |
307 |
var newWidth = (iSelectWidth > oSpan.innerWidth())?iSelectWidth+oLinkOpen.outerWidth():$wrapper.width(); |
308 |
$wrapper.css('width',newWidth); |
309 |
$ul.css('width',newWidth-2); |
310 |
oSpan.css({width:iSelectWidth}); |
311 |
|
312 |
// Calculate the height if necessary, less elements that the default height |
313 |
//show the ul to calculate the block, if ul is not displayed li height value is 0 |
314 |
$ul.css({display:'block',visibility:'hidden'}); |
315 |
var iSelectHeight = ($('li',$ul).length)*($('li:first',$ul).height());//+1 else bug ff |
316 |
(iSelectHeight < $ul.height()) && $ul.css({height:iSelectHeight,'overflow':'hidden'});//hidden else bug with ff |
317 |
$ul.css({display:'none',visibility:'visible'}); |
318 |
|
319 |
}); |
320 |
}; |
321 |
$.fn.jqTransform = function(options){ |
322 |
var opt = $.extend({},defaultOptions,options); |
323 |
|
324 |
/* each form */ |
325 |
return this.each(function(){ |
326 |
var selfForm = $(this); |
327 |
if(selfForm.hasClass('jqtransformdone')) {return;} |
328 |
selfForm.addClass('jqtransformdone'); |
329 |
|
330 |
//$('input:submit, input:reset, input[type="button"]', this).jqTransInputButton(); |
331 |
//$('input:text, input:password', this).jqTransInputText(); |
332 |
//$('input:checkbox', this).jqTransCheckBox(); |
333 |
//$('input:radio', this).jqTransRadio(); |
334 |
//$('textarea', this).jqTransTextarea(); |
335 |
|
336 |
if( $('select', this).jqTransSelect().length > 0 ){jqTransformAddDocumentListener();} |
337 |
selfForm.bind('reset',function(){var action = function(){jqTransformReset(this);}; window.setTimeout(action, 10);}); |
338 |
|
339 |
//preloading dont needed anymore since normal, focus and hover image are the same one |
340 |
/*if(opt.preloadImg && !jqTransformImgPreloaded){ |
341 |
jqTransformImgPreloaded = true; |
342 |
var oInputText = $('input:text:first', selfForm); |
343 |
if(oInputText.length > 0){ |
344 |
//pour ie on eleve les "" |
345 |
var strWrapperImgUrl = oInputText.get(0).wrapper.css('background-image'); |
346 |
jqTransformPreloadHoverFocusImg(strWrapperImgUrl); |
347 |
var strInnerImgUrl = $('div.jqTransformInputInner',$(oInputText.get(0).wrapper)).css('background-image'); |
348 |
jqTransformPreloadHoverFocusImg(strInnerImgUrl); |
349 |
} |
350 |
|
351 |
var oTextarea = $('textarea',selfForm); |
352 |
if(oTextarea.length > 0){ |
353 |
var oTable = oTextarea.get(0).oTable; |
354 |
$('td',oTable).each(function(){ |
355 |
var strImgBack = $(this).css('background-image'); |
356 |
jqTransformPreloadHoverFocusImg(strImgBack); |
357 |
}); |
358 |
} |
359 |
}*/ |
360 |
|
361 |
|
362 |
}); /* End Form each */ |
363 |
|
364 |
};/* End the Plugin */ |
365 |
|
366 |
})(jQuery); |
367 |
- |