-
Notifications
You must be signed in to change notification settings - Fork 5.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
3 changed files
with
127 additions
and
127 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,92 +1,92 @@ | ||
<!doctype html> | ||
<html lang="en"> | ||
<head> | ||
<title>jQuery UI Effects - Easings Demo</title> | ||
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> | ||
<script type="text/javascript" src="../../jquery-1.3.js"></script> | ||
<script type="text/javascript" src="../../ui/effects.core.js"></script> | ||
<link type="text/css" href="../demos.css" rel="stylesheet" /> | ||
<style type="text/css"> | ||
</style> | ||
<script type="text/javascript"> | ||
function moveToHere(event, easing) { | ||
var area = $("#area"); | ||
var target = $("#target"); | ||
var offset = area.offset(); | ||
var max = [area.width() - target.width(), area.height() - target.height()]; | ||
var scroll = [document.documentElement.scrollLeft || document.body.scrollLeft, | ||
document.documentElement.scrollTop || document.body.scrollTop]; | ||
target.animate({left: Math.max(0, Math.min((event.clientX + scroll[0]) - | ||
offset.left - (target.width() / 2), max[0])), | ||
top: Math.max(0, Math.min((event.clientY + scroll[1]) - | ||
offset.top - (target.height() / 2), max[1]))}, | ||
2000, easing); | ||
} | ||
|
||
$(function() { | ||
$("#area").click(function(event) { | ||
moveToHere(event, $("#easing").val()); | ||
}); | ||
}); | ||
</script> | ||
</head> | ||
<body> | ||
|
||
<div class="demo"> | ||
|
||
<p><select id="easing"> | ||
<option value="linear">Linear easing</option> | ||
<option value="swing">Swing easing</option> | ||
<option value="easeInQuad">Quadratic ease in</option> | ||
<option value="easeOutQuad">Quadratic ease out</option> | ||
<option value="easeInOutQuad">Quadratic ease in out</option> | ||
<option value="easeInCubic">Cubic ease in</option> | ||
<option value="easeOutCubic">Cubic ease out</option> | ||
<option value="easeInOutCubic">Cubic ease in out</option> | ||
<option value="easeInQuart">Quartic ease in</option> | ||
<option value="easeOutQuart">Quartic ease out</option> | ||
<option value="easeInOutQuart">Quartic ease in out</option> | ||
<option value="easeInQuint">Quintic ease in</option> | ||
<option value="easeOutQuint">Quintic ease out</option> | ||
<option value="easeInOutQuint">Quintic ease in out</option> | ||
<option value="easeInSine">Sinusoidal ease in</option> | ||
<option value="easeOutSine">Sinusoidal ease out</option> | ||
<option value="easeInOutSine">Sinusoidal ease in out</option> | ||
<option value="easeInExpo">Exponential ease in</option> | ||
<option value="easeOutExpo">Exponential ease out</option> | ||
<option value="easeInOutExpo">Exponential ease in out</option> | ||
<option value="easeInCirc">Circular ease in</option> | ||
<option value="easeOutCirc">Circular ease out</option> | ||
<option value="easeInOutCirc">Circular ease in out</option> | ||
<option value="easeInElastic">Elastic ease in (decaying sine wave)</option> | ||
<option value="easeOutElastic">Elastic ease out</option> | ||
<option value="easeInOutElastic">Elastic ease in out</option> | ||
<option value="easeInBack">Back ease in (overshooting cubic)</option> | ||
<option value="easeOutBack">Back ease out</option> | ||
<option value="easeInOutBack">Back ease in out</option> | ||
<option value="easeInBounce">Bounce ease in (decaying parabolic)</option> | ||
<option value="easeOutBounce">Bounce ease out</option> | ||
<option value="easeInOutBounce">Bounce ease in out</option> | ||
</select> | ||
</p> | ||
<div id="area" style="position: relative; width: 400px; height: 300px; border: 1px solid #bbb;"> | ||
<img id="target" src="images/target.png" style="position: absolute; left: 0px;"/> | ||
</div> | ||
</div><!-- End demo --> | ||
|
||
<div class="demo-description"> | ||
|
||
<p> | ||
Easing is acceleration, a change in speed. Easings control how an animation progresses over time.<br/> | ||
An <b>ease-in</b> starts slow and then speeds up.<br/> | ||
An <b>ease-out</b> starts fast and then slows to a stop.<br/> | ||
An <b>ease-in-out</b> combines the two so that the first half is an ease-in and the second half is an ease-out. | ||
</p> | ||
<p> | ||
Click above to preview the selected easing. | ||
</p> | ||
|
||
</div><!-- End demo-description --> | ||
|
||
</body> | ||
</html> | ||
<!doctype html> | ||
<html lang="en"> | ||
<head> | ||
<title>jQuery UI Effects - Easings Demo</title> | ||
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" /> | ||
<script type="text/javascript" src="../../jquery-1.3.js"></script> | ||
<script type="text/javascript" src="../../ui/effects.core.js"></script> | ||
<link type="text/css" href="../demos.css" rel="stylesheet" /> | ||
<style type="text/css"> | ||
</style> | ||
<script type="text/javascript"> | ||
function moveToHere(event, easing) { | ||
var area = $("#area"); | ||
var target = $("#target"); | ||
var offset = area.offset(); | ||
var max = [area.width() - target.width(), area.height() - target.height()]; | ||
var scroll = [document.documentElement.scrollLeft || document.body.scrollLeft, | ||
document.documentElement.scrollTop || document.body.scrollTop]; | ||
target.animate({left: Math.max(0, Math.min((event.clientX + scroll[0]) - | ||
offset.left - (target.width() / 2), max[0])), | ||
top: Math.max(0, Math.min((event.clientY + scroll[1]) - | ||
offset.top - (target.height() / 2), max[1]))}, | ||
2000, easing); | ||
} | ||
|
||
$(function() { | ||
$("#area").click(function(event) { | ||
moveToHere(event, $("#easing").val()); | ||
}); | ||
}); | ||
</script> | ||
</head> | ||
<body> | ||
|
||
<div class="demo"> | ||
|
||
<p><select id="easing"> | ||
<option value="linear">Linear easing</option> | ||
<option value="swing">Swing easing</option> | ||
<option value="easeInQuad">Quadratic ease in</option> | ||
<option value="easeOutQuad">Quadratic ease out</option> | ||
<option value="easeInOutQuad">Quadratic ease in out</option> | ||
<option value="easeInCubic">Cubic ease in</option> | ||
<option value="easeOutCubic">Cubic ease out</option> | ||
<option value="easeInOutCubic">Cubic ease in out</option> | ||
<option value="easeInQuart">Quartic ease in</option> | ||
<option value="easeOutQuart">Quartic ease out</option> | ||
<option value="easeInOutQuart">Quartic ease in out</option> | ||
<option value="easeInQuint">Quintic ease in</option> | ||
<option value="easeOutQuint">Quintic ease out</option> | ||
<option value="easeInOutQuint">Quintic ease in out</option> | ||
<option value="easeInSine">Sinusoidal ease in</option> | ||
<option value="easeOutSine">Sinusoidal ease out</option> | ||
<option value="easeInOutSine">Sinusoidal ease in out</option> | ||
<option value="easeInExpo">Exponential ease in</option> | ||
<option value="easeOutExpo">Exponential ease out</option> | ||
<option value="easeInOutExpo">Exponential ease in out</option> | ||
<option value="easeInCirc">Circular ease in</option> | ||
<option value="easeOutCirc">Circular ease out</option> | ||
<option value="easeInOutCirc">Circular ease in out</option> | ||
<option value="easeInElastic">Elastic ease in (decaying sine wave)</option> | ||
<option value="easeOutElastic">Elastic ease out</option> | ||
<option value="easeInOutElastic">Elastic ease in out</option> | ||
<option value="easeInBack">Back ease in (overshooting cubic)</option> | ||
<option value="easeOutBack">Back ease out</option> | ||
<option value="easeInOutBack">Back ease in out</option> | ||
<option value="easeInBounce">Bounce ease in (decaying parabolic)</option> | ||
<option value="easeOutBounce">Bounce ease out</option> | ||
<option value="easeInOutBounce">Bounce ease in out</option> | ||
</select> | ||
</p> | ||
<div id="area" style="position: relative; width: 400px; height: 300px; border: 1px solid #bbb;"> | ||
<img id="target" src="images/target.png" style="position: absolute; left: 0px;"/> | ||
</div> | ||
</div><!-- End demo --> | ||
|
||
<div class="demo-description"> | ||
|
||
<p> | ||
Easing is acceleration, a change in speed. Easings control how an animation progresses over time.<br/> | ||
An <b>ease-in</b> starts slow and then speeds up.<br/> | ||
An <b>ease-out</b> starts fast and then slows to a stop.<br/> | ||
An <b>ease-in-out</b> combines the two so that the first half is an ease-in and the second half is an ease-out. | ||
</p> | ||
<p> | ||
Click above to preview the selected easing. | ||
</p> | ||
|
||
</div><!-- End demo-description --> | ||
|
||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,17 +1,17 @@ | ||
<!doctype html> | ||
<html lang="en"> | ||
<head> | ||
<title>jQuery UI Effects - Easing Demos</title> | ||
<link type="text/css" href="../demos.css" rel="stylesheet" /> | ||
</head> | ||
<body> | ||
|
||
<div class="demos-nav"> | ||
<h4>Easing Effects</h4> | ||
<ul> | ||
<li class="demo-config-on"><a href="default.html">Easings</a></li> | ||
</ul> | ||
</div> | ||
|
||
</body> | ||
</html> | ||
<!doctype html> | ||
<html lang="en"> | ||
<head> | ||
<title>jQuery UI Effects - Easing Demos</title> | ||
<link type="text/css" href="../demos.css" rel="stylesheet" /> | ||
</head> | ||
<body> | ||
|
||
<div class="demos-nav"> | ||
<h4>Easing Effects</h4> | ||
<ul> | ||
<li class="demo-config-on"><a href="default.html">Easings</a></li> | ||
</ul> | ||
</div> | ||
|
||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,19 +1,19 @@ | ||
/* Greek (el) initialisation for the jQuery UI date picker plugin. */ | ||
/* Written by Alex Cicovic (http://www.alexcicovic.com) */ | ||
jQuery(function($){ | ||
$.datepicker.regional['el'] = { | ||
closeText: 'Κλείσιμο', | ||
prevText: 'Προηγούμενος', | ||
nextText: 'Επόμενος', | ||
currentText: 'Τρέχων Μήνας', | ||
monthNames: ['Ιανουάριος','Φεβρουάριος','Μάρτιος','Απρίλιος','Μάιος','Ιούνιος', | ||
'Ιούλιος','Αύγουστος','Σεπτέμβριος','Οκτώβριος','Νοέμβριος','Δεκέμβριος'], | ||
monthNamesShort: ['Ιαν','Φεβ','Μαρ','Απρ','Μαι','Ιουν', | ||
'Ιουλ','Αυγ','Σεπ','Οκτ','Νοε','Δεκ'], | ||
dayNames: ['Κυριακή','Δευτέρα','Τρίτη','Τετάρτη','Πέμπτη','Παρασκευή','Σάββατο'], | ||
dayNamesShort: ['Κυρ','Δευ','Τρι','Τετ','Πεμ','Παρ','Σαβ'], | ||
dayNamesMin: ['Κυ','Δε','Τρ','Τε','Πε','Πα','Σα'], | ||
dateFormat: 'dd/mm/yy', firstDay: 1, | ||
isRTL: false}; | ||
$.datepicker.setDefaults($.datepicker.regional['el']); | ||
/* Greek (el) initialisation for the jQuery UI date picker plugin. */ | ||
/* Written by Alex Cicovic (http://www.alexcicovic.com) */ | ||
jQuery(function($){ | ||
$.datepicker.regional['el'] = { | ||
closeText: 'Κλείσιμο', | ||
prevText: 'Προηγούμενος', | ||
nextText: 'Επόμενος', | ||
currentText: 'Τρέχων Μήνας', | ||
monthNames: ['Ιανουάριος','Φεβρουάριος','Μάρτιος','Απρίλιος','Μάιος','Ιούνιος', | ||
'Ιούλιος','Αύγουστος','Σεπτέμβριος','Οκτώβριος','Νοέμβριος','Δεκέμβριος'], | ||
monthNamesShort: ['Ιαν','Φεβ','Μαρ','Απρ','Μαι','Ιουν', | ||
'Ιουλ','Αυγ','Σεπ','Οκτ','Νοε','Δεκ'], | ||
dayNames: ['Κυριακή','Δευτέρα','Τρίτη','Τετάρτη','Πέμπτη','Παρασκευή','Σάββατο'], | ||
dayNamesShort: ['Κυρ','Δευ','Τρι','Τετ','Πεμ','Παρ','Σαβ'], | ||
dayNamesMin: ['Κυ','Δε','Τρ','Τε','Πε','Πα','Σα'], | ||
dateFormat: 'dd/mm/yy', firstDay: 1, | ||
isRTL: false}; | ||
$.datepicker.setDefaults($.datepicker.regional['el']); | ||
}); |