mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
Functional demos fixes
This commit is contained in:
Eduardo Lundgren
parent
ee0a6e1b81
commit
7d18930231
@ -75,6 +75,75 @@ h1.logo a span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Navigation
|
||||
-------------------------------- */
|
||||
|
||||
#navigation {
|
||||
height: 41px;
|
||||
float: left;
|
||||
position: absolute;
|
||||
top: 62px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
#navigation .left {
|
||||
float: left;
|
||||
width: 5px;
|
||||
height: 41px;
|
||||
/* background: url('/images/navigation.png') no-repeat left top; */
|
||||
background: url('/images/navigation_l.png') no-repeat left top;
|
||||
}
|
||||
|
||||
#ie6 #navigation .left {
|
||||
background: transparent none;
|
||||
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/navigation_l.png', sizingMethod='scale');
|
||||
zoom: 1;
|
||||
}
|
||||
|
||||
#navigation .right {
|
||||
float: left;
|
||||
width: 3px;
|
||||
height: 41px;
|
||||
background: url('/images/navigation.png') no-repeat right top;
|
||||
}
|
||||
|
||||
#navigation ul,
|
||||
#navigation ul li {
|
||||
float: left;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 13px;
|
||||
line-height: 38px;
|
||||
}
|
||||
|
||||
#navigation ul {
|
||||
height: 41px;
|
||||
background: url('/images/navigation.png') repeat-x 0 -41px;
|
||||
}
|
||||
|
||||
#navigation ul li a {
|
||||
float: left;
|
||||
display: block;
|
||||
height: 41px;
|
||||
padding: 0 18px;
|
||||
color: #ccc;
|
||||
text-decoration: none;
|
||||
background: url('/images/navigation_s.png') no-repeat right top;
|
||||
}
|
||||
|
||||
#navigation ul li.selected a {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#navigation ul li.last a{
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
#navigation ul li a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
/* Dock
|
||||
-------------------------------- */
|
||||
|
||||
BIN
demos/functional/images/navigation.png
Normal file
BIN
demos/functional/images/navigation.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 422 B |
BIN
demos/functional/images/navigation_l.png
Normal file
BIN
demos/functional/images/navigation_l.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 312 B |
BIN
demos/functional/images/navigation_s.png
Normal file
BIN
demos/functional/images/navigation_s.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 164 B |
@ -15,10 +15,10 @@
|
||||
<link rel="stylesheet" href="css/base.css" type="text/css" media="screen">
|
||||
<link rel="stylesheet" href="css/functional_demos.css" type="text/css" media="screen">
|
||||
<link rel="stylesheet" href="css/chilli-recipes.css" type="text/css" media="screen">
|
||||
<link rel="stylesheet" href="../../themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)" />
|
||||
<link rel="stylesheet" href="../../themes/default/ui.autocomplete.css" type="text/css" media="screen" title="Autocomplete (Default)" />
|
||||
<link rel="stylesheet" href="../../themes/default/ui.colorpicker.css" type="text/css" media="screen" title="Colorpicker (Default)" />
|
||||
|
||||
<link rel="stylesheet" href="../../themes/default/ui.all.css" type="text/css" media="screen" title="Flora (Default)" />
|
||||
<link rel="stylesheet" href="../../themes/flora/flora.accordion.css" type="text/css" media="screen" title="Flora (Default)" />
|
||||
<link rel="stylesheet" href="../../themes/flora/flora.tabs.css" type="text/css" media="screen" title="Flora (Default)" />
|
||||
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
@ -112,9 +112,67 @@
|
||||
<div id="banner">
|
||||
<h1 class="logo">
|
||||
<a href="http://ui.jquery.com/" title="jQuery User Interface"><span>jQuery User Interface</span></a>
|
||||
|
||||
</h1>
|
||||
|
||||
<div id="dock">
|
||||
<div class="left"></div>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<a href="http://jquery.com">jQuery</a>
|
||||
</li>
|
||||
<li style="padding-right: 12px;">
|
||||
<a href="http://plugins.jquery.com/">Plugins</a>
|
||||
</li>
|
||||
<li class="selected" style="padding-right: 12px;">
|
||||
|
||||
<a href="http://ui.jquery.com/home">UI</a>
|
||||
</li>
|
||||
<li style="padding-left: 12px;">
|
||||
<div style="background: #555; width: 1px; height: 24px; position: absolute; left: 0px;"></div>
|
||||
<a href="http://jquery.com/blog">Blog</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://ui.jquery.com/about">About</a>
|
||||
|
||||
</li>
|
||||
<li>
|
||||
<a href="http://docs.jquery.com/Donate">Donate</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
<div id="navigation">
|
||||
<div class="left"></div>
|
||||
<ul>
|
||||
<li >
|
||||
<a href="http://ui.jquery.com/download">Download</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://docs.jquery.com/UI">Documentation</a>
|
||||
</li>
|
||||
|
||||
<li class="selected">
|
||||
<a href="http://ui.jquery.com/demos">Demos</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://ui.jquery.com/themeroller">Themes</a>
|
||||
</li>
|
||||
<li >
|
||||
<a href="#" style="color: #333; cursor: default;" onclick="return false;">Tutorials</a>
|
||||
|
||||
</li>
|
||||
<li >
|
||||
<a href="http://ui.jquery.com/bugs">Development</a>
|
||||
</li>
|
||||
<li class="last">
|
||||
<a href="http://ui.jquery.com/support">Support</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="content-wrapper">
|
||||
<div id="content">
|
||||
@ -165,8 +223,8 @@
|
||||
<li><a href="#ui.colorpicker" title="Goto Colorpicker's Component Page">Colorpicker</a></li>
|
||||
<li><a href="#ui.datepicker" title="Goto Datepicker's Component Page">Datepicker</a></li>
|
||||
<li><a href="#ui.dialog" title="Goto Dialog's Component Page">Dialog</a></li>
|
||||
<li><a href="#ui.magnifier" title="Goto Spinner Component Page">Magnifier</a></li>
|
||||
<li><a href="#ui.progressbar" title="Goto Spinner Component Page">Progressbar</a></li>
|
||||
<li><a href="#ui.magnifier" title="Goto Magnifier Component Page">Magnifier</a></li>
|
||||
<li><a href="#ui.progressbar" title="Goto ProgressBar Component Page">Progressbar</a></li>
|
||||
<li><a href="#ui.slider" title="Goto Slider Component Page">Slider</a></li>
|
||||
<li><a href="#ui.spinner" title="Goto Spinner Component Page">Spinner</a></li>
|
||||
<li><a href="#ui.tabs" title="Goto Tabs Component Page">Tabs</a></li>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script type="text/javascript">
|
||||
|
||||
var autocomplete_data = '["book","movie","music","sports","skating","swim"]';
|
||||
var autocomplete_data = '["aero", "airplane", "book","movie","music","sports","skating","swim"]';
|
||||
|
||||
var model = {
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
{
|
||||
title: 'Simple autocomplete',
|
||||
desc: 'With few lines of code you could build a autocomplete. You can try more options on the fly! ',
|
||||
html: '<input id="autocomplete" type="text" /> (Try type <em>m</em> or <em>s</em>)',
|
||||
html: '<input id="autocomplete" type="text" /> (Try type <em>a</em>, <em>m</em> or <em>s</em>)',
|
||||
destroy: '$("#autocomplete").autocomplete("destroy");',
|
||||
options: [
|
||||
{ desc: 'Attach a autocomplete', source: '$("#autocomplete").autocomplete({data:'+autocomplete_data+'});' }
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
{
|
||||
title: 'Triggered colorpicker',
|
||||
desc: 'With few lines of code you could build a colorpicker. You can try more options on the fly!',
|
||||
html: '<input id="colorpicker2" />',
|
||||
html: '<input id="colorpicker2" /><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>',
|
||||
destroy: '$("#colorpicker2").colorpicker("destroy");',
|
||||
options: [
|
||||
{ desc: 'Make a colorpicker', source: '$("#colorpicker2").colorpicker( {submit: function(e,ui) { $("#colorpicker2").val(ui.hex);} });' },
|
||||
|
||||
@ -1,3 +1,34 @@
|
||||
<script type="text/javascript">
|
||||
// Prepare to show a date picker linked to three select controls
|
||||
function readLinked() {
|
||||
$("#linkedDates").val($("#selectMonth").val() + "/" +
|
||||
$("#selectDay").val() + "/" + $("#selectYear").val());
|
||||
return {};
|
||||
}
|
||||
|
||||
// Update three select controls to match a date picker selection
|
||||
function updateLinked(date) {
|
||||
$("#selectMonth").val(date.substring(0, 2));
|
||||
$("#selectDay").val(date.substring(3, 5));
|
||||
$("#selectYear").val(date.substring(6, 10));
|
||||
}
|
||||
|
||||
// Prevent selection of invalid dates through the select controls
|
||||
function checkLinkedDays() {
|
||||
var daysInMonth = 32 - new Date($("#selectYear").val(),
|
||||
$("#selectMonth").val() - 1, 32).getDate();
|
||||
$("#selectDay option").attr("disabled", "");
|
||||
$("#selectDay option:gt(" + (daysInMonth - 1) +")").attr("disabled", "disabled");
|
||||
if ($("#selectDay").val() > daysInMonth) {
|
||||
$("#selectDay").val(daysInMonth);
|
||||
}
|
||||
}
|
||||
function customRange(input) {
|
||||
return {minDate: (input.id == "endDate" ? $("#startDate").datepicker("getDate") : null),
|
||||
maxDate: (input.id == "startDate" ? $("#endDate").datepicker("getDate") : null)};
|
||||
}
|
||||
</script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
var model = {
|
||||
@ -372,10 +403,10 @@
|
||||
title: 'Alternate Styling',
|
||||
desc: 'Change the look-and-feel of the datepicker with alternative CSS.<br/>(Be sure to change it back again before going to another page.)',
|
||||
html: '<input type="text" size="10" value="" id="styled"/>',
|
||||
destroy: '$("#styled").datepicker("destroy");$("link[title=Flora (Default)]").attr("href", "../../themes/flora/flora.all.css");',
|
||||
destroy: '',
|
||||
|
||||
options: [
|
||||
{ desc: 'Default jQuery UI (Flora)', source: '$("#styled").datepicker({showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});$("link[title=Flora (Default)]").attr("href", "../../themes/flora/flora.all.css");' },
|
||||
{ desc: 'Default jQuery UI (Flora)', source: '$("#styled").datepicker({showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Original datepicker styling', source: '$("#styled").datepicker({showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});$("link[title=Flora (Default)]").attr("href", "../../themes/default/ui.datepicker.css");' }
|
||||
]
|
||||
}
|
||||
|
||||
@ -14,43 +14,43 @@
|
||||
'An ease-in starts slow and then speeds up.<br/>' +
|
||||
'An ease-out starts fast and then slows to a stop.<br/>' +
|
||||
'An ease-in-out combines the two so that the first half is an ease-in and the second half is an ease-out.',
|
||||
html: '<button id="doBounce">Bounce</button><br/>\n' +
|
||||
html: '<button id="doBounce" type="button">Bounce</button><br/><br/>\n' +
|
||||
'<div><img id="bounce" src="templates/images/puppy.jpg"/></div>',
|
||||
destroy: '$("#doBounce").unbind();',
|
||||
|
||||
options: [
|
||||
{ desc: 'Linear easing', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "linear", times: 1}, 2000); });' },
|
||||
{ desc: 'Swing easing', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "swing", times: 1}, 2000); });' },
|
||||
{ desc: 'Quadratic ease in', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInQuad", times: 1}, 2000); });' },
|
||||
{ desc: 'Quadratic ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutQuad", times: 1}, 2000); });' },
|
||||
{ desc: 'Quadratic ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutQuad", times: 1}, 2000); });' },
|
||||
{ desc: 'Cubic ease in', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInCubic", times: 1}, 2000); });' },
|
||||
{ desc: 'Cubic ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutCubic", times: 1}, 2000); });' },
|
||||
{ desc: 'Cubic ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutCubic", times: 1}, 2000); });' },
|
||||
{ desc: 'Quartic ease in', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInQuart", times: 1}, 2000); });' },
|
||||
{ desc: 'Quartic ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutQuart", times: 1}, 2000); });' },
|
||||
{ desc: 'Quartic ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutQuart", times: 1}, 2000); });' },
|
||||
{ desc: 'Quintic ease in', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInQuint", times: 1}, 2000); });' },
|
||||
{ desc: 'Quintic ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutQuint", times: 1}, 2000); });' },
|
||||
{ desc: 'Quintic ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutQuint", times: 1}, 2000); });' },
|
||||
{ desc: 'Sinusoidal ease in', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInSine", times: 1}, 2000); });' },
|
||||
{ desc: 'Sinusoidal ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutSine", times: 1}, 2000); });' },
|
||||
{ desc: 'Sinusoidal ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutSine", times: 1}, 2000); });' },
|
||||
{ desc: 'Exponential ease in', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInExpo", times: 1}, 2000); });' },
|
||||
{ desc: 'Exponential ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutExpo", times: 1}, 2000); });' },
|
||||
{ desc: 'Exponential ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutExpo", times: 1}, 2000); });' },
|
||||
{ desc: 'Circular ease in', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInCirc", times: 1}, 2000); });' },
|
||||
{ desc: 'Circular ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutCirc", times: 1}, 2000); });' },
|
||||
{ desc: 'Circular ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutCirc", times: 1}, 2000); });' },
|
||||
{ desc: 'Elastic ease in (decaying sine wave)', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInElastic", times: 1}, 2000); });' },
|
||||
{ desc: 'Elastic ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutElastic", times: 1}, 2000); });' },
|
||||
{ desc: 'Elastic ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutElastic", times: 1}, 2000); });' },
|
||||
{ desc: 'Back ease in (overshooting cubic)', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInBack", times: 1}, 2000); });' },
|
||||
{ desc: 'Back ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutBack", times: 1}, 2000); });' },
|
||||
{ desc: 'Back ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutBack", times: 1}, 2000); });' },
|
||||
{ desc: 'Bounce ease in (decaying parabolic)', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInBounce", times: 1}, 2000); });' },
|
||||
{ desc: 'Bounce ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutBounce", times: 1}, 2000); });' },
|
||||
{ desc: 'Bounce ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutBounce", times: 1}, 2000); });' },
|
||||
{ desc: 'Linear easing', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "linear", times: 1}, 800); });' },
|
||||
{ desc: 'Swing easing', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "swing", times: 1}, 800); });' },
|
||||
{ desc: 'Quadratic ease in', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInQuad", times: 1}, 800); });' },
|
||||
{ desc: 'Quadratic ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutQuad", times: 1}, 800); });' },
|
||||
{ desc: 'Quadratic ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutQuad", times: 1}, 800); });' },
|
||||
{ desc: 'Cubic ease in', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInCubic", times: 1}, 800); });' },
|
||||
{ desc: 'Cubic ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutCubic", times: 1}, 800); });' },
|
||||
{ desc: 'Cubic ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutCubic", times: 1}, 800); });' },
|
||||
{ desc: 'Quartic ease in', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInQuart", times: 1}, 800); });' },
|
||||
{ desc: 'Quartic ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutQuart", times: 1}, 800); });' },
|
||||
{ desc: 'Quartic ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutQuart", times: 1}, 800); });' },
|
||||
{ desc: 'Quintic ease in', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInQuint", times: 1}, 800); });' },
|
||||
{ desc: 'Quintic ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutQuint", times: 1}, 800); });' },
|
||||
{ desc: 'Quintic ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutQuint", times: 1}, 800); });' },
|
||||
{ desc: 'Sinusoidal ease in', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInSine", times: 1}, 800); });' },
|
||||
{ desc: 'Sinusoidal ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutSine", times: 1}, 800); });' },
|
||||
{ desc: 'Sinusoidal ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutSine", times: 1}, 800); });' },
|
||||
{ desc: 'Exponential ease in', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInExpo", times: 1}, 800); });' },
|
||||
{ desc: 'Exponential ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutExpo", times: 1}, 800); });' },
|
||||
{ desc: 'Exponential ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutExpo", times: 1}, 800); });' },
|
||||
{ desc: 'Circular ease in', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInCirc", times: 1}, 800); });' },
|
||||
{ desc: 'Circular ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutCirc", times: 1}, 800); });' },
|
||||
{ desc: 'Circular ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutCirc", times: 1}, 800); });' },
|
||||
{ desc: 'Elastic ease in (decaying sine wave)', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInElastic", times: 1}, 800); });' },
|
||||
{ desc: 'Elastic ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutElastic", times: 1}, 800); });' },
|
||||
{ desc: 'Elastic ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutElastic", times: 1}, 800); });' },
|
||||
{ desc: 'Back ease in (overshooting cubic)', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInBack", times: 1}, 800); });' },
|
||||
{ desc: 'Back ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutBack", times: 1}, 800); });' },
|
||||
{ desc: 'Back ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutBack", times: 1}, 800); });' },
|
||||
{ desc: 'Bounce ease in (decaying parabolic)', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInBounce", times: 1}, 800); });' },
|
||||
{ desc: 'Bounce ease out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeOutBounce", times: 1}, 800); });' },
|
||||
{ desc: 'Bounce ease in out', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {easing: "easeInOutBounce", times: 1}, 800); });' },
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
{
|
||||
title: 'Bounce',
|
||||
desc: 'Bounce an element from its original location. The default settings are {times: 5, direction: "up", distance: 20}.',
|
||||
html: '<button id="doBounce">Bounce</button><br/>\n' +
|
||||
html: '<button id="doBounce" type="button">Bounce</button><br/><br/>\n' +
|
||||
'<div style="height: 108px;"><img id="bounce" src="templates/images/P1010036.JPG"/></div>',
|
||||
destroy: '$("#doBounce").unbind();',
|
||||
|
||||
@ -30,22 +30,22 @@
|
||||
{
|
||||
title: 'Highlight',
|
||||
desc: 'Highlight an element by fading its background color from another color back to its original.',
|
||||
html: '<button id="doHighlight">Highlight</button><br/>\n' +
|
||||
html: '<button id="doHighlight" type="button">Highlight</button><br/><br/>\n' +
|
||||
'<div id="highlight" style="width: 144px; height: 108px; background-color: #ccffff; text-align: center;"><br/><br/>\n' +
|
||||
'This is an important announcement!</div>',
|
||||
destroy: '$("#doHighlight").unbind();',
|
||||
|
||||
options: [
|
||||
{ desc: 'Highlight defaults (yellow)', source: '$("#doHighlight").click(function() { $("#highlight").effect("highlight", {}, 2000); });' },
|
||||
{ desc: 'Highlight to red', source: '$("#doHighlight").click(function() { $("#highlight").effect("highlight", {color: "red"}, 2000); });' },
|
||||
{ desc: 'Highlight to black', source: '$("#doHighlight").click(function() { $("#highlight").effect("highlight", {color: "#000000"}, 2000); });' }
|
||||
{ desc: 'Highlight defaults (yellow)', source: '$("#doHighlight").click(function() { $("#highlight").effect("highlight", {}, 800); });' },
|
||||
{ desc: 'Highlight to red', source: '$("#doHighlight").click(function() { $("#highlight").effect("highlight", {color: "red"}, 800); });' },
|
||||
{ desc: 'Highlight to black', source: '$("#doHighlight").click(function() { $("#highlight").effect("highlight", {color: "#000000"}, 800); });' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Pulsate',
|
||||
desc: 'Pulsate an element by changing its opacity.',
|
||||
html: '<button id="doPulsate">Pulsate</button><br/>\n' +
|
||||
html: '<button id="doPulsate" type="button">Pulsate</button><br/><br/>\n' +
|
||||
'<div style="height: 108px;"><img id="pulsate" src="templates/images/P1010061.JPG"/></div>',
|
||||
destroy: '$("#doPulsate").unbind();',
|
||||
|
||||
@ -60,42 +60,42 @@
|
||||
{
|
||||
title: 'Scale',
|
||||
desc: 'Scales an element up or down by a percentage factor.',
|
||||
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>',
|
||||
html: '<button id="doScale" type="button">Scale</button> \n' +
|
||||
'<button onclick="$(\'#scale\').css({width: 144, height: 108});" type="button">Reset</button><br/><br/>\n' +
|
||||
'<div style="height: 108px;" type="button"><img id="scale" src="templates/images/P1010063.JPG"/></div>',
|
||||
destroy: '$("#doScale").unbind();',
|
||||
|
||||
options: [
|
||||
{ desc: 'Scale to 0%', source: '$("#doScale").click(function() { $("#scale").effect("scale", {percent: 0}, 2000); });' },
|
||||
{ desc: 'Scale to 50%', source: '$("#doScale").click(function() { $("#scale").effect("scale", {percent: 50}, 2000); });' },
|
||||
{ desc: 'Scale to 200%', source: '$("#doScale").click(function() { $("#scale").effect("scale", {percent: 200}, 2000); });' },
|
||||
{ desc: 'Scale vertically only', source: '$("#doScale").click(function() { $("#scale").effect("scale", {direction: "vertical", percent: 150}, 2000); });' },
|
||||
{ desc: 'Scale horizontally only', source: '$("#doScale").click(function() { $("#scale").effect("scale", {direction: "horizontal", percent: 150}, 2000); });' },
|
||||
{ desc: 'Scale from middle-center', source: '$("#doScale").click(function() { $("#scale").effect("scale", {origin: ["middle", "center"], percent: 150}, 2000); });' },
|
||||
{ desc: 'Scale from bottom-right', source: '$("#doScale").click(function() { $("#scale").effect("scale", {origin: ["bottom", "right"], percent: 50}, 2000); });' }
|
||||
{ desc: 'Scale to 0%', source: '$("#doScale").click(function() { $("#scale").effect("scale", {percent: 0}, 800); });' },
|
||||
{ desc: 'Scale to 50%', source: '$("#doScale").click(function() { $("#scale").effect("scale", {percent: 50}, 800); });' },
|
||||
{ desc: 'Scale to 200%', source: '$("#doScale").click(function() { $("#scale").effect("scale", {percent: 200}, 800); });' },
|
||||
{ desc: 'Scale vertically only', source: '$("#doScale").click(function() { $("#scale").effect("scale", {direction: "vertical", percent: 150}, 800); });' },
|
||||
{ desc: 'Scale horizontally only', source: '$("#doScale").click(function() { $("#scale").effect("scale", {direction: "horizontal", percent: 150}, 800); });' },
|
||||
{ desc: 'Scale from middle-center', source: '$("#doScale").click(function() { $("#scale").effect("scale", {origin: ["middle", "center"], percent: 150}, 800); });' },
|
||||
{ desc: 'Scale from bottom-right', source: '$("#doScale").click(function() { $("#scale").effect("scale", {origin: ["bottom", "right"], percent: 50}, 800); });' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Size',
|
||||
desc: 'Changes the size of an element by specifying a width and height.',
|
||||
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>',
|
||||
html: '<button id="doSize" type="button">Size</button> \n' +
|
||||
'<button onclick="$(\'#size\').css({width: 144, height: 108});" type="button">Reset</button><br/><br/>\n' +
|
||||
'<div style="height: 108px;" type="button"><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); });' }
|
||||
{ desc: 'Size to 75x200', source: '$("#doSize").click(function() { $("#size").effect("size", {to: {width:75, height:200}}, 800); });' },
|
||||
{ desc: 'Size to 200x75', source: '$("#doSize").click(function() { $("#size").effect("size", {to: {width:200, height:75}}, 800); });' },
|
||||
{ desc: 'Size (125x210) from middle-center', source: '$("#doSize").click(function() { $("#size").effect("size", {to: {width:125, height:210}, origin: ["middle", "center"]}, 800); });' },
|
||||
{ desc: 'Size (210x125) from bottom-right', source: '$("#doSize").click(function() { $("#size").effect("size", {to: {width:210, height:125}, origin: ["bottom", "right"]}, 800); });' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Shake',
|
||||
desc: 'Shake an element around.',
|
||||
html: '<button id="doShake">Shake</button><br/>\n' +
|
||||
html: '<button id="doShake" type="button">Shake</button><br/><br/>\n' +
|
||||
'<div style="height: 108px;"><img id="shake" src="templates/images/P1010039.JPG"/></div>',
|
||||
destroy: '$("#doShake").unbind();',
|
||||
|
||||
@ -112,7 +112,7 @@
|
||||
{
|
||||
title: 'Transfer',
|
||||
desc: 'Transfer the outline of one element to another.',
|
||||
html: '<button id="doTransfer">Transfer</button><br/>\n' +
|
||||
html: '<button id="doTransfer" type="button">Transfer</button><br/><br/>\n' +
|
||||
'<div style="height: 108px;"><img id="transfer" src="templates/images/P1010044.JPG"/></div>\n' +
|
||||
'<div id="target" style="margin: 20px 0px 0px 36px; width: 72px; height: 54px; border: 1px solid black;"></div>\n' +
|
||||
'<style type="text/css">\n' +
|
||||
@ -122,8 +122,8 @@
|
||||
destroy: '$("#doTransfer").unbind(); $("#target").removeClass("transferred");',
|
||||
|
||||
options: [
|
||||
{ desc: 'Transfer default', source: '$("#doTransfer").click(function() { $("#transfer").effect("transfer", {to: "#target"}, 2000); });' },
|
||||
{ desc: 'Transfer with extra class', source: '$("#doTransfer").click(function() { $("#transfer").effect("transfer", {to: "#target", className: "transferring"}, 2000); });' }
|
||||
{ desc: 'Transfer default', source: '$("#doTransfer").click(function() { $("#transfer").effect("transfer", {to: "#target"}, 800); });' },
|
||||
{ desc: 'Transfer with extra class', source: '$("#doTransfer").click(function() { $("#transfer").effect("transfer", {to: "#target", className: "transferring"}, 800); });' }
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
@ -11,112 +11,112 @@
|
||||
{
|
||||
title: 'Blind',
|
||||
desc: 'Gradually show or hide an element.',
|
||||
html: '<button id="doBlind">Toggle</button><br/>\n' +
|
||||
html: '<button id="doBlind" type="button">Toggle</button><br/><br/>\n' +
|
||||
'<ul><li style="float: left; width: 144px; height: 108px;"><img class="blindfx" style="width: 144px; height: 108px;" src="templates/images/P1010020.JPG"/></li>\n' +
|
||||
'<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="blindfx" 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' +
|
||||
'<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="blindfx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet.</div></li></ul>\n' +
|
||||
'<div style="clear: both;"></div>',
|
||||
destroy: '$("#doBlind").unbind();',
|
||||
|
||||
options: [
|
||||
{ desc: 'Vertical blind', source: '$("#doBlind").click(function() { $(".blindfx").toggle("blind", {direction: "vertical"}, 2000); });' },
|
||||
{ desc: 'Horizontal blind', source: '$("#doBlind").click(function() { $(".blindfx").toggle("blind", {direction: "horizontal"}, 2000); });' }
|
||||
{ desc: 'Vertical blind', source: '$("#doBlind").click(function() { $(".blindfx").toggle("blind", {direction: "vertical"}, 800); });' },
|
||||
{ desc: 'Horizontal blind', source: '$("#doBlind").click(function() { $(".blindfx").toggle("blind", {direction: "horizontal"}, 800); });' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Clip',
|
||||
desc: 'Gradually show or hide an element by expanding from or to the center.',
|
||||
html: '<button id="doClip">Toggle</button><br/>\n' +
|
||||
html: '<button id="doClip" type="button">Toggle</button><br/><br/>\n' +
|
||||
'<ul><li style="float: left; width: 144px; height: 108px;"><img class="clipfx" style="width: 144px; height: 108px;" src="templates/images/P1010039.JPG"/></li>\n' +
|
||||
'<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="clipfx" 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' +
|
||||
'<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="clipfx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet.</div></li></ul>\n' +
|
||||
'<div style="clear: both;"></div>',
|
||||
destroy: '$("#doClip").unbind();',
|
||||
|
||||
options: [
|
||||
{ desc: 'Vertical clip', source: '$("#doClip").click(function() { $(".clipfx").toggle("clip", {direction: "vertical"}, 2000); });' },
|
||||
{ desc: 'Horizontal clip', source: '$("#doClip").click(function() { $(".clipfx").toggle("clip", {direction: "horizontal"}, 2000); });' }
|
||||
{ desc: 'Vertical clip', source: '$("#doClip").click(function() { $(".clipfx").toggle("clip", {direction: "vertical"}, 800); });' },
|
||||
{ desc: 'Horizontal clip', source: '$("#doClip").click(function() { $(".clipfx").toggle("clip", {direction: "horizontal"}, 800); });' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Drop',
|
||||
desc: 'Gradually show or hide an element by dropping it to one side and fading it.',
|
||||
html: '<button id="doDrop">Toggle</button><br/>\n' +
|
||||
html: '<button id="doDrop" type="button">Toggle</button><br/><br/>\n' +
|
||||
'<ul><li style="float: left; width: 144px; height: 108px;"><img class="dropfx" style="width: 144px; height: 108px;" src="templates/images/P1010044.JPG"/></li>\n' +
|
||||
'<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="dropfx" 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' +
|
||||
'<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="dropfx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet.</div></li></ul>\n' +
|
||||
'<div style="clear: both;"></div>',
|
||||
destroy: '$("#doDrop").unbind();',
|
||||
|
||||
options: [
|
||||
{ desc: 'Drop left', source: '$("#doDrop").click(function() { $(".dropfx").toggle("drop", {direction: "left"}, 2000); });' },
|
||||
{ desc: 'Drop right', source: '$("#doDrop").click(function() { $(".dropfx").toggle("drop", {direction: "right"}, 2000); });' },
|
||||
{ desc: 'Drop up', source: '$("#doDrop").click(function() { $(".dropfx").toggle("drop", {direction: "up"}, 2000); });' },
|
||||
{ desc: 'Drop down', source: '$("#doDrop").click(function() { $(".dropfx").toggle("drop", {direction: "down"}, 2000); });' }
|
||||
{ desc: 'Drop left', source: '$("#doDrop").click(function() { $(".dropfx").toggle("drop", {direction: "left"}, 800); });' },
|
||||
{ desc: 'Drop right', source: '$("#doDrop").click(function() { $(".dropfx").toggle("drop", {direction: "right"}, 800); });' },
|
||||
{ desc: 'Drop up', source: '$("#doDrop").click(function() { $(".dropfx").toggle("drop", {direction: "up"}, 800); });' },
|
||||
{ desc: 'Drop down', source: '$("#doDrop").click(function() { $(".dropfx").toggle("drop", {direction: "down"}, 800); });' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Explode',
|
||||
desc: 'Break an element into pieces and explode them away, or reassemble an element from pieces.',
|
||||
html: '<button id="doExplode">Toggle</button><br/>\n' +
|
||||
html: '<button id="doExplode" type="button">Toggle</button><br/><br/>\n' +
|
||||
'<ul><li style="float: left; width: 144px; height: 108px;"><img class="explodefx" style="width: 144px; height: 108px;" src="templates/images/P1010050.JPG"/></li>\n' +
|
||||
'<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="explodefx" 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' +
|
||||
'<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="explodefx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet.</div></li></ul>\n' +
|
||||
'<div style="clear: both;"></div>',
|
||||
destroy: '$("#doExplode").unbind();',
|
||||
|
||||
options: [
|
||||
{ desc: 'Explode defaults (9 pieces)', source: '$("#doExplode").click(function() { $(".explodefx").toggle("explode", {}, 2000); });' },
|
||||
{ desc: 'Explode into 4 pieces', source: '$("#doExplode").click(function() { $(".explodefx").toggle("explode", {pieces: 4}, 2000); });' },
|
||||
{ desc: 'Explode into 25 pieces', source: '$("#doExplode").click(function() { $(".explodefx").toggle("explode", {pieces: 25}, 2000); });' }
|
||||
{ desc: 'Explode defaults (9 pieces)', source: '$("#doExplode").click(function() { $(".explodefx").toggle("explode", {}, 800); });' },
|
||||
{ desc: 'Explode into 4 pieces', source: '$("#doExplode").click(function() { $(".explodefx").toggle("explode", {pieces: 4}, 800); });' },
|
||||
{ desc: 'Explode into 25 pieces', source: '$("#doExplode").click(function() { $(".explodefx").toggle("explode", {pieces: 25}, 800); });' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Fold',
|
||||
desc: 'Reduce or enlarge an element partially in one direction and then fully in the other direction.',
|
||||
html: '<button id="doFold">Toggle</button><br/>\n' +
|
||||
html: '<button id="doFold" type="button">Toggle</button><br/><br/>\n' +
|
||||
'<ul><li style="float: left; width: 144px; height: 108px;"><img class="foldfx" style="width: 144px; height: 108px;" src="templates/images/P1010055.JPG"/></li>\n' +
|
||||
'<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="foldfx" 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' +
|
||||
'<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="foldfx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet.</div></li></ul>\n' +
|
||||
'<div style="clear: both;"></div>',
|
||||
destroy: '$("#doFold").unbind();',
|
||||
|
||||
options: [
|
||||
{ desc: 'Fold defaults (to size 15)', source: '$("#doFold").click(function() { $(".foldfx").toggle("fold", {}, 2000); });' },
|
||||
{ desc: 'Fold to 30', source: '$("#doFold").click(function() { $(".foldfx").toggle("fold", {size: 30}, 2000); });' },
|
||||
{ desc: 'Fold in half (50%)', source: '$("#doFold").click(function() { $(".foldfx").toggle("fold", {size: "50%"}, 2000); });' },
|
||||
{ desc: 'Fold horizontally first', source: '$("#doFold").click(function() { $(".foldfx").toggle("fold", {size: 30, horizFirst: true}, 2000); });' },
|
||||
{ desc: 'Fold in half horizontally first', source: '$("#doFold").click(function() { $(".foldfx").toggle("fold", {size: "50%", horizFirst: true}, 2000); });' }
|
||||
{ desc: 'Fold defaults (to size 15)', source: '$("#doFold").click(function() { $(".foldfx").toggle("fold", {}, 800); });' },
|
||||
{ desc: 'Fold to 30', source: '$("#doFold").click(function() { $(".foldfx").toggle("fold", {size: 30}, 800); });' },
|
||||
{ desc: 'Fold in half (50%)', source: '$("#doFold").click(function() { $(".foldfx").toggle("fold", {size: "50%"}, 800); });' },
|
||||
{ desc: 'Fold horizontally first', source: '$("#doFold").click(function() { $(".foldfx").toggle("fold", {size: 30, horizFirst: true}, 800); });' },
|
||||
{ desc: 'Fold in half horizontally first', source: '$("#doFold").click(function() { $(".foldfx").toggle("fold", {size: "50%", horizFirst: true}, 800); });' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Puff',
|
||||
desc: 'Scale an element up and fade out, or scale it down and fade in.',
|
||||
html: '<button id="doPuff">Toggle</button><br/>\n' +
|
||||
html: '<button id="doPuff" type="button">Toggle</button><br/><br/>\n' +
|
||||
'<ul><li style="float: left; width: 144px; height: 108px;"><img class="pufffx" 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="pufffx" 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' +
|
||||
'<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="pufffx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet.</div></li></ul>\n' +
|
||||
'<div style="clear: both;"></div>',
|
||||
destroy: '$("#doPuff").unbind();',
|
||||
|
||||
options: [
|
||||
{ desc: 'Puff defaults (scale to 150%)', source: '$("#doPuff").click(function() { $(".pufffx").toggle("puff", {}, 2000); });' },
|
||||
{ desc: 'Puff to 200%', source: '$("#doPuff").click(function() { $(".pufffx").toggle("puff", {percent: 200}, 2000); });' }
|
||||
{ desc: 'Puff defaults (scale to 150%)', source: '$("#doPuff").click(function() { $(".pufffx").toggle("puff", {}, 800); });' },
|
||||
{ desc: 'Puff to 200%', source: '$("#doPuff").click(function() { $(".pufffx").toggle("puff", {percent: 200}, 800); });' }
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
title: 'Scale',
|
||||
desc: 'Grow/Shrink an element.',
|
||||
html: '<button id="doScale">Toggle</button><br/>\n' +
|
||||
html: '<button id="doScale" type="button">Toggle</button><br/><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' +
|
||||
'<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.</div></li></ul>\n' +
|
||||
'<div style="clear: both;"></div>',
|
||||
destroy: '$("#doScale").unbind();',
|
||||
|
||||
options: [
|
||||
{ desc: 'Scale defaults', source: '$("#doScale").click(function() { $(".scalefx").toggle("scale", {}, 2000); });' },
|
||||
{ desc: 'Scale from/to top-left', source: '$("#doScale").click(function() { $(".scalefx").toggle("scale", {origin:["top","left"]}, 2000); });' },
|
||||
{ desc: 'Scale from/to bottom-right', source: '$("#doScale").click(function() { $(".scalefx").toggle("scale", {origin:["bottom","right"]}, 2000); });' },
|
||||
{ desc: 'Scale defaults', source: '$("#doScale").click(function() { $(".scalefx").toggle("scale", {}, 800); });' },
|
||||
{ desc: 'Scale from/to top-left', source: '$("#doScale").click(function() { $(".scalefx").toggle("scale", {origin:["top","left"]}, 800); });' },
|
||||
{ desc: 'Scale from/to bottom-right', source: '$("#doScale").click(function() { $(".scalefx").toggle("scale", {origin:["bottom","right"]}, 800); });' },
|
||||
]
|
||||
},
|
||||
|
||||
@ -124,20 +124,20 @@
|
||||
{
|
||||
title: 'Slide',
|
||||
desc: 'Slide an element out of or into the viewport.',
|
||||
html: '<button id="doSlide">Toggle</button><br/>\n' +
|
||||
html: '<button id="doSlide" type="button">Toggle</button><br/><br/>\n' +
|
||||
'<ul><li style="float: left; width: 144px; height: 108px;"><img class="slidefx" style="width: 144px; height: 108px;" src="templates/images/P1010059.JPG"/></li>\n' +
|
||||
'<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="slidefx" 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' +
|
||||
'<li style="float: left; width: 144px; height: 108px; margin-left: 20px;"><div class="slidefx" style="width: 144px; height: 108px; background-color: #F2F2F2;">Lorem ipsum dolor sit amet.</div></li></ul>\n' +
|
||||
'<div style="clear: both;"></div>',
|
||||
destroy: '$("#doSlide").unbind();',
|
||||
|
||||
options: [
|
||||
{ desc: 'Slide left', source: '$("#doSlide").click(function() { $(".slidefx").toggle("slide", {direction: "left"}, 2000); });' },
|
||||
{ desc: 'Slide right', source: '$("#doSlide").click(function() { $(".slidefx").toggle("slide", {direction: "right"}, 2000); });' },
|
||||
{ desc: 'Slide up', source: '$("#doSlide").click(function() { $(".slidefx").toggle("slide", {direction: "up"}, 2000); });' },
|
||||
{ desc: 'Slide down', source: '$("#doSlide").click(function() { $(".slidefx").toggle("slide", {direction: "down"}, 2000); });' }
|
||||
{ desc: 'Slide left', source: '$("#doSlide").click(function() { $(".slidefx").toggle("slide", {direction: "left"}, 800); });' },
|
||||
{ desc: 'Slide right', source: '$("#doSlide").click(function() { $(".slidefx").toggle("slide", {direction: "right"}, 800); });' },
|
||||
{ desc: 'Slide up', source: '$("#doSlide").click(function() { $(".slidefx").toggle("slide", {direction: "up"}, 800); });' },
|
||||
{ desc: 'Slide down', source: '$("#doSlide").click(function() { $(".slidefx").toggle("slide", {direction: "down"}, 800); });' }
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
]
|
||||
|
||||
};
|
||||
|
||||
@ -14,10 +14,11 @@
|
||||
html: '<div id="progressbar"></div>',
|
||||
destroy: '$("#progressbar").progressbar("destroy");',
|
||||
options: [
|
||||
{ desc: 'Attach a progressbar', source: '$("#progressbar").progressbar();' },
|
||||
{ desc: 'Start the progressbar', source: '$("#progressbar").progressbar("start");' },
|
||||
{ desc: 'Loop', source: '$("#progressbar").progressbar({duration:2000,wait:"loop"}).progressbar("start");' },
|
||||
{ desc: 'Callback when finish', source: '$("#progressbar").progressbar({stop:function(){alert("Finished");}}).progressbar("start");' },
|
||||
{ desc: 'Start a progressbar', source: '$("#progressbar").progressbar({interval:2000}); $("#progressbar").progressbar("start");' },
|
||||
{ desc: 'With different increment', source: '$("#progressbar").progressbar({interval:2000, increment:100}); $("#progressbar").progressbar("start");' },
|
||||
{ desc: 'Set progress to 50%', source: '$("#progressbar").progressbar("progress", 50);' },
|
||||
{ desc: 'Loop', source: '$("#progressbar").progressbar({interval:2000}).progressbar("start");' },
|
||||
{ desc: 'Callback when finish', source: '$("#progressbar").progressbar({interval: 1000, stop:function(){alert("Finished");}}).progressbar("start");' },
|
||||
{ desc: 'Enable the progressbar', source: '$("#progressbar").progressbar("enable");' },
|
||||
{ desc: 'Disable the progressbar', source: '$("#progressbar").progressbar("disable");' }
|
||||
]
|
||||
|
||||
@ -2,10 +2,10 @@
|
||||
|
||||
<div id="example1">
|
||||
|
||||
<button onclick="$('#selectedUsers').sortable('enable')">Enable</button>
|
||||
<button onclick="$('#selectedUsers').sortable('disable')">Disable</button>
|
||||
<button onclick="alert($('#selectedUsers').sortable('serialize'))">Serialize!</button>
|
||||
<button onclick="alert($('#selectedUsers').sortable('toArray'))">ID's to Array!</button>
|
||||
<button onclick="$('#selectedUsers').sortable('enable')" type="button">Enable</button>
|
||||
<button onclick="$('#selectedUsers').sortable('disable')" type="button">Disable</button>
|
||||
<button onclick="alert($('#selectedUsers').sortable('serialize'))" type="button">Serialize!</button>
|
||||
<button onclick="alert($('#selectedUsers').sortable('toArray'))" type="button">ID's to Array!</button>
|
||||
|
||||
<br><br>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user