<?php
include_once '../../../helper.inc.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="../../../frontend.css" rel="stylesheet" type="text/css"/>
<link type="text/css" href="../../themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="../../../jquery-core/jquery-core.min.js"></script>
<script type="text/javascript" src="../jquery.ui.core.min.js"></script>
<?php
echo _loadFile('../presets/tabs.preset');
?>
<script src="../jquery.ui.tabs.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<?php
include_once '../../../helper.inc.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="../../../frontend.css" rel="stylesheet" type="text/css"/>
<link type="text/css" href="../../themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="../../../jquery-core/jquery-core.min.js"></script>
<script type="text/javascript" src="../jquery.ui.core.min.js"></script>
<script type="text/javascript" src="../jquery.effects.core.min.js"></script>
<script type="text/javascript" src="../jquery.effects.scale.min.js"></script>
<?php
echo _loadFile('../presets/scale.preset');
?>
</head>
<body style="font-size:62.5%;">
Click on the div below to see the scale effect.<br /><br />
<div class="scale" style="border: 1px solid #000; padding: 15px; background-color: #fff;">
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</div><br /><br />
To use this effect, add<br /><br />
<tt>class="scale"</tt><br /><br />
<?php
include_once '../../../helper.inc.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="../../../frontend.css" rel="stylesheet" type="text/css"/>
<link type="text/css" href="../../themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="../../../jquery-core/jquery-core.min.js"></script>
<script type="text/javascript" src="../jquery.ui.core.min.js"></script>
<script type="text/javascript" src="../jquery.effects.core.min.js"></script>
<script type="text/javascript" src="../jquery.effects.fade.min.js"></script>
<?php
echo _loadFile('../presets/fade.preset');
?>
</head>
<body style="font-size:62.5%;">
Click on the div below to see the fade effect.<br /><br />
<div class="fade" style="border: 1px solid #000; padding: 15px; background-color: #fff;">
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
To use this effect, add<br /><br />
<?php
include_once '../../../helper.inc.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="../../../frontend.css" rel="stylesheet" type="text/css"/>
<link type="text/css" href="../../themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="../../../jquery-core/jquery-core.min.js"></script>
<script type="text/javascript" src="../jquery.ui.core.min.js"></script>
<script type="text/javascript" src="../jquery.effects.core.min.js"></script>
<script type="text/javascript" src="../jquery.effects.transfer.min.js"></script>
<?php
echo _loadFile('../presets/transfer.preset');
?>
<style type="text/css">
.ui-effects-transfer { border: 2px solid black; background-color: #ccc; }
</style>
</head>
<body style="font-size:62.5%;">
Click on the left (white) div to see the transfer effect.<br /><br />
<div class="transfer" style="border: 1px solid #000; padding: 15px; background-color: #fff; width: 150px; float: left;">
<strong>DIV to transfer</strong><br /><br />
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</div><br /><br />
<?php
include_once '../../../helper.inc.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="../../../frontend.css" rel="stylesheet" type="text/css"/>
<link type="text/css" href="../../themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="../../../jquery-core/jquery-core.min.js"></script>
<script type="text/javascript" src="../jquery.ui.core.min.js"></script>
<script type="text/javascript" src="../jquery.effects.core.min.js"></script>
<script type="text/javascript" src="../jquery.effects.bounce.min.js"></script>
<?php
echo _loadFile('../presets/bounce.preset');
?>
</head>
<body style="font-size:62.5%;">
Click on the div below to see the bounce effect.<br /><br />
<div class="bounce" style="border: 1px solid #000; padding: 15px; background-color: #fff;">
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</div><br /><br />
To use this effect, add<br /><br />
<tt>class="bounce"</tt><br /><br />
<?php
include_once '../../../helper.inc.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="../../../frontend.css" rel="stylesheet" type="text/css"/>
<link type="text/css" href="../../themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="../../../jquery-core/jquery-core.min.js"></script>
<script type="text/javascript" src="../jquery.ui.core.min.js"></script>
<script type="text/javascript" src="../jquery.effects.core.min.js"></script>
<script type="text/javascript" src="../jquery.effects.fold.min.js"></script>
<?php
echo _loadFile('../presets/fold.preset');
?>
</head>
<body style="font-size:62.5%;">
Click on the div below to see the fold effect.<br /><br />
<div class="fold" style="border: 1px solid #000; padding: 15px; background-color: #fff;">
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
To use this effect, add<br /><br />
<?php
include_once '../../../helper.inc.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="../../../frontend.css" rel="stylesheet" type="text/css"/>
<link type="text/css" href="../../themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="../../../jquery-core/jquery-core.min.js"></script>
<script type="text/javascript" src="../jquery.ui.core.min.js"></script>
<?php
echo _loadFile('../presets/datepicker.preset');
?>
<script src="../jquery.ui.datepicker.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#datepicker").datepicker();
});
</script>
</head>
<body style="font-size:62.5%;">
<div style="margin-top: 50px;">
<p>Date: <input type="text" id="datepicker"></p><br /><br />
Click into the input field to open the date picker.<br /><br />
Theme used: ui-lightness<br />
</div>
</body>
</html>
<?php
include_once '../../../helper.inc.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="../../../frontend.css" rel="stylesheet" type="text/css"/>
<link type="text/css" href="../../themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="../../../jquery-core/jquery-core.min.js"></script>
<script type="text/javascript" src="../jquery.ui.core.min.js"></script>
<script type="text/javascript" src="../jquery.effects.core.min.js"></script>
<script type="text/javascript" src="../jquery.effects.slide.min.js"></script>
<?php
echo _loadFile('../presets/slide.preset');
?>
</head>
<body style="font-size:62.5%;">
Click on the div below to see the slide effect.<br /><br />
<div class="slide" style="border: 1px solid #000; padding: 15px; background-color: #fff;">
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</div><br /><br />
To use this effect, add<br /><br />
<tt>class="slide"</tt><br /><br />
<?php
include_once '../../../helper.inc.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="../../../frontend.css" rel="stylesheet" type="text/css"/>
<link type="text/css" href="../../themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="../../../jquery-core/jquery-core.min.js"></script>
<script type="text/javascript" src="../jquery.ui.core.min.js"></script>
<script type="text/javascript" src="../jquery.effects.core.min.js"></script>
<script type="text/javascript" src="../jquery.effects.pulsate.min.js"></script>
<?php
echo _loadFile('../presets/pulsate.preset');
?>
</head>
<body style="font-size:62.5%;">
Click on the div below to see the pulsate effect.<br /><br />
<div class="pulsate" style="border: 1px solid #000; padding: 15px; background-color: #fff;">
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
To use this effect, add<br /><br />
<?php
include_once '../../../helper.inc.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="../../../frontend.css" rel="stylesheet" type="text/css"/>
<link type="text/css" href="../../themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="../../../jquery-core/jquery-core.min.js"></script>
<script type="text/javascript" src="../jquery.ui.core.min.js"></script>
<?php
echo _loadFile('../presets/accordion.preset');
?>
<script src="../jquery.ui.accordion.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#dialog").dialog();
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
<?php
include_once '../../../helper.inc.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="../../../frontend.css" rel="stylesheet" type="text/css"/>
<link type="text/css" href="../../themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="../../../jquery-core/jquery-core.min.js"></script>
<script type="text/javascript" src="../jquery.ui.core.min.js"></script>
<?php
echo _loadFile('../presets/autocomplete.preset');
?>
<script type="text/javascript" src="../jquery.ui.autocomplete.min.js"></script>
<script type="text/javascript">
(function($) {
$.widget("ui.combobox", {
_create: function() {
var self = this;
var select = this.element.hide();
var input = $("<input>")
.insertAfter(select)
.autocomplete({
source: function(request, response) {
var matcher = new RegExp(request.term, "i");
response(select.children("option").map(function() {
var text = $(this).text();
if (!request.term || matcher.test(text))
return {
id: $(this).val(),
<?php
include_once '../../../helper.inc.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="../../../frontend.css" rel="stylesheet" type="text/css"/>
<link type="text/css" href="../../themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="../../../jquery-core/jquery-core.min.js"></script>
<script type="text/javascript" src="../jquery.ui.core.min.js"></script>
<script type="text/javascript" src="../jquery.effects.core.min.js"></script>
<script type="text/javascript" src="../jquery.effects.explode.min.js"></script>
<?php
echo _loadFile('../presets/explode.preset');
?>
</head>
<body style="font-size:62.5%;">
Click on the div below to see the explode effect.<br /><br />
<div class="explode" style="border: 1px solid #000; padding: 15px; background-color: #fff;">
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</p>
</div>
To use this effect, add<br /><br />
<?php
include_once '../../../helper.inc.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="../../../frontend.css" rel="stylesheet" type="text/css"/>
<link type="text/css" href="../../themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="../../../jquery-core/jquery-core.min.js"></script>
<script type="text/javascript" src="../jquery.ui.core.min.js"></script>
<script type="text/javascript" src="../jquery.effects.core.min.js"></script>
<script type="text/javascript" src="../jquery.effects.blind.min.js"></script>
<?php
echo _loadFile('../presets/blind.preset');
?>
</head>
<body style="font-size:62.5%;">
Click on the div below to see the blind effect.<br /><br />
<div class="blind" style="border: 1px solid #000; padding: 15px; background-color: #fff;">
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</div><br /><br />
To use this effect, add<br /><br />
<tt>class="blind"</tt><br /><br />
<?php
include_once '../../../helper.inc.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="../../../frontend.css" rel="stylesheet" type="text/css"/>
<link type="text/css" href="../../themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="../../../jquery-core/jquery-core.min.js"></script>
<script type="text/javascript" src="../jquery.ui.core.min.js"></script>
<script type="text/javascript" src="../jquery.effects.core.min.js"></script>
<script type="text/javascript" src="../jquery.effects.clip.min.js"></script>
<?php
echo _loadFile('../presets/clip.preset');
?>
</head>
<body style="font-size:62.5%;">
Click on the div below to see the clip effect.<br /><br />
<div class="clip" style="border: 1px solid #000; padding: 15px; background-color: #fff;">
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</div><br /><br />
To use this effect, add<br /><br />
<tt>class="clip"</tt><br /><br />
<?php
include_once '../../../helper.inc.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="../../../frontend.css" rel="stylesheet" type="text/css"/>
<link type="text/css" href="../../themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="../../../jquery-core/jquery-core.min.js"></script>
<script type="text/javascript" src="../../external/jquery.bgiframe-2.1.2.js"></script>
<script type="text/javascript" src="../jquery.ui.core.min.js"></script>
<script type="text/javascript" src="../jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="../jquery.ui.button.min.js"></script>
<?php
echo _loadFile('../presets/dialog.preset');
?>
<script src="../jquery.ui.dialog.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#dialog").dialog(
{
buttons: {
"Close": function() { $j(this).dialog("close"); }
}
}
);
});
</script>
</head>
<body style="font-size:62.5%;">
<?php
include_once '../../../helper.inc.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="../../../frontend.css" rel="stylesheet" type="text/css"/>
<link type="text/css" href="../../themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="../../../jquery-core/jquery-core.min.js"></script>
<script type="text/javascript" src="../jquery.ui.core.min.js"></script>
<script type="text/javascript" src="../jquery.effects.core.min.js"></script>
<script type="text/javascript" src="../jquery.effects.drop.min.js"></script>
<?php
echo _loadFile('../presets/drop.preset');
?>
</head>
<body style="font-size:62.5%;">
Click on the div below to see the drop effect.<br /><br />
<div class="drop" style="border: 1px solid #000; padding: 15px; background-color: #fff;">
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</div><br /><br />
To use this effect, add<br /><br />
<tt>class="drop"</tt><br /><br />
<?php
include_once '../../../helper.inc.php';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="../../../frontend.css" rel="stylesheet" type="text/css"/>
<link type="text/css" href="../../themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="../../../jquery-core/jquery-core.min.js"></script>
<script type="text/javascript" src="../jquery.ui.core.min.js"></script>
<script type="text/javascript" src="../jquery.effects.core.min.js"></script>
<script type="text/javascript" src="../jquery.effects.shake.min.js"></script>
<?php
echo _loadFile('../presets/shake.preset');
?>
</head>
<body style="font-size:62.5%;">
Click on the div below to see the shake effect.<br /><br />
<div class="shake" style="border: 1px solid #000; padding: 15px; background-color: #fff;">
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
</div><br /><br />
To use this effect, add<br /><br />
<tt>class="shake"</tt><br /><br />
