Mise à jour de jquery.qtip + amélioration des tooltips dans les elements financier

This commit is contained in:
Michael RICOIS 2011-10-07 09:30:08 +00:00
parent 1e73a683a5
commit dc97d49e24
8 changed files with 109 additions and 71 deletions

View File

@ -9,7 +9,7 @@
* http://en.wikipedia.org/wiki/MIT_License
* http://en.wikipedia.org/wiki/GNU_General_Public_License
*
* Date: Sat Aug 27 09:34:17.0000000000 2011
* Date: Sun Oct 2 09:21:22.0000000000 2011
*/
/* Core qTip styles */
@ -19,7 +19,7 @@
top: -28000px;
display: none;
max-width: 800px;
max-width: 500px;
min-width: 50px;
font-size: 10.5px;

File diff suppressed because one or more lines are too long

View File

@ -1,4 +1,4 @@
$(document).ready(function()
{$('#ratios a[tooltip]').each(function()
{$(this).qtip({content:$(this).attr('tooltip'),style:{width:500,classes:"ui-tooltip-dark"},position:{at:"bottom center",my:"top center"}});});$('.rTip').each(function(){$(this).qtip({content:{text:"Chargement...",title:{text:$(this).attr('name')},ajax:{url:$(this).attr('rel')}},position:{at:"right center",my:"right center",adjust:{x:-20}},show:{solo:true},style:{tip:true,width:400,classes:"ui-tooltip-light"}});});$('[name=mil]').change(function(){window.location.href=$(this).val();});$('input[type=radio][name=typeBilan]').change(function(){window.location.href=$(this).val();});});
{$(this).qtip({content:$(this).attr('tooltip'),style:{width:500,classes:"ui-tooltip-dark"},position:{my:"top left",at:"bottom left"}});});$('.rTip').each(function(){$(this).qtip({content:{text:"Chargement...",title:{text:$(this).attr('name')},ajax:{url:$(this).attr('rel')}},position:{at:"right center",my:"right center",adjust:{x:-20}},show:{solo:true},style:{tip:true,width:400,classes:"ui-tooltip-light"}});});$('[name=mil]').change(function(){window.location.href=$(this).val();});$('input[type=radio][name=typeBilan]').change(function(){window.location.href=$(this).val();});});

View File

@ -1,3 +1,3 @@
$(document).ready(function()
{$('#synthese a[tooltip]').each(function(){$(this).qtip({content:$(this).attr('tooltip'),style:{width:500,classes:"ui-tooltip-dark"},position:{at:"bottom center",my:"top center"}});});$('.sTip').each(function(){$(this).qtip({content:{text:"Chargement...",title:{text:"Evolution - "+$(this).attr('name')+""},ajax:{url:$(this).attr('rel')}},position:{at:"right center",my:"right center",adjust:{x:-20}},show:{solo:true},style:{width:420,classes:"ui-tooltip-light"}});});$('input[type=radio][name=typeBilan]').change(function(){window.location.href=$(this).val();});$('.scoreTip').each(function(){$(this).qtip({content:{text:"Chargement...",title:{text:$(this).attr('titre')},ajax:{url:$(this).attr('rel')}},position:{at:"left center",my:"right center"},show:{solo:true},style:{width:400,classes:"ui-tooltip-light"}});});});
{$('#synthese a[tooltip]').each(function(){$(this).qtip({content:$(this).attr('tooltip'),style:{width:500,classes:"ui-tooltip-dark"},position:{my:"top left",at:"bottom left"}});});$('.sTip').each(function(){$(this).qtip({content:{text:"Chargement...",title:{text:"Evolution - "+$(this).attr('name')+""},ajax:{url:$(this).attr('rel')}},position:{at:"right center",my:"right center",adjust:{x:-20}},show:{solo:true},style:{width:420,classes:"ui-tooltip-light"}});});$('input[type=radio][name=typeBilan]').change(function(){window.location.href=$(this).val();});$('.scoreTip').each(function(){$(this).qtip({content:{text:"Chargement...",title:{text:$(this).attr('titre')},ajax:{url:$(this).attr('rel')}},position:{at:"left center",my:"right center"},show:{solo:true},style:{width:400,classes:"ui-tooltip-light"}});});});

View File

