github/jquery-ui
1
1
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2026-04-20 03:02:41 -04:00
Code Issues Packages Projects Releases Wiki Activity

add scale toggle and size to functional demos + move origin calculations to size

Browse Source
This commit is contained in:
Aaron Eisenberger
2008-06-26 15:58:38 +00:00
parent 1c97a16dd3
commit 269801ad84
3 changed files with 42 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
demos/functional/templates/ui.effects.general.html
View File

@@ -59,7 +59,7 @@
{
title: 'Scale',
desc: 'Change the size of an element.',
desc: 'Scales and element by a percentage.',
html: '<button id="doScale">Scale</button> \n' +
'<button onclick="$(\'#scale\').css({width: 144, height: 108});">Reset</button><br/>\n' +
'<div style="height: 108px;"><img id="scale" src="templates/images/P1010063.JPG"/></div>',
@@ -75,6 +75,22 @@
{ desc: 'Scale from bottom-right', source: '$("#doScale").click(function() { $("#scale").effect("scale", {origin: ["bottom", "right"], percent: 50}, 2000); });' }
]
},
{
title: 'Size',
desc: 'Change the size of an element.',
html: '<button id="doSize">Size</button> \n' +
'<button onclick="$(\'#size\').css({width: 144, height: 108});">Reset</button><br/>\n' +
'<div style="height: 108px;"><img id="size" src="templates/images/P1010063.JPG"/></div>',
destroy: '$("#doSize").unbind();',
options: [
{ desc: 'Size to 75x200', source: '$("#doSize").click(function() { $("#size").effect("size", {to: {width:75, height:200}}, 2000); });' },
{ desc: 'Size to 200x75', source: '$("#doSize").click(function() { $("#size").effect("size", {to: {width:200, height:75}}, 2000); });' },
{ desc: 'Size (125x210) from middle-center', source: '$("#doSize").click(function() { $("#size").effect("size", {to: {width:125, height:210}, origin: ["middle", "center"]}, 2000); });' },
{ desc: 'Size (210x125) from bottom-right', source: '$("#doSize").click(function() { $("#size").effect("size", {to: {width:210, height:125}, origin: ["bottom", "right"]}, 2000); });' }
]
},
{
title: 'Shake',

15
demos/functional/templates/ui.effects.showhide.html
View File

@@ -103,6 +103,21 @@
{ desc: 'Puff to 200%', source: '$("#doPuff").click(function() { $(".pufffx").toggle("puff", {percent: 200}, 2000); });' }
]
},
{
title: 'Scale',
desc: 'Grow/Shrink an element.',
html: '<button id="doScale">Toggle</button><br/>\n' +
'<ul><li style="float: left; width: 144px; height: 108px;"><img class="scalefx" style="width: 144px; height: 108px;" src="templates/images/P1010058.JPG"/></li>\n' +
'<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="scalefx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ...</div></li></ul>\n' +
'<div style="clear: both;"></div>',
destroy: '$("#doPuff").unbind();',
options: [
{ desc: 'Scale defaults', source: '$("#doScale").click(function() { $(".scalefx").toggle("scale", {}, 2000); });' }
]
},
{
title: 'Slide',

19
ui/effects.scale.js
View File

@@ -56,7 +56,7 @@ $.effects.scale = function(o) {
var direction = o.options.direction || 'both'; // Set default axis
var origin = o.options.origin; // The origin of the scaling
if (mode != 'effect') { // Set default origin and restore for show/hide
origin = origin || ['middle','center'];
options.origin = origin || ['middle','center'];
options.restore = true;
}
var original = {height: el.height(), width: el.width()}; // Save original
@@ -68,13 +68,7 @@ $.effects.scale = function(o) {
x: direction != 'vertical' ? (percent / 100) : 1
};
el.to = {height: original.height * factor.y, width: original.width * factor.x}; // Set to state
if (origin) { // Calculate baseline shifts
var baseline = $.effects.getBaseline(origin, original);
el.from.top = (original.height - el.from.height) * baseline.y;
el.from.left = (original.width - el.from.width) * baseline.x;
el.to.top = (original.height - el.to.height) * baseline.y;
el.to.left = (original.width - el.to.width) * baseline.x;
};
if (o.options.fade) { // Fade option to support puff
if (mode == 'show') {el.from.opacity = 0; el.to.opacity = 1;};
if (mode == 'hide') {el.from.opacity = 1; el.to.opacity = 0;};
@@ -106,11 +100,18 @@ $.effects.size = function(o) {
var mode = $.effects.setMode(el, o.options.mode || 'effect'); // Set Mode
var restore = o.options.restore || false; // Default restore
var scale = o.options.scale || 'both'; // Default scale mode
var origin = o.options.origin; // The origin of the sizing
var original = {height: el.height(), width: el.width()}; // Save original
el.from = o.options.from || original; // Default from state
el.to = o.options.to || original; // Default to state
// Adjust
if (origin) { // Calculate baseline shifts
var baseline = $.effects.getBaseline(origin, original);
el.from.top = (original.height - el.from.height) * baseline.y;
el.from.left = (original.width - el.from.width) * baseline.x;
el.to.top = (original.height - el.to.height) * baseline.y;
el.to.left = (original.width - el.to.width) * baseline.x;
};
var factor = { // Set scaling factor
from: {y: el.from.height / original.height, x: el.from.width / original.width},
to: {y: el.to.height / original.height, x: el.to.width / original.width}