mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
demos: removed legacy demos folders - functional, real-world
This commit is contained in:
Richard Worth
parent
2b21245cd0
commit
731bff8bcb
File diff suppressed because it is too large
Load Diff
@ -1,98 +0,0 @@
|
||||
/*
|
||||
===============================================================================
|
||||
Chili is the jQuery code highlighter plugin
|
||||
...............................................................................
|
||||
Copyright 2007 / Andrea Ercolino
|
||||
-------------------------------------------------------------------------------
|
||||
LICENSE: http://www.opensource.org/licenses/mit-license.php
|
||||
WEBSITE: http://noteslog.com/chili/
|
||||
===============================================================================
|
||||
*/
|
||||
|
||||
/*
|
||||
this file shows how to configure a static setup
|
||||
it must be linked from the head of a page like:
|
||||
<link rel="stylesheet" type="text/css" href="chili/recipes.css"/>
|
||||
*/
|
||||
|
||||
.html .php { color: red; font-weight: bold; }
|
||||
.html .tag { color: navy; font-weight: bold; }
|
||||
.html .aname { color: purple; }
|
||||
.html .avalue { color: fuchsia; }
|
||||
.html .mlcom { color: green; }
|
||||
.html .entity { color: teal; }
|
||||
|
||||
.javascript .mlcom { color: #4040c2; }
|
||||
.javascript .com { color: green; }
|
||||
.javascript .regexp { color: maroon; }
|
||||
.javascript .string { color: teal; }
|
||||
.javascript .keywords { color: navy; font-weight: bold; }
|
||||
.javascript .global { color: blue; }
|
||||
.javascript .numbers { color: red; }
|
||||
|
||||
.mysql .function { color: #e17100; }
|
||||
.mysql .keyword { color: navy; font-weight: bold; }
|
||||
.mysql .mlcom { color: gray; }
|
||||
.mysql .com { color: green; }
|
||||
.mysql .number { color: red; }
|
||||
.mysql .hexnum { color: red; font-weight: bold; }
|
||||
.mysql .string { color: purple; }
|
||||
.mysql .quid { color: fuchsia; }
|
||||
.mysql .id { color: maroon; }
|
||||
.mysql .value { color: gray; font-weight: bold; }
|
||||
.mysql .variable { color: #4040c2; }
|
||||
|
||||
.php .com { color: green; }
|
||||
.php .const1 { color: red; }
|
||||
.php .const2 { color: red; }
|
||||
.php .func { color: #e17100; }
|
||||
.php .global { color: red; }
|
||||
.php .keyword { color: navy; font-weight: bold; }
|
||||
.php .mlcom { color: gray; }
|
||||
.php .name { color: maroon; }
|
||||
.php .number { color: red; }
|
||||
.php .string1 { color: purple; }
|
||||
.php .string2 { color: fuchsia; }
|
||||
.php .value { color: gray; font-weight: bold; }
|
||||
.php .variable { color: #4040c2; }
|
||||
|
||||
.css .mlcom { color: #4040c2; }
|
||||
.css .color { color: green; }
|
||||
.css .string { color: teal; }
|
||||
.css .attrib { color: navy; font-weight: bold; }
|
||||
.css .value { color: blue; }
|
||||
.css .number { color: red; }
|
||||
|
||||
|
||||
|
||||
/*
|
||||
===============================================================================
|
||||
Chili is the jQuery code highlighter plugin
|
||||
...............................................................................
|
||||
Copyright 2007 / Andrea Ercolino
|
||||
-------------------------------------------------------------------------------
|
||||
LICENSE: http://www.opensource.org/licenses/mit-license.php
|
||||
WEBSITE: http://noteslog.com/chili/
|
||||
===============================================================================
|
||||
*/
|
||||
|
||||
.javascript .mlcom { color: #4040c2; }
|
||||
.javascript .com { color: green; }
|
||||
.javascript .regexp { color: maroon; }
|
||||
.javascript .string { color: teal; }
|
||||
.javascript .keywords { color: navy; font-weight: bold; }
|
||||
.javascript .global { color: blue; }
|
||||
.javascript .numbers { color: red; }
|
||||
|
||||
.javascript .jquery .object { color: red; font-weight: bold; }
|
||||
.javascript .jquery .private { background-color: #CCCC99; }
|
||||
.javascript .jquery .attributes { background-color: #CCCC00; }
|
||||
.javascript .jquery .traversing { background-color: #CCCC00; }
|
||||
.javascript .jquery .manipulation { background-color: #CCCC00; }
|
||||
.javascript .jquery .utilities { background-color: #CCCCFF; }
|
||||
.javascript .jquery .core { background-color: #7F7FFF; color: white; }
|
||||
.javascript .jquery .ajax { background-color: #7F7FFF; color: #FFD400; }
|
||||
.javascript .jquery .css { background-color: #999900; color: white; }
|
||||
.javascript .jquery .effects { background-color: #FFAA00; }
|
||||
.javascript .jquery .events { background-color: #FFD400; }
|
||||
|
||||
@ -1,208 +0,0 @@
|
||||
/*************************************/
|
||||
/* Viewer: models */
|
||||
|
||||
#containerDemo {
|
||||
width: 690px;
|
||||
zoom: 1;
|
||||
}
|
||||
#containerDemo .ui-wrapper {
|
||||
margin:0px 10px;
|
||||
}
|
||||
#containerDemo .ui-details {
|
||||
margin:0px 10px 10px 0px;
|
||||
border-bottom: 2px solid #bbb;
|
||||
}
|
||||
|
||||
#containerDemo .menutitle {
|
||||
font-size: 14px;
|
||||
letter-spacing: .5px;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
#containerDemo .ui-demo-options {
|
||||
background: #f2f2f2;
|
||||
border-bottom: 1px #bbb solid;
|
||||
padding: 10px;
|
||||
margin: 10px 0 20px 0;
|
||||
width: 690px;
|
||||
_width: 670px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.sortable-container li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
list-style: circle;
|
||||
background: #EAEAEA;
|
||||
font-size: 12px;
|
||||
margin:2px;
|
||||
padding: 3px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.colored {
|
||||
display: block;
|
||||
background: #fff;
|
||||
margin-top: 5px;
|
||||
border-top: 1px solid #ccc;
|
||||
border-bottom: 1px solid #ccc;
|
||||
white-space: pre;
|
||||
padding: 10px;
|
||||
font-size: 11px;
|
||||
font-family: Courier New;
|
||||
width: 640px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
/*min height hack*/
|
||||
* min-height:25px;
|
||||
* height:auto !important;
|
||||
* height:25px;
|
||||
* padding: 15px;
|
||||
}
|
||||
|
||||
#containerDemo .ui-demo-description {
|
||||
margin-bottom: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
#containerDemo .link-view-source {
|
||||
margin-left: 5px;
|
||||
}
|
||||
#containerDemo .proxy {
|
||||
border: 1px dashed #000;
|
||||
}
|
||||
|
||||
#containerDemo .lightblue-bg{
|
||||
background: #E8EEF7;
|
||||
}
|
||||
#containerDemo .blue-bg {
|
||||
background: #C3D9FF;
|
||||
}
|
||||
#containerDemo .green-bg {
|
||||
background: #74DD82;
|
||||
}
|
||||
#containerDemo a {
|
||||
color:#000;
|
||||
}
|
||||
|
||||
.snippet {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
empty-cells: show;
|
||||
}
|
||||
|
||||
/*************************************/
|
||||
/* Components */
|
||||
|
||||
.proxy {
|
||||
border: 1px dashed #000/*#3399ff*/;
|
||||
}
|
||||
|
||||
.resizable {
|
||||
width: 100px; height: 100px;
|
||||
border: 1px solid #000;
|
||||
padding: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.draggable {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background-color: #68BFEF;
|
||||
border: 2px solid #0090DF;
|
||||
padding: 5px;
|
||||
margin: 0 0 12px 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
div.drag-handle
|
||||
{
|
||||
cursor: move;
|
||||
background-color: #0090DF;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.block {
|
||||
border: 2px solid #0090DF;
|
||||
background-color: #68BFEF;
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
margin: 10px;
|
||||
z-index: 100;
|
||||
}
|
||||
.drop {
|
||||
background-color: #e9b96e;
|
||||
border: 3px double #c17d11;
|
||||
width: 150px;
|
||||
margin: 10px;
|
||||
min-height: 200px;
|
||||
min-height:200px;
|
||||
height:auto !important;
|
||||
height:200px;
|
||||
opacity: 0.7;
|
||||
filter:alpha(opacity:70);
|
||||
text-align: center;
|
||||
}
|
||||
.droppable-active {
|
||||
opacity: 1.0;
|
||||
filter:alpha(opacity:100);
|
||||
}
|
||||
.droppable-hover {
|
||||
outline: 1px dotted black;
|
||||
background-color: #73d216;
|
||||
border-color: #4e9a06;
|
||||
}
|
||||
.silver {
|
||||
background-color: #fafafa;
|
||||
border-color: silver;
|
||||
}
|
||||
.draggable.green {
|
||||
background-color: #73d216;
|
||||
border-color: #4e9a06;
|
||||
}
|
||||
|
||||
.draggable.red {
|
||||
background-color: #ef2929;
|
||||
border-color: #cc0000;
|
||||
}
|
||||
|
||||
.ui-selecting {
|
||||
background-color: #eee;
|
||||
}
|
||||
.ui-selected {
|
||||
background-color: #E6F7D4;
|
||||
}
|
||||
|
||||
.sortable-container #example2 li {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.sortable-container #example3 li {
|
||||
list-style: none;
|
||||
}
|
||||
.droppable-photos-container {
|
||||
border: 2px #ccc dotted;
|
||||
width:144px;
|
||||
height: 108px;
|
||||
float:left;
|
||||
margin-top: 2px;
|
||||
padding: 2px;
|
||||
}
|
||||
.droppable-img-content {
|
||||
float: left; padding: 5px;
|
||||
}
|
||||
|
||||
#accordionDemo, select {
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
}
|
||||
#accordionDemo h3 {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ui-accordion-data {
|
||||
padding: 10px;
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 102 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 163 B |
Binary file not shown.
|
Before Width: | Height: | Size: 191 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 827 B |
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 131 B |
Binary file not shown.
|
Before Width: | Height: | Size: 783 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 422 B |
Binary file not shown.
|
Before Width: | Height: | Size: 312 B |
Binary file not shown.
|
Before Width: | Height: | Size: 164 B |
@ -1,284 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>jQuery UI - Functional demos</title>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
|
||||
|
||||
<meta name="keywords" content="jquery,user interface,ui,widgets,interaction,javascript" />
|
||||
<meta name="description" content="jQuery UI is jQuery's user interface library that comes with many widgets, interaction modules and themes." />
|
||||
<meta name="author" content="Paul Bakaus" />
|
||||
|
||||
<link rel="shortcut icon" href="images/favicon.ico" />
|
||||
<link rel="icon" href="images/favicon.ico" type="image/x-icon" />
|
||||
|
||||
|
||||
<link rel="stylesheet" href="css/base.css" type="text/css">
|
||||
<link rel="stylesheet" href="css/functional_demos.css" type="text/css">
|
||||
<link rel="stylesheet" href="css/chilli-recipes.css" type="text/css">
|
||||
<link rel="stylesheet" href="../../themes/default/ui.all.css" type="text/css" />
|
||||
|
||||
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.accordion.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.datepicker.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-ar.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-bg.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-ca.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-cs.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-da.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-de.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-eo.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-es.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-fa.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-fi.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-fr.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-he.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-hr.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-hu.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-hy.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-id.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-is.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-it.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-ja.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-ko.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-lt.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-lv.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-nl.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-no.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-pl.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-pt-BR.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-ro.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-ru.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-sk.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-sl.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-sq.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-sv.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-th.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-tr.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-uk.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-zh-CN.js"></script>
|
||||
<script type="text/javascript" src="../../ui/i18n/ui.datepicker-zh-TW.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.dialog.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.droppable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.progressbar.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.selectable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.slider.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.sortable.js"></script>
|
||||
<script type="text/javascript" src="../../ui/ui.tabs.js"></script>
|
||||
<script type="text/javascript" src="../../ui/effects.core.js"></script>
|
||||
<script type="text/javascript" src="../../ui/effects.blind.js"></script>
|
||||
<script type="text/javascript" src="../../ui/effects.bounce.js"></script>
|
||||
<script type="text/javascript" src="../../ui/effects.clip.js"></script>
|
||||
<script type="text/javascript" src="../../ui/effects.drop.js"></script>
|
||||
<script type="text/javascript" src="../../ui/effects.explode.js"></script>
|
||||
<script type="text/javascript" src="../../ui/effects.fold.js"></script>
|
||||
<script type="text/javascript" src="../../ui/effects.highlight.js"></script>
|
||||
<script type="text/javascript" src="../../ui/effects.pulsate.js"></script>
|
||||
<script type="text/javascript" src="../../ui/effects.scale.js"></script>
|
||||
<script type="text/javascript" src="../../ui/effects.shake.js"></script>
|
||||
<script type="text/javascript" src="../../ui/effects.slide.js"></script>
|
||||
<script type="text/javascript" src="../../ui/effects.transfer.js"></script>
|
||||
|
||||
<script src="js/behaviour.js" type="text/javascript"></script>
|
||||
<script src="js/behaviour.functionaldemos.js" type="text/javascript"></script>
|
||||
|
||||
<script src="js/beautify.js" type="text/javascript"></script>
|
||||
<script src="js/functional.demo.js" type="text/javascript"></script>
|
||||
|
||||
<script src="js/jquery.chili.pack.js" type="text/javascript"></script>
|
||||
<script src="js/chili-recipes.js" type="text/javascript"></script>
|
||||
|
||||
<script src="js/jquery.history_remote.js" type="text/javascript"></script>
|
||||
<script src="js/jquery.mousewheel.js" type="text/javascript"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function() {
|
||||
$.datepicker.setDefaults($.datepicker.regional['']);
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body id="functional_demos">
|
||||
<div id="wrapper">
|
||||
<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">
|
||||
|
||||
<div class="content-top"></div>
|
||||
<div class="content">
|
||||
|
||||
<form id="components-fm" action="/actions/download_builder.php" method="post">
|
||||
<div class="content-head">
|
||||
<h2>
|
||||
<span>Functional Demos</span>
|
||||
</h2>
|
||||
<p>
|
||||
Learn how to build Cross-Browser Rich Internet Applications!
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<div class="content-body">
|
||||
<table cellspacing="0" cellpadding="0" class="layout-grid" id="functional">
|
||||
<tr>
|
||||
<td class="left-nav">
|
||||
<div class="section" style="border:0; width:155px;">
|
||||
<p class="side-menu-title">
|
||||
Interaction
|
||||
</p>
|
||||
<div id="links" class="normal" style="width:100%;">
|
||||
|
||||
<ul class="component-links">
|
||||
<li><a href="#ui.draggable" title="Goto Draggable's Component Page">Draggable</a></li>
|
||||
<li><a href="#ui.droppable" title="Goto Droppable's Component Page">Droppable</a></li>
|
||||
<li><a href="#ui.resizable" title="Goto Resizable's Component Page">Resizable</a></li>
|
||||
<li><a href="#ui.selectable" title="Goto Selectable's Component Page">Selectable</a></li>
|
||||
<li><a href="#ui.sortable" title="Goto Sortable's Component Page">Sortable</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<br style="clear:both;">
|
||||
</div>
|
||||
<div class="section" style="border:0;">
|
||||
<p class="side-menu-title">
|
||||
Widgets
|
||||
</p>
|
||||
<div id="links" class="normal">
|
||||
|
||||
<ul class="component-links">
|
||||
<li><a href="#ui.accordion" title="Goto Accordion's Component Page">Accordion</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.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.tabs" title="Goto Tabs Component Page">Tabs</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<br style="clear:both;">
|
||||
</div>
|
||||
<div class="section" style="border:0;">
|
||||
<p class="side-menu-title">
|
||||
Effects
|
||||
</p>
|
||||
<div id="links" class="normal">
|
||||
|
||||
<ul class="component-links">
|
||||
<li><a href="#ui.effects.easing" title="Goto Easing Effect's Component Page">Easing</a></li>
|
||||
<li><a href="#ui.effects.general" title="Goto General Effect's Component Page">General</a></li>
|
||||
<li><a href="#ui.effects.showhide" title="Goto Show/Hide Effect's Component Page">Show/Hide</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<br style="clear:both;">
|
||||
</div>
|
||||
</td>
|
||||
<td class="normal">
|
||||
|
||||
<div class="normal" id="containerDemo">
|
||||
<h3>
|
||||
Instructions
|
||||
</h3>
|
||||
<p>
|
||||
|
||||
The functional demos are provided to give users an idea of how jQuery UI works. You only need to copy and paste code from the demos. Have fun playing with it.
|
||||
</p>
|
||||
|
||||
<div id="functional-demo-face" style="margin-left: 10px;">
|
||||
<img src="images/functional-demo-face.png">
|
||||
</div>
|
||||
|
||||
<br>
|
||||
</div>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</form> </div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer">
|
||||
|
||||
<div class="bg"></div>
|
||||
<div class="inner">
|
||||
<p>
|
||||
<span class="first">Sponsored by: </span><a class="block liferay" href="http://www.liferay.com"><span>Liferay</span></a>
|
||||
<span class="first" style="float: right; padding-right: 12px;">© 2007 Paul Bakaus and the <a href="http://ui.jquery.com/about">jQuery UI Team</a>.</span>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--[if lte IE 7]></div><![endif]-->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,533 +0,0 @@
|
||||
/*
|
||||
|
||||
JS Beautifier
|
||||
---------------
|
||||
$Date: 2008-04-21 16:13:36 +0300 (Mon, 21 Apr 2008) $
|
||||
$Revision: 53 $
|
||||
|
||||
|
||||
Written by Einars "elfz" Lielmanis, <elfz@laacz.lv>
|
||||
http://elfz.laacz.lv/beautify/
|
||||
|
||||
Originally converted to javascript by Vital, <vital76@gmail.com>
|
||||
http://my.opera.com/Vital/blog/2007/11/21/javascript-beautify-on-javascript-translated
|
||||
|
||||
|
||||
You are free to use this in any way you want, in case you find this useful or working for you.
|
||||
|
||||
Usage:
|
||||
js_beautify(js_source_text);
|
||||
|
||||
*/
|
||||
|
||||
|
||||
function js_beautify(js_source_text, indent_size, indent_character)
|
||||
{
|
||||
|
||||
var input, output, token_text, last_type, last_text, last_word, current_mode, modes, indent_level, indent_string;
|
||||
var whitespace, wordchar, punct, parser_pos, line_starters, in_case;
|
||||
var prefix, token_type;
|
||||
|
||||
function print_newline(ignore_repeated)
|
||||
{
|
||||
ignore_repeated = typeof ignore_repeated === 'undefined' ? true: ignore_repeated;
|
||||
|
||||
// remove trailing whitespace and indent
|
||||
while (output.length && (output[output.length - 1] === ' ' || output[output.length - 1] === indent_string)) {
|
||||
output.pop();
|
||||
}
|
||||
|
||||
if (!output.length) {
|
||||
return; // no newline on start of file
|
||||
}
|
||||
|
||||
if (output[output.length - 1] !== "\n" || !ignore_repeated) {
|
||||
output.push("\n");
|
||||
}
|
||||
for (var i = 0; i < indent_level; i++) {
|
||||
output.push(indent_string);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
function print_space()
|
||||
{
|
||||
var last_output = output.length ? output[output.length - 1] : ' ';
|
||||
if (last_output !== ' ' && last_output !== '\n' && last_output !== indent_string) { // prevent occassional duplicate space
|
||||
output.push(' ');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function print_token()
|
||||
{
|
||||
output.push(token_text);
|
||||
}
|
||||
|
||||
function indent()
|
||||
{
|
||||
indent_level++;
|
||||
}
|
||||
|
||||
|
||||
function unindent()
|
||||
{
|
||||
if (indent_level) {
|
||||
indent_level--;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function remove_indent()
|
||||
{
|
||||
if (output.length && output[output.length - 1] === indent_string) {
|
||||
output.pop();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function set_mode(mode)
|
||||
{
|
||||
modes.push(current_mode);
|
||||
current_mode = mode;
|
||||
}
|
||||
|
||||
|
||||
function restore_mode()
|
||||
{
|
||||
current_mode = modes.pop();
|
||||
}
|
||||
|
||||
|
||||
function in_array(what, arr)
|
||||
{
|
||||
for (var i = 0; i < arr.length; i++)
|
||||
{
|
||||
if (arr[i] === what) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
|
||||
function get_next_token()
|
||||
{
|
||||
var n_newlines = 0;
|
||||
var c = '';
|
||||
|
||||
do {
|
||||
if (parser_pos >= input.length) {
|
||||
return ['', 'TK_EOF'];
|
||||
}
|
||||
c = input.charAt(parser_pos);
|
||||
|
||||
parser_pos += 1;
|
||||
if (c === "\n") {
|
||||
n_newlines += 1;
|
||||
}
|
||||
}
|
||||
while (in_array(c, whitespace));
|
||||
|
||||
if (n_newlines > 1) {
|
||||
for (var i = 0; i < 2; i++) {
|
||||
print_newline(i === 0);
|
||||
}
|
||||
}
|
||||
var wanted_newline = (n_newlines === 1);
|
||||
|
||||
|
||||
if (in_array(c, wordchar)) {
|
||||
if (parser_pos < input.length) {
|
||||
while (in_array(input.charAt(parser_pos), wordchar)) {
|
||||
c += input.charAt(parser_pos);
|
||||
parser_pos += 1;
|
||||
if (parser_pos === input.length) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// small and surprisingly unugly hack for 1E-10 representation
|
||||
if (parser_pos !== input.length && c.match(/^[0-9]+[Ee]$/) && input.charAt(parser_pos) === '-') {
|
||||
parser_pos += 1;
|
||||
|
||||
var t = get_next_token(parser_pos);
|
||||
c += '-' + t[0];
|
||||
return [c, 'TK_WORD'];
|
||||
}
|
||||
|
||||
if (c === 'in') { // hack for 'in' operator
|
||||
return [c, 'TK_OPERATOR'];
|
||||
}
|
||||
return [c, 'TK_WORD'];
|
||||
}
|
||||
|
||||
if (c === '(' || c === '[') {
|
||||
return [c, 'TK_START_EXPR'];
|
||||
}
|
||||
|
||||
if (c === ')' || c === ']') {
|
||||
return [c, 'TK_END_EXPR'];
|
||||
}
|
||||
|
||||
if (c === '{') {
|
||||
return [c, 'TK_START_BLOCK'];
|
||||
}
|
||||
|
||||
if (c === '}') {
|
||||
return [c, 'TK_END_BLOCK'];
|
||||
}
|
||||
|
||||
if (c === ';') {
|
||||
return [c, 'TK_END_COMMAND'];
|
||||
}
|
||||
|
||||
if (c === '/') {
|
||||
var comment = '';
|
||||
// peek for comment /* ... */
|
||||
if (input.charAt(parser_pos) === '*') {
|
||||
parser_pos += 1;
|
||||
if (parser_pos < input.length) {
|
||||
while (! (input.charAt(parser_pos) === '*' && input.charAt(parser_pos + 1) && input.charAt(parser_pos + 1) === '/') && parser_pos < input.length) {
|
||||
comment += input.charAt(parser_pos);
|
||||
parser_pos += 1;
|
||||
if (parser_pos >= input.length) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
parser_pos += 2;
|
||||
return ['/*' + comment + '*/', 'TK_BLOCK_COMMENT'];
|
||||
}
|
||||
// peek for comment // ...
|
||||
if (input.charAt(parser_pos) === '/') {
|
||||
comment = c;
|
||||
while (input.charAt(parser_pos) !== "\x0d" && input.charAt(parser_pos) !== "\x0a") {
|
||||
comment += input.charAt(parser_pos);
|
||||
parser_pos += 1;
|
||||
if (parser_pos >= input.length) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
parser_pos += 1;
|
||||
if (wanted_newline) {
|
||||
print_newline();
|
||||
}
|
||||
return [comment, 'TK_COMMENT'];
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
if (c === "'" || // string
|
||||
c === '"' || // string
|
||||
(c === '/' &&
|
||||
((last_type === 'TK_WORD' && last_text === 'return') || (last_type === 'TK_START_EXPR' || last_type === 'TK_END_BLOCK' || last_type === 'TK_OPERATOR' || last_type === 'TK_EOF' || last_type === 'TK_END_COMMAND')))) { // regexp
|
||||
var sep = c;
|
||||
var esc = false;
|
||||
c = '';
|
||||
|
||||
if (parser_pos < input.length) {
|
||||
|
||||
while (esc || input.charAt(parser_pos) !== sep) {
|
||||
c += input.charAt(parser_pos);
|
||||
if (!esc) {
|
||||
esc = input.charAt(parser_pos) === '\\';
|
||||
} else {
|
||||
esc = false;
|
||||
}
|
||||
parser_pos += 1;
|
||||
if (parser_pos >= input.length) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
parser_pos += 1;
|
||||
if (last_type === 'TK_END_COMMAND') {
|
||||
print_newline();
|
||||
}
|
||||
return [sep + c + sep, 'TK_STRING'];
|
||||
}
|
||||
|
||||
if (in_array(c, punct)) {
|
||||
while (parser_pos < input.length && in_array(c + input.charAt(parser_pos), punct)) {
|
||||
c += input.charAt(parser_pos);
|
||||
parser_pos += 1;
|
||||
if (parser_pos >= input.length) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
return [c, 'TK_OPERATOR'];
|
||||
}
|
||||
|
||||
return [c, 'TK_UNKNOWN'];
|
||||
}
|
||||
|
||||
|
||||
//----------------------------------
|
||||
|
||||
indent_character = indent_character || ' ';
|
||||
indent_size = indent_size || 4;
|
||||
|
||||
indent_string = '';
|
||||
while (indent_size--) {
|
||||
indent_string += indent_character;
|
||||
}
|
||||
|
||||
input = js_source_text;
|
||||
|
||||
last_word = ''; // last 'TK_WORD' passed
|
||||
last_type = 'TK_START_EXPR'; // last token type
|
||||
last_text = ''; // last token text
|
||||
output = [];
|
||||
|
||||
whitespace = "\n\r\t ".split('');
|
||||
wordchar = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789_$'.split('');
|
||||
punct = '+ - * / % & ++ -- = += -= *= /= %= == === != !== > < >= <= >> << >>> >>>= >>= <<= && &= | || ! !! , : ? ^ ^= |='.split(' ');
|
||||
|
||||
// words which should always start on new line.
|
||||
line_starters = 'continue,try,throw,return,var,if,switch,case,default,for,while,break,function'.split(',');
|
||||
|
||||
// states showing if we are currently in expression (i.e. "if" case) - 'EXPRESSION', or in usual block (like, procedure), 'BLOCK'.
|
||||
// some formatting depends on that.
|
||||
current_mode = 'BLOCK';
|
||||
modes = [current_mode];
|
||||
|
||||
indent_level = 0;
|
||||
parser_pos = 0; // parser position
|
||||
in_case = false; // flag for parser that case/default has been processed, and next colon needs special attention
|
||||
while (true) {
|
||||
var t = get_next_token(parser_pos);
|
||||
token_text = t[0];
|
||||
token_type = t[1];
|
||||
if (token_type === 'TK_EOF') {
|
||||
break;
|
||||
}
|
||||
|
||||
switch (token_type) {
|
||||
|
||||
case 'TK_START_EXPR':
|
||||
|
||||
set_mode('EXPRESSION');
|
||||
if (last_type === 'TK_END_EXPR' || last_type === 'TK_START_EXPR') {
|
||||
// do nothing on (( and )( and ][ and ]( ..
|
||||
} else if (last_type !== 'TK_WORD' && last_type !== 'TK_OPERATOR') {
|
||||
print_space();
|
||||
} else if (in_array(last_word, line_starters) && last_word !== 'function') {
|
||||
print_space();
|
||||
}
|
||||
print_token();
|
||||
break;
|
||||
|
||||
case 'TK_END_EXPR':
|
||||
|
||||
print_token();
|
||||
restore_mode();
|
||||
break;
|
||||
|
||||
case 'TK_START_BLOCK':
|
||||
|
||||
set_mode('BLOCK');
|
||||
if (last_type !== 'TK_OPERATOR' && last_type !== 'TK_START_EXPR') {
|
||||
if (last_type === 'TK_START_BLOCK') {
|
||||
print_newline();
|
||||
} else {
|
||||
print_space();
|
||||
}
|
||||
}
|
||||
print_token();
|
||||
indent();
|
||||
break;
|
||||
|
||||
case 'TK_END_BLOCK':
|
||||
if (last_type === 'TK_START_BLOCK') {
|
||||
// nothing
|
||||
unindent();
|
||||
} else {
|
||||
unindent();
|
||||
print_newline();
|
||||
}
|
||||
print_token();
|
||||
restore_mode();
|
||||
break;
|
||||
|
||||
case 'TK_WORD':
|
||||
|
||||
if (token_text === 'case' || token_text === 'default') {
|
||||
if (last_text === ':') {
|
||||
// switch cases following one another
|
||||
remove_indent();
|
||||
} else {
|
||||
// case statement starts in the same line where switch
|
||||
unindent();
|
||||
print_newline();
|
||||
indent();
|
||||
}
|
||||
print_token();
|
||||
in_case = true;
|
||||
break;
|
||||
}
|
||||
|
||||
prefix = 'NONE';
|
||||
if (last_type === 'TK_END_BLOCK') {
|
||||
if (!in_array(token_text.toLowerCase(), ['else', 'catch', 'finally'])) {
|
||||
prefix = 'NEWLINE';
|
||||
} else {
|
||||
prefix = 'SPACE';
|
||||
print_space();
|
||||
}
|
||||
} else if (last_type === 'TK_END_COMMAND' && current_mode === 'BLOCK') {
|
||||
prefix = 'NEWLINE';
|
||||
} else if (last_type === 'TK_END_COMMAND' && current_mode === 'EXPRESSION') {
|
||||
prefix = 'SPACE';
|
||||
} else if (last_type === 'TK_WORD') {
|
||||
prefix = 'SPACE';
|
||||
} else if (last_type === 'TK_START_BLOCK') {
|
||||
prefix = 'NEWLINE';
|
||||
} else if (last_type === 'TK_END_EXPR') {
|
||||
print_space();
|
||||
prefix = 'NEWLINE';
|
||||
}
|
||||
|
||||
if (in_array(token_text, line_starters) || prefix === 'NEWLINE') {
|
||||
|
||||
if (last_text === 'else') {
|
||||
// no need to force newline on else break
|
||||
print_space();
|
||||
} else if ((last_type === 'TK_START_EXPR' || last_text === '=') && token_text === 'function') {
|
||||
// no need to force newline on 'function': (function
|
||||
// DONOTHING
|
||||
} else if (last_type === 'TK_WORD' && (last_text === 'return' || last_text === 'throw')) {
|
||||
// no newline between 'return nnn'
|
||||
print_space();
|
||||
} else if (last_type !== 'TK_END_EXPR') {
|
||||
if ((last_type !== 'TK_START_EXPR' || token_text !== 'var') && last_text !== ':') {
|
||||
// no need to force newline on 'var': for (var x = 0...)
|
||||
if (token_text === 'if' && last_type === 'TK_WORD' && last_word === 'else') {
|
||||
// no newline for } else if {
|
||||
print_space();
|
||||
} else {
|
||||
print_newline();
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (prefix === 'SPACE') {
|
||||
print_space();
|
||||
}
|
||||
print_token();
|
||||
last_word = token_text;
|
||||
break;
|
||||
|
||||
case 'TK_END_COMMAND':
|
||||
|
||||
print_token();
|
||||
break;
|
||||
|
||||
case 'TK_STRING':
|
||||
|
||||
if (last_type === 'TK_START_BLOCK' || last_type === 'TK_END_BLOCK') {
|
||||
print_newline();
|
||||
} else if (last_type === 'TK_WORD') {
|
||||
print_space();
|
||||
}
|
||||
print_token();
|
||||
break;
|
||||
|
||||
case 'TK_OPERATOR':
|
||||
|
||||
var start_delim = true;
|
||||
var end_delim = true;
|
||||
|
||||
if (token_text === ':' && in_case) {
|
||||
print_token(); // colon really asks for separate treatment
|
||||
print_newline();
|
||||
break;
|
||||
}
|
||||
|
||||
in_case = false;
|
||||
|
||||
if (token_text === ',') {
|
||||
if (last_type === 'TK_END_BLOCK') {
|
||||
print_token();
|
||||
print_newline();
|
||||
} else {
|
||||
if (current_mode === 'BLOCK') {
|
||||
print_token();
|
||||
print_newline();
|
||||
} else {
|
||||
print_token();
|
||||
print_space();
|
||||
}
|
||||
}
|
||||
break;
|
||||
} else if (token_text === '--' || token_text === '++') { // unary operators special case
|
||||
if (last_text === ';') {
|
||||
// space for (;; ++i)
|
||||
start_delim = true;
|
||||
end_delim = false;
|
||||
} else {
|
||||
start_delim = false;
|
||||
end_delim = false;
|
||||
}
|
||||
} else if (token_text === '!' && last_type === 'TK_START_EXPR') {
|
||||
// special case handling: if (!a)
|
||||
start_delim = false;
|
||||
end_delim = false;
|
||||
} else if (last_type === 'TK_OPERATOR') {
|
||||
start_delim = false;
|
||||
end_delim = false;
|
||||
} else if (last_type === 'TK_END_EXPR') {
|
||||
start_delim = true;
|
||||
end_delim = true;
|
||||
} else if (token_text === '.') {
|
||||
// decimal digits or object.property
|
||||
start_delim = false;
|
||||
end_delim = false;
|
||||
|
||||
} else if (token_text === ':') {
|
||||
// zz: xx
|
||||
// can't differentiate ternary op, so for now it's a ? b: c; without space before colon
|
||||
start_delim = false;
|
||||
}
|
||||
if (start_delim) {
|
||||
print_space();
|
||||
}
|
||||
|
||||
print_token();
|
||||
|
||||
if (end_delim) {
|
||||
print_space();
|
||||
}
|
||||
break;
|
||||
|
||||
case 'TK_BLOCK_COMMENT':
|
||||
|
||||
print_newline();
|
||||
print_token();
|
||||
print_newline();
|
||||
break;
|
||||
|
||||
case 'TK_COMMENT':
|
||||
|
||||
// print_newline();
|
||||
print_space();
|
||||
print_token();
|
||||
print_newline();
|
||||
break;
|
||||
|
||||
case 'TK_UNKNOWN':
|
||||
print_token();
|
||||
break;
|
||||
}
|
||||
|
||||
last_type = token_type;
|
||||
last_text = token_text;
|
||||
}
|
||||
|
||||
return output.join('');
|
||||
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
$(document).ready(function() {
|
||||
|
||||
$('.component-links a').history(function() {
|
||||
loadDemo( $(this).attr('href').replace(/^#/, "") );
|
||||
});
|
||||
|
||||
var instructions = $("#containerDemo").html();
|
||||
$.ajaxHistory.initialize(function() {
|
||||
$("#containerDemo").html(instructions);
|
||||
});
|
||||
|
||||
});
|
||||
@ -1,205 +0,0 @@
|
||||
$(document).ready(function() {
|
||||
|
||||
// link demos
|
||||
|
||||
$(".demoflow div.wrapper").click(function() {
|
||||
|
||||
var demo = $(this).children('img').attr('_demo');
|
||||
|
||||
if (demo) {
|
||||
location.href = '/repository/real-world/' + demo;
|
||||
}else {
|
||||
//alert('Under construction!');
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
if ($("div.demoflow").size()) {
|
||||
|
||||
var inst = new $.ui.carousel($("div.demoflow")[0], { height: 200, width: 310 });
|
||||
|
||||
$("div.demoflow-button-left, div.demoflow-button-right").bind("mousedown", function() {
|
||||
var right = this.className.indexOf("right") == -1;
|
||||
if(inst.autoRotator) window.clearInterval(inst.autoRotator);
|
||||
inst.timer = window.setInterval(function() { inst.rotate(right ? "right" : null); }, 13);
|
||||
})
|
||||
.bind("mouseup", function() {
|
||||
window.clearInterval(inst.timer);
|
||||
});
|
||||
|
||||
$('.demoflow div.shadow').hover(function() {
|
||||
this._lastopacity = $(this).css('opacity');
|
||||
$(this).stop().animate({opacity: 0 }, 300);
|
||||
}, function() {
|
||||
$(this).stop().animate({opacity: this._lastopacity }, 300);
|
||||
});
|
||||
|
||||
|
||||
window.setTimeout(function() {
|
||||
inst.element.animate({ opacity: 1 },2000); inst.rotate(0,2000,0.45);
|
||||
window.setTimeout(function() {
|
||||
inst.autoRotator = window.setInterval(function() { inst.rotate(0,2000,0.45); },5000);
|
||||
},3000);
|
||||
},0);
|
||||
|
||||
}
|
||||
|
||||
$('a').click(function(){
|
||||
this.blur();
|
||||
});
|
||||
|
||||
// smooth hover effects by DragonInteractive
|
||||
var hover = hoverEffects();
|
||||
hover.init();
|
||||
|
||||
});
|
||||
|
||||
$.ui.carousel = function(element, options) {
|
||||
|
||||
this.element = $(element);
|
||||
this.options = $.extend({}, options);
|
||||
var self = this;
|
||||
|
||||
$.extend(this, {
|
||||
start: Math.PI/2,
|
||||
step: 2*Math.PI/$("> *", this.element).length,
|
||||
radiusX: 400,
|
||||
radiusY: -45,
|
||||
paddingX: this.element.outerWidth() / 2,
|
||||
paddingY: this.element.outerHeight() / 2
|
||||
});
|
||||
|
||||
$("> *", this.element).css({ position: "absolute", top: 0, left: 0, zIndex: 1 });
|
||||
this.rotate();
|
||||
this.rotate("right");
|
||||
|
||||
this.element.parent().bind("mousewheel", function(event ,delta) {
|
||||
if(self.autoRotator) window.clearInterval(self.autoRotator);
|
||||
self.rotate(delta < 0 ? "right" : "left");
|
||||
return false;
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
$.ui.carousel.prototype.rotate = function(d,ani,speed) {
|
||||
|
||||
this.start = this.start + (d == "right" ? -(speed || 0.03) : (speed || 0.03));
|
||||
var o = this.options;
|
||||
var self = this;
|
||||
|
||||
setTimeout(function(){
|
||||
$("> *", self.element).each(function(i) {
|
||||
var angle = self.start + i * self.step;
|
||||
var x = self.radiusX * Math.cos(angle);
|
||||
var y = self.radiusY * Math.sin(angle);
|
||||
var _self = this;
|
||||
|
||||
var width = o.width * ((self.radiusY+y) / (2 * self.radiusY));
|
||||
width = (width * width * width) / (o.width * o.width); //This makes the pieces smaller
|
||||
var height = parseInt(width * o.height / o.width);
|
||||
|
||||
//This is highly custom - it will hide the elements at the back
|
||||
$(_self).css({ visibility: height < 30 ? "hidden" : "visible" });
|
||||
if(height < 30 && !ani) return; //This imrpoves the speed, but cannot be used with animation
|
||||
|
||||
|
||||
if(ani) {
|
||||
$(_self).animate({
|
||||
top: Math.round(self.paddingY + y - height/2) + "px",
|
||||
left: Math.round(self.paddingX + x - width/2) + "px",
|
||||
width: Math.round(width) + "px",
|
||||
height: Math.round(height) + "px"
|
||||
},{ duration: ani, easing: "easeOutQuad" });
|
||||
$(_self).css({ zIndex: Math.round(parseInt(100 * (self.radiusY+y) / (2 * self.radiusY))) });
|
||||
} else {
|
||||
$(_self).css({
|
||||
top: self.paddingY + y - height/2 + "px",
|
||||
left: self.paddingX + x - width/2 + "px",
|
||||
width: width + "px",
|
||||
height: height + "px",
|
||||
zIndex: parseInt(100 * (self.radiusY+y) / (2 * self.radiusY))
|
||||
});
|
||||
}
|
||||
|
||||
$("div.shadow",_self).css({ opacity: 1 - (width / o.width) });
|
||||
|
||||
});
|
||||
}, 0);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* All credit here goes to DragonInteractive and Yuri Vishnevsky
|
||||
*/
|
||||
var hoverEffects = function() {
|
||||
var me = this;
|
||||
var args = arguments;
|
||||
var self = {
|
||||
c: {
|
||||
navItems: '.download .click-to-download, #launch-pad .launch-pad-button, div.demoflow-button-left, div.demoflow-button-right',
|
||||
navSpeed: ($.browser.safari ? 600: 350),
|
||||
snOpeningSpeed: ($.browser.safari ? 400: 250),
|
||||
snOpeningTimeout: 150,
|
||||
snClosingSpeed: function() {
|
||||
if (self.subnavHovered()) return 123450;
|
||||
return 150
|
||||
},
|
||||
snClosingTimeout: 700
|
||||
},
|
||||
init: function() {
|
||||
//$('.bg', this.c.navItems).css({
|
||||
// 'opacity': 0
|
||||
//});
|
||||
this.initHoverFades()
|
||||
},
|
||||
subnavHovered: function() {
|
||||
var hovered = false;
|
||||
$(self.c.navItems).each(function() {
|
||||
if (this.hovered) hovered = true
|
||||
});
|
||||
return hovered
|
||||
},
|
||||
initHoverFades: function() {
|
||||
//$('#navigation .bg').css('opacity', 0);
|
||||
$(self.c.navItems).hover(function() {
|
||||
self.fadeNavIn.apply(this)
|
||||
},
|
||||
function() {
|
||||
var el = this;
|
||||
setTimeout(function() {
|
||||
if (!el.open) self.fadeNavOut.apply(el)
|
||||
},
|
||||
10)
|
||||
})
|
||||
},
|
||||
fadeNavIn: function() {
|
||||
$('.bg', this).stop().animate({
|
||||
'opacity': 1
|
||||
},
|
||||
self.c.navSpeed)
|
||||
},
|
||||
fadeNavOut: function() {
|
||||
$('.bg', this).stop().animate({
|
||||
'opacity': 0
|
||||
},
|
||||
self.c.navSpeed)
|
||||
},
|
||||
initSubmenus: function() {
|
||||
$(this.c.navItems).hover(function() {
|
||||
$(self.c.navItems).not(this).each(function() {
|
||||
self.fadeNavOut.apply(this);
|
||||
});
|
||||
this.hovered = true;
|
||||
var el = this;
|
||||
self.fadeNavIn.apply(el);
|
||||
},
|
||||
function() {
|
||||
this.hovered = false;
|
||||
var el = this;
|
||||
if (!el.open) self.fadeNavOut.apply(el);
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
return self;
|
||||
};
|
||||
@ -1,163 +0,0 @@
|
||||
/*
|
||||
===============================================================================
|
||||
Chili is the jQuery code highlighter plugin
|
||||
...............................................................................
|
||||
Copyright 2007 / Andrea Ercolino
|
||||
-------------------------------------------------------------------------------
|
||||
LICENSE: http://www.opensource.org/licenses/mit-license.php
|
||||
WEBSITE: http://noteslog.com/chili/
|
||||
===============================================================================
|
||||
*/
|
||||
|
||||
/*
|
||||
this file shows how to configure a static setup
|
||||
it must be linked from the head of a page like:
|
||||
<script type="text/javascript" src="chili/recipes.js"></script>
|
||||
*/
|
||||
|
||||
ChiliBook.recipeLoading = false;
|
||||
|
||||
ChiliBook.recipes[ "jquery.js" ] =
|
||||
{
|
||||
steps:
|
||||
{
|
||||
mlcom : { exp: /\/\*[^*]*\*+(?:[^\/][^*]*\*+)*\// }
|
||||
, com : { exp: /\/\/.*/ }
|
||||
, regexp : { exp: /\/[^\/\\\n]*(?:\\.[^\/\\\n]*)*\/[gim]*/ }
|
||||
, string : { exp: /(?:\'[^\'\\\n]*(?:\\.[^\'\\\n]*)*\')|(?:\"[^\"\\\n]*(?:\\.[^\"\\\n]*)*\")/ }
|
||||
, numbers : { exp: /\b[+-]?(?:\d*\.?\d+|\d+\.?\d*)(?:[eE][+-]?\d+)?\b/ }
|
||||
, keywords: { exp: /\b(arguments|break|case|catch|continue|default|delete|do|else|false|for|function|if|in|instanceof|new|null|return|switch|this|true|try|typeof|var|void|while|with)\b/ }
|
||||
, global : { exp: /\b(toString|valueOf|window|element|prototype|constructor|document|escape|unescape|parseInt|parseFloat|setTimeout|clearTimeout|setInterval|clearInterval|NaN|isNaN|Infinity)\b/ }
|
||||
|
||||
, "jquery utilities" : {
|
||||
exp : /(?:\$\.browser|\$\.each|\$\.extend|\$\.grep|\$\.map|\$\.merge|\$\.trim)\b/
|
||||
, replacement: '<span class="jquery" title="$0"><span class="global">$$</span></span>'
|
||||
}
|
||||
,"jquery private" : {
|
||||
exp : /(?:\$\.find|\$\.parents|\$\.sibling|\.domManip|\.eventTesting|\.extend|\.get|\.init|\.jquery|\.pushStack)\b/
|
||||
, replacement: '<span class="jquery" title="$0"><span class="private">$$</span></span>'
|
||||
}
|
||||
,"jquery ajax" : {
|
||||
exp : /(?:\$\.ajax|\$\.ajaxSetup|\$\.ajaxTimeout|\$\.get|\$\.getIfModified|\$\.getJSON|\$\.getScript|\$\.post|.ajaxComplete|.ajaxError|.ajaxSend|.ajaxStart|.ajaxStop|.ajaxSuccess|.load|.loadIfModified|.serialize)\b/
|
||||
, replacement: '<span class="jquery" title="$0"><span class="ajax">$$</span></span>'
|
||||
}
|
||||
, "jquery object" : {
|
||||
exp : /jQuery|\$(?=\W)/
|
||||
, replacement: '<span class="jquery" title="$0"><span class="object">$$</span></span>'
|
||||
}
|
||||
,"jquery core" : {
|
||||
exp : /\$\.extend|\$\.noConflict|\.(?:each|eq|get|gt|index|lt|size)\b/
|
||||
, replacement: '<span class="jquery" title="$0"><span class="core">$$</span></span>'
|
||||
}
|
||||
,"jquery css" : {
|
||||
exp : /\.(?:css|height|width)\b/
|
||||
, replacement: '<span class="jquery" title="$0"><span class="css">$$</span></span>'
|
||||
}
|
||||
,"jquery attributes" : {
|
||||
exp : /\.(?:addClass|attr|html|removeAttr|removeClass|text|toggleClass|val)\b/
|
||||
, replacement: '<span class="jquery" title="$0"><span class="attributes">$$</span></span>'
|
||||
}
|
||||
,"jquery traversing" : {
|
||||
exp : /\.(?:add|children|contains|end|filter|find|is|next|not|parent|parents|prev|siblings)\b/
|
||||
, replacement: '<span class="jquery" title="$0"><span class="traversing">$$</span></span>'
|
||||
}
|
||||
,"jquery manipulation": {
|
||||
exp : /\.(?:after|append|appendTo|before|clone|empty|insertAfter|insertBefore|prepend|prependTo|remove|wrap)\b/
|
||||
, replacement: '<span class="jquery" title="$0"><span class="manipulation">$$</span></span>'
|
||||
}
|
||||
,"jquery effects" : {
|
||||
exp : /\.(?:animate|fadeIn|fadeOut|fadeTo|hide|show|slideDown|slideToggle|slideUp|toggle)\b/
|
||||
, replacement: '<span class="jquery" title="$0"><span class="effects">$$</span></span>'
|
||||
}
|
||||
,"jquery events" : {
|
||||
exp : /\.(?:bind|blur|change|click|dblclick|error|focus|hover|keydown|keypress|keyup|load|mousedown|mousemove|mouseout|mouseover|mouseup|one|ready|resize|scroll|select|submit|toggle|trigger|unbind|unload)\b/
|
||||
, replacement: '<span class="jquery" title="$0"><span class="events">$$</span></span>'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
ChiliBook.recipes[ "html.js" ] =
|
||||
{
|
||||
steps: {
|
||||
mlcom : { exp: /\<!--(?:\w|\W)*?--\>/ }
|
||||
, tag : { exp: /(?:\<\!?[\w:]+)|(?:\>)|(?:\<\/[\w:]+\>)|(?:\/\>)/ }
|
||||
, php : { exp: /(?:\<\?php\s)|(?:\<\?)|(?:\?\>)/ }
|
||||
, aname : { exp: /\s+?[\w-]+:?\w+(?=\s*=)/ }
|
||||
, avalue: { exp: /(=\s*)(([\"\'])(?:(?:[^\3\\]*?(?:\3\3|\\.))*?[^\3\\]*?)\3)/
|
||||
, replacement: '$1<span class="$0">$2</span>' }
|
||||
, entity: { exp: /&[\w#]+?;/ }
|
||||
}
|
||||
};
|
||||
|
||||
ChiliBook.recipes[ "javascript.js" ] =
|
||||
{
|
||||
steps: {
|
||||
mlcom : { exp: /\/\*[^*]*\*+(?:[^\/][^*]*\*+)*\// }
|
||||
, com : { exp: /\/\/.*/ }
|
||||
, regexp : { exp: /\/[^\/\\\n]*(?:\\.[^\/\\\n]*)*\/[gim]*/ }
|
||||
, string : { exp: /(?:\'[^\'\\\n]*(?:\\.[^\'\\\n]*)*\')|(?:\"[^\"\\\n]*(?:\\.[^\"\\\n]*)*\")/ }
|
||||
, numbers : { exp: /\b[+-]?(?:\d*\.?\d+|\d+\.?\d*)(?:[eE][+-]?\d+)?\b/ }
|
||||
, keywords: { exp: /\b(arguments|break|case|catch|continue|default|delete|do|else|false|for|function|if|in|instanceof|new|null|return|switch|this|true|try|typeof|var|void|while|with)\b/ }
|
||||
, global : { exp: /\b(toString|valueOf|window|self|element|prototype|constructor|document|escape|unescape|parseInt|parseFloat|setTimeout|clearTimeout|setInterval|clearInterval|NaN|isNaN|Infinity)\b/ }
|
||||
}
|
||||
};
|
||||
|
||||
ChiliBook.recipes[ "mysql.js" ] =
|
||||
{
|
||||
ignoreCase: true
|
||||
, steps: {
|
||||
mlcom : { exp: /\/\*[^*]*\*+([^\/][^*]*\*+)*\// }
|
||||
, com : { exp: /(?:--\s+.*)|(?:[^\\]\#.*)/ }
|
||||
, string : { exp: /([\"\'])(?:(?:[^\1\\\r\n]*?(?:\1\1|\\.))*[^\1\\\r\n]*?)\1/ }
|
||||
, quid : { exp: /(`)(?:(?:[^\1\\\r\n]*?(?:\1\1|\\.))*[^\1\\\r\n]*?)\1/ }
|
||||
, value : { exp: /\b(?:NULL|TRUE|FALSE)\b/ }
|
||||
, number : { exp: /\b[+-]?(\d*\.?\d+|\d+\.?\d*)([eE][+-]?\d+)?\b/ }
|
||||
, hexnum : { exp: /\b0[xX][\dA-Fa-f]+\b|\b[xX]([\'\"])[\dA-Fa-f]+\1/ }
|
||||
, op : { exp: /!=|&&|<|<<|<=|<=>|<>|=|>|>=|>>|\|\|/ }
|
||||
, variable : { exp: /@([$.\w]+|([`\"\'])(?:(?:[^\2\\\r\n]*?(?:\2\2|\\.))*[^\2\\\r\n]*?)\2)/
|
||||
, replacement: '<span class="keyword">@</span><span class="variable">$1</span>' }
|
||||
, keyword : { exp: /\b(?:A(?:CTION|DD|FTER|G(?:AINST|GREGATE)|L(?:GORITHM|L|TER)|N(?:ALYZE|D|Y)|S(?:C(?:II|)|ENSITIVE|)|UTO_INCREMENT|VG(?:_ROW_LENGTH|))|B(?:ACKUP|DB|E(?:FORE|GIN|RKELEYDB|TWEEN)|I(?:GINT|N(?:ARY|LOG)|T)|LOB|O(?:OL(?:EAN|)|TH)|TREE|Y(?:TE|))|C(?:A(?:CHE|LL|S(?:CADE(?:D|)|E))|H(?:A(?:IN|NGE(?:D|)|R(?:ACTER|SET|))|ECK(?:SUM|))|IPHER|L(?:IENT|OSE)|O(?:DE|L(?:LAT(?:E|ION)|UMN(?:S|))|M(?:M(?:ENT|IT(?:TED|))|P(?:ACT|RESSED))|N(?:CURRENT|DITION|NECTION|S(?:ISTENT|TRAINT)|T(?:AINS|INUE)|VERT))|R(?:EATE|OSS)|U(?:BE|R(?:RENT_(?:DATE|TIME(?:STAMP|)|USER)|SOR)))|D(?:A(?:T(?:A(?:BASE(?:S|)|)|E(?:TIME|))|Y(?:_(?:HOUR|MI(?:CROSECOND|NUTE)|SECOND)|))|E(?:ALLOCATE|C(?:IMAL|LARE|)|F(?:AULT|INER)|L(?:AY(?:ED|_KEY_WRITE)|ETE)|S(?:C(?:RIBE|)|_KEY_FILE)|TERMINISTIC)|I(?:RECTORY|S(?:ABLE|CARD|TINCT(?:ROW|))|V)|O(?:UBLE|)|ROP|U(?:AL|MPFILE|PLICATE)|YNAMIC)|E(?:ACH|LSE(?:IF|)|N(?:ABLE|CLOSED|D|GINE(?:S|)|UM)|RRORS|SCAPE(?:D|)|VENTS|X(?:ECUTE|I(?:STS|T)|P(?:ANSION|LAIN)|TENDED))|F(?:A(?:LSE|ST)|ETCH|I(?:ELDS|LE|RST|XED)|L(?:OAT(?:4|8|)|USH)|O(?:R(?:CE|EIGN|)|UND)|R(?:AC_SECOND|OM)|U(?:LL(?:TEXT|)|NCTION))|G(?:E(?:OMETRY(?:COLLECTION|)|T_FORMAT)|LOBAL|R(?:ANT(?:S|)|OUP))|H(?:A(?:NDLER|SH|VING)|ELP|IGH_PRIORITY|O(?:STS|UR(?:_(?:MI(?:CROSECOND|NUTE)|SECOND)|)))|I(?:DENTIFIED|F|GNORE|MPORT|N(?:DEX(?:ES|)|FILE|N(?:ER|O(?:BASE|DB))|OUT|SE(?:NSITIVE|RT(?:_METHOD|))|T(?:1|2|3|4|8|E(?:GER|RVAL)|O|)|VOKER|)|O_THREAD|S(?:OLATION|SUER|)|TERATE)|JOIN|K(?:EY(?:S|)|ILL)|L(?:A(?:NGUAGE|ST)|E(?:A(?:DING|VE(?:S|))|FT|VEL)|I(?:KE|MIT|NES(?:TRING|))|O(?:AD|C(?:AL(?:TIME(?:STAMP|)|)|K(?:S|))|GS|NG(?:BLOB|TEXT|)|OP|W_PRIORITY))|M(?:A(?:STER(?:_(?:CONNECT_RETRY|HOST|LOG_(?:FILE|POS)|P(?:ASSWORD|ORT)|S(?:ERVER_ID|SL(?:_(?:C(?:A(?:PATH|)|ERT|IPHER)|KEY)|))|USER)|)|TCH|X_(?:CONNECTIONS_PER_HOUR|QUERIES_PER_HOUR|ROWS|U(?:PDATES_PER_HOUR|SER_CONNECTIONS)))|E(?:DIUM(?:BLOB|INT|TEXT|)|RGE)|I(?:CROSECOND|DDLEINT|GRATE|N(?:UTE(?:_(?:MICROSECOND|SECOND)|)|_ROWS))|O(?:D(?:E|IF(?:IES|Y)|)|NTH)|U(?:LTI(?:LINESTRING|PO(?:INT|LYGON))|TEX))|N(?:A(?:ME(?:S|)|T(?:IONAL|URAL))|CHAR|DB(?:CLUSTER|)|E(?:W|XT)|O(?:NE|T|_WRITE_TO_BINLOG|)|U(?:LL|MERIC)|VARCHAR)|O(?:FFSET|LD_PASSWORD|N(?:E(?:_SHOT|)|)|P(?:EN|TI(?:MIZE|ON(?:ALLY|)))|R(?:DER|)|UT(?:ER|FILE|))|P(?:A(?:CK_KEYS|RTIAL|SSWORD)|HASE|O(?:INT|LYGON)|R(?:E(?:CISION|PARE|V)|I(?:MARY|VILEGES)|OCE(?:DURE|SS(?:LIST|)))|URGE)|QU(?:ARTER|ERY|ICK)|R(?:AID(?:0|_(?:CHUNKS(?:IZE|)|TYPE))|E(?:A(?:D(?:S|)|L)|COVER|DUNDANT|FERENCES|GEXP|L(?:AY_(?:LOG_(?:FILE|POS)|THREAD)|EASE|OAD)|NAME|P(?:AIR|EAT(?:ABLE|)|L(?:ACE|ICATION))|QUIRE|S(?:ET|T(?:ORE|RICT)|UME)|TURN(?:S|)|VOKE)|IGHT|LIKE|O(?:LL(?:BACK|UP)|UTINE|W(?:S|_FORMAT|))|TREE)|S(?:AVEPOINT|CHEMA(?:S|)|E(?:C(?:OND(?:_MICROSECOND|)|URITY)|LECT|NSITIVE|PARATOR|RIAL(?:IZABLE|)|SSION|T)|H(?:ARE|OW|UTDOWN)|I(?:GNED|MPLE)|LAVE|MALLINT|NAPSHOT|O(?:ME|NAME|UNDS)|P(?:ATIAL|ECIFIC)|QL(?:EXCEPTION|STATE|WARNING|_(?:B(?:IG_RESULT|UFFER_RESULT)|CA(?:CHE|LC_FOUND_ROWS)|NO_CACHE|SMALL_RESULT|T(?:HREAD|SI_(?:DAY|FRAC_SECOND|HOUR|M(?:INUTE|ONTH)|QUARTER|SECOND|WEEK|YEAR)))|)|SL|T(?:A(?:RT(?:ING|)|TUS)|O(?:P|RAGE)|R(?:AIGHT_JOIN|I(?:NG|PED)))|U(?:BJECT|PER|SPEND))|T(?:ABLE(?:S(?:PACE|)|)|E(?:MP(?:ORARY|TABLE)|RMINATED|XT)|HEN|I(?:ME(?:STAMP(?:ADD|DIFF|)|)|NY(?:BLOB|INT|TEXT))|O|R(?:A(?:ILING|NSACTION)|IGGER(?:S|)|U(?:E|NCATE))|YPE(?:S|))|U(?:N(?:COMMITTED|D(?:EFINED|O)|I(?:CODE|ON|QUE)|KNOWN|LOCK|SIGNED|TIL)|P(?:DATE|GRADE)|S(?:AGE|E(?:R(?:_RESOURCES|)|_FRM|)|ING)|TC_(?:DATE|TIME(?:STAMP|)))|V(?:A(?:LUE(?:S|)|R(?:BINARY|CHAR(?:ACTER|)|IABLES|YING))|IEW)|W(?:ARNINGS|EEK|H(?:E(?:N|RE)|ILE)|ITH|ORK|RITE)|X(?:509|A|OR)|YEAR(?:_MONTH|)|ZEROFILL)\b/ }
|
||||
, func : { exp: /\b(?:A(?:BS|COS|DD(?:DATE|TIME)|ES_(?:DECRYPT|ENCRYPT)|REA|S(?:BINARY|IN|TEXT|WK(?:B|T))|TAN(?:2|))|B(?:ENCHMARK|I(?:N|T_(?:AND|COUNT|LENGTH|OR|XOR)))|C(?:AST|E(?:IL(?:ING|)|NTROID)|HAR(?:ACTER_LENGTH|_LENGTH)|O(?:ALESCE|ERCIBILITY|MPRESS|N(?:CAT(?:_WS|)|NECTION_ID|V(?:ERT_TZ|))|S|T|UNT)|R(?:C32|OSSES)|UR(?:DATE|TIME))|D(?:A(?:TE(?:DIFF|_(?:ADD|FORMAT|SUB))|Y(?:NAME|OF(?:MONTH|WEEK|YEAR)))|E(?:CODE|GREES|S_(?:DECRYPT|ENCRYPT))|I(?:MENSION|SJOINT))|E(?:LT|N(?:C(?:ODE|RYPT)|DPOINT|VELOPE)|QUALS|X(?:P(?:ORT_SET|)|T(?:ERIORRING|RACT)))|F(?:I(?:ELD|ND_IN_SET)|LOOR|O(?:RMAT|UND_ROWS)|ROM_(?:DAYS|UNIXTIME))|G(?:E(?:OM(?:COLLFROM(?:TEXT|WKB)|ETRY(?:COLLECTIONFROM(?:TEXT|WKB)|FROM(?:TEXT|WKB)|N|TYPE)|FROM(?:TEXT|WKB))|T_LOCK)|LENGTH|R(?:EATEST|OUP_(?:CONCAT|UNIQUE_USERS)))|HEX|I(?:FNULL|N(?:ET_(?:ATON|NTOA)|STR|TER(?:IORRINGN|SECTS))|S(?:CLOSED|EMPTY|NULL|SIMPLE|_(?:FREE_LOCK|USED_LOCK)))|L(?:AST_(?:DAY|INSERT_ID)|CASE|E(?:AST|NGTH)|INE(?:FROM(?:TEXT|WKB)|STRINGFROM(?:TEXT|WKB))|N|O(?:AD_FILE|CATE|G(?:10|2|)|WER)|PAD|TRIM)|M(?:A(?:KE(?:DATE|TIME|_SET)|STER_POS_WAIT|X)|BR(?:CONTAINS|DISJOINT|EQUAL|INTERSECTS|OVERLAPS|TOUCHES|WITHIN)|D5|I(?:D|N)|LINEFROM(?:TEXT|WKB)|ONTHNAME|PO(?:INTFROM(?:TEXT|WKB)|LYFROM(?:TEXT|WKB))|ULTI(?:LINESTRINGFROM(?:TEXT|WKB)|PO(?:INTFROM(?:TEXT|WKB)|LYGONFROM(?:TEXT|WKB))))|N(?:AME_CONST|OW|U(?:LLIF|M(?:GEOMETRIES|INTERIORRINGS|POINTS)))|O(?:CT(?:ET_LENGTH|)|RD|VERLAPS)|P(?:ERIOD_(?:ADD|DIFF)|I|O(?:INT(?:FROM(?:TEXT|WKB)|N)|LY(?:FROM(?:TEXT|WKB)|GONFROM(?:TEXT|WKB))|SITION|W(?:ER|)))|QUOTE|R(?:A(?:DIANS|ND)|E(?:LEASE_LOCK|VERSE)|O(?:UND|W_COUNT)|PAD|TRIM)|S(?:E(?:C_TO_TIME|SSION_USER)|HA(?:1|)|I(?:GN|N)|LEEP|OUNDEX|PACE|QRT|RID|T(?:ARTPOINT|D(?:DEV(?:_(?:POP|SAMP)|)|)|R(?:CMP|_TO_DATE))|U(?:B(?:DATE|STR(?:ING(?:_INDEX|)|)|TIME)|M)|YS(?:DATE|TEM_USER))|T(?:AN|IME(?:DIFF|_(?:FORMAT|TO_SEC))|O(?:UCHES|_DAYS)|RIM)|U(?:CASE|N(?:COMPRESS(?:ED_LENGTH|)|HEX|I(?:QUE_USERS|X_TIMESTAMP))|PPER|UID)|V(?:AR(?:IANCE|_(?:POP|SAMP))|ERSION)|W(?:EEK(?:DAY|OFYEAR)|ITHIN)|X|Y(?:EARWEEK|))(?=\()/ }
|
||||
, id : { exp: /[$\w]+/ }
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
ChiliBook.recipes[ "php.js" ] =
|
||||
{
|
||||
steps: {
|
||||
mlcom : { exp: /\/\*[^*]*\*+([^\/][^*]*\*+)*\// }
|
||||
, com : { exp: /(?:\/\/.*)|(?:[^\\]\#.*)/ }
|
||||
, string1 : { exp: /\'[^\'\\]*(?:\\.[^\'\\]*)*\'/ }
|
||||
, string2 : { exp: /\"[^\"\\]*(?:\\.[^\"\\]*)*\"/ }
|
||||
, value : { exp: /\b(?:[Nn][Uu][Ll][Ll]|[Tt][Rr][Uu][Ee]|[Ff][Aa][Ll][Ss][Ee])\b/ }
|
||||
, number : { exp: /\b[+-]?(\d*\.?\d+|\d+\.?\d*)([eE][+-]?\d+)?\b/ }
|
||||
, const1 : { exp: /\b(?:DEFAULT_INCLUDE_PATH|E_(?:ALL|CO(?:MPILE_(?:ERROR|WARNING)|RE_(?:ERROR|WARNING))|ERROR|NOTICE|PARSE|STRICT|USER_(?:ERROR|NOTICE|WARNING)|WARNING)|P(?:EAR_(?:EXTENSION_DIR|INSTALL_DIR)|HP_(?:BINDIR|CONFIG_FILE_(?:PATH|SCAN_DIR)|DATADIR|E(?:OL|XTENSION_DIR)|INT_(?:MAX|SIZE)|L(?:IBDIR|OCALSTATEDIR)|O(?:S|UTPUT_HANDLER_(?:CONT|END|START))|PREFIX|S(?:API|HLIB_SUFFIX|YSCONFDIR)|VERSION))|__COMPILER_HALT_OFFSET__)\b/ }
|
||||
, const2 : { exp: /\b(?:A(?:B(?:DAY_(?:1|2|3|4|5|6|7)|MON_(?:1(?:0|1|2|)|2|3|4|5|6|7|8|9))|LT_DIGITS|M_STR|SSERT_(?:ACTIVE|BAIL|CALLBACK|QUIET_EVAL|WARNING))|C(?:ASE_(?:LOWER|UPPER)|HAR_MAX|O(?:DESET|NNECTION_(?:ABORTED|NORMAL|TIMEOUT)|UNT_(?:NORMAL|RECURSIVE))|R(?:EDITS_(?:ALL|DOCS|FULLPAGE|G(?:ENERAL|ROUP)|MODULES|QA|SAPI)|NCYSTR|YPT_(?:BLOWFISH|EXT_DES|MD5|S(?:ALT_LENGTH|TD_DES)))|URRENCY_SYMBOL)|D(?:AY_(?:1|2|3|4|5|6|7)|ECIMAL_POINT|IRECTORY_SEPARATOR|_(?:FMT|T_FMT))|E(?:NT_(?:COMPAT|NOQUOTES|QUOTES)|RA(?:_(?:D_(?:FMT|T_FMT)|T_FMT|YEAR)|)|XTR_(?:IF_EXISTS|OVERWRITE|PREFIX_(?:ALL|I(?:F_EXISTS|NVALID)|SAME)|SKIP))|FRAC_DIGITS|GROUPING|HTML_(?:ENTITIES|SPECIALCHARS)|IN(?:FO_(?:ALL|C(?:ONFIGURATION|REDITS)|ENVIRONMENT|GENERAL|LICENSE|MODULES|VARIABLES)|I_(?:ALL|PERDIR|SYSTEM|USER)|T_(?:CURR_SYMBOL|FRAC_DIGITS))|L(?:C_(?:ALL|C(?:OLLATE|TYPE)|M(?:ESSAGES|ONETARY)|NUMERIC|TIME)|O(?:CK_(?:EX|NB|SH|UN)|G_(?:A(?:LERT|UTH(?:PRIV|))|C(?:ONS|R(?:IT|ON))|D(?:AEMON|EBUG)|E(?:MERG|RR)|INFO|KERN|L(?:OCAL(?:0|1|2|3|4|5|6|7)|PR)|MAIL|N(?:DELAY|EWS|O(?:TICE|WAIT))|ODELAY|P(?:ERROR|ID)|SYSLOG|U(?:SER|UCP)|WARNING)))|M(?:ON_(?:1(?:0|1|2|)|2|3|4|5|6|7|8|9|DECIMAL_POINT|GROUPING|THOUSANDS_SEP)|_(?:1_PI|2_(?:PI|SQRTPI)|E|L(?:N(?:10|2)|OG(?:10E|2E))|PI(?:_(?:2|4)|)|SQRT(?:1_2|2)))|N(?:EGATIVE_SIGN|O(?:EXPR|STR)|_(?:CS_PRECEDES|S(?:EP_BY_SPACE|IGN_POSN)))|P(?:ATH(?:INFO_(?:BASENAME|DIRNAME|EXTENSION)|_SEPARATOR)|M_STR|OSITIVE_SIGN|_(?:CS_PRECEDES|S(?:EP_BY_SPACE|IGN_POSN)))|RADIXCHAR|S(?:EEK_(?:CUR|END|SET)|ORT_(?:ASC|DESC|NUMERIC|REGULAR|STRING)|TR_PAD_(?:BOTH|LEFT|RIGHT))|T(?:HOUS(?:ANDS_SEP|EP)|_FMT(?:_AMPM|))|YES(?:EXPR|STR))\b/ }
|
||||
, global : { exp: /(?:\$GLOBALS|\$_COOKIE|\$_ENV|\$_FILES|\$_GET|\$_POST|\$_REQUEST|\$_SERVER|\$_SESSION|\$php_errormsg)\b/ }
|
||||
, keyword : { exp: /\b(?:__CLASS__|__FILE__|__FUNCTION__|__LINE__|__METHOD__|abstract|and|array|as|break|case|catch|cfunction|class|clone|const|continue|declare|default|die|do|echo|else|elseif|empty|enddeclare|endfor|endforeach|endif|endswitch|endwhile|eval|exception|exit|extends|extends|final|for|foreach|function|global|if|implements|include|include_once|interface|isset|list|new|old_function|or|php_user_filter|print|private|protected|public|require|require_once|return|static|switch|this|throw|try|unset|use|var|while|xor)\b/ }
|
||||
, variable: { exp: /\$(\w+)/
|
||||
, replacement: '<span class="keyword">$</span><span class="variable">$1</span>' }
|
||||
, heredoc : { exp: /(\<\<\<\s*)(\w+)((?:(?!\2).*\n)+)(\2)\b/
|
||||
, replacement: '<span class="keyword">$1</span><span class="string1">$2</span><span class="string2">$3</span><span class="string1">$4</span>' }
|
||||
}
|
||||
};
|
||||
|
||||
ChiliBook.recipes[ "css.js" ] =
|
||||
{
|
||||
steps: {
|
||||
mlcom : { exp: /\/\*[^*]*\*+(?:[^\/][^*]*\*+)*\// }
|
||||
, string: { exp: /(?:\'[^\'\\\n]*(?:\\.[^\'\\\n]*)*\')|(?:\"[^\"\\\n]*(?:\\.[^\"\\\n]*)*\")/ }
|
||||
, number: { exp: /(?:\b[+-]?(?:\d*\.?\d+|\d+\.?\d*))(?:%|(?:(?:px|pt|em|)\b))/ }
|
||||
, attrib: { exp: /\b(?:z-index|x-height|word-spacing|widths|width|widows|white-space|volume|voice-family|visibility|vertical-align|units-per-em|unicode-range|unicode-bidi|text-transform|text-shadow|text-indent|text-decoration|text-align|table-layout|stress|stemv|stemh|src|speech-rate|speak-punctuation|speak-numeral|speak-header|speak|slope|size|right|richness|quotes|position|play-during|pitch-range|pitch|pause-before|pause-after|pause|page-break-inside|page-break-before|page-break-after|page|padding-top|padding-right|padding-left|padding-bottom|padding|overflow|outline-width|outline-style|outline-color|outline|orphans|min-width|min-height|max-width|max-height|mathline|marks|marker-offset|margin-top|margin-right|margin-left|margin-bottom|margin|list-style-type|list-style-position|list-style-image|list-style|line-height|letter-spacing|height|font-weight|font-variant|font-style|font-stretch|font-size-adjust|font-size|font-family|font|float|empty-cells|elevation|display|direction|descent|definition-src|cursor|cue-before|cue-after|cue|counter-reset|counter-increment|content|color|clip|clear|centerline|caption-side|cap-height|bottom|border-width|border-top-width|border-top-style|border-top-color|border-top|border-style|border-spacing|border-right-width|border-right-style|border-right-color|border-right|border-left-width|border-left-style|border-left-color|border-left|border-color|border-collapse|border-bottom-width|border-bottom-style|border-bottom-color|border-bottom|border|bbox|baseline|background-repeat|background-position|background-image|background-color|background-attachment|background|azimuth|ascent)\b/ }
|
||||
, value : { exp: /\b(?:xx-small|xx-large|x-soft|x-small|x-slow|x-low|x-loud|x-large|x-high|x-fast|wider|wait|w-resize|visible|url|uppercase|upper-roman|upper-latin|upper-alpha|underline|ultra-expanded|ultra-condensed|tv|tty|transparent|top|thin|thick|text-top|text-bottom|table-row-group|table-row|table-header-group|table-footer-group|table-column-group|table-column|table-cell|table-caption|sw-resize|super|sub|status-bar|static|square|spell-out|speech|solid|soft|smaller|small-caption|small-caps|small|slower|slow|silent|show|separate|semi-expanded|semi-condensed|se-resize|scroll|screen|s-resize|run-in|rtl|rightwards|right-side|right|ridge|rgb|repeat-y|repeat-x|repeat|relative|projection|print|pre|portrait|pointer|overline|outside|outset|open-quote|once|oblique|nw-resize|nowrap|normal|none|no-repeat|no-open-quote|no-close-quote|ne-resize|narrower|n-resize|move|mix|middle|message-box|medium|marker|ltr|lowercase|lower-roman|lower-latin|lower-greek|lower-alpha|lower|low|loud|local|list-item|line-through|lighter|level|leftwards|left-side|left|larger|large|landscape|justify|italic|invert|inside|inset|inline-table|inline|icon|higher|high|hide|hidden|help|hebrew|handheld|groove|format|fixed|faster|fast|far-right|far-left|fantasy|extra-expanded|extra-condensed|expanded|embossed|embed|e-resize|double|dotted|disc|digits|default|decimal-leading-zero|decimal|dashed|cursive|crosshair|cross|crop|counters|counter|continuous|condensed|compact|collapse|code|close-quote|circle|center-right|center-left|center|caption|capitalize|braille|bottom|both|bolder|bold|block|blink|bidi-override|below|behind|baseline|avoid|auto|aural|attr|armenian|always|all|absolute|above)\b/ }
|
||||
, color : { exp: /(?:\#[a-zA-Z0-9]{3,6})|(?:yellow|white|teal|silver|red|purple|olive|navy|maroon|lime|green|gray|fuchsia|blue|black|aqua)/ }
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
ChiliBook.elementPath = '.colored';
|
||||
ChiliBook.elementClass = 'colored';
|
||||
@ -1,177 +0,0 @@
|
||||
var uid = 0;
|
||||
|
||||
/**
|
||||
* Render a demo template page
|
||||
* @author Eduardo Lundgren (braeker)
|
||||
* @param {Object} model
|
||||
*/
|
||||
var uiRenderDemo = function(model) {
|
||||
|
||||
var title = model.title, renderAt = $(model.renderAt);
|
||||
|
||||
function nl2br( str ) {
|
||||
return str.replace(/([^>])\n/g, '$1<br />\n');
|
||||
}
|
||||
|
||||
var js2html = function(code) {
|
||||
var src = (js_beautify(code) || "");
|
||||
|
||||
//if ($.browser.msie)
|
||||
// src = src.replace(/([^>])\n/g, '$1<br />\n');
|
||||
|
||||
return src;
|
||||
};
|
||||
|
||||
renderAt.append(
|
||||
'<h3>'+ title +'</h3>'
|
||||
);
|
||||
|
||||
$.each(model.demos, function(i, demo) {
|
||||
|
||||
/**
|
||||
* Rendering each demo
|
||||
*/
|
||||
|
||||
if (!demo) return;
|
||||
|
||||
var uiHtmlRendered = $('<div class="ui-html-rendered"></div>');
|
||||
|
||||
if (model.onRenderStart) model.onRenderStart.apply(window);
|
||||
|
||||
var gid = 'ui-gen-'+uid++, demoBox = $('<div id="'+gid+'"></div>');
|
||||
|
||||
renderAt.append(demoBox);
|
||||
|
||||
var detailsHtml = $(
|
||||
'<br><div class="ui-details"><div class="menutitle">'+demo.title+'</div></div>'
|
||||
);
|
||||
|
||||
var descBox = $(
|
||||
'<div class="ui-demo-description">'+(demo.desc||'')+'</div>'
|
||||
);
|
||||
|
||||
var optionsBox = $(
|
||||
'<div class="ui-demo-options"><label for="select-'+gid+'">Try more options on the fly: </label></div>'
|
||||
);
|
||||
|
||||
var codesBox = $(
|
||||
'<div id="code-'+gid+'"></div>'
|
||||
)
|
||||
.css({display: 'none'});
|
||||
|
||||
var sourceTmpl = $(
|
||||
'<div></div>'
|
||||
);
|
||||
|
||||
var preTmpl = $(
|
||||
'<span style="white-space: pre;"></span>'
|
||||
);
|
||||
|
||||
var codeTmpl = $(
|
||||
'<code></code>'
|
||||
);
|
||||
|
||||
var htmlCode = '', sourceHtml = sourceTmpl.clone(), sourceJs = sourceTmpl.clone(), entitiesHtml = function(html) {
|
||||
return html.replace(/</g,"<").replace(/>/g,">");
|
||||
};
|
||||
|
||||
// Render simple HTML
|
||||
if (typeof demo.html == 'string') {
|
||||
uiHtmlRendered.html(demo.html);
|
||||
htmlCode = demo.html;
|
||||
}
|
||||
// Render data html by URL
|
||||
if (typeof demo.html == 'object' && demo.html.url) {
|
||||
|
||||
uiHtmlRendered.html("<img src='/images/ajax-loader.gif'>");
|
||||
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: demo.html.url,
|
||||
cache: false,
|
||||
success: function(data) {
|
||||
uiHtmlRendered.html(data);
|
||||
htmlCode = data;
|
||||
|
||||
// set html code view
|
||||
sourceHtml.html(preTmpl.clone().html( codeTmpl.clone().addClass('colored html').html(entitiesHtml(htmlCode)) ));
|
||||
|
||||
$.each(demo.options, function(x, o) {
|
||||
// eval the first source of <select>
|
||||
if (!x) jQuery.globalEval(o.source);
|
||||
});
|
||||
|
||||
$('#'+gid).find('.colored.html').chili();
|
||||
|
||||
// fire renderEnd callback to ajax async transactions
|
||||
if (model.onRenderEnd) model.onRenderEnd.apply(window);
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
// set html code view
|
||||
sourceHtml.html(preTmpl.clone().html( codeTmpl.clone().addClass('colored html').html(entitiesHtml(htmlCode)) ));
|
||||
|
||||
var select = $('<select id="select-'+ gid+'"></select>').change(function() {
|
||||
var ecode = decodeURIComponent($(this).val());
|
||||
|
||||
jQuery.globalEval(demo.destroy);
|
||||
jQuery.globalEval(ecode);
|
||||
|
||||
sourceJs.html(preTmpl.html( codeTmpl.clone().addClass('colored javascript').html(js2html(ecode, 4)) ));
|
||||
$('.colored.javascript').chili();
|
||||
});
|
||||
|
||||
var a = $('<a>View Source</a>').attr('href', 'javascript:void(0);').addClass('link-view-source').toggle(function() {
|
||||
var self = this;
|
||||
$(codesBox).show("fast");
|
||||
$(this).text("Hide Source");
|
||||
},
|
||||
function() {
|
||||
$(codesBox).hide();
|
||||
$(this).text("Show Source");
|
||||
});
|
||||
|
||||
demoBox.append(
|
||||
detailsHtml, descBox, uiHtmlRendered, optionsBox.append(
|
||||
select, a, '<br>', codesBox.append('<br>JavaScript:<br>', sourceJs, '<br>HTML:<br>', sourceHtml)
|
||||
)
|
||||
);
|
||||
|
||||
// population select with the demo options
|
||||
$.each(demo.options, function(x, o) {
|
||||
if (o && o.desc) {
|
||||
var source = encodeURIComponent(o.source);
|
||||
select.append($('<option>' + o.desc + '</option>').val(source));
|
||||
// eval the first source of <select>
|
||||
if (!x) {
|
||||
sourceJs.html(preTmpl.html(codeTmpl.clone().addClass('colored javascript').html(js2html(o.source, 4))));
|
||||
jQuery.globalEval(o.source);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$('#'+gid).find('.colored.javascript').chili();
|
||||
$('#'+gid).find('.colored.html').chili();
|
||||
|
||||
// fire renderEnd callback to direct-html-render
|
||||
if (typeof demo.html != 'object' && model.onRenderEnd) model.onRenderEnd.apply(window);
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
var loadDemo = function(comp) {
|
||||
|
||||
$("#dialog").dialog().remove();
|
||||
|
||||
$('#containerDemo').html("<img src='images/ajax-loader.gif'>");
|
||||
|
||||
$("#containerDemo").ajaxError(function(request, settings){
|
||||
$(this).html("Oops, there is no template file for this component.");
|
||||
});
|
||||
|
||||
$.get('templates/'+comp+'.html', function(data) {
|
||||
$('#containerDemo').html(data);
|
||||
});
|
||||
|
||||
};
|
||||
@ -1,12 +0,0 @@
|
||||
/*
|
||||
===============================================================================
|
||||
Chili is the jQuery code highlighter plugin
|
||||
...............................................................................
|
||||
LICENSE: http://www.opensource.org/licenses/mit-license.php
|
||||
WEBSITE: http://noteslog.com/chili/
|
||||
|
||||
Copyright 2007 / Andrea Ercolino
|
||||
===============================================================================
|
||||
*/
|
||||
|
||||
(function($){ChiliBook={version:"1.9",automatic:true,automaticSelector:"code",codeLanguage:function(a){var b=$(a).attr("class");return b?b:''},metadataSelector:"object.chili",recipeLoading:true,recipeFolder:"",stylesheetLoading:true,stylesheetFolder:"",defaultReplacement:'<span class="$0">$$</span>',replaceSpace:" ",replaceTab:"    ",replaceNewLine:" <br/>",recipes:{},queue:{},preFixCopy:document.selection&&document.selection.createRange,preContent:"",preElement:null};$.metaobjects=function(c){c=$.extend({context:document,clean:true,selector:'object.metaobject'},c);function jsValue(a){eval('value = '+a+";");return a}return $(c.selector,c.context).each(function(){var b={target:this.parentNode};$('> param[@name=metaparam]',this).each(function(){$.extend(b,jsValue(this.value))});$('> param',this).not('[@name=metaparam]').each(function(){var a=this.name,value=jsValue(this.value);$(b.target).each(function(){this[a]=value})});if(c.clean){$(this).remove()}})};$.fn.chili=function(r){var s=$.extend({},ChiliBook,r||{});function cook(k,l){function prepareStep(a,b){var c=(typeof b.exp=="string")?b.exp:b.exp.source;o.push({stepName:a,exp:"("+c+")",length:1+(c.replace(/\\./g,"%").replace(/\[.*?\]/g,"%").match(/\((?!\?)/g)||[]).length,replacement:(b.replacement)?b.replacement:s.defaultReplacement})}function knowHow(){var b=1;var c=[];for(var i=0;i<o.length;i++){var d=o[i].exp;d=d.replace(/\\\\|\\(\d+)/g,function(m,a){return!a?m:"\\"+(b+1+parseInt(a,10))});c.push(d);b+=o[i].length}var e='((?:\\s|\\S)*?)';var f='((?:\\s|\\S)+)';var g='(?:'+c.join("|")+')';g=e+g+'|'+f;return new RegExp(g,(l.ignoreCase)?"gi":"g")}function escapeHTML(a){return a.replace(/&/g,"&").replace(/</g,"<")}function replaceSpaces(b){return b.replace(/ +/g,function(a){return a.replace(/ /g,n)})}function filter(a){a=escapeHTML(a);if(n){a=replaceSpaces(a)}return a}function chef(){var i=0;var j=2;var c=arguments[1];var d=arguments[arguments.length-3];if(!d){var e;while(e=o[i++]){var f=arguments;if(f[j]){var g=/(\\\$)|(?:\$\$)|(?:\$(\d+))/g;var h=e.replacement.replace(g,function(m,a,K){var b='';if(a){return"$"}else if(!K){return filter(f[j])}else if(K=="0"){return e.stepName}else{return filter(f[j+parseInt(K,10)])}});return filter(c)+h}else{j+=e.length}}}else{return filter(d)}}var n=s.replaceSpace;var o=[];for(var p in l.steps){prepareStep(p,l.steps[p])}var q=k.replace(knowHow(),chef);return q}function checkCSS(a){if(!s.queue[a]){var e=document.createElement("link");e.rel="stylesheet";e.type="text/css";e.href=a;document.getElementsByTagName("head")[0].appendChild(e);s.queue[a]=true}}function makeDish(a,b){var c=s.recipes[b];if(!c){return}$el=$(a);var d=$el.text();if(!d){return}d=d.replace(/\r\n?/g,"\n");var e=cook(d,c);if(s.replaceTab){e=e.replace(/\t/g,s.replaceTab)}if(s.replaceNewLine){e=e.replace(/\n/g,s.replaceNewLine)}a.innerHTML=e;if(ChiliBook.preFixCopy){$el.parents().filter("pre").bind("mousedown",function(){ChiliBook.preElement=this}).bind("mouseup",function(){if(ChiliBook.preElement==this){ChiliBook.preContent=document.selection.createRange().htmlText}})}}function getPath(a,b){var c={recipeFolder:s.recipeFolder,recipeFile:a+".js",stylesheetFolder:s.stylesheetFolder,stylesheetFile:a+".css"};var d;if(b&&typeof b=="object"){d=$.extend(c,b)}else{d=c}return{recipe:d.recipeFolder+d.recipeFile,stylesheet:d.stylesheetFolder+d.stylesheetFile}}if(s.metadataSelector){$.metaobjects({context:this,selector:s.metadataSelector})}this.each(function(){var b=this;var c=s.codeLanguage(b);if(''!=c){var d=getPath(c,b.chili);if(s.recipeLoading||b.chili){if(!s.queue[d.recipe]){try{s.queue[d.recipe]=[b];$.getJSON(d.recipe,function(a){a.path=d.recipe;s.recipes[d.recipe]=a;if(s.stylesheetLoading){checkCSS(d.stylesheet)}var q=s.queue[d.recipe];for(var i=0,iTop=q.length;i<iTop;i++){makeDish(q[i],d.recipe)}})}catch(recipeNotAvailable){alert("the recipe for '"+c+"' was not found in '"+d.recipe+"'")}}else{s.queue[d.recipe].push(b)}makeDish(b,d.recipe)}else{makeDish(b,d.recipe)}}});return this};$(function(){if(ChiliBook.automatic){if(ChiliBook.elementPath){ChiliBook.automaticSelector=ChiliBook.elementPath;if(ChiliBook.elementClass){ChiliBook.codeLanguage=function(a){var b=new RegExp("\\b"+ChiliBook.elementClass+"\\b","gi");var c=$(a).attr("class");if(!c){return''}var d=$.trim(c.replace(b,""));return d}}}$(ChiliBook.automaticSelector).chili()}if(ChiliBook.preFixCopy){function preformatted(a){if(''==a){return""}do{var b=(new Date()).valueOf()}while(a.indexOf(b)>-1);a=a.replace(/\<br[^>]*?\>/ig,b);var c=document.createElement('<pre>');c.innerHTML=a;a=c.innerText.replace(new RegExp(b,"g"),'\r\n');return a}$("body").bind("copy",function(){if(''!=ChiliBook.preContent){window.clipboardData.setData('Text',preformatted(ChiliBook.preContent));event.returnValue=false}}).bind("mousedown",function(){ChiliBook.preContent=""}).bind("mouseup",function(){ChiliBook.preElement=null})}})})(jQuery);
|
||||
@ -1,342 +0,0 @@
|
||||
/**
|
||||
* History/Remote - jQuery plugin for enabling history support and bookmarking
|
||||
* @requires jQuery v1.0.3
|
||||
*
|
||||
* http://stilbuero.de/jquery/history/
|
||||
*
|
||||
* Copyright (c) 2006 Klaus Hartl (stilbuero.de)
|
||||
* Dual licensed under the MIT and GPL licenses:
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
* http://www.gnu.org/licenses/gpl.html
|
||||
*
|
||||
* Version: 0.2.3
|
||||
*/
|
||||
|
||||
(function($) { // block scope
|
||||
|
||||
/**
|
||||
* Initialize the history manager. Subsequent calls will not result in additional history state change
|
||||
* listeners. Should be called soonest when the DOM is ready, because in IE an iframe needs to be added
|
||||
* to the body to enable history support.
|
||||
*
|
||||
* @example $.ajaxHistory.initialize();
|
||||
*
|
||||
* @param Function callback A single function that will be executed in case there is no fragment
|
||||
* identifier in the URL, for example after navigating back to the initial
|
||||
* state. Use to restore such an initial application state.
|
||||
* Optional. If specified it will overwrite the default action of
|
||||
* emptying all containers that are used to load content into.
|
||||
* @type undefined
|
||||
*
|
||||
* @name $.ajaxHistory.initialize()
|
||||
* @cat Plugins/History
|
||||
* @author Klaus Hartl/klaus.hartl@stilbuero.de
|
||||
*/
|
||||
$.ajaxHistory = new function() {
|
||||
|
||||
var RESET_EVENT = 'historyReset';
|
||||
|
||||
var _currentHash = location.hash;
|
||||
var _intervalId = null;
|
||||
var _observeHistory; // define outside if/else required by Opera
|
||||
|
||||
this.update = function() { }; // empty function body for graceful degradation
|
||||
|
||||
// create custom event for state reset
|
||||
var _defaultReset = function() {
|
||||
$('.remote-output').empty();
|
||||
};
|
||||
$(document).bind(RESET_EVENT, _defaultReset);
|
||||
|
||||
// TODO fix for Safari 3
|
||||
// if ($.browser.msie)
|
||||
// else if hash != _currentHash
|
||||
// else check history length
|
||||
|
||||
if ($.browser.msie) {
|
||||
|
||||
var _historyIframe, initialized = false; // for IE
|
||||
|
||||
// add hidden iframe
|
||||
$(function() {
|
||||
_historyIframe = $('<iframe style="display: none;"></iframe>').appendTo(document.body).get(0);
|
||||
var iframe = _historyIframe.contentWindow.document;
|
||||
// create initial history entry
|
||||
iframe.open();
|
||||
iframe.close();
|
||||
if (_currentHash && _currentHash != '#') {
|
||||
iframe.location.hash = _currentHash.replace('#', '');
|
||||
}
|
||||
});
|
||||
|
||||
this.update = function(hash) {
|
||||
_currentHash = hash;
|
||||
var iframe = _historyIframe.contentWindow.document;
|
||||
iframe.open();
|
||||
iframe.close();
|
||||
iframe.location.hash = hash.replace('#', '');
|
||||
};
|
||||
|
||||
_observeHistory = function() {
|
||||
var iframe = _historyIframe.contentWindow.document;
|
||||
var iframeHash = iframe.location.hash;
|
||||
if (iframeHash != _currentHash) {
|
||||
_currentHash = iframeHash;
|
||||
if (iframeHash && iframeHash != '#') {
|
||||
// order does matter, set location.hash after triggering the click...
|
||||
$('a[@href$="' + iframeHash + '"]').click();
|
||||
location.hash = iframeHash;
|
||||
} else if (initialized) {
|
||||
location.hash = '';
|
||||
$(document).trigger(RESET_EVENT);
|
||||
}
|
||||
}
|
||||
initialized = true;
|
||||
};
|
||||
|
||||
} else if ($.browser.mozilla || $.browser.opera) {
|
||||
|
||||
this.update = function(hash) {
|
||||
_currentHash = hash;
|
||||
};
|
||||
|
||||
_observeHistory = function() {
|
||||
if (location.hash) {
|
||||
if (_currentHash != location.hash) {
|
||||
_currentHash = location.hash;
|
||||
$('a[@href$="' + _currentHash + '"]').click();
|
||||
}
|
||||
} else if (_currentHash) {
|
||||
_currentHash = '';
|
||||
$(document).trigger(RESET_EVENT);
|
||||
}
|
||||
};
|
||||
|
||||
} else if ($.browser.safari) {
|
||||
|
||||
var _backStack, _forwardStack, _addHistory; // for Safari
|
||||
|
||||
// etablish back/forward stacks
|
||||
$(function() {
|
||||
_backStack = [];
|
||||
_backStack.length = history.length;
|
||||
_forwardStack = [];
|
||||
|
||||
});
|
||||
var isFirst = false, initialized = false;
|
||||
_addHistory = function(hash) {
|
||||
_backStack.push(hash);
|
||||
_forwardStack.length = 0; // clear forwardStack (true click occured)
|
||||
isFirst = false;
|
||||
};
|
||||
|
||||
this.update = function(hash) {
|
||||
_currentHash = hash;
|
||||
_addHistory(_currentHash);
|
||||
};
|
||||
|
||||
_observeHistory = function() {
|
||||
var historyDelta = history.length - _backStack.length;
|
||||
if (historyDelta) { // back or forward button has been pushed
|
||||
isFirst = false;
|
||||
if (historyDelta < 0) { // back button has been pushed
|
||||
// move items to forward stack
|
||||
for (var i = 0; i < Math.abs(historyDelta); i++) _forwardStack.unshift(_backStack.pop());
|
||||
} else { // forward button has been pushed
|
||||
// move items to back stack
|
||||
for (var i = 0; i < historyDelta; i++) _backStack.push(_forwardStack.shift());
|
||||
}
|
||||
var cachedHash = _backStack[_backStack.length - 1];
|
||||
$('a[@href$="' + cachedHash + '"]').click();
|
||||
_currentHash = location.hash;
|
||||
} else if (_backStack[_backStack.length - 1] == undefined && !isFirst) {
|
||||
// back button has been pushed to beginning and URL already pointed to hash (e.g. a bookmark)
|
||||
// document.URL doesn't change in Safari
|
||||
if (document.URL.indexOf('#') >= 0) {
|
||||
$('a[@href$="' + '#' + document.URL.split('#')[1] + '"]').click();
|
||||
} else if (initialized) {
|
||||
$(document).trigger(RESET_EVENT);
|
||||
}
|
||||
isFirst = true;
|
||||
}
|
||||
initialized = true;
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
this.initialize = function(callback) {
|
||||
// custom callback to reset app state (no hash in url)
|
||||
if (typeof callback == 'function') {
|
||||
$(document).unbind(RESET_EVENT, _defaultReset).bind(RESET_EVENT, callback);
|
||||
}
|
||||
// look for hash in current URL (not Safari)
|
||||
if (location.hash && typeof _addHistory == 'undefined') {
|
||||
$('a[@href$="' + location.hash + '"]').trigger('click');
|
||||
}
|
||||
// start observer
|
||||
if (_observeHistory && _intervalId == null) {
|
||||
_intervalId = setInterval(_observeHistory, 200); // Safari needs at least 200 ms
|
||||
}
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Implement Ajax driven links in a completely unobtrusive and accessible manner (also known as "Hijax")
|
||||
* with support for the browser's back/forward navigation buttons and bookmarking.
|
||||
*
|
||||
* The link's href attribute gets altered to a fragment identifier, such as "#remote-1", so that the browser's
|
||||
* URL gets updated on each click, whereas the former value of that attribute is used to load content via
|
||||
* XmlHttpRequest from and update the specified element. If no target element is found, a new div element will be
|
||||
* created and appended to the body to load the content into. The link informs the history manager of the
|
||||
* state change on click and adds an entry to the browser's history.
|
||||
*
|
||||
* jQuery's Ajax implementation adds a custom request header of the form "X-Requested-With: XmlHttpRequest"
|
||||
* to any Ajax request so that the called page can distinguish between a standard and an Ajax (XmlHttpRequest)
|
||||
* request.
|
||||
*
|
||||
* @example $('a.remote').remote('#output');
|
||||
* @before <a class="remote" href="/path/to/content.html">Update</a>
|
||||
* @result <a class="remote" href="#remote-1">Update</a>
|
||||
* @desc Alter a link of the class "remote" to an Ajax-enhanced link and let it load content from
|
||||
* "/path/to/content.html" via XmlHttpRequest into an element with the id "output".
|
||||
* @example $('a.remote').remote('#output', {hashPrefix: 'chapter'});
|
||||
* @before <a class="remote" href="/path/to/content.html">Update</a>
|
||||
* @result <a class="remote" href="#chapter-1">Update</a>
|
||||
* @desc Alter a link of the class "remote" to an Ajax-enhanced link and let it load content from
|
||||
* "/path/to/content.html" via XmlHttpRequest into an element with the id "output".
|
||||
*
|
||||
* @param String expr A string containing a CSS selector or basic XPath specifying the element to load
|
||||
* content into via XmlHttpRequest.
|
||||
* @param Object settings An object literal containing key/value pairs to provide optional settings.
|
||||
* @option String hashPrefix A String that is used for constructing the hash the link's href attribute
|
||||
* gets altered to, such as "#remote-1". Default value: "remote-".
|
||||
* @param Function callback A single function that will be executed when the request is complete.
|
||||
* @type jQuery
|
||||
*
|
||||
* @name remote
|
||||
* @cat Plugins/Remote
|
||||
* @author Klaus Hartl/klaus.hartl@stilbuero.de
|
||||
*/
|
||||
|
||||
/**
|
||||
* Implement Ajax driven links in a completely unobtrusive and accessible manner (also known as "Hijax")
|
||||
* with support for the browser's back/forward navigation buttons and bookmarking.
|
||||
*
|
||||
* The link's href attribute gets altered to a fragment identifier, such as "#remote-1", so that the browser's
|
||||
* URL gets updated on each click, whereas the former value of that attribute is used to load content via
|
||||
* XmlHttpRequest from and update the specified element. If no target element is found, a new div element will be
|
||||
* created and appended to the body to load the content into. The link informs the history manager of the
|
||||
* state change on click and adds an entry to the browser's history.
|
||||
*
|
||||
* jQuery's Ajax implementation adds a custom request header of the form "X-Requested-With: XmlHttpRequest"
|
||||
* to any Ajax request so that the called page can distinguish between a standard and an Ajax (XmlHttpRequest)
|
||||
* request.
|
||||
*
|
||||
* @example $('a.remote').remote( $('#output > div')[0] );
|
||||
* @before <a class="remote" href="/path/to/content.html">Update</a>
|
||||
* @result <a class="remote" href="#remote-1">Update</a>
|
||||
* @desc Alter a link of the class "remote" to an Ajax-enhanced link and let it load content from
|
||||
* "/path/to/content.html" via XmlHttpRequest into an element with the id "output".
|
||||
* @example $('a.remote').remote('#output', {hashPrefix: 'chapter'});
|
||||
* @before <a class="remote" href="/path/to/content.html">Update</a>
|
||||
* @result <a class="remote" href="#chapter-1">Update</a>
|
||||
* @desc Alter a link of the class "remote" to an Ajax-enhanced link and let it load content from
|
||||
* "/path/to/content.html" via XmlHttpRequest into an element with the id "output".
|
||||
*
|
||||
* @param Element elem A DOM element to load content into via XmlHttpRequest.
|
||||
* @param Object settings An object literal containing key/value pairs to provide optional settings.
|
||||
* @option String hashPrefix A String that is used for constructing the hash the link's href attribute
|
||||
* gets altered to, such as "#remote-1". Default value: "remote-".
|
||||
* @param Function callback A single function that will be executed when the request is complete.
|
||||
* @type jQuery
|
||||
*
|
||||
* @name remote
|
||||
* @cat Plugins/Remote
|
||||
* @author Klaus Hartl/klaus.hartl@stilbuero.de
|
||||
*/
|
||||
$.fn.remote = function(output, settings, callback) {
|
||||
|
||||
callback = callback || function() {};
|
||||
if (typeof settings == 'function') { // shift arguments
|
||||
callback = settings;
|
||||
}
|
||||
|
||||
settings = $.extend({
|
||||
hashPrefix: 'remote-'
|
||||
}, settings || {});
|
||||
|
||||
var target = $(output).size() && $(output) || $('<div></div>').appendTo('body');
|
||||
target.addClass('remote-output');
|
||||
|
||||
return this.each(function(i) {
|
||||
var href = this.href, hash = '#' + (this.title && this.title.replace(/\s/g, '_') || settings.hashPrefix + (i + 1)),
|
||||
a = this;
|
||||
this.href = hash;
|
||||
$(this).click(function(e) {
|
||||
// lock target to prevent double loading in Firefox
|
||||
if (!target['locked']) {
|
||||
// add to history only if true click occured, not a triggered click
|
||||
if (e.clientX) {
|
||||
$.ajaxHistory.update(hash);
|
||||
}
|
||||
target.load(href, function() {
|
||||
target['locked'] = null;
|
||||
callback.apply(a);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Provides the ability to use the back/forward navigation buttons in a DHTML application.
|
||||
* A change of the application state is reflected by a change of the URL fragment identifier.
|
||||
*
|
||||
* The link's href attribute needs to point to a fragment identifier within the same resource,
|
||||
* although that fragment id does not need to exist. On click the link changes the URL fragment
|
||||
* identifier, informs the history manager of the state change and adds an entry to the browser's
|
||||
* history.
|
||||
*
|
||||
* @param Function callback A single function that will be executed as the click handler of the
|
||||
* matched element. It will be executed on click (adding an entry to
|
||||
* the history) as well as in case the history manager needs to trigger
|
||||
* it depending on the value of the URL fragment identifier, e.g. if its
|
||||
* current value matches the href attribute of the matched element.
|
||||
*
|
||||
* @type jQuery
|
||||
*
|
||||
* @name history
|
||||
* @cat Plugins/History
|
||||
* @author Klaus Hartl/klaus.hartl@stilbuero.de
|
||||
*/
|
||||
$.fn.history = function(callback) {
|
||||
return this.click(function(e) {
|
||||
// add to history only if true click occured,
|
||||
// not a triggered click...
|
||||
if (e.clientX) {
|
||||
// ...and die if already active
|
||||
if (this.hash == location.hash) {
|
||||
return false;
|
||||
}
|
||||
$.ajaxHistory.update(this.hash);
|
||||
}
|
||||
if (typeof callback == 'function') {
|
||||
callback.call(this);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
|
||||
/*
|
||||
var logger;
|
||||
$(function() {
|
||||
logger = $('<div style="position: fixed; top: 0; overflow: hidden; border: 1px solid; padding: 3px; width: 120px; height: 150px; background: #fff; color: red;"></div>').appendTo(document.body);
|
||||
});
|
||||
function log(m) {
|
||||
logger.prepend(m + '<br />');
|
||||
};
|
||||
*/
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 863 B |
Binary file not shown.
|
Before Width: | Height: | Size: 941 B |
Binary file not shown.
|
Before Width: | Height: | Size: 925 B |
Binary file not shown.
|
Before Width: | Height: | Size: 269 B |
Binary file not shown.
|
Before Width: | Height: | Size: 192 B |
Binary file not shown.
|
Before Width: | Height: | Size: 169 B |
Binary file not shown.
|
Before Width: | Height: | Size: 856 B |
Binary file not shown.
|
Before Width: | Height: | Size: 840 B |
Binary file not shown.
|
Before Width: | Height: | Size: 875 B |
Binary file not shown.
|
Before Width: | Height: | Size: 948 B |
Binary file not shown.
|
Before Width: | Height: | Size: 903 B |
Binary file not shown.
|
Before Width: | Height: | Size: 71 B |
Binary file not shown.
|
Before Width: | Height: | Size: 925 B |
Binary file not shown.
|
Before Width: | Height: | Size: 72 B |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 892 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 896 B |
Binary file not shown.
|
Before Width: | Height: | Size: 832 B |
Binary file not shown.
|
Before Width: | Height: | Size: 900 B |
@ -1,23 +0,0 @@
|
||||
<ul id="accordionDemo" style="width: 200px; height: 450px;">
|
||||
<li class="ui-accordion-group">
|
||||
<h3 class="ui-accordion-header">
|
||||
<a href='#'>Test 1</a>
|
||||
</h3>
|
||||
<div class="ui-accordion-data">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</div>
|
||||
</li>
|
||||
<li class="ui-accordion-group">
|
||||
<h3 class="ui-accordion-header">
|
||||
<a href='#'>Test 2</a>
|
||||
</h3>
|
||||
<div class="ui-accordion-data">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
</div>
|
||||
</li>
|
||||
<li class="ui-accordion-group">
|
||||
<h3 class="ui-accordion-header">
|
||||
<a href='#'>Test 3</a>
|
||||
</h3>
|
||||
<div class="ui-accordion-data">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
@ -1,33 +0,0 @@
|
||||
<script type="text/javascript">
|
||||
|
||||
var model = {
|
||||
|
||||
renderAt: '#containerDemo',
|
||||
|
||||
title: 'Accordion Demos',
|
||||
|
||||
desc: 'Simple accordion',
|
||||
|
||||
demos: [
|
||||
|
||||
{
|
||||
title: 'Simple accordion',
|
||||
html: { url: 'templates/ui.accordion.data.html' },
|
||||
destroy: '$("#accordionDemo").accordion("destroy");',
|
||||
|
||||
options: [
|
||||
{ desc: 'Simple Accordion Mouse over', source: '$("#accordionDemo").accordion({event: "mouseover", header:".ui-accordion-header"});' },
|
||||
{ desc: 'Simple Accordion', source: '$("#accordionDemo").accordion({ header: ".ui-accordion-header"});' }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
};
|
||||
|
||||
$(function(){
|
||||
|
||||
uiRenderDemo(model);
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -1,40 +0,0 @@
|
||||
<input type="text" size="10" value="" id="dayByDay"/>
|
||||
<style type="text/css">
|
||||
.ar_day { color: white !important; background: #eee url(templates/images/ar.gif) no-repeat center !important; }
|
||||
.au_day { color: blue !important; background: #eee url(templates/images/au.gif) no-repeat center !important; }
|
||||
.br_day { color: green !important; background: #eee url(templates/images/br.gif) no-repeat center !important; }
|
||||
.cn_day { color: red !important; background: #eee url(templates/images/cn.gif) no-repeat center !important; }
|
||||
.id_day { color: white !important; background: #eee url(templates/images/id.gif) no-repeat center !important; }
|
||||
.ie_day { color: white !important; background: #eee url(templates/images/ie.gif) no-repeat center !important; }
|
||||
.ke_day { color: red !important; background: #eee url(templates/images/ke.gif) no-repeat center !important; }
|
||||
.lb_day { color: white !important; background: #eee url(templates/images/lb.gif) no-repeat center !important; }
|
||||
.nz_day { color: blue !important; background: #eee url(templates/images/nz.gif) no-repeat center !important; }
|
||||
.se_day { color: blue !important; background: #eee url(templates/images/se.gif) no-repeat center !important; }
|
||||
.us_day { color: white !important; background: #eee url(templates/images/us.gif) no-repeat center !important; }
|
||||
.za_day { color: green !important; background: #eee url(templates/images/za.gif) no-repeat center !important; }
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
var natDays = [[1, 26, "au"], [2, 6, "nz"], [3, 17, "ie"], [4, 27, "za"], [5, 25, "ar"], [6, 6, "se"],
|
||||
[7, 4, "us"], [8, 17, "id"], [9, 7, "br"], [10, 1, "cn"], [11, 22, "lb"], [12, 12, "ke"]];
|
||||
|
||||
function nationalDays(date) {
|
||||
for (i = 0; i < natDays.length; i++) {
|
||||
if (date.getMonth() == natDays[i][0] - 1 && date.getDate() == natDays[i][1]) {
|
||||
return [false, natDays[i][2] + "_day"];
|
||||
}
|
||||
}
|
||||
return [true, ""];
|
||||
}
|
||||
|
||||
function highlightToday(date, inst) {
|
||||
var today = new Date();
|
||||
today = new Date(today.getFullYear(), today.getMonth(), today.getDate());
|
||||
return $.datepicker.dateStatus(date, inst) +
|
||||
(today.getTime() == date.getTime() ? " (today)" : "");
|
||||
}
|
||||
|
||||
function showDayOfYear(date) {
|
||||
var lastYearEnd = new Date(date.getFullYear() - 1, 12 - 1, 31, 0, 0, 0, 0);
|
||||
return [true, "", "Day " + ((date.getTime() - lastYearEnd.getTime()) / 86400000) + " of the year"];
|
||||
}
|
||||
</script>
|
||||
@ -1,6 +0,0 @@
|
||||
<input type="text" size="10" value="" id="dialog" readonly="readonly"/> <button id="dialogButton" type="button">Open dialog</button>
|
||||
<script type="text/javascript">
|
||||
function setDateFromDialog(date) {
|
||||
$("#dialog").val(date);
|
||||
}
|
||||
</script>
|
||||
@ -1,415 +0,0 @@
|
||||
<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 = {
|
||||
|
||||
renderAt: '#containerDemo',
|
||||
|
||||
title: 'Datepicker Demos',
|
||||
|
||||
demos: [
|
||||
|
||||
{
|
||||
title: 'Datepicker Basics',
|
||||
desc: 'A datepicker can easily be added to an input field with default settings:' +
|
||||
'<ul style="list-style: disc; padding-left: 2em;"><li>Datepicker appears on focus</li>' +
|
||||
'<li>Text is in English</li>' +
|
||||
'<li>Date format is mm/dd/yyyy</li>' +
|
||||
'<li>Clear/Close controls show at the top</li>' +
|
||||
'<li>Month and year are selectable directly</li>' +
|
||||
'<li>10 years before and after the current year are shown</li>' +
|
||||
'<li>Show a single month</li>' +
|
||||
'<li>Select a single date</li>' +
|
||||
'<li>Week starts on Sunday</li>' +
|
||||
'<li>Day names are clickable to change the first day of the week</li>' +
|
||||
'<li>Days in other months are not displayed</li>' +
|
||||
'<li>No date restrictions</li>' +
|
||||
'<li>Clicking elsewhere closes the date picker</li></ul>',
|
||||
html: '<input type="text" size="10" value="click here" id="basics"/>\n' +
|
||||
'<style type="text/css">.embed + img { position: relative; left: -21px; top: -1px; }</style>',
|
||||
destroy: '$("#basics").removeClass("embed").datepicker("enable").datepicker("destroy");',
|
||||
|
||||
options: [
|
||||
{ desc: 'Default datepicker - open on focus', source: '$("#basics").datepicker();' },
|
||||
{ desc: 'Open on button only', source: '$("#basics").datepicker({showOn: "button"});' },
|
||||
{ desc: 'Open on image button only', source: '$("#basics").datepicker({showOn: "button", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Open on focus or button', source: '$("#basics").datepicker({showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Embed the button in the input (with CSS)', source: '$("#basics").datepicker({showOn: "button", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}).addClass("embed");' },
|
||||
{ desc: 'Disabled datepicker', source: '$("#basics").datepicker({showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}).datepicker("disable");' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Keystrokes',
|
||||
desc: 'You can use the keyboard to enter dates and to control the datepicker:' +
|
||||
'<ul style="list-style: disc; padding-left: 2em;"><li>page up/down - previous/next month (based on <i>stepMonths</i>)</li>' +
|
||||
'<li>ctrl+page up/down - previous/next year (based on <i>stepBigMonths</i>)</li>' +
|
||||
'<li>ctrl+home - current month or open when closed</li>' +
|
||||
'<li>ctrl+left/right - previous/next day</li>' +
|
||||
'<li>ctrl+up/down - previous/next week</li>' +
|
||||
'<li>enter - accept the selected date</li>' +
|
||||
'<li>ctrl+end - close and erase the date</li>' +
|
||||
'<li>escape - close the datepicker without selection</li></ul>',
|
||||
html: '<input type="text" size="10" value="" id="keys"/>',
|
||||
destroy: '$("#keys").removeAttr("readonly").datepicker("destroy");',
|
||||
|
||||
options: [
|
||||
{ desc: 'Default datepicker', source: '$("#keys").datepicker({showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Readonly input', source: '$("#keys").datepicker({showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}).attr("readonly", "readonly");' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Restricting Datepicker',
|
||||
desc: 'A datepicker can have its basic functionality restricted in various ways.',
|
||||
html: '<input type="text" size="10" value="" id="restricting"/>',
|
||||
destroy: '$("#restricting").datepicker("destroy");',
|
||||
|
||||
options: [
|
||||
{ desc: 'First day of week is Monday and can\'t change it', source: '$("#restricting").datepicker({firstDay: 1, changeFirstDay: false, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Can\'t change month/year from dropdowns', source: '$("#restricting").datepicker({changeMonth: false, changeYear: false, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Year dropdown shows last 20 years', source: '$("#restricting").datepicker({yearRange: "-20:+0", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Year dropdown shows 2000 to 2010', source: '$("#restricting").datepicker({yearRange: "2000:2010", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Dates from Jan 26 2005 to Jan 26 2007 only', source: '$("#restricting").datepicker({minDate: new Date(2005, 1 - 1, 26), maxDate: new Date(2007, 1 - 1, 26), showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Dates within the next 365 days only', source: '$("#restricting").datepicker({minDate: 0, maxDate: 365, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Dates from yesterday to 6 years away only', source: '$("#restricting").datepicker({minDate: "-1d", maxDate: "6y", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Date Formats',
|
||||
desc: 'A datepicker can display its value in numerous formats, with the default being "mm/dd/yy". ' +
|
||||
'The formatting codes are:' +
|
||||
'<ul style="list-style: disc; padding-left: 2em;"><li>d - day of month (no leading zero)</li>' +
|
||||
'<li>dd - day of month (two digit)</li>' +
|
||||
'<li>D - day name short</li>' +
|
||||
'<li>DD - day name long</li>' +
|
||||
'<li>m - month of year (no leading zero)</li>' +
|
||||
'<li>mm - month of year (two digit)</li>' +
|
||||
'<li>M - month name short</li>' +
|
||||
'<li>MM - month name long</li>' +
|
||||
'<li>y - year (two digit)</li>' +
|
||||
'<li>yy - year (four digit)</li>' +
|
||||
'<li>@ - Unix timestamp (ms since 01/01/1970)</li>' +
|
||||
'<li>\'...\' - literal text</li>' +
|
||||
'<li>\'\' - single quote</li></ul>',
|
||||
html: '<input type="text" size="30" value="" id="formatted"/>',
|
||||
destroy: '$("#formatted").datepicker("destroy");',
|
||||
|
||||
options: [
|
||||
{ desc: 'Medium format', source: '$("#formatted").datepicker({dateFormat: "M d, yy", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Long format', source: '$("#formatted").datepicker({dateFormat: "MM d, yy", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Full format', source: '$("#formatted").datepicker({dateFormat: "DD, MM d, yy", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'French full format', source: '$("#formatted").datepicker($.extend({}, $.datepicker.regional["fr"], {dateFormat: "DD, MM d, yy", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));' },
|
||||
{ desc: 'With no century', source: '$("#formatted").datepicker({dateFormat: "dd/mm/y", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'ATOM format (ISO 8601)', source: '$("#formatted").datepicker({dateFormat: $.datepicker.ATOM, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Cookie format', source: '$("#formatted").datepicker({dateFormat: $.datepicker.COOKIE, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'ISO 8601 format', source: '$("#formatted").datepicker({dateFormat: $.datepicker.ISO_8601, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'RFC 822 format', source: '$("#formatted").datepicker({dateFormat: $.datepicker.RFC_822, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'RFC 850 format', source: '$("#formatted").datepicker({dateFormat: $.datepicker.RFC_850, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'RFC 1026 format', source: '$("#formatted").datepicker({dateFormat: $.datepicker.RFC_1036, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'RFC 1123 format', source: '$("#formatted").datepicker({dateFormat: $.datepicker.RFC_1123, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'RFC 2822 format', source: '$("#formatted").datepicker({dateFormat: $.datepicker.RFC_2822, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'RSS format (RFC 822)', source: '$("#formatted").datepicker({dateFormat: $.datepicker.RSS, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Timestamp format (ms since 01/01/1970)', source: '$("#formatted").datepicker({dateFormat: $.datepicker.TIMESTAMP, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'W3C format (ISO 8601)', source: '$("#formatted").datepicker({dateFormat: $.datepicker.W3C, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Day-by-day Modifications',
|
||||
desc: 'You have several mechanisms for modifying the datepicker\'s appearance on a day-by-day basis.',
|
||||
html: { url: 'templates/ui.datepicker.dbd.html' },
|
||||
destroy: '$("#dayByDay").datepicker("destroy");',
|
||||
|
||||
options: [
|
||||
{ desc: 'Weekends are not selectable', source: '$("#dayByDay").datepicker({beforeShowDay: $.datepicker.noWeekends, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Highlight some national days (via CSS)', source: '$("#dayByDay").datepicker({beforeShowDay: nationalDays, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Show day of year as cell title', source: '$("#dayByDay").datepicker({beforeShowDay: showDayOfYear, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Customise status line for today', source: '$("#dayByDay").datepicker({showStatus: true, statusForDate: highlightToday, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Date Ranges',
|
||||
desc: 'Choose a range of dates instead of a single one by clicking firstly on the starting date, then on the ending date.',
|
||||
html: '<input type="text" size="24" value="" id="ranges"/>',
|
||||
destroy: '$("#ranges").datepicker("destroy");',
|
||||
|
||||
options: [
|
||||
{ desc: 'Range select with a single month', source: '$("#ranges").datepicker({rangeSelect: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Range select showing two months', source: '$("#ranges").datepicker({rangeSelect: true, numberOfMonths: 2, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Range select showing six months (moving three at a time)', source: '$("#ranges").datepicker({rangeSelect: true, numberOfMonths: [2, 3], stepMonths: 3, prevText: "<< Previous Months", nextText: "Next Months >>", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Range select excluding weekends', source: '$("#ranges").datepicker({rangeSelect: true, numberOfMonths: 2, beforeShowDay: $.datepicker.noWeekends, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Range select with min/max settings', source: '$("#ranges").datepicker({rangeSelect: true, numberOfMonths: 2, minDate: "6w", maxDate: "2y", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Another Date Range',
|
||||
desc: 'Synchronise two datepickers to together select a date range.',
|
||||
html: { url: 'templates/ui.datepicker.two.html' },
|
||||
destroy: '$("#startDate,#endDate").datepicker("destroy");',
|
||||
|
||||
options: [
|
||||
{ desc: 'Range select with two datepickers', source: '$("#startDate,#endDate").datepicker({beforeShow: customRange, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Inline Datepicker',
|
||||
desc: 'A datepicker can also be shown inline, rather than popping-up, by targetting a division instead of an input field. ' +
|
||||
'Use the <i>onSelect</i> callback to be notified of date selections.',
|
||||
html: { url: 'templates/ui.datepicker.inl.html' },
|
||||
destroy: '$("#inline").datepicker("destroy");$("#altInline").unbind("keyup");',
|
||||
|
||||
options: [
|
||||
{ desc: 'Single month inline', source: '$("#inline").datepicker({onSelect: function(date) { alert("The chosen date is " + date); }});$("#altInline").hide();' },
|
||||
{ desc: 'Range select inline', source: '$("#inline").datepicker({rangeSelect: true, onSelect: function(date) { alert("The chosen dates are " + date); }});$("#altInline").hide();' },
|
||||
{ desc: 'Range select showing two months inline', source: '$("#inline").datepicker({rangeSelect: true, numberOfMonths: 2});$("#altInline").hide();' },
|
||||
{ desc: 'Highlight some national days (via CSS)', source: '$("#inline").datepicker({beforeShowDay: nationalDays});$("#altInline").hide();' },
|
||||
{ desc: 'Inline linked to an input field', source: '$("#inline").datepicker({altField: "#altInline", altFormat: "mm/dd/yy"});$("#altInline").show().keyup(setInlineDate);' },
|
||||
{ desc: 'Disabled inline', source: '$("#inline").datepicker().datepicker("disable");$("#altInline").hide();' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Datepicker in a Dialog',
|
||||
desc: 'A datepicker can also be opened within a "dialog" box.',
|
||||
html: { url: 'templates/ui.datepicker.dlg.html' },
|
||||
destroy: '',
|
||||
|
||||
options: [
|
||||
{ desc: 'Open in a dialog', source: '$("#dialogButton").click(function() { $(this).datepicker("dialog", $("#dialog").val(), setDateFromDialog, {prompt: "Choose a date", duration: ""}); return false; });' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Datepicker Linked to Dropdowns',
|
||||
desc: 'With a bit of wiring code, you can link the datepicker with three dropdowns for date selection.',
|
||||
html: { url: 'templates/ui.datepicker.sel.html' },
|
||||
destroy: '',
|
||||
|
||||
options: [
|
||||
{ desc: 'Linked to dropdowns', source: '$("#linkedDates").datepicker({minDate: new Date(2001, 1 - 1, 1), maxDate: new Date(2010, 12 - 1, 31), beforeShow: readLinked, onSelect: updateLinked, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}); $("#selectMonth, #selectYear").change(checkLinkedDays);' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Callbacks',
|
||||
desc: 'Custom functions may be invoked when certain events occur within the datepicker.',
|
||||
html: '<input type="text" size="24" value="" id="callbacks"/>',
|
||||
destroy: '$("#callbacks").datepicker("destroy");',
|
||||
|
||||
options: [
|
||||
{ desc: 'On select', source: '$("#callbacks").datepicker({onSelect: function(date) { alert("The chosen date is " + date); }, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'On close', source: '$("#callbacks").datepicker({onClose: function(date) { alert("Closed with date " + date); }, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'On change of month/year', source: '$("#callbacks").datepicker({onChangeMonthYear: function(year, month) { alert("Moved to month " + month + "/" + year); }, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'On select for range', source: '$("#callbacks").datepicker({onSelect: function(date) { alert("The chosen dates are " + date); }, rangeSelect: true, numberOfMonths: 2, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'On close for range', source: '$("#callbacks").datepicker({onClose: function(date) { alert("Closed with dates " + date); }, rangeSelect: true, numberOfMonths: 2, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'On change of month/year for range', source: '$("#callbacks").datepicker({onChangeMonthYear: function(year, month) { alert("Moved to month " + month + "/" + year); }, rangeSelect: true, numberOfMonths: 2, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Alternate Field and Format',
|
||||
desc: 'Simultaneously update an alternate field using an alternate date format. ' +
|
||||
'This could be used to display selected dates in one format, while submitting ' +
|
||||
'the dates in another format from a hidden field. The alternate field is ' +
|
||||
'displayed here to demonstrate the functionality.',
|
||||
html: '<input type="text" size="24" value="" id="alt1" readonly="readonly"/>\n' +
|
||||
'<input type="text" size="24" value="" id="alt2" readonly="readonly"/>',
|
||||
destroy: '$("#alt1").datepicker("destroy"); $("#alt2").val("");',
|
||||
|
||||
options: [
|
||||
{ desc: 'Single date selection', source: '$("#alt1").datepicker({altField: "#alt2", altFormat: "yy-mm-dd", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Range date selection', source: '$("#alt1").datepicker({altField: "#alt2", altFormat: "yy-mm-dd", rangeSelect: true, numberOfMonths: 2, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Default Date',
|
||||
desc: 'Control which date is shown if the datepicker is opened with no value. The default is today.',
|
||||
html: '<input type="text" size="10" value="" id="defaultDate"/>',
|
||||
destroy: '$("#defaultDate").datepicker("destroy");',
|
||||
|
||||
options: [
|
||||
{ desc: 'Specific date - January 1, 2007', source: '$("#defaultDate").datepicker({defaultDate: new Date(2007, 1 - 1, 1), showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Relative date - 7 days from today', source: '$("#defaultDate").datepicker({defaultDate: +7, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Relative date - 2 weeks from today', source: '$("#defaultDate").datepicker({defaultDate: "+2w", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Relative date - 10 days and 1 month from today', source: '$("#defaultDate").datepicker({defaultDate: "+10 D +1 M", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Miscellaneous',
|
||||
desc: 'There are many other miscellaneous settings you can apply.',
|
||||
html: '<input type="text" size="10" value="" id="misc"/>',
|
||||
destroy: '$("#misc").datepicker("destroy");',
|
||||
|
||||
options: [
|
||||
{ desc: 'Append text to the datepicker', source: '$("#misc").datepicker({appendText: "(format mm/dd/yyyy)", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Show controls as images', source: '$("#misc").datepicker({clearText: "<img src=\'templates/images/clear.gif\'>", closeText: "<img src=\'templates/images/close.gif\'>", prevText: "<img src=\'templates/images/prev.gif\'>", currentText: "<img src=\'templates/images/calendar.gif\'>", nextText: "<img src=\'templates/images/next.gif\'>", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Move Clear/Close controls to the bottom', source: '$("#misc").datepicker({closeAtTop: false, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Make the datepicker mandatory (no Clear)', source: '$("#misc").datepicker({mandatory: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Show big Prev/Next links', source: '$("#misc").datepicker({showBigPrevNext: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Show big Prev/Next links moving 6 months', source: '$("#misc").datepicker({showBigPrevNext: true, stepBigMonths: 6, prevText: "<", prevBigText: "<6M", nextText: ">", nextBigText: "6M>", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Hide Prev/Next links if not applicable', source: '$("#misc").datepicker({hideIfNoPrevNext: true, minDate: new Date(2008, 1 - 1, 26), maxDate: new Date(2008, 3 - 1, 26), showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Prev/Today/Next links as date formats', source: '$("#misc").datepicker({navigationAsDateFormat: true, prevText: "<M", currentText: "M y", nextText: "M>", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Prev/Today/Next links as date formats in French', source: '$("#misc").datepicker($.extend({}, $.datepicker.regional["fr"], {navigationAsDateFormat: true, prevText: "<MM", currentText: "MM yy", nextText: "MM>", numberOfMonths: 2, stepMonths: 2, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));' },
|
||||
{ desc: 'Today link goes to current selection', source: '$("#misc").datepicker({gotoCurrent: true, currentText: "Current", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Show the month select after the year one', source: '$("#misc").datepicker({showMonthAfterYear: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Highlight the hovered week', source: '$("#misc").datepicker({highlightWeek: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Show days from other months', source: '$("#misc").datepicker({showOtherMonths: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Show week of the year (ISO 8601)', source: '$("#misc").datepicker({showWeeks: true, firstDay: 1, changeFirstDay: false, showOtherMonths: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Show a status bar with more explanation', source: '$("#misc").datepicker({showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Show three months at a time', source: '$("#misc").datepicker({numberOfMonths: 3, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Show three months with current in the middle', source: '$("#misc").datepicker({numberOfMonths: 3, showCurrentAtPos: 1, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Show three months ending at current one', source: '$("#misc").datepicker({numberOfMonths: 3, showCurrentAtPos: 2, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Inline Configuration',
|
||||
desc: 'You can configure each input field inline by adding attributes with the same name '+
|
||||
'as the datepicker settings and a "date:" prefix.',
|
||||
html: '<input type="text" size="10" value="" id="config" \n' +
|
||||
'date:closeAtTop="false" date:firstDay="1" date:appendText="(pick a date)"/>',
|
||||
destroy: '$("#config").datepicker("destroy");',
|
||||
|
||||
options: [
|
||||
{ desc: 'Inline configuration - see source', source: '$("#config").datepicker({showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Animations',
|
||||
desc: 'You can control how the datepicker appears - both its style and duration. The default is a medium duration animation expanding from the top-left (show).',
|
||||
html: '<input type="text" size="10" value="" id="anim"/>',
|
||||
destroy: '$("#anim").datepicker("destroy");',
|
||||
|
||||
options: [
|
||||
{ desc: 'Show at slow duration', source: '$("#anim").datepicker({duration: "slow", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Show at normal duration (default)', source: '$("#anim").datepicker({duration: "normal", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Show at fast duration', source: '$("#anim").datepicker({duration: "fast", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Show immediately', source: '$("#anim").datepicker({duration: "", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Fade in at normal duration', source: '$("#anim").datepicker({showAnim: "fadeIn", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Slide down at slow duration', source: '$("#anim").datepicker({showAnim: "slideDown", duration: "slow", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Blind horizontally', source: '$("#anim").datepicker({showAnim: "blind", showOptions: {direction: "horizontal"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Blind vertically', source: '$("#anim").datepicker({showAnim: "blind", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Clip horizontally', source: '$("#anim").datepicker({showAnim: "clip", showOptions: {direction: "horizontal"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Clip vertically', source: '$("#anim").datepicker({showAnim: "clip", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Drop up', source: '$("#anim").datepicker({showAnim: "drop", showOptions: {direction: "up"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Drop down', source: '$("#anim").datepicker({showAnim: "drop", showOptions: {direction: "down"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Drop left', source: '$("#anim").datepicker({showAnim: "drop", showOptions: {direction: "left"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Drop right', source: '$("#anim").datepicker({showAnim: "drop", showOptions: {direction: "right"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Explode (2 secs duration)', source: '$("#anim").datepicker({showAnim: "explode", duration: 2000, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Fold', source: '$("#anim").datepicker({showAnim: "fold", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Puff', source: '$("#anim").datepicker({showAnim: "puff", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Scale to center', source: '$("#anim").datepicker({showAnim: "scale", showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Scale to top-left', source: '$("#anim").datepicker({showAnim: "scale", showOptions: {origin: ["top", "left"]}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Slide up', source: '$("#anim").datepicker({showAnim: "slide", showOptions: {direction: "up"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Slide down', source: '$("#anim").datepicker({showAnim: "slide", showOptions: {direction: "down"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Slide left', source: '$("#anim").datepicker({showAnim: "slide", showOptions: {direction: "left"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' },
|
||||
{ desc: 'Slide right', source: '$("#anim").datepicker({showAnim: "slide", showOptions: {direction: "right"}, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true});' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'International Datepickers',
|
||||
desc: 'Numerous international packs are available for the datepicker.',
|
||||
html: '<input type="text" size="10" value="" id="i18n"/> thanks to <span id="contrib"></span>',
|
||||
destroy: '$("#i18n").datepicker("destroy");',
|
||||
|
||||
options: [
|
||||
{ desc: 'Bahasa Indonesia (Indonesian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["id"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Deden Fathurahman");' },
|
||||
{ desc: 'български език (Bulgarian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["bg"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Stoyan Kyosev");' },
|
||||
{ desc: 'Català (Catalan)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["ca"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Joan Leon");' },
|
||||
{ desc: 'Čeština (Czech)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["cs"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Tomas Muller");' },
|
||||
{ desc: 'Dansk (Danish)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["da"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Jan Christensen");' },
|
||||
{ desc: 'Deutsch (German)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["de"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Milian Wolff");' },
|
||||
{ desc: 'Español (Spanish)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["es"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Vester");' },
|
||||
{ desc: 'Esperanto', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["eo"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Olivier M.");' },
|
||||
{ desc: 'Français (French)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["fr"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Stéphane Nahmani");' },
|
||||
{ desc: 'Gjuha shqipe (Albanian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["sq"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Flakron Bytyqi");' },
|
||||
{ desc: '한국어 (Korean)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["ko"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("DaeKwon Kang");' },
|
||||
{ desc: 'Hrvatski jezik (Croatian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["hr"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Vjekoslav Nesek");' },
|
||||
{ desc: 'Հայերեն (Armenian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["hy"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Levon Zakaryan");' },
|
||||
{ desc: 'Íslenska (Icelandic)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["is"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Haukur H. Thorsson");' },
|
||||
{ desc: 'Italiano (Italian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["it"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Apaella");' },
|
||||
{ desc: 'Latviešu Valoda (Latvian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["lv"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Arturas Paleicikas");' },
|
||||
{ desc: 'lietuvių kalba (Lithuanian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["lt"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Arturas Paleicikas");' },
|
||||
{ desc: 'Magyar (Hungarian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["hu"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Istvan Karaszi");' },
|
||||
{ desc: 'Nederlands (Dutch)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["nl"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Mathias Bynens");' },
|
||||
{ desc: '日本語 (Japanese)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["ja"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Milly");' },
|
||||
{ desc: 'Norsk (Norwegian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["no"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Naimdjon Takhirov");' },
|
||||
{ desc: 'ภาษาไทย (Thai)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["th"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("pipo");' },
|
||||
{ desc: 'Polski (Polish)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["pl"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Jacek Wysocki");' },
|
||||
{ desc: 'Português (Portuguese/Brazilian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["pt-BR"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Leonildo Costa Silva");' },
|
||||
{ desc: 'Română (Romanian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["ro"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Edmond L.");' },
|
||||
{ desc: 'Русский (Russian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["ru"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Andrew Stromnov");' },
|
||||
{ desc: 'Slovenčina (Slovak)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["sk"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Vojtech Rinik");' },
|
||||
{ desc: 'Slovenski Jezik (Slovenian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["sl"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Jaka Jančar");' },
|
||||
{ desc: 'suomi (Finnish)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["fi"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Harri Kilpiö");' },
|
||||
{ desc: 'Svenska (Swedish)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["sv"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Anders Ekdahl");' },
|
||||
{ desc: 'Türkçe (Turkish)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["tr"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Izzet Emre Erkan");' },
|
||||
{ desc: 'Українська (Ukranian)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["uk"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Maxim Drogobitskiy");' },
|
||||
{ desc: '简体中文 (Chinese Simplified)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["zh-CN"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Cloudream");' },
|
||||
{ desc: '繁體中文 (Chinese Traditional)', source: '$("#i18n").datepicker($.extend({}, $.datepicker.regional["zh-TW"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib").html("Ressol");' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'International Datepickers Right-to-left',
|
||||
desc: 'Some international packs change the orientation of the datepicker to right-to-left.',
|
||||
html: '<input type="text" size="10" value="" id="i18nrtl"/> thanks to <span id="contrib2"></span>',
|
||||
destroy: '$("#i18nrtl").datepicker("destroy");',
|
||||
|
||||
options: [
|
||||
{ desc: '‫العربية (Arabic)', source: '$("#i18nrtl").datepicker($.extend({}, $.datepicker.regional["ar"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib2").html("Khaled Al Horani");' },
|
||||
{ desc: '‫فارسی (Farsi/Persian)', source: '$("#i18nrtl").datepicker($.extend({}, $.datepicker.regional["fa"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib2").html("Javad Mowlanezhad");' },
|
||||
{ desc: '‫עברית (Hebrew)', source: '$("#i18nrtl").datepicker($.extend({}, $.datepicker.regional["he"], {showStatus: true, showOn: "both", buttonImage: "templates/images/calendar.gif", buttonImageOnly: true}));$("#contrib2").html("Amir Hardon");' }
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
};
|
||||
|
||||
$(function(){
|
||||
|
||||
uiRenderDemo(model);
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -1,14 +0,0 @@
|
||||
<input type="text" id="altInline" size="10"/>
|
||||
<div id="inline"></div>
|
||||
<p style="clear: both;"><!-- See day-by-day example for highlighting days code --></p>
|
||||
<script type="text/javascript">
|
||||
function setInlineDate() {
|
||||
try {
|
||||
var date = $.datepicker.parseDate("mm/dd/yy", $("#altInline").val());
|
||||
$("#inline").datepicker("setDate", date);
|
||||
}
|
||||
catch (e) {
|
||||
// Ignore
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,54 +0,0 @@
|
||||
<select id="selectMonth"><option value="01">Jan</option><option value="02">Feb</option>
|
||||
<option value="03">Mar</option><option value="04">Apr</option>
|
||||
<option value="05">May</option><option value="06">Jun</option>
|
||||
<option value="07">Jul</option><option value="08">Aug</option>
|
||||
<option value="09">Sep</option><option value="10">Oct</option>
|
||||
<option value="11">Nov</option><option value="12">Dec</option></select>
|
||||
<select id="selectDay"><option value="01">1</option><option value="02">2</option>
|
||||
<option value="03">3</option><option value="04">4</option>
|
||||
<option value="05">5</option><option value="06">6</option>
|
||||
<option value="07">7</option><option value="08">8</option>
|
||||
<option value="09">9</option><option value="10">10</option>
|
||||
<option value="11">11</option><option value="12">12</option>
|
||||
<option value="13">13</option><option value="14">14</option>
|
||||
<option value="15">15</option><option value="16">16</option>
|
||||
<option value="17">17</option><option value="18">18</option>
|
||||
<option value="19">19</option><option value="20">20</option>
|
||||
<option value="21">21</option><option value="22">22</option>
|
||||
<option value="23">23</option><option value="24">24</option>
|
||||
<option value="25">25</option><option value="26">26</option>
|
||||
<option value="27">27</option><option value="28">28</option>
|
||||
<option value="29">29</option><option value="30">30</option>
|
||||
<option value="31">31</option></select>
|
||||
<select id="selectYear"><option value="2001">2001</option><option value="2002">2002</option>
|
||||
<option value="2003">2003</option><option value="2004">2004</option>
|
||||
<option value="2005">2005</option><option value="2006">2006</option>
|
||||
<option value="2007">2007</option><option value="2008">2008</option>
|
||||
<option value="2009">2009</option><option value="2010">2010</option></select>
|
||||
<input type="hidden" size="10" id="linkedDates" disabled="disabled"/></p>
|
||||
<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);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,7 +0,0 @@
|
||||
<input type="text" size="10" value="" id="startDate"/> to <input type="text" size="10" value="" id="endDate"/>
|
||||
<script type="text/javascript">
|
||||
function customRange(input) {
|
||||
return {minDate: (input.id == "endDate" ? $("#startDate").datepicker("getDate") : null),
|
||||
maxDate: (input.id == "startDate" ? $("#endDate").datepicker("getDate") : null)};
|
||||
}
|
||||
</script>
|
||||
@ -1,34 +0,0 @@
|
||||
<script type="text/javascript">
|
||||
|
||||
var model = {
|
||||
|
||||
renderAt: '#containerDemo',
|
||||
|
||||
title: 'Dialog Demos',
|
||||
|
||||
demos: [
|
||||
|
||||
{
|
||||
title: 'Simple dialog',
|
||||
desc: 'With few lines of code you could build a dialog. You can try more options on the fly!',
|
||||
html: '<div id="dialog">jQuery UI Dialog</div>',
|
||||
destroy: '$("#dialog").dialog("destroy");',
|
||||
options: [
|
||||
{ desc: 'Make a simple dialog', source: '$("#dialog").dialog();' },
|
||||
{ desc: 'Modal dialog', source: '$("#dialog").dialog({ modal: true });' },
|
||||
{ desc: 'Modal dialog with overlay', source: '$("#dialog").dialog({ modal: true, overlay: { opacity: 0.5, background: "black" } });' },
|
||||
{ desc: 'With buttons', source: '$("#dialog").dialog({buttons: { "Ok": function() { alert("Ok"); }, "Cancel": function() { $(this).dialog("close"); } }});' },
|
||||
{ desc: 'Close the dialog', source: '$("#dialog").dialog("close");' }
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
};
|
||||
|
||||
$(function(){
|
||||
|
||||
uiRenderDemo(model);
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -1,85 +0,0 @@
|
||||
<script type="text/javascript">
|
||||
|
||||
var model = {
|
||||
|
||||
renderAt: '#containerDemo',
|
||||
|
||||
title: 'Draggable Demos',
|
||||
|
||||
demos: [
|
||||
|
||||
{
|
||||
title: 'Simple image drag',
|
||||
desc: 'You also can make images draggable!',
|
||||
html: '<img id="dragImage" src="templates/images/puppy.jpg" style="width: 228px; height:157px;">',
|
||||
destroy: '$("#dragImage").draggable("destroy");',
|
||||
|
||||
options: [
|
||||
{ desc: 'Using a helper clone', source: '$("#dragImage").draggable({ helper: "clone" });' },
|
||||
{ desc: 'Simple Drag', source: '$("#dragImage").draggable();' },
|
||||
{ desc: 'Axis x', source: '$("#dragImage").draggable({ axis: "x" });' },
|
||||
{ desc: 'Axis y', source: '$("#dragImage").draggable({ axis: "y" });' },
|
||||
{ desc: 'Axis x, Change cursor', source: '$("#dragImage").draggable({ axis: "x", cursor: "move" });' },
|
||||
{ desc: 'Cursor position [top/left]', source: '$("#dragImage").draggable({ cursorAt: {top: 2, left: 2 } });' },
|
||||
{ desc: 'Cursor position [right/bottom]', source: '$("#dragImage").draggable({ cursorAt: {bottom: 20, right: 14} });' },
|
||||
{ desc: 'Drag on a Grid', source: '$("#dragImage").draggable({ grid: [50, 50] });' },
|
||||
{ desc: 'Change the opacity', source: '$("#dragImage").draggable({ opacity: 0.40 });' },
|
||||
{ desc: 'Drag and Revert to the original position', source: '$("#dragImage").draggable({ revert: true, helper: "clone" });' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Drag div element',
|
||||
desc: 'With few lines of code you could make a div draggable. You can try more options on the fly!',
|
||||
html: '<div id="divDrag" class="draggable">Drag me</div><br>',
|
||||
destroy: '$("#divDrag").draggable("destroy");',
|
||||
options: [
|
||||
{ desc: 'Simple Drag', source: '$("#divDrag").draggable();' },
|
||||
{ desc: 'Dragging elements in a Region', source: '$("#divDrag").draggable({ containment: "parent" });' },
|
||||
{ desc: 'Axis x', source: '$("#divDrag").draggable({ axis: "x" });' },
|
||||
{ desc: 'Axis y', source: '$("#divDrag").draggable({ axis: "y" });' },
|
||||
{ desc: 'Axis x, Change cursor', source: '$("#divDrag").draggable({ axis: "x", cursor: "move" });' },
|
||||
{ desc: 'Cursor position [top/left]', source: '$("#divDrag").draggable({ cursorAt: {top: 2, left: 2 } });' },
|
||||
{ desc: 'Cursor position [right/bottom]', source: '$("#divDrag").draggable({ cursorAt: {bottom: 20, right: 14} });' },
|
||||
{ desc: 'Drag on a Grid', source: '$("#divDrag").draggable({ grid: [50, 50] });' },
|
||||
{ desc: 'Using a helper clone', source: '$("#divDrag").draggable({ helper: "clone" });' },
|
||||
{ desc: 'Change the opacity', source: '$("#divDrag").draggable({ opacity: 0.40 });' },
|
||||
{ desc: 'Drag and Revert to the original position', source: '$("#divDrag").draggable({ revert: true, helper: "clone" });' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Drag with a handle',
|
||||
desc: 'Drag element by a handle.',
|
||||
html: '<div id="draggable-handle-div" class="draggable"><div class="drag-handle"></div>Drag me</div>',
|
||||
destroy: '$("#draggable-handle-div").draggable("destroy");',
|
||||
|
||||
options: [
|
||||
{ desc: 'Drag using a handle', source: '$("#draggable-handle-div").draggable({ handle: "div" });' },
|
||||
{ desc: 'Drag using a handle with a helper', source: '$("#draggable-handle-div").draggable({ helper: "clone", handle: "div" });' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Drag prevention for pre-defined elements',
|
||||
desc: 'You can change elements to not drag the parent.',
|
||||
html: '<div id="draggable-dragPrevention" class="draggable"><a href="#">Drag me</a><br><input type="text" value="select me" style="width: 80px; font-size: 10px;" /></div>',
|
||||
destroy: '$("#draggable-dragPrevention").draggable("destroy");',
|
||||
|
||||
options: [
|
||||
{ desc: 'Drag using a handle', source: '$("#draggable-dragPrevention").draggable({ cancel: "a,input,textarea" });' },
|
||||
{ desc: 'Drag using a handle with a helper', source: '$("#draggable-dragPrevention").draggable({ helper: "clone", cancel: "a,input,textarea" });' }
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
};
|
||||
|
||||
$(function(){
|
||||
|
||||
uiRenderDemo(model);
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -1,87 +0,0 @@
|
||||
<script type="text/javascript">
|
||||
|
||||
var model = {
|
||||
|
||||
renderAt: '#containerDemo',
|
||||
|
||||
title: 'Droppable Demos',
|
||||
|
||||
demos: [
|
||||
|
||||
{
|
||||
title: 'Droppable',
|
||||
desc: 'With few lines of code you could make an element droppable. You can try more options on the fly!',
|
||||
html: { url: 'templates/ui.droppable.photos.html' },
|
||||
destroy: '$(".droppable-photos-container").droppable("destroy");',
|
||||
options: [
|
||||
{
|
||||
desc: 'Photo manager',
|
||||
source: '$(".droppable-photos-container").droppable({ accept: ".img_content", drop: function(ev, ui) { ui.draggable.clone().fadeOut("fast", function() { $(this).fadeIn("fast") }).appendTo($(this).empty()); } });'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Droppable',
|
||||
desc: 'With few lines of code you could make an element droppable. You can try more options on the fly!',
|
||||
html: '<div class="block">.block</div><div class="draggable red">.red</div><div class="draggable green">.green</div><div class="drop">Drop on me!<br><br></div>',
|
||||
destroy: '$(".drop").droppable("destroy");',
|
||||
options: [
|
||||
{
|
||||
desc: 'Accept all, Active Class',
|
||||
source: '$(".drop").droppable({ accept: ".block, .red, .green", activeClass: "droppable-active", drop: function(ev, ui) { $(this).append("Dropped! "); }});'
|
||||
},
|
||||
{
|
||||
desc: 'Only accept .block',
|
||||
source: '$(".drop").droppable({ accept: ".block", drop: function(ev, ui) { $(this).append("Dropped! "); }});'
|
||||
},
|
||||
{
|
||||
desc: 'Only accept .red',
|
||||
source: '$(".drop").droppable({ accept: ".red", drop: function(ev, ui) { $(this).append("Dropped! "); }});'
|
||||
},
|
||||
{
|
||||
desc: 'Only accept .green',
|
||||
source: '$(".drop").droppable({ accept: ".green", drop: function(ev, ui) { $(this).append("Dropped! "); }});'
|
||||
},
|
||||
{
|
||||
desc: 'Accept all, Hover Class',
|
||||
source: '$(".drop").droppable({ accept: ".block, .red, .green", hoverClass: "droppable-hover", drop: function(ev, ui) { $(this).append("Dropped! "); }});'
|
||||
},
|
||||
{
|
||||
desc: 'Accept all, Mouse tolerance',
|
||||
source: '$(".drop").droppable({ accept: ".block, .red, .green", hoverClass: "silver", tolerance: "pointer", drop: function(ev, ui) { $(this).append("Dropped! "); }});'
|
||||
},
|
||||
{
|
||||
desc: 'Accept all, Touch tolerance',
|
||||
source: '$(".drop").droppable({ accept: ".block, .red, .green", hoverClass: "silver", tolerance: "touch", drop: function(ev, ui) { $(this).append("Dropped! "); }});'
|
||||
},
|
||||
{
|
||||
desc: 'Accept all, Activate/Deactivate callbacks',
|
||||
source: '$(".drop").droppable({ accept: ".block, .red, .green, .red, .green", activate: function(ev, ui) { $(this).append("Activate! "); }, deactivate: function(ev, ui) { $(this).append("Deactivate! "); }});'
|
||||
},
|
||||
{
|
||||
desc: 'Accept all, Over/Out callbacks',
|
||||
source: '$(".drop").droppable({ accept: ".block, .red, .green", over: function(ev, ui) { $(this).append("Over! "); }, out: function(ev, ui) { $(this).append("Out! "); }});'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
onRenderEnd: function() {
|
||||
$(".block, .green, .red").draggable({helper: "clone"});
|
||||
|
||||
$('ul.droppable-gallery img').addClass('img_content').draggable({
|
||||
helper: 'clone'
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
$(function(){
|
||||
|
||||
uiRenderDemo(model);
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -1,17 +0,0 @@
|
||||
<div id="droppablePhotos" style="min-height: 130px; min-height:130px; height:auto !important; zoom:1;">
|
||||
|
||||
<ul class="droppable-gallery">
|
||||
<li class="droppable-img-content">
|
||||
<img src="templates/images/P1010020.JPG" alt="Tatry 1" title="Drag me!" />
|
||||
</li>
|
||||
<li class="droppable-img-content">
|
||||
<img src="templates/images/P1010039.JPG" alt="Tatry 3" title="Drag me!" />
|
||||
</li>
|
||||
<li class="droppable-img-content">
|
||||
<img src="templates/images/P1010044.JPG" alt="Tatry 4" title="Drag me!" />
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="droppable-photos-container" style="text-align: center;">Drop here!</div>
|
||||
|
||||
</div>
|
||||
@ -1,19 +0,0 @@
|
||||
<div id="area" style="position: relative; width: 400px; height: 300px; border: 1px solid #bbb;">
|
||||
<img src="templates/images/white.gif" style="width: 400px; height: 300px;"/>
|
||||
<img id="target" src="templates/images/target.jpeg" style="position: absolute; left: 0px; top: 0px;"/>
|
||||
</div>
|
||||
<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);
|
||||
}
|
||||
</script>
|
||||
@ -1,109 +0,0 @@
|
||||
<script type="text/javascript">
|
||||
|
||||
var model = {
|
||||
|
||||
renderAt: '#containerDemo',
|
||||
|
||||
title: 'Easing Effects',
|
||||
|
||||
demos: [
|
||||
|
||||
{
|
||||
title: 'Easings',
|
||||
desc: 'Easing is acceleration, a change in speed. Easings control how an animation progresses over time.<br/>' +
|
||||
'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" 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); });' },
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Easings 2',
|
||||
desc: 'Click within the bounded area to move the icon with the selected easing.',
|
||||
html: { url: 'templates/ui.effects.easing.ex2.html' },
|
||||
destroy: '$("#area").unbind();',
|
||||
|
||||
options: [
|
||||
{ desc: 'Linear easing', source: '$("#area").click(function(event) { moveToHere(event, "linear"); });' },
|
||||
{ desc: 'Swing easing', source: '$("#area").click(function(event) { moveToHere(event, "swing"); });' },
|
||||
{ desc: 'Quadratic ease in', source: '$("#area").click(function(event) { moveToHere(event, "easeInQuad"); });' },
|
||||
{ desc: 'Quadratic ease out', source: '$("#area").click(function(event) { moveToHere(event, "easeOutQuad"); });' },
|
||||
{ desc: 'Quadratic ease in out', source: '$("#area").click(function(event) { moveToHere(event, "easeInOutQuad"); });' },
|
||||
{ desc: 'Cubic ease in', source: '$("#area").click(function(event) { moveToHere(event, "easeInCubic"); });' },
|
||||
{ desc: 'Cubic ease out', source: '$("#area").click(function(event) { moveToHere(event, "easeOutCubic"); });' },
|
||||
{ desc: 'Cubic ease in out', source: '$("#area").click(function(event) { moveToHere(event, "easeInOutCubic"); });' },
|
||||
{ desc: 'Quartic ease in', source: '$("#area").click(function(event) { moveToHere(event, "easeInQuart"); });' },
|
||||
{ desc: 'Quartic ease out', source: '$("#area").click(function(event) { moveToHere(event, "easeOutQuart"); });' },
|
||||
{ desc: 'Quartic ease in out', source: '$("#area").click(function(event) { moveToHere(event, "easeInOutQuart"); });' },
|
||||
{ desc: 'Quintic ease in', source: '$("#area").click(function(event) { moveToHere(event, "easeInQuint"); });' },
|
||||
{ desc: 'Quintic ease out', source: '$("#area").click(function(event) { moveToHere(event, "easeOutQuint"); });' },
|
||||
{ desc: 'Quintic ease in out', source: '$("#area").click(function(event) { moveToHere(event, "easeInOutQuint"); });' },
|
||||
{ desc: 'Sinusoidal ease in', source: '$("#area").click(function(event) { moveToHere(event, "easeInSine"); });' },
|
||||
{ desc: 'Sinusoidal ease out', source: '$("#area").click(function(event) { moveToHere(event, "easeOutSine"); });' },
|
||||
{ desc: 'Sinusoidal ease in out', source: '$("#area").click(function(event) { moveToHere(event, "easeInOutSine"); });' },
|
||||
{ desc: 'Exponential ease in', source: '$("#area").click(function(event) { moveToHere(event, "easeInExpo"); });' },
|
||||
{ desc: 'Exponential ease out', source: '$("#area").click(function(event) { moveToHere(event, "easeOutExpo"); });' },
|
||||
{ desc: 'Exponential ease in out', source: '$("#area").click(function(event) { moveToHere(event, "easeInOutExpo"); });' },
|
||||
{ desc: 'Circular ease in', source: '$("#area").click(function(event) { moveToHere(event, "easeInCirc"); });' },
|
||||
{ desc: 'Circular ease out', source: '$("#area").click(function(event) { moveToHere(event, "easeOutCirc"); });' },
|
||||
{ desc: 'Circular ease in out', source: '$("#area").click(function(event) { moveToHere(event, "easeInOutCirc"); });' },
|
||||
{ desc: 'Elastic ease in (decaying sine wave)', source: '$("#area").click(function(event) { moveToHere(event, "easeInElastic"); });' },
|
||||
{ desc: 'Elastic ease out', source: '$("#area").click(function(event) { moveToHere(event, "easeOutElastic"); });' },
|
||||
{ desc: 'Elastic ease in out', source: '$("#area").click(function(event) { moveToHere(event, "easeInOutElastic"); });' },
|
||||
{ desc: 'Back ease in (overshooting cubic)', source: '$("#area").click(function(event) { moveToHere(event, "easeInBack"); });' },
|
||||
{ desc: 'Back ease out', source: '$("#area").click(function(event) { moveToHere(event, "easeOutBack"); });' },
|
||||
{ desc: 'Back ease in out', source: '$("#area").click(function(event) { moveToHere(event, "easeInOutBack"); });' },
|
||||
{ desc: 'Bounce ease in (decaying parabolic)', source: '$("#area").click(function(event) { moveToHere(event, "easeInBounce"); });' },
|
||||
{ desc: 'Bounce ease out', source: '$("#area").click(function(event) { moveToHere(event, "easeOutBounce"); });' },
|
||||
{ desc: 'Bounce ease in out', source: '$("#area").click(function(event) { moveToHere(event, "easeInOutBounce"); });' },
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
};
|
||||
|
||||
$(function(){
|
||||
|
||||
uiRenderDemo(model);
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -1,140 +0,0 @@
|
||||
<script type="text/javascript">
|
||||
|
||||
var model = {
|
||||
|
||||
renderAt: '#containerDemo',
|
||||
|
||||
title: 'General Effects',
|
||||
|
||||
demos: [
|
||||
|
||||
{
|
||||
title: 'Bounce',
|
||||
desc: 'Bounce an element from its original location. The default settings are {times: 5, direction: "up", distance: 20}.',
|
||||
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();',
|
||||
|
||||
options: [
|
||||
{ desc: 'Bounce defaults', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {}, 500); });' },
|
||||
{ desc: 'Bounce three times', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {times: 3}, 500); });' },
|
||||
{ desc: 'Bounce once', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {times: 1}, 500); });' },
|
||||
{ desc: 'Bounce down', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {direction: "down"}); });' },
|
||||
{ desc: 'Bounce left', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {direction: "left"}); });' },
|
||||
{ desc: 'Bounce right', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {direction: "right"}); });' },
|
||||
{ desc: 'Bounce to height 50', source: '$("#doBounce").click(function() { $("#bounce").effect("bounce", {distance: 50}); });' },
|
||||
{ desc: 'Bounce and show/hide', source: '$("#doBounce").click(function() { $("#bounce").toggle("bounce", {times: 3}, 500); });' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Highlight',
|
||||
desc: 'Highlight an element by fading its background color from another color back to its original.',
|
||||
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", {}, 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" type="button">Pulsate</button><br/><br/>\n' +
|
||||
'<div style="height: 108px;"><img id="pulsate" src="templates/images/P1010061.JPG"/></div>',
|
||||
destroy: '$("#doPulsate").unbind();',
|
||||
|
||||
options: [
|
||||
{ desc: 'Pulsate defaults (5 times)', source: '$("#doPulsate").click(function() { $("#pulsate").effect("pulsate", {}, 500); });' },
|
||||
{ desc: 'Pulsate 3 times', source: '$("#doPulsate").click(function() { $("#pulsate").effect("pulsate", {times: 3}, 500); });' },
|
||||
{ desc: 'Pulsate once', source: '$("#doPulsate").click(function() { $("#pulsate").effect("pulsate", {times: 1}, 1000); });' },
|
||||
{ desc: 'Pulsate 3 times and show/hide', source: '$("#doPulsate").click(function() { $("#pulsate").toggle("pulsate", {times: 3}, 500); });' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Scale',
|
||||
desc: 'Scales an element up or down by a percentage factor.',
|
||||
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}, 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" 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}}, 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" type="button">Shake</button><br/><br/>\n' +
|
||||
'<div style="height: 108px;"><img id="shake" src="templates/images/P1010039.JPG"/></div>',
|
||||
destroy: '$("#doShake").unbind();',
|
||||
|
||||
options: [
|
||||
{ desc: 'Shake defaults', source: '$("#doShake").click(function() { $("#shake").effect("shake", {}, 300); });' },
|
||||
{ desc: 'Shake 5 times', source: '$("#doShake").click(function() { $("#shake").effect("shake", {times: 5}, 250); });' },
|
||||
{ desc: 'Shake right', source: '$("#doShake").click(function() { $("#shake").effect("shake", {direction: "right"}, 250); });' },
|
||||
{ desc: 'Shake up', source: '$("#doShake").click(function() { $("#shake").effect("shake", {direction: "up"}, 250); });' },
|
||||
{ desc: 'Shake down', source: '$("#doShake").click(function() { $("#shake").effect("shake", {direction: "down"}, 250); });' },
|
||||
{ desc: 'Shake by 50px', source: '$("#doShake").click(function() { $("#shake").effect("shake", {distance: 50}, 250); });' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Transfer',
|
||||
desc: 'Transfer the outline of one element to another.',
|
||||
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' +
|
||||
'.ui-effects-transfer { border: 1px solid maroon; }\n' +
|
||||
'.transferring { background-color: red; opacity: 0.5; }\n' +
|
||||
'</style>',
|
||||
destroy: '$("#doTransfer").unbind(); $("#target").removeClass("transferred");',
|
||||
|
||||
options: [
|
||||
{ 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); });' }
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
};
|
||||
|
||||
$(function(){
|
||||
|
||||
uiRenderDemo(model);
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -1,151 +0,0 @@
|
||||
<script type="text/javascript">
|
||||
|
||||
var model = {
|
||||
|
||||
renderAt: '#containerDemo',
|
||||
|
||||
title: 'Show/Hide Effects',
|
||||
|
||||
demos: [
|
||||
|
||||
{
|
||||
title: 'Blind',
|
||||
desc: 'Gradually show or hide an element.',
|
||||
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.</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"}, 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" 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.</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"}, 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" 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.</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"}, 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" 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.</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", {}, 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" 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.</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", {}, 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" 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.</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", {}, 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" 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.</div></li></ul>\n' +
|
||||
'<div style="clear: both;"></div>',
|
||||
destroy: '$("#doScale").unbind();',
|
||||
|
||||
options: [
|
||||
{ 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); });' },
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
title: 'Slide',
|
||||
desc: 'Slide an element out of or into the viewport.',
|
||||
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.</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"}, 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); });' }
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
};
|
||||
|
||||
$(function(){
|
||||
|
||||
uiRenderDemo(model);
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -1,35 +0,0 @@
|
||||
<script type="text/javascript">
|
||||
|
||||
var model = {
|
||||
|
||||
renderAt: '#containerDemo',
|
||||
|
||||
title: 'Progressbar Demos',
|
||||
|
||||
demos: [
|
||||
|
||||
{
|
||||
title: 'Simple Progressbar',
|
||||
desc: 'With few lines of code you could build a progressbar. You can try more options on the fly!',
|
||||
html: '<div id="progressbar"></div>',
|
||||
destroy: '$("#progressbar").progressbar("destroy");',
|
||||
options: [
|
||||
{ desc: 'Start a progressbar', source: '$("#progressbar").progressbar({interval:2000}); $("#progressbar").progressbar("start");' },
|
||||
{ desc: 'With different increment', source: '$("#progressbar").progressbar({interval:2000, increment:100}).progressbar("start");' },
|
||||
{ desc: 'Set progress to 50%', source: '$("#progressbar").progressbar().progressbar("progress", 50);' },
|
||||
{ desc: 'Callback when finish', source: '$("#progressbar").progressbar({interval: 1000, stop:function(){alert("Finished");}}).progressbar("start");' },
|
||||
{ desc: 'Enable the progressbar', source: '$("#progressbar").progressbar().progressbar("enable");' },
|
||||
{ desc: 'Disable the progressbar', source: '$("#progressbar").progressbar().progressbar("disable");' }
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
};
|
||||
|
||||
$(function(){
|
||||
|
||||
uiRenderDemo(model);
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -1,92 +0,0 @@
|
||||
<script type="text/javascript">
|
||||
|
||||
var model = {
|
||||
|
||||
renderAt: '#containerDemo',
|
||||
|
||||
title: 'Resizable Demos',
|
||||
|
||||
demos: [
|
||||
|
||||
{
|
||||
title: 'Simple div Resizing',
|
||||
desc: 'You can play with the options listed below and check the results on the div.',
|
||||
html: '<div id="simpleDiv" class="resizable">Resize me!</div><br>',
|
||||
destroy: '$("#simpleDiv").resizable("destroy");',
|
||||
|
||||
options: [
|
||||
{ desc: 'All handles', source: '$("#simpleDiv").resizable({ handles: "all"});' },
|
||||
{ desc: 'Using helper', source: '$("#simpleDiv").resizable({ handles: "all", helper: "proxy" });' },
|
||||
{ desc: 'Preserving ratio', source: '$("#simpleDiv").resizable({ handles: "all", aspectRatio: true, helper: "proxy" });' },
|
||||
{ desc: 'Autohide handles', source: '$("#simpleDiv").resizable({ handles: "all", autoHide:true });' },
|
||||
{ desc: 'Transparent handles', source: '$("#simpleDiv").resizable({ handles: "all", transparent: true, helper: "proxy" });' },
|
||||
{ desc: 'Pre-defined handles (e,w)', source: '$("#simpleDiv").resizable({ handles: "e,w" });' },
|
||||
{ desc: 'Resize on a grid [50, 50]', source: '$("#simpleDiv").resizable({ handles: "all", grid: [50, 50] });' },
|
||||
{ desc: 'Min/Max height and width', source: '$("#simpleDiv").resizable({ handles: "all", minWidth: 100, minHeight: 100, maxWidth: 250, maxHeight: 250 });' },
|
||||
{ desc: 'Animated resizing', source: '$("#simpleDiv").resizable({ handles: "all", animate: true, animateDuration: "slow", animateEasing: "swing" });' },
|
||||
{ desc: 'Knob handles (image cropper like)', source: '$("#simpleDiv").resizable({ handles: "all", knobHandles: true });' },
|
||||
{ desc: 'Ghost resizing', source: '$("#simpleDiv").resizable({ handles: "all", ghost:true });' },
|
||||
{ desc: 'Prevent default browser resize (safari textarea)', source: '$("#simpleDiv").resizable({ handles: "all", preventDefault: true });' },
|
||||
{ desc: 'Preserve cursor on resize', source: '$("#simpleDiv").resizable({ handles: "all", preserveCursor: true });' },
|
||||
{ desc: 'Using callbacks', source: '$("#simpleDiv").resizable({ handles: "all", start: function(e, ui) { $(this).append("<br>Start!") }, stop: function(e, ui) { $(this).append("<br>Stop!") }, resize: function(e, ui) { /*$(this).append("<br>Resize!");*/ } });' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Image Resizing',
|
||||
desc: 'Try resize images! You can play with the options listed below.',
|
||||
html: '<img id="resizebleImage" src="templates/images/puppy.jpg" width="200px" height="135px">',
|
||||
destroy: '$("#resizebleImage").resizable("destroy");',
|
||||
|
||||
options: [
|
||||
{ desc: 'Ghost resizing', source: '$("#resizebleImage").resizable({ handles: "all", ghost:true });' },
|
||||
{ desc: 'All handles', source: '$("#resizebleImage").resizable({ handles: "all"});' },
|
||||
{ desc: 'Using helper', source: '$("#resizebleImage").resizable({ handles: "all", helper: "proxy" });' },
|
||||
{ desc: 'Preserving ratio', source: '$("#resizebleImage").resizable({ handles: "all", aspectRatio: true, helper: "proxy" });' },
|
||||
{ desc: 'Autohide handles', source: '$("#resizebleImage").resizable({ handles: "all", autoHide:true });' },
|
||||
{ desc: 'Transparent handles', source: '$("#resizebleImage").resizable({ handles: "all", transparent: true, helper: "proxy" });' },
|
||||
{ desc: 'Pre-defined handles (e,w)', source: '$("#resizebleImage").resizable({ handles: "e,w" });' },
|
||||
{ desc: 'Resize on a grid [50, 50]', source: '$("#resizebleImage").resizable({ handles: "all", grid: [50, 50] });' },
|
||||
{ desc: 'Min/Max height and width', source: '$("#resizebleImage").resizable({ handles: "all", minWidth: 100, minHeight: 100, maxWidth: 250, maxHeight: 250 });' },
|
||||
{ desc: 'Animated resizing', source: '$("#resizebleImage").resizable({ handles: "all", animate: true, animateDuration: "slow", animateEasing: "swing" });' },
|
||||
{ desc: 'Knob handles (image cropper like)', source: '$("#resizebleImage").resizable({ handles: "all", knobHandles: true });' },
|
||||
{ desc: 'Prevent default browser resize (safari textarea)', source: '$("#resizebleImage").resizable({ handles: "all", preventDefault: true });' },
|
||||
{ desc: 'Preserve cursor on resize', source: '$("#resizebleImage").resizable({ handles: "all", preserveCursor: true });' },
|
||||
{ desc: 'Using callbacks', source: '$("#resizebleImage").resizable({ handles: "all", start: function(e, ui) { $(this).append("<br>Start!") }, stop: function(e, ui) { $(this).append("<br>Stop!") }, resize: function(e, ui) { /*$(this).append("<br>Resize!");*/ } });' }
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Textarea Resizing',
|
||||
desc: 'Try to <b>resize textarea</b>! You can play with the options listed below.',
|
||||
html: '<textarea id="resizebleTextarea">I am a textarea!</textarea>',
|
||||
destroy: '$("#resizebleTextarea").resizable("destroy");',
|
||||
options: [
|
||||
{ desc: 'All handles', source: '$("#resizebleTextarea").resizable({ handles: "all"});' },
|
||||
{ desc: 'Using helper', source: '$("#resizebleTextarea").resizable({ handles: "all", helper: "proxy" });' },
|
||||
{ desc: 'Preserving ratio', source: '$("#resizebleTextarea").resizable({ handles: "all", aspectRatio: true, helper: "proxy" });' },
|
||||
{ desc: 'Autohide handles', source: '$("#resizebleTextarea").resizable({ handles: "all", autoHide:true });' },
|
||||
{ desc: 'Transparent handles', source: '$("#resizebleTextarea").resizable({ handles: "all", transparent: true, helper: "proxy" });' },
|
||||
{ desc: 'Pre-defined handles (e,w)', source: '$("#resizebleTextarea").resizable({ handles: "e,w" });' },
|
||||
{ desc: 'Resize on a grid [50, 50]', source: '$("#resizebleTextarea").resizable({ handles: "all", grid: [50, 50] });' },
|
||||
{ desc: 'Min/Max height and width', source: '$("#resizebleTextarea").resizable({ handles: "all", minWidth: 100, minHeight: 100, maxWidth: 250, maxHeight: 250 });' },
|
||||
{ desc: 'Animated resizing', source: '$("#resizebleTextarea").resizable({ handles: "all", animate: true, animateDuration: "slow", animateEasing: "swing" });' },
|
||||
{ desc: 'Knob handles (image cropper like)', source: '$("#resizebleTextarea").resizable({ handles: "all", knobHandles: true });' },
|
||||
{ desc: 'Ghost resizing', source: '$("#resizebleTextarea").resizable({ handles: "all", ghost:true });' },
|
||||
{ desc: 'Prevent default browser resize (safari textarea)', source: '$("#resizebleTextarea").resizable({ handles: "all", preventDefault: true });' },
|
||||
{ desc: 'Preserve cursor on resize', source: '$("#resizebleTextarea").resizable({ handles: "all", preserveCursor: true });' },
|
||||
{ desc: 'Using callbacks', source: '$("#resizebleTextarea").resizable({ handles: "all", start: function(e, ui) { $(this).append("<br>Start!") }, stop: function(e, ui) { $(this).append("<br>Stop!") }, resize: function(e, ui) { /*$(this).append("<br>Resize!");*/ } });' }
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
};
|
||||
|
||||
$(function(){
|
||||
|
||||
uiRenderDemo(model);
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -1,8 +0,0 @@
|
||||
<ul id="selectable-example" style="list-style:none; cursor: default;">
|
||||
<li style='padding: 5px; border: 1px solid #bbb; margin: 3px;'>Apples</li>
|
||||
<li style='padding: 5px; border: 1px solid #bbb; margin: 3px;'>Bananas</li>
|
||||
<li style='padding: 5px; border: 1px solid #bbb; margin: 3px;'>Grapes</li>
|
||||
<li style='padding: 5px; border: 1px solid #bbb; margin: 3px;'>Pineapple</li>
|
||||
<li style='padding: 5px; border: 1px solid #bbb; margin: 3px;'>Cherries</li>
|
||||
<li style='padding: 5px; border: 1px solid #bbb; margin: 3px;'>Oranges</li>
|
||||
</ul>
|
||||
@ -1,31 +0,0 @@
|
||||
<script type="text/javascript">
|
||||
|
||||
var model = {
|
||||
|
||||
renderAt: '#containerDemo',
|
||||
|
||||
title: 'Selectable Demos',
|
||||
|
||||
demos: [
|
||||
|
||||
{
|
||||
title: 'Selectable',
|
||||
desc: 'With few lines of code you could have selectable elements. You can try more options on the fly!',
|
||||
html: { url: 'templates/ui.selectable.data.html' },
|
||||
destroy: '$("#selectable-example").selectable("destroy");',
|
||||
options: [
|
||||
{ desc: 'Make a simple selectable list', source: '$("#selectable-example").selectable();' },
|
||||
{ desc: 'Tolerance touch', source: '$("#selectable-example").selectable({ tolerance: "touch" });' }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
};
|
||||
|
||||
$(function(){
|
||||
|
||||
uiRenderDemo(model);
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -1,44 +0,0 @@
|
||||
<script type="text/javascript">
|
||||
|
||||
var model = {
|
||||
|
||||
renderAt: '#containerDemo',
|
||||
|
||||
title: 'Slider Demos',
|
||||
|
||||
demos: [
|
||||
|
||||
{
|
||||
title: 'Simple slider',
|
||||
desc: 'With few lines of code you could build a slider. You can try more options on the fly!',
|
||||
html: '<div id="slider3"><div class="ui-slider-handle"></div></div>',
|
||||
destroy: '$("#slider3").sortable("destroy");',
|
||||
options: [
|
||||
{
|
||||
desc: 'Make a simple slider',
|
||||
source: '$("#slider3").slider();'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Multiple slides',
|
||||
desc: 'You can also have multiples slides.',
|
||||
html: '<div id="slider1" class="ui-slider-2"><div class="ui-slider-handle"></div><div class="ui-slider-handle" style="left:100px"></div></div>',
|
||||
destroy: '$("#slider1").slider("destroy");',
|
||||
options: [
|
||||
{ desc: 'Multiple slides', source: '$("#slider1").slider();' }
|
||||
//, { desc: 'Multiple slides with range', source: '$("#slider1").slider({ range: true });' }
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
};
|
||||
|
||||
$(function(){
|
||||
|
||||
uiRenderDemo(model);
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -1,40 +0,0 @@
|
||||
<div class="sortable-container">
|
||||
|
||||
<div id="example1">
|
||||
|
||||
<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>
|
||||
|
||||
<div id="sortable-ex" style="min-height: 110px; min-height:110px; height: auto !important;">
|
||||
|
||||
<div style="float: left;">
|
||||
Selected users
|
||||
<ul id="selectedUsers" style="cursor: hand; cursor: pointer;">
|
||||
<li id='user_Susan'>Susan</li>
|
||||
<li id='user_Beth'>Beth</li>
|
||||
<li id='user_Bob'>Bob</li>
|
||||
<li id='user_Edward'>Edward</li>
|
||||
<li id='user_Kate'>Kate</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style="float: left; margin-left: 50px;">
|
||||
User list
|
||||
<ul id="userList" style="cursor: hand; cursor: pointer;">
|
||||
<li id='user_Jack'>Jack</li>
|
||||
<li id='user_John'>John</li>
|
||||
<li id='user_Marry'>Marry</li>
|
||||
<li id='user_Claire'>Claire</li>
|
||||
<li id='user_Daniel'>Daniel</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<br style="clear: both;">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,23 +0,0 @@
|
||||
<div class="sortable-container">
|
||||
|
||||
<div id="example3">
|
||||
|
||||
<div style="min-height: 50px; min-height:50px; height:auto !important;">
|
||||
<style type="text/css">
|
||||
#placeholderSortable li {
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
<ul id="placeholderSortable" style="list-style-position: inside; height: 30px; cursor: hand; cursor: pointer;">
|
||||
<li id='user_Jack'>Jack</li>
|
||||
<li id='user_John'>John</li>
|
||||
<li id='user_Marry'>Marry</li>
|
||||
<li id='user_Claire'>Claire</li>
|
||||
<li id='user_Daniel'>Daniel</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -1,55 +0,0 @@
|
||||
<script type="text/javascript">
|
||||
|
||||
var model = {
|
||||
|
||||
onRenderEnd: function() {
|
||||
|
||||
$.ui.disableSelection($('#sortable-ex').get(0));
|
||||
|
||||
},
|
||||
|
||||
renderAt: '#containerDemo',
|
||||
|
||||
title: 'Sortable Demos',
|
||||
|
||||
demos: [
|
||||
|
||||
{
|
||||
|
||||
title: 'Sortable',
|
||||
desc: 'With few lines of code you could have sortable elements. You can try more options on the fly!',
|
||||
html: { url: 'templates/ui.sortable.ex1.html' },
|
||||
destroy: '$("#selectedUsers").sortable("destroy");',
|
||||
options: [
|
||||
{
|
||||
desc: 'Make a simple sortable list',
|
||||
source:
|
||||
'$("#selectedUsers").sortable({ connectWith: ["#userList"] }); ' +
|
||||
'$("#userList").sortable({ connectWith: ["#selectedUsers"] });'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Sortable',
|
||||
desc: 'Floating, with defined placeholder class',
|
||||
html: { url: 'templates/ui.sortable.ex3.html' },
|
||||
destroy: '$("#placeholderSortable").sortable("destroy");',
|
||||
options: [
|
||||
{
|
||||
desc: 'Floating, with defined placeholder class',
|
||||
source: '$("#placeholderSortable").sortable({ placeholder: "ui-selected", forcePlaceholderSize: true, revert: true });'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
};
|
||||
|
||||
$(function(){
|
||||
|
||||
uiRenderDemo(model);
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -1,35 +0,0 @@
|
||||
<div id="tabsEx1">
|
||||
|
||||
<input type="button" onclick="$('#tabsEx1 > ul').tabs('add', '#appended-tab', 'New Tab');" value="Add new tab">
|
||||
<input type="button" onclick="$('#tabsEx1 > ul').tabs('add', '#inserted-tab', 'New Tab', 1);" value="Insert tab">
|
||||
<input type="button" onclick="$('#tabsEx1 > ul').tabs('disable', 1);" value="Disable tab 2">
|
||||
<input type="button" onclick="$('#tabsEx1 > ul').tabs('enable', 1);" value="Enable tab 2">
|
||||
<input type="button" onclick="$('#tabsEx1 > ul').tabs('select', 2);" value="Select tab 3">
|
||||
|
||||
<br><br>
|
||||
|
||||
<ul style="height: 30px;">
|
||||
<li><a href="#fragment-1"><span>One</span></a></li>
|
||||
<li><a href="#fragment-2"><span>Two</span></a></li>
|
||||
<li><a href="#fragment-3"><span>Three</span></a></li>
|
||||
</ul>
|
||||
<div id="fragment-1">
|
||||
<p>First tab is active by default</p>
|
||||
</div>
|
||||
<div id="fragment-2">
|
||||
<p><b>Second tab is active</b></p><br>
|
||||
<p>Alternative ways to specify the active tab will overrule this argument, listed in the order of their precedence:</p><br>
|
||||
<ol>
|
||||
<li>If a fragment identifier (hash) in the URL of the page refers to the id of a tab panel of a tab interface the corresponding tab will become the initial tab.</li>
|
||||
<li>Same if you use the cookie option to save the latest selected tab in.</li>
|
||||
<li>Last not least you can set the selected tab by attaching the selected tab class
|
||||
class (default: "ui-tabs-selected") to one of the <code>li</code> elements
|
||||
representing a single tab.</li>
|
||||
</ol>
|
||||
</div>
|
||||
<div id="fragment-3">
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
|
||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
|
||||
</div>
|
||||
</div>
|
||||
@ -1,54 +0,0 @@
|
||||
<script type="text/javascript">
|
||||
|
||||
var model = {
|
||||
|
||||
renderAt: '#containerDemo',
|
||||
|
||||
title: 'Tabs Demos',
|
||||
|
||||
demos: [
|
||||
|
||||
{
|
||||
title: 'Simple Tabs',
|
||||
desc: 'With few lines of code you could make tabs. You can try more options on the fly!',
|
||||
html: { url: 'templates/ui.tabs.ex1.html' },
|
||||
destroy: '$("tabsEx1 > ul").tabs("destroy");',
|
||||
options: [
|
||||
{
|
||||
desc: 'First tab active by default',
|
||||
source: '$("#tabsEx1 > ul").tabs();'
|
||||
},
|
||||
{
|
||||
desc: 'Start With Custom Tab',
|
||||
source: '$("#tabsEx1 > ul").tabs({selected:1});'
|
||||
},
|
||||
{
|
||||
desc: 'Use a slide effect to switch tabs',
|
||||
source: '$("#tabsEx1 > ul").tabs({ fx: { height: "toggle" } });'
|
||||
},
|
||||
{
|
||||
desc: 'Use a fade effect to switch tabs',
|
||||
source: '$("#tabsEx1 > ul").tabs({ fx: { opacity: "toggle" } });'
|
||||
},
|
||||
{
|
||||
desc: 'Use a combined slide and fade effect to switch tabs',
|
||||
source: '$("#tabsEx1 > ul").tabs({ fx: { height: "toggle", opacity: "toggle" } });'
|
||||
},
|
||||
{
|
||||
desc: 'Define event to switch tabs (mouseover)',
|
||||
source: '$("#tabsEx1 > ul").tabs({ event: "mouseover" });'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
|
||||
};
|
||||
|
||||
$(function(){
|
||||
|
||||
uiRenderDemo(model);
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
@ -1,88 +0,0 @@
|
||||
<style>
|
||||
|
||||
#divTabs, #divAddTabs {
|
||||
height:30px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="containerDemo"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
var model = {
|
||||
|
||||
renderAt: '#containerDemo',
|
||||
|
||||
title: 'Tabs Demos',
|
||||
|
||||
demos: [
|
||||
|
||||
{
|
||||
title: 'Simple Tabs',
|
||||
html: ['<div><ul id="divTabs">',
|
||||
'<li><a href="#tabs-fragment-1"><span>One</span></a></li>',
|
||||
'<li><a href="#tabs-fragment-2"><span>Two</span></a></li>',
|
||||
'<li><a href="#tabs-fragment-3"><span>Three</span></a></li>',
|
||||
'</ul>',
|
||||
'<div id="tabs-fragment-1">',
|
||||
'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
|
||||
'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
|
||||
'</div>',
|
||||
'<div id="tabs-fragment-2">',
|
||||
'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
|
||||
'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
|
||||
'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
|
||||
'</div>',
|
||||
'<div id="tabs-fragment-3">',
|
||||
'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
|
||||
'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
|
||||
'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
|
||||
'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
|
||||
'</div></div>'].join(''),
|
||||
destroy: '$("#divTabs").tabs("destroy");',
|
||||
|
||||
options: [
|
||||
{ desc: 'Simple Tabs', source: '$("#divTabs").tabs();' },
|
||||
{ desc: 'Simple Cloned Tabs', source: '$("#divTabs").clone().tabs();' },
|
||||
{ desc: 'Simple Empty Tabs', source: '$("#divTabs").tabs();' },
|
||||
{ desc: 'Simple Detached Tabs', source: '$("<div></div>").tabs();' }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Add A Tab',
|
||||
html: ['<div><ul id="divAddTabs">',
|
||||
'<li><a href="#addtabs-fragment-1"><span>One</span></a></li>',
|
||||
'<li><a href="#addtabs-fragment-2"><span>Two</span></a></li>',
|
||||
'<li><a href="#addtabs-fragment-3"><span>Three</span></a></li>',
|
||||
'</ul>',
|
||||
'<div id="addtabs-fragment-1">',
|
||||
'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
|
||||
'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
|
||||
'</div>',
|
||||
'<div id="addtabs-fragment-2">',
|
||||
'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
|
||||
'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
|
||||
'</div>',
|
||||
'<div id="addtabs-fragment-3">',
|
||||
'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
|
||||
'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
|
||||
'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.',
|
||||
'</div></div>'].join(''),
|
||||
destroy: '$("#divAddTabs").tabs("destroy");',
|
||||
|
||||
options: [
|
||||
{ desc: 'Simple Dialog', source: '$("#divAddTabs").tabs("add", "#", "Added");' }
|
||||
]
|
||||
},
|
||||
]
|
||||
|
||||
};
|
||||
|
||||
$(window).load(function(){
|
||||
|
||||
uiRenderDemo(model);
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 139 B |
Binary file not shown.
|
Before Width: | Height: | Size: 86 B |
Binary file not shown.
|
Before Width: | Height: | Size: 452 B |
@ -1,277 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
|
||||
<title>Slide Demo - Fixed Drawer</title>
|
||||
<style type="text/css">
|
||||
<!--
|
||||
/*************************************/
|
||||
/* Blueprint: reset.css */
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, font, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
font-weight: inherit;
|
||||
font-style: inherit;
|
||||
font-size: 100%;
|
||||
font-family: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* Remember to define focus styles! */
|
||||
:focus {
|
||||
outline: 0;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
color: black;
|
||||
background: white;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Tables still need 'cellspacing="0"' in the markup. */
|
||||
table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
}
|
||||
caption, th, td {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* Remove possible quote marks (") from <q>, <blockquote>. */
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: "";
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: "" "";
|
||||
}
|
||||
|
||||
/*************************************/
|
||||
/* Demo Styles */
|
||||
.capt,
|
||||
.capb {
|
||||
background: url("images/caps.gif") no-repeat;
|
||||
height:4px;
|
||||
width:100%;
|
||||
/*position:absolute;*/
|
||||
z-index:100;
|
||||
margin:0px;
|
||||
padding:0px;
|
||||
}
|
||||
.capt {
|
||||
position:absolute;
|
||||
background-position:0 -4px;
|
||||
}
|
||||
.capb {
|
||||
margin-top:-19px;
|
||||
}
|
||||
#content {
|
||||
float:left;
|
||||
}
|
||||
.drawers-wrapper {
|
||||
position: relative;
|
||||
width: 188px;
|
||||
float:left;
|
||||
margin:10px;
|
||||
}
|
||||
.drawers {
|
||||
margin-bottom:15px;
|
||||
color:#76797C;
|
||||
font-size:11px;
|
||||
line-height: 18px;
|
||||
}
|
||||
.drawer {
|
||||
background:transparent url(images/sideboxlight_bg.gif) repeat-y scroll 0pt;
|
||||
color:#76797C;
|
||||
font-size:11px;
|
||||
line-height:1.3em;
|
||||
height: 1%; /* for IE6 & 7 */
|
||||
}
|
||||
|
||||
.drawer-handle {
|
||||
background:#939393 url(images/slider_handlebg.png) no-repeat scroll 0pt;
|
||||
color:#333333;
|
||||
cursor:default;
|
||||
height:25px;
|
||||
line-height:25px;
|
||||
text-indent:15px;
|
||||
font-size:12px;
|
||||
width:100%;
|
||||
}
|
||||
.drawer-handle.open {
|
||||
background-color:#72839D;
|
||||
background-position:-188px 0pt;
|
||||
color:#FFFFFF;
|
||||
}
|
||||
|
||||
/* nasty, but it fixes the indent on the first one. */
|
||||
h2.drawer-handle span {
|
||||
|
||||
}
|
||||
.drawer ul {
|
||||
padding: 0 12px;
|
||||
padding-bottom:0pt;
|
||||
}
|
||||
|
||||
/* for IE6 - to override the colour set by .drawer-handle.open (IE6 cannot handle class concatinations) */
|
||||
* html .drawer ul {
|
||||
background-color: #FFFFFF;
|
||||
margin: 0 1px;
|
||||
}
|
||||
|
||||
.drawer li {
|
||||
border-bottom:1px solid #E5E5E5;
|
||||
line-height:16px;
|
||||
padding:6px 0pt;
|
||||
}
|
||||
.drawer-content ul {
|
||||
padding-top: 7px;
|
||||
}
|
||||
.drawer-content li a {
|
||||
display:block;
|
||||
overflow:hidden;
|
||||
}
|
||||
.alldownloads li {
|
||||
border:0pt none;
|
||||
line-height:18px;
|
||||
padding:0pt;
|
||||
}
|
||||
|
||||
.drawers a {
|
||||
color:#666666;
|
||||
text-decoration:none;
|
||||
font-family:"Lucida Grande",Geneva,Arial,Verdana,sans-serif;
|
||||
}
|
||||
-->
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" src="../../../jquery-1.2.6.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/ui.accordion.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/effects.core.js"></script>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
<!--
|
||||
$(function () {
|
||||
$('ul.drawers').accordion({
|
||||
header: 'h2.drawer-handle',
|
||||
selectedClass: 'open',
|
||||
//animated: 'easeOutBounce',
|
||||
//animated: 'bounceslide',
|
||||
//animated: 'easeslide',
|
||||
animated: function(options) {
|
||||
return options.down ? "easeOutBounce" : "easeInOutCubic";
|
||||
},
|
||||
//duration: 500,
|
||||
duration: function(options) {
|
||||
return options.down ? 700 : 400;
|
||||
},
|
||||
event: 'mouseover'
|
||||
});
|
||||
});
|
||||
//-->
|
||||
</script>
|
||||
</head>
|
||||
<body id="page">
|
||||
<div id="content">
|
||||
<h1>Fixed drawer slide out demo (using accordion plugin)</h1>
|
||||
<p>This example demonstrates the Apple downloads slider/accordion effect using the jQuery Accordion plugin.</p>
|
||||
<p>Mouse over the headings to reveal the list of available links.</p>
|
||||
|
||||
<p>
|
||||
<a href="http://jqueryfordesigners.com/slide-out-and-drawer-effect/">Read the article this demonstration relates to</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="drawers-wrapper">
|
||||
<div class="capt"></div>
|
||||
<ul class="drawers">
|
||||
<li class="drawer">
|
||||
<h2 class="drawer-handle open">
|
||||
<span>Downloads</span>
|
||||
</h2>
|
||||
<ul class="alldownloads">
|
||||
<li id="sn-downloadsmacosx"><a href="/downloads/macosx/">All Categories</a></li>
|
||||
<li id="sn-aperture"><a href="/downloads/macosx/aperture/">Aperture</a></li>
|
||||
<li id="sn-apple"><a href="/downloads/macosx/apple/">Apple</a></li>
|
||||
<li id="sn-audio"><a href="/downloads/macosx/audio/">Audio</a></li>
|
||||
<li id="sn-automator"><a href="/downloads/macosx/automator/">Automator Actions</a></li>
|
||||
<li id="sn-businessfinance"><a href="/downloads/macosx/business_finance/">Business & Finance</a></li>
|
||||
<li id="sn-calendars"><a href="/downloads/macosx/calendars/">Calendars</a></li>
|
||||
<li id="sn-developmenttools"><a href="/downloads/macosx/development_tools/">Development Tools</a></li>
|
||||
<li id="sn-drivers"><a href="/downloads/macosx/drivers/">Drivers</a></li>
|
||||
<li id="sn-emailchat"><a href="/downloads/macosx/email_chat/">Email & Chat</a></li>
|
||||
<li id="sn-finalcutstudio"><a href="/downloads/macosx/finalcutstudio/">Final Cut Studio</a></li>
|
||||
<li id="sn-games"><a href="/downloads/macosx/games/">Games</a></li>
|
||||
<li id="sn-homelearning"><a href="/downloads/macosx/home_learning/">Home & Learning</a></li>
|
||||
<li id="sn-iconsscreensavers"><a href="/downloads/macosx/icons_screensavers/">Icons, Screensavers, etc.</a></li>
|
||||
<li id="sn-imaging3d"><a href="/downloads/macosx/imaging_3d/">Imaging & 3D</a></li>
|
||||
<li id="sn-internetutilities"><a href="/downloads/macosx/internet_utilities/">Internet Utilities</a></li>
|
||||
<li id="sn-ipoditunes"><a href="/downloads/macosx/ipod_itunes/">iPod + iTunes</a></li>
|
||||
<li id="sn-mathscience"><a href="/downloads/macosx/math_science/">Math & Science</a></li>
|
||||
<li id="sn-networkingsecurity"><a href="/downloads/macosx/networking_security/">Networking & Security</a></li>
|
||||
<li id="sn-productivitytools"><a href="/downloads/macosx/productivity_tools/">Productivity Tools</a></li>
|
||||
<li id="sn-spotlight"><a href="/downloads/macosx/spotlight/">Spotlight Plugins</a></li>
|
||||
<li id="sn-systemdiskutilities"><a href="/downloads/macosx/system_disk_utilities/">System/Disk Utilities</a></li>
|
||||
<li id="sn-unixopensource"><a href="/downloads/macosx/unix_open_source/">UNIX & Open Source</a></li>
|
||||
<li id="sn-video"><a href="/downloads/macosx/video/">Video</a></li>
|
||||
<li id="sn-dashboard"><a href="/downloads/dashboard/" class="bottom">Widgets</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="drawer">
|
||||
<h2 class="drawer-handle">Top Downloads</h2>
|
||||
<ul>
|
||||
<li><a title="iTunes 7.5" href="http://www.apple.com/itunes/download/">1. iTunes 7.5</a></li>
|
||||
<li><a title="QuickTime 7.3.1" href="http://www.apple.com/quicktime/download/">2. QuickTime 7.3.1</a></li>
|
||||
<li><a title="Safari 3 Public Beta" href="http://www.apple.com/safari/download/">3. Safari 3 Public Beta</a></li>
|
||||
<li><a title="MacPool" href="/downloads/macosx/games/simulation_and_sports/macpool.html">4. MacPool Realistic and easy to play computer simu…</a></li>
|
||||
<li><a title="Guitar Hero III: Legends of Rock" href="/downloads/macosx/games/demos_updates/guitarheroiiilegendsofrock.html">5. Guitar Hero III: L…</a></li>
|
||||
<li><a title="Messenger for Mac" href="/downloads/macosx/email_chat/messengerformac.html">6. Messenger for Mac</a></li>
|
||||
<li><a title="Google Earth" href="/downloads/macosx/home_learning/googleearth.html">7. Google Earth</a></li>
|
||||
<li><a title="Monopoly" href="/downloads/macosx/games/cards_puzzle/monopoly.html">8. Monopoly</a></li>
|
||||
<li><a title="Litho System Icons" href="/downloads/macosx/icons_screensavers/lithosystemicons.html">9. Litho System Icons</a></li>
|
||||
<li><a title="Battlefield 2142" href="/downloads/macosx/games/demos_updates/battlefield2142.html">10. Battlefield 2142</a></li>
|
||||
<li><a title="More iChat Effects" href="/downloads/macosx/email_chat/moreichateffects.html">11. More iChat Effects</a></li>
|
||||
<li><a title="Dragster" href="/downloads/macosx/internet_utilities/dragster.html">12. Dragster</a></li>
|
||||
<li><a title="iSquint" href="/downloads/macosx/ipod_itunes/isquint.html">13. iSquint</a></li>
|
||||
<li class="last"><a title="US Holiday Calendar" href="/downloads/macosx/calendars/usholidaycalendar.html">14. US Holiday Calendar</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="drawer last">
|
||||
<h2 class="drawer-handle">Top Apple Downloads</h2>
|
||||
<ul>
|
||||
<li><a title="iTunes 7.5" href="http://www.apple.com/itunes/download/">1. iTunes 7.5</a></li>
|
||||
<li><a title="QuickTime 7.3.1" href="http://www.apple.com/quicktime/download/">2. QuickTime 7.3.1</a></li>
|
||||
<li><a title="Safari 3 Public Beta" href="http://www.apple.com/safari/download/">3. Safari 3 Public Beta</a></li>
|
||||
<li><a title="Mac OS X 10.5.1 Update" href="/downloads/macosx/apple/macosx_updates/macosx1051update.html">4. Mac OS X 10.5.1 Up…</a></li>
|
||||
<li><a title="Java for Mac OS X 10.4 Release 5" href="/downloads/macosx/apple/macosx_updates/javaformacosx104release5.html">5. Java for Mac OS X …</a></li>
|
||||
<li><a title="iPod Reset Utility 1.0.2 for Windows" href="/downloads/macosx/apple/ipod_itunes/ipodresetutility102forwindows.html">6. iPod Reset Utility…</a></li>
|
||||
<li><a title="iPhoto 7.1.1" href="/downloads/macosx/apple/application_updates/iphoto711.html">7. iPhoto 7.1.1</a></li>
|
||||
<li><a title="Bonjour for Windows" href="/downloads/macosx/apple/windows/bonjourforwindows.html">8. Bonjour for Windows</a></li>
|
||||
<li><a title="Mac OS X 10.4.11 Combo Update (PPC)" href="/downloads/macosx/apple/macosx_updates/macosx10411comboupdateppc.html">9. Mac OS X 10.4.11 C…<br/>The 10.4.11 Update is recommended for al…</a></li>
|
||||
<li><a title="Java for Mac OS X 10.4, Release 6" href="/downloads/macosx/apple/macosx_updates/javaformacosx104release6.html">10. Java for Mac OS X …</a></li>
|
||||
<li><a title="GarageBand 4.1.1" href="/downloads/macosx/apple/application_updates/garageband411.html">11. GarageBand 4.1.1</a></li>
|
||||
<li><a title="iPod Updater 2006-06-28 for Windows" href="/downloads/macosx/apple/ipod_itunes/ipodupdater20060628forwindows.html">12. iPod Updater 2006-…</a></li>
|
||||
<li><a title="Security Update 2007-009 1.1 (10.4.11 Universal)" href="/downloads/macosx/apple/security_updates/securityupdate20070091110411universal.html">13. Security Update 20…</a></li>
|
||||
<li class="last"><a title="Security Update 2007-009 1.1 (10.5.1)" href="/downloads/macosx/apple/security_updates/securityupdate2007009111051.html">14. Security Update 20…</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="capb"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,65 +0,0 @@
|
||||
$(document).ready(function() {
|
||||
|
||||
$("div.effect")
|
||||
.hover(function() {
|
||||
$(this).addClass("hover");
|
||||
}, function() {
|
||||
$(this).removeClass("hover");
|
||||
})
|
||||
;
|
||||
|
||||
|
||||
var effect = function(el, n, o) {
|
||||
|
||||
$.extend(o, {
|
||||
easing: "easeOutQuint"
|
||||
});
|
||||
|
||||
$(el).bind("click", function() {
|
||||
|
||||
$(this).addClass("current").hide(n, o, 1000, function() {
|
||||
var self = this;
|
||||
window.setTimeout(function() {
|
||||
$(self).show(n, o, 1000, function() { $(this).removeClass("current"); });
|
||||
},500);
|
||||
});
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
|
||||
effect("#blindHorizontally", "blind", { direction: "horizontal" });
|
||||
effect("#blindVertically", "blind", { direction: "vertical" });
|
||||
|
||||
effect("#bounce3times", "bounce", { times: 3 });
|
||||
|
||||
effect("#clipHorizontally", "clip", { direction: "horizontal" });
|
||||
effect("#clipVertically", "clip", { direction: "vertical" });
|
||||
|
||||
effect("#dropDown", "drop", { direction: "down" });
|
||||
effect("#dropUp", "drop", { direction: "up" });
|
||||
effect("#dropLeft", "drop", { direction: "left" });
|
||||
effect("#dropRight", "drop", { direction: "right" });
|
||||
|
||||
effect("#explode9", "explode", { });
|
||||
effect("#explode36", "explode", { pieces: 36 });
|
||||
|
||||
effect("#fold", "fold", { size: 50 });
|
||||
|
||||
effect("#highlight", "highlight", { });
|
||||
|
||||
effect("#pulsate", "pulsate", { times: 2 });
|
||||
|
||||
effect("#puff", "puff", { times: 2 });
|
||||
effect("#scale", "scale", { });
|
||||
|
||||
$("#shake").bind("click", function() { $(this).addClass("current").effect("shake", {}, 100, function() { $(this).removeClass("current"); }); });
|
||||
|
||||
effect("#slideDown", "slide", { direction: "down" });
|
||||
effect("#slideUp", "slide", { direction: "up" });
|
||||
effect("#slideLeft", "slide", { direction: "left" });
|
||||
effect("#slideRight", "slide", { direction: "right" });
|
||||
|
||||
$("#transfer").bind("click", function() { $(this).addClass("current").effect("transfer", { to: "div:eq(0)" }, 1000, function() { $(this).removeClass("current"); }); });
|
||||
|
||||
});
|
||||
@ -1,165 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
|
||||
<title>Effects Test Suite</title>
|
||||
<link rel="stylesheet" href="style.css" type="text/css" title="no title" charset="utf-8" />
|
||||
|
||||
<script type="text/javascript" src="../../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/effects.core.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../../ui/effects.blind.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/effects.bounce.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/effects.clip.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/effects.drop.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/effects.explode.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/effects.fold.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/effects.highlight.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/effects.pulsate.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/effects.scale.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/effects.shake.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/effects.slide.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/effects.transfer.js"></script>
|
||||
|
||||
<script type="text/javascript" src="demo.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul class="effects">
|
||||
|
||||
<li>
|
||||
<div class="effect" id="blindHorizontally">
|
||||
<p>Blind horizontally</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="blindVertically">
|
||||
<p>Blind vertically</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="bounce3times">
|
||||
<p>Bounce 3 times</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="clipHorizontally">
|
||||
<p>Clip horizontally</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="clipVertically">
|
||||
<p>Clip vertically</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="dropDown">
|
||||
<p>Drop down</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="dropUp">
|
||||
<p>Drop up</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="dropLeft">
|
||||
<p>Drop left</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="dropRight">
|
||||
<p>Drop right</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="explode9">
|
||||
<p>Explode in 9 pieces</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="explode36">
|
||||
<p>Explode in 36 pieces</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="fold">
|
||||
<p>Fold</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="highlight">
|
||||
<p>Highlight</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="pulsate">
|
||||
<p>Pulsate 2 times</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="puff">
|
||||
<p>Puff</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="scale">
|
||||
<p>Scale</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="shake">
|
||||
<p>Shake</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="slideDown">
|
||||
<p>Slide down</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="slideUp">
|
||||
<p>Slide up</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="slideLeft">
|
||||
<p>Slide left</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="slideRight">
|
||||
<p>Slide right</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div class="effect" id="transfer">
|
||||
<p>Transfer to first element</p>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,49 +0,0 @@
|
||||
body,html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
font-family: Arial;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
ul.effects {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul.effects li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 120px;
|
||||
height: 100px;
|
||||
float: left;
|
||||
margin-top: 20px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
div.effect {
|
||||
width: 120px;
|
||||
height: 100px;
|
||||
background: #333;
|
||||
border: 5px outset #aaa;
|
||||
float: left;
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
}
|
||||
|
||||
div.current {
|
||||
border: 5px outset #FF0000;
|
||||
background: #660000;
|
||||
}
|
||||
|
||||
div.effect p {
|
||||
color: #eee;
|
||||
margin: 0px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.ui-effects-transfer {
|
||||
border: 1px dotted #fff;
|
||||
background: #666;
|
||||
opacity: 0.5;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 110 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 90 KiB |
@ -1,228 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Language" content="en" />
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>Image Cropper: jQuery Real-world Demo</title>
|
||||
|
||||
<script type="text/javascript" src="../../../jquery-1.2.6.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/ui.core.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/ui.resizable.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/ui.draggable.js"></script>
|
||||
|
||||
<script type="text/javascript" src="../../../ui/effects.core.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/effects.bounce.js"></script>
|
||||
<script type="text/javascript" src="../../../ui/effects.scale.js"></script>
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
<!--
|
||||
/*************************************/
|
||||
/* Real-World CSS */
|
||||
|
||||
@import "real-world.css";
|
||||
|
||||
/*************************************/
|
||||
/* Demo CSS */
|
||||
|
||||
#sidebar div {
|
||||
text-align:center;
|
||||
}
|
||||
.thumb ul {
|
||||
padding:10px 0 0 0;
|
||||
}
|
||||
.thumbs li {
|
||||
margin:4px 20px;
|
||||
}
|
||||
.thumbs li a,
|
||||
.thumbs li a img{
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
display: block;
|
||||
}
|
||||
.thumbs li a:hover,
|
||||
.thumbs li a:hover img{
|
||||
height: 130px;
|
||||
width: 130px;
|
||||
}
|
||||
.thumbs li a:hover {
|
||||
border: 4px solid #E8EEF7;
|
||||
}
|
||||
|
||||
#break strong {
|
||||
margin:0 0 4px 0;
|
||||
}
|
||||
#break ul {
|
||||
padding:6px;
|
||||
}
|
||||
#break ul li {
|
||||
padding:3px 0px;
|
||||
font-style: italic;
|
||||
}
|
||||
#break ul li span {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.ui-resizable-knob {
|
||||
border: 1px #fff dashed;
|
||||
}
|
||||
|
||||
/*************************************/
|
||||
/* Cropper CSS */
|
||||
|
||||
#resizeme_containment_wrap_image {
|
||||
position: relative;
|
||||
}
|
||||
#resizeme_containment_div {
|
||||
position: absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
width: 150px;
|
||||
height:150px;
|
||||
}
|
||||
|
||||
#resizeme_containment_div_wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
-->
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
var getSizeImg = function(src) {
|
||||
var timg = $('<img>').attr('src', src).css({ position: 'absolute', top: '-1000px', left: '-1000px' }).appendTo('body');
|
||||
var size = [ timg.get(0).offsetWidth, timg.get(0).offsetHeight ];
|
||||
|
||||
try { document.body.removeChild(timg[0]); }
|
||||
catch(e) {};
|
||||
|
||||
return size;
|
||||
};
|
||||
|
||||
$().ready(function(){
|
||||
|
||||
$('#resizeme_containment_div').resizable({
|
||||
|
||||
containment: $('#resizeme_containment_div_wrapper'),
|
||||
|
||||
//proxy: 'proxy',
|
||||
|
||||
//ghost: true,
|
||||
|
||||
//animate:true,
|
||||
|
||||
handles: 'all',
|
||||
|
||||
knobHandles: true,
|
||||
|
||||
//transparent: true,
|
||||
|
||||
//aspectRatio: true,
|
||||
|
||||
autoHide: true,
|
||||
|
||||
minWidth: 100,
|
||||
|
||||
minHeight: 100,
|
||||
|
||||
resize: function(event, ui) {
|
||||
var self = $(this).data("resizable");
|
||||
|
||||
this.style.backgroundPosition = '-' + (self.position.left) + 'px -' + (self.position.top) + 'px';
|
||||
|
||||
|
||||
$("#log-top").html(self.position.top+"px");
|
||||
$("#log-left").html(self.position.left+"px");
|
||||
|
||||
$("#log-height").html(self.size.height+"px");
|
||||
$("#log-width").html(self.size.width+"px");
|
||||
|
||||
},
|
||||
stop: function(event, ui) {
|
||||
var self = $(this).data("resizable");
|
||||
this.style.backgroundPosition = (self.position.left * -1) + 'px ' + (self.position.top * -1) + 'px';
|
||||
}
|
||||
})
|
||||
|
||||
.draggable({
|
||||
|
||||
cursor: 'move',
|
||||
|
||||
containment: $('#resizeme_containment_div_wrapper'),
|
||||
|
||||
drag: function(event, ui) {
|
||||
var self = $(this).data("draggable");
|
||||
this.style.backgroundPosition = (self.position.left * -1) + 'px ' + (self.position.top * -1) + 'px';
|
||||
|
||||
$("#log-top").html(self.position.top+"px");
|
||||
$("#log-left").html(self.position.left+"px");
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
$('.thumbs').find("li a").click(function(event){
|
||||
|
||||
$('#resizeme_containment_div').css('top', '0');
|
||||
|
||||
$('#resizeme_containment_div').css('left', '0');
|
||||
|
||||
var size = getSizeImg($(this).find("img").attr("src"));
|
||||
|
||||
$('#resizeme_containment_wrap_image').css( { width: size[0], height: size[1], background: 'transparent url('+$(this).find("img").attr("src")+') no-repeat scroll 0%' } );
|
||||
$('#resizeme_containment_div_wrapper').css( { width: size[0], height: size[1] } );
|
||||
$('#resizeme_containment_div').css('background', 'transparent url('+$(this).find("img").attr("src")+') no-repeat scroll 0px 0px');
|
||||
|
||||
return false;
|
||||
|
||||
});
|
||||
|
||||
|
||||
$('#resizeme_containment_wrap_image').css({ opacity: 0.5 });
|
||||
|
||||
$("#log-height").html($('#resizeme_containment_div').height()+"px");
|
||||
|
||||
$("#log-width").html($('#resizeme_containment_div').width()+"px");
|
||||
|
||||
});
|
||||
|
||||
$(window).load(function(){
|
||||
var size = getSizeImg("img/img01.jpg");
|
||||
$('#resizeme_containment_div').css('background', 'transparent url(img/img01.jpg) no-repeat scroll 0px 0px');
|
||||
$('#resizeme_containment_div_wrapper').css( { width: size[0], height: size[1] } );
|
||||
$('#resizeme_containment_wrap_image').css( { width: size[0], height: size[1], background: 'transparent url(img/img01.jpg) no-repeat scroll 0%' } );
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="sidebar">
|
||||
<ul class="thumbs">
|
||||
<li><a href="#" title="Open This Image"><img src="img/img01.jpg"/></a></li>
|
||||
<li><a href="#" title="Open This Image"><img src="img/img02.jpg"/></a></li>
|
||||
<li><a href="#" title="Open This Image"><img src="img/img03.jpg"/></a></li>
|
||||
<li><a href="#" title="Open This Image"><img src="img/img04.jpg"/></a></li>
|
||||
<li><a href="#" title="Open This Image"><img src="img/img05.jpg"/></a></li>
|
||||
</div>
|
||||
</div>
|
||||
<div id="main">
|
||||
<div id="header">
|
||||
<h2>jQuery Real-world Demo: Image Cropper</h2>
|
||||
</div>
|
||||
<div id="content">
|
||||
<div id="resizeme_containment_div_wrapper">
|
||||
<div id="resizeme_containment_wrap_image"></div>
|
||||
<div id="resizeme_containment_div"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="break">
|
||||
<strong>Properties:</strong>
|
||||
<ul>
|
||||
<li>width: <span id="log-width">0px</span></li>
|
||||
<li>height: <span id="log-height">0px</span></li>
|
||||
<li>top: <span id="log-top">0px</span></li>
|
||||
<li>left: <span id="log-left">0px</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,104 +0,0 @@
|
||||
/*************************************/
|
||||
/* Blueprint: reset.css */
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, font, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
font-size: 100%;
|
||||
font-family: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/* Remember to define focus styles! */
|
||||
:focus {
|
||||
outline: 0;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
color: black;
|
||||
background: white;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Tables still need 'cellspacing="0"' in the markup. */
|
||||
table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
}
|
||||
caption, th, td {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
/* Remove possible quote marks (") from <q>, <blockquote>. */
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: "";
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: "" "";
|
||||
}
|
||||
|
||||
.clear {
|
||||
clear:both;
|
||||
}
|
||||
|
||||
/*************************************/
|
||||
/* Layout */
|
||||
body, html {
|
||||
height: 100%;
|
||||
font-family:sans-serif;
|
||||
font-size:13px;
|
||||
margin:0px;
|
||||
padding:0px;
|
||||
}
|
||||
body, html {
|
||||
height: 100%;
|
||||
font-family:sans-serif;
|
||||
font-size:13px;
|
||||
|
||||
}
|
||||
#main {
|
||||
height:auto;
|
||||
background: #E8EEF7;
|
||||
border-left:1px solid #ccc;
|
||||
border-bottom:1px solid #ccc;
|
||||
margin:0 0 0 200px;
|
||||
}
|
||||
#header {
|
||||
height:30px;
|
||||
padding:10px;
|
||||
font-size:2em;
|
||||
font-weight:bold;
|
||||
text-align: center;
|
||||
border-bottom:1px solid #ccc;
|
||||
background: #E8EEF7;
|
||||
}
|
||||
#main #content {
|
||||
padding:10px;
|
||||
background: #FFF;
|
||||
}
|
||||
#main #break {
|
||||
padding:10px;
|
||||
border-top:1px solid #ccc;
|
||||
}
|
||||
#sidebar {
|
||||
float:left;
|
||||
width:200px;
|
||||
height:100%;
|
||||
border-right:1px solid #ccc;
|
||||
}
|
||||
#sidebar div {
|
||||
padding:10px;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user