Opened 15 years ago
Closed 11 years ago
#3772 closed feature (fixed)
Determine how to support effects across plugins
Reported by: | Scott González | Owned by: | |
---|---|---|---|
Priority: | blocker | Milestone: | 1.9.0 |
Component: | [meta] ui.dev | Version: | 1.6rc4 |
Keywords: | Cc: | ||
Blocked by: | Blocking: |
Description (last modified by )
There should be a unified method for using effects across plugins.
accordion - open
accordion - close
autocomplete - open
autocomplete - close
datepicker - show
datepicker - hide
dialog - show
dialog - hide
dialog - resize
draggable: revert
resizable - resize (when ghosting)
slider - slide (click on bar)
sortable - sort
tabs - show
tabs - hide
tooltip - show
tooltip - hide
Proposed API: ._show() and ._hide() methods on $.Widget.
show: null // .show() show: true // .fadeIn() show: number // .fadeIn( number ) show: string (effect name) // .show( effectName ) show: string (core method) // .coreMethod() show: object (effect) // .show( options ) show: object (core method) // .coreMethod( o.duration, o.easing )
Change History (17)
comment:1 Changed 14 years ago by
Milestone: | 1.next → 1.8 |
---|
comment:2 Changed 14 years ago by
comment:3 Changed 14 years ago by
Another one which was mentioned by someone on IRC: sortables - when an item changes position the old item is just bumped down
comment:4 Changed 14 years ago by
In places where we can't abstract a common API, it may be an option to just expose the configuration of the underlying method (usually works well for plugins that delegate to $.ajax, also $.ui.mouse, where delay and distance are exposed).
In this case, we'd provide the necessary properties, eg. height: "hide", and mix that with user specified properties for duration, easing etc.; at best, by a call to $.extend and passing the result to .animate().
comment:5 Changed 14 years ago by
Another occurence of animations:
Draggable revert is animated, can be customized with revertDuration.
comment:6 Changed 14 years ago by
The following function performs a show or hide animation for a target element based upon a single option that describes the required effect. It allows for the built-in show and fade animations, as well as any of the UI effects.
function showHideAnim(target, effect, showing) { // Convert to array effect = ($.isArray(effect) ? effect : (typeof effect == 'string' ? [effect] : [effect.fx, effect.options, effect.speed, effect.callback])); // Check for options (effect[1] && typeof effect[1] != 'object' ? effect.splice(1, 0, null) : effect); // Check for callback ($.isFunction(effect[2]) ? effect.splice(2, 0, null) : effect); // Special case for 'show' effect = (effect[0] && effect[0] != 'show' ? effect : effect.slice(2)); (effect[0] == 'fade' ? // Special case for 'fade' target[showing ? 'fadeIn' : 'fadeOut'].apply(target, effect.slice(2)) : // Apply effect target[showing ? 'show' : 'hide'].apply(target, effect)); }
This allows the effect to be defined by any of the following - a single string, an array of settings, or a hash of settings:
'' - immediate show/hide
false - immediate show/hide
'show' - immediate show/hide
['', 'normal'] - default show/hide, normal speed
['show', 'slow'] - default show/hide, slow speed
['show', 3000] - default show/hide, 3 seconds
'slow' - default show/hide, slow speed
'normal' - default show/hide, normal speed
'fast' - default show/hide, fast speed
'fade' - fadeIn/Out, normal speed
['fade', 'fast'] - fadeIn/Out, fast speed
'blind' - blind effect, normal speed
['blind', 2000, function() { alert('finished'); }] - blind effect, 2 seconds, callback
['blind', {direction: 'horizontal'}, 3000] - blind effect, options, 3 seconds
{fx: 'blind', speed: 'slow'} - blind effect, slow speed
{fx: 'blind', options: {direction: 'horizontal'}, speed: 3000} - blind effect, options, 3 seconds
['slide'] - slide effect, normal speed
['slide', function() { alert('slid'); } ] - slide effect, normal speed, callback
comment:8 Changed 14 years ago by
Milestone: | 1.8 → 1.next |
---|
comment:10 Changed 13 years ago by
scottgonzalez
"Dialog probably comes the closest to an ideal situation (it's possible that it is the ideal solution)."
comment:11 Changed 13 years ago by
Description: | modified (diff) |
---|
comment:12 Changed 12 years ago by
Description: | modified (diff) |
---|
comment:13 Changed 12 years ago by
Milestone: | 1.next → 1.9 |
---|
comment:14 Changed 12 years ago by
Haven't we resolved this with the _show/_hide methods in $.Widget?
comment:15 Changed 12 years ago by
Partly. There are still other cases like accordion (solved), tabs (potentially solved, but not yet tested), resizable and slider (not yet investigated).
comment:16 Changed 11 years ago by
Status: | new → open |
---|
Resizable and slider can use the same syntax as accordion, just specifying a duration and easing.
Tabs is whacky. The only thing that really makes sense is animating height. Right now you can toggle the height and/or fade. A better animation would really be animating the height from the current to the new height, without toggling. If we did that we could still support the accordion syntax. We'll need to discuss changing this API. If we do it, we should land this in 1.9 with the rest of the API change for tabs.
comment:17 Changed 11 years ago by
Just discussed this with ajpiano and we can just use the new show/hide API. If we're going to support anything, we may as well support everything.
comment:18 Changed 11 years ago by
Resolution: | → fixed |
---|---|
Status: | open → closed |
The show
/hide
options will be used for anything that does a full show/hide. The new animate
option that accordion implements will be used for other animations, such as resizing (with ghost), slider, etc.
Current places where animations could be used:
accordion - open
accordion - close
datepicker - show
datepicker - hide
dialog - show
dialog - hide
dialog - resize
resizable - resize (when ghosting)
slider - slide (click on bar)
tabs - show
tabs - hide
#2358 is about supporting effects in dialogs