@ -9,7 +9,7 @@
* http://en.wikipedia.org/wiki/MIT_License
* http://en.wikipedia.org/wiki/GNU_General_Public_License
*
* Date: Sat Aug 27 09:34:17.0000000000 2011
* Date: Sun Oct 2 09:21:22.0000000000 2011
*/
/*jslint browser: true, onevar: true, undef: true, nomen: true, bitwise: true, regexp: true, newcap: true, immed: true, strict: true */
@ -249,13 +249,9 @@ function QTip(target, options, id, attr)
// Create button and setup attributes
elements.button.appendTo(elements.titlebar)
.attr('role', 'button')
.hover(function(event){ $(this).toggleClass('ui-state-hover', event.type === 'mouseenter'); })
.click(function(event) {
if(!tooltip.hasClass(disabled)) { self.hide(event); }
return FALSE;
})
.bind('mousedown keydown mouseup keyup mouseout', function(event) {
$(this).toggleClass('ui-state-active ui-state-focus', event.type.substr(-4) === 'down');
});
// Redraw the tooltip when we're done
@ -280,11 +276,20 @@ function QTip(target, options, id, attr)
'aria-atomic': TRUE
})
)
.insertBefore(elements.content);
.insertBefore(elements.content)
// Button-specific events
.delegate('.ui-state-default', 'mousedown keydown mouseup keyup mouseout', function(event) {
$(this).toggleClass('ui-state-active ui-state-focus', event.type.substr(-4) === 'down');
})
.delegate('.ui-state-default', 'mouseover mouseout', function(event){
$(this).toggleClass('ui-state-hover', event.type === 'mouseover');
});
// Create button if enabled
if(options.content.title.button) { createButton(); }
// Redraw the tooltip dimensions if it's rendered
else if(self.rendered){ self.redraw(); }
}
@ -389,9 +394,16 @@ function QTip(target, options, id, attr)
// Skip if the src is already present
if(srcs[elem.src] !== undefined) { return; }
// Keep track of how many times we poll for image dimensions.
// If it doesn't return in a reasonable amount of time, it's better
// to display the tooltip, rather than hold up the queue.
var iterations = 0, maxIterations = 3;
(function timer(){
// When the dimensions are found, remove the image from the queue
if(elem.height || elem.width) { return imageLoad(elem); }
if(elem.height || elem.width || (iterations > maxIterations)) { return imageLoad(elem); }
iterations += 1;
// Restart timer
self.timers.img[elem.src] = setTimeout(timer, 700);
@ -470,7 +482,7 @@ function QTip(target, options, id, attr)
// Prevent hiding if tooltip is fixed and event target is the tooltip. Or if mouse positioning is enabled and cursor momentarily overlaps
if((posOptions.target === 'mouse' && ontoTooltip) || (options.hide.fixed && ((/mouse(out|leave|move)/).test(event.type) && (ontoTooltip || ontoTarget)))) {
event.preventDefault(); event.stopImmediatePropagation(); return;
try { event.preventDefault(); event.stopImmediatePropagation(); } catch(e) {} return;
}
// If tooltip has displayed, start hide timer
@ -542,7 +554,7 @@ function QTip(target, options, id, attr)
var $target = $(event.target),
enabled = !tooltip.hasClass(disabled) && tooltip.is(':visible');
if($target[0] !== tooltip[0] && $target.parents(selector).length === 0 && $target.add(target).length > 1) {
if($target[0] !== tooltip[0] && $target.parents(selector).length === 0 && $target.add(target).length > 1 && !$target.is(':disabled')) {
self.hide(event);
}
});
@ -732,7 +744,8 @@ function QTip(target, options, id, attr)
{
if(self.rendered) { return self; } // If tooltip has already been rendered, exit
var title = options.content.title.text,
var text = options.content.text,
title = options.content.title.text,
posOptions = options.position,
callback = $.Event('tooltiprender');
@ -770,14 +783,16 @@ function QTip(target, options, id, attr)
self.rendered = -1;
isDrawing = 1; isPositioning = 1;
// Update title
// Create title...
if(title) {
createTitle();
updateTitle(title, FALSE);
// Update title only if its not a callback (called in toggle if so)
if(!$.isFunction(title)) { updateTitle(title, FALSE); }
}
// Set proper rendered flag and update content
updateContent(options.content.text, FALSE);
// Set proper rendered flag and update content if not a callback function (called in toggle)
if(!$.isFunction(text)) { updateContent(text, FALSE); }
self.rendered = TRUE;
// Setup widget classes
@ -983,7 +998,7 @@ function QTip(target, options, id, attr)
self.reposition(event);
// Hide other tooltips if tooltip is solo, using it as the context
if(opts.solo) { $(selector, opts.solo).not(tooltip).qtip('hide', callback); }
if((callback.solo = !!opts.solo)) { $(selector, opts.solo).not(tooltip).qtip('hide', callback); }
}
else {
// Clear show timer if we're hiding
@ -1237,7 +1252,8 @@ function QTip(target, options, id, attr)
return position.top - posTop;
}
};
},
win;
// Check if absolute position was passed
if($.isArray(target) && target.length === 2) {
@ -1304,7 +1320,7 @@ function QTip(target, options, id, attr)
targetWidth = target.outerWidth();
targetHeight = target.outerHeight();
position = PLUGINS.offset(target, posOptions.container, fixed);
position = PLUGINS.offset(target, posOptions.container);
}
// Parse returned plugin values into proper variables
@ -1314,13 +1330,18 @@ function QTip(target, options, id, attr)
flipoffset = position.flipoffset;
position = position.offset;
}
else {
// Adjust for position.fixed tooltips (and also iOS scroll bug in v3.2 - v4.0)
if((PLUGINS.iOS < 4.1 && PLUGINS.iOS > 3.1) || PLUGINS.iOS == 4.3 || (!PLUGINS.iOS && fixed)) {
win = $(window);
position.left -= win.scrollLeft();
position.top -= win.scrollTop();
}
// Adjust position relative to target
position.left += at.x === 'right' ? targetWidth : at.x === 'center' ? targetWidth / 2 : 0;
position.top += at.y === 'bottom' ? targetHeight : at.y === 'center' ? targetHeight / 2 : 0;
}
}
// Adjust position relative to tooltip
position.left += adjust.x + (my.x === 'right' ? -elemWidth : my.x === 'center' ? -elemWidth / 2 : 0);
@ -1457,7 +1478,8 @@ function QTip(target, options, id, attr)
destroy: function()
{
var t = target[0],
title = $.attr(t, oldtitle);
title = $.attr(t, oldtitle),
elemAPI = target.data('qtip');
// Destroy tooltip and any associated plugins if rendered
if(self.rendered) {
@ -1473,6 +1495,8 @@ function QTip(target, options, id, attr)
clearTimeout(self.timers.hide);
unassignEvents();
// If the API if actually this qTip API...
if(!elemAPI || self === elemAPI) {
// Remove api object
$.removeData(t, 'qtip');
@ -1482,8 +1506,12 @@ function QTip(target, options, id, attr)
target.removeAttr(oldtitle);
}
// Remove ARIA attributes and bound qtip events
target.removeAttr('aria-describedby').unbind('.qtip');
// Remove ARIA attributes
target.removeAttr('aria-describedby');
}
// Remove qTip events associated with this API
target.unbind('.qtip-'+id);
// Remove ID from sued id object
delete usedIDs[self.id];
@ -1573,7 +1601,7 @@ function init(id, opts)
$.data(this, 'qtip', obj);
// Catch remove events on target element to destroy redundant tooltip
elem.bind('remove.qtip', function(){ obj.destroy(); });
elem.bind('remove.qtip-'+id, function(){ obj.destroy(); });
return obj;
}
@ -1732,12 +1760,12 @@ PLUGINS = QTIP.plugins = {
},
// Custom (more correct for qTip!) offset calculator
offset: function(elem, container, fixed) {
offset: function(elem, container) {
var pos = elem.offset(),
parent = container,
deep = 0,
docBody = document.body,
coffset;
coffset, overflow;
function scroll(e, i) {
pos.left += i * e.scrollLeft();
@ -1755,17 +1783,16 @@ PLUGINS = QTIP.plugins = {
pos.left -= coffset.left + (parseInt(parent.css('borderLeftWidth'), 10) || 0) + (parseInt(parent.css('marginLeft'), 10) || 0);
pos.top -= coffset.top + (parseInt(parent.css('borderTopWidth'), 10) || 0);
deep++;
overflow = parent.css('overflow');
if(overflow === 'scroll' || overflow === 'auto') { deep++; }
}
if(parent[0] === docBody) { break; }
}
while(parent = parent.offsetParent());
// Compensate for containers scroll if it also has an offsetParent
if(container[0] !== docBody && deep > 1) { scroll( container, 1 ); }
// Adjust for position.fixed tooltips (and also iOS scroll bug in v3.2 - v4.0)
if((PLUGINS.iOS < 4.1 && PLUGINS.iOS > 3.1) || (!PLUGINS.iOS && fixed)) { scroll( $(window), -1 ); }
if(container[0] !== docBody && deep) { scroll( container, 1 ); }
}
return pos;
@ -1958,8 +1985,7 @@ function Ajax(api)
};
$.extend(self, {
init: function()
{
init: function() {
// Make sure ajax options are enabled and bind event
if(opts && opts.url) {
tooltip.unbind(namespace)[ opts.once ? 'one' : 'bind' ]('tooltipshow'+namespace, self.load);
@ -1968,18 +1994,17 @@ function Ajax(api)
return self;
},
load: function(event, first)
{
// Make sure default event hasn't been prevented
if(event && event.isDefaultPrevented()) { return self; }
load: function(event, first) {
var hasSelector = opts.url.indexOf(' '),
url = opts.url,
selector,
hideFirst = opts.once && !opts.loading && first;
// If loading option is disabled, hide the tooltip until content is retrieved (first time only)
if(hideFirst) { tooltip.css('visibility', 'hidden'); }
// If loading option is disabled, prevent the tooltip showing until we've completed the request
if(hideFirst) { try{ event.preventDefault(); } catch(e) {} }
// Make sure default event hasn't been prevented
else if(event && event.isDefaultPrevented()) { return self; }
// Check if user delcared a content selector like in .load()
if(hasSelector > -1) {
@ -1990,7 +2015,7 @@ function Ajax(api)
// Define common after callback for both success/error handlers
function after() {
// Re-display tip if loading and first time, and reset first flag
if(hideFirst) { tooltip.css('visibility', ''); first = FALSE; }
if(hideFirst) { api.show(event.originalEvent); first = FALSE; }
// Call users complete if it was defined
if($.isFunction(opts.complete)) { opts.complete.apply(this, arguments); }
@ -2014,12 +2039,13 @@ function Ajax(api)
}
// Error handler
function errorHandler(xh, status, error){ api.set('content.text', status + ': ' + error); }
function errorHandler(xh, status, error) {
if (xh.status === 0) { return; }
api.set('content.text', status + ': ' + error);
}
// Setup $.ajax option object and process the request
$.ajax( $.extend({ success: successHandler, error: errorHandler, context: api }, opts, { url: url, complete: after }) );
return self;
}
});
@ -2871,9 +2897,9 @@ function Modal(api)
// Make sure mouseout doesn't trigger a hide when showing the modal and mousing onto backdrop
if(oEvent && event.type === 'tooltiphide' && /mouse(leave|enter)/.test(oEvent.type) && $(oEvent.relatedTarget).closest(overlay[0]).length) {
event.preventDefault();
try { event.preventDefault(); } catch(e) {}
}
else {
else if(oEvent && !oEvent.solo){
self[ event.type.replace('tooltip', '') ](event, duration);
}
})
@ -2890,7 +2916,7 @@ function Modal(api)
curIndex = parseInt(tooltip[0].style.zIndex, 10);
// Set overlay z-index
overlay[0].style.zIndex = newIndex;
overlay[0].style.zIndex = newIndex - 1;
// Reduce modal z-index's and keep them properly ordered
qtips.each(function() {
@ -2938,7 +2964,10 @@ function Modal(api)
var elem = $(overlaySelector);
// Return if overlay is already rendered
if(elem.length) { elems.overlay = elem; return elem; }
if(elem.length) {
// Modal overlay should always be below all tooltips if possible
return (elems.overlay = elem.insertAfter( $(selector).last() ));
}
// Create document overlay
overlay = elems.overlay = $('<div />', {
@ -2946,7 +2975,7 @@ function Modal(api)
html: '<div></div>',
mousedown: function() { return FALSE; }
})
.insertBefore( $(selector).first() );
.insertAfter( $(selector).last() );
// Update position on window resize or scroll
$(window).unbind(globalNamespace).bind('resize'+globalNamespace, function() {
@ -2986,9 +3015,18 @@ function Modal(api)
overlay.toggleClass('blurs', options.blur);
// Make sure we can't focus anything outside the tooltip
docBody.delegate('*', 'focusin'+namespace, function(event) {
if($(event.target).closest(selector)[0] !== tooltip[0]) {
$('a, :input, img', tooltip).add(tooltip).focus();
docBody.bind('focusin'+namespace, function(event) {
var target = $(event.target),
container = target.closest('.qtip'),
// Determine if input container target is above this
targetOnTop = container.length < 1 ? FALSE :
(parseInt(container[0].style.zIndex, 10) > parseInt(tooltip[0].style.zIndex, 10));
// If we're showing a modal, but focus has landed on an input below
// this modal, divert focus to the first visible input in this modal
if(!targetOnTop && ($(event.target).closest(selector)[0] !== tooltip[0])) {
tooltip.find('input:visible').filter(':first').focus();
}
});
}

File diff suppressed because one or more lines are too long

View File

@ -9,8 +9,8 @@ $(document).ready(function()
classes: "ui-tooltip-dark"
},
position: {
at: "bottom center",
my: "top center"
my: "top left",
at: "bottom left"
}
});
});

View File

@ -8,8 +8,8 @@ $(document).ready(function()
classes: "ui-tooltip-dark"
},
position: {
at: "bottom center",
my: "top center"
my: "top left",
at: "bottom left"
}
});
});