Added jQuery UI 1.6.0 library
This commit is contained in:
parent
2c1fab8cfb
commit
b34d869a3d
490 changed files with 41000 additions and 0 deletions
26
sites/all/libraries/jquery.ui/AUTHORS.txt
Normal file
26
sites/all/libraries/jquery.ui/AUTHORS.txt
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
jQuery UI Authors (http://ui.jquery.com/about)
|
||||
|
||||
This software consists of voluntary contributions made by many
|
||||
individuals. For exact contribution history, see the revision history
|
||||
and logs, available at http://jquery-ui.googlecode.com/svn/
|
||||
|
||||
Brandon Aaron
|
||||
Paul Bakaus (paulbakaus.com)
|
||||
David Bolter
|
||||
Chi Cheng (cloudream@gmail.com)
|
||||
Maggie Costello
|
||||
Aaron Eisenberger (aaronchi@gmail.com)
|
||||
Ariel Flesler
|
||||
Scott González
|
||||
Marc Grabanski (m@marcgrabanski.com)
|
||||
Klaus Hartl (stilbuero.de)
|
||||
Scott Jehl
|
||||
Cody Lindley
|
||||
Eduardo Lundgren (eduardolundgren@gmail.com)
|
||||
Todd Parker
|
||||
John Resig
|
||||
Patty Toland
|
||||
Ca-Phun Ung (yelotofu.com)
|
||||
Keith Wood (kbwood@virginbroadband.com.au)
|
||||
Richard D. Worth (rdworth.org)
|
||||
Jörn Zaefferer
|
||||
278
sites/all/libraries/jquery.ui/GPL-LICENSE.txt
Normal file
278
sites/all/libraries/jquery.ui/GPL-LICENSE.txt
Normal file
|
|
@ -0,0 +1,278 @@
|
|||
GNU GENERAL PUBLIC LICENSE
|
||||
Version 2, June 1991
|
||||
|
||||
Copyright (C) 1989, 1991 Free Software Foundation, Inc.
|
||||
51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
|
||||
Everyone is permitted to copy and distribute verbatim copies
|
||||
of this license document, but changing it is not allowed.
|
||||
|
||||
Preamble
|
||||
|
||||
The licenses for most software are designed to take away your
|
||||
freedom to share and change it. By contrast, the GNU General Public
|
||||
License is intended to guarantee your freedom to share and change free
|
||||
software--to make sure the software is free for all its users. This
|
||||
General Public License applies to most of the Free Software
|
||||
Foundation's software and to any other program whose authors commit to
|
||||
using it. (Some other Free Software Foundation software is covered by
|
||||
the GNU Lesser General Public License instead.) You can apply it to
|
||||
your programs, too.
|
||||
|
||||
When we speak of free software, we are referring to freedom, not
|
||||
price. Our General Public Licenses are designed to make sure that you
|
||||
have the freedom to distribute copies of free software (and charge for
|
||||
this service if you wish), that you receive source code or can get it
|
||||
if you want it, that you can change the software or use pieces of it
|
||||
in new free programs; and that you know you can do these things.
|
||||
|
||||
To protect your rights, we need to make restrictions that forbid
|
||||
anyone to deny you these rights or to ask you to surrender the rights.
|
||||
These restrictions translate to certain responsibilities for you if you
|
||||
distribute copies of the software, or if you modify it.
|
||||
|
||||
For example, if you distribute copies of such a program, whether
|
||||
gratis or for a fee, you must give the recipients all the rights that
|
||||
you have. You must make sure that they, too, receive or can get the
|
||||
source code. And you must show them these terms so they know their
|
||||
rights.
|
||||
|
||||
We protect your rights with two steps: (1) copyright the software, and
|
||||
(2) offer you this license which gives you legal permission to copy,
|
||||
distribute and/or modify the software.
|
||||
|
||||
Also, for each author's protection and ours, we want to make certain
|
||||
that everyone understands that there is no warranty for this free
|
||||
software. If the software is modified by someone else and passed on, we
|
||||
want its recipients to know that what they have is not the original, so
|
||||
that any problems introduced by others will not reflect on the original
|
||||
authors' reputations.
|
||||
|
||||
Finally, any free program is threatened constantly by software
|
||||
patents. We wish to avoid the danger that redistributors of a free
|
||||
program will individually obtain patent licenses, in effect making the
|
||||
program proprietary. To prevent this, we have made it clear that any
|
||||
patent must be licensed for everyone's free use or not licensed at all.
|
||||
|
||||
The precise terms and conditions for copying, distribution and
|
||||
modification follow.
|
||||
|
||||
GNU GENERAL PUBLIC LICENSE
|
||||
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
|
||||
|
||||
0. This License applies to any program or other work which contains
|
||||
a notice placed by the copyright holder saying it may be distributed
|
||||
under the terms of this General Public License. The "Program", below,
|
||||
refers to any such program or work, and a "work based on the Program"
|
||||
means either the Program or any derivative work under copyright law:
|
||||
that is to say, a work containing the Program or a portion of it,
|
||||
either verbatim or with modifications and/or translated into another
|
||||
language. (Hereinafter, translation is included without limitation in
|
||||
the term "modification".) Each licensee is addressed as "you".
|
||||
|
||||
Activities other than copying, distribution and modification are not
|
||||
covered by this License; they are outside its scope. The act of
|
||||
running the Program is not restricted, and the output from the Program
|
||||
is covered only if its contents constitute a work based on the
|
||||
Program (independent of having been made by running the Program).
|
||||
Whether that is true depends on what the Program does.
|
||||
|
||||
1. You may copy and distribute verbatim copies of the Program's
|
||||
source code as you receive it, in any medium, provided that you
|
||||
conspicuously and appropriately publish on each copy an appropriate
|
||||
copyright notice and disclaimer of warranty; keep intact all the
|
||||
notices that refer to this License and to the absence of any warranty;
|
||||
and give any other recipients of the Program a copy of this License
|
||||
along with the Program.
|
||||
|
||||
You may charge a fee for the physical act of transferring a copy, and
|
||||
you may at your option offer warranty protection in exchange for a fee.
|
||||
|
||||
2. You may modify your copy or copies of the Program or any portion
|
||||
of it, thus forming a work based on the Program, and copy and
|
||||
distribute such modifications or work under the terms of Section 1
|
||||
above, provided that you also meet all of these conditions:
|
||||
|
||||
a) You must cause the modified files to carry prominent notices
|
||||
stating that you changed the files and the date of any change.
|
||||
|
||||
b) You must cause any work that you distribute or publish, that in
|
||||
whole or in part contains or is derived from the Program or any
|
||||
part thereof, to be licensed as a whole at no charge to all third
|
||||
parties under the terms of this License.
|
||||
|
||||
c) If the modified program normally reads commands interactively
|
||||
when run, you must cause it, when started running for such
|
||||
interactive use in the most ordinary way, to print or display an
|
||||
announcement including an appropriate copyright notice and a
|
||||
notice that there is no warranty (or else, saying that you provide
|
||||
a warranty) and that users may redistribute the program under
|
||||
these conditions, and telling the user how to view a copy of this
|
||||
License. (Exception: if the Program itself is interactive but
|
||||
does not normally print such an announcement, your work based on
|
||||
the Program is not required to print an announcement.)
|
||||
|
||||
These requirements apply to the modified work as a whole. If
|
||||
identifiable sections of that work are not derived from the Program,
|
||||
and can be reasonably considered independent and separate works in
|
||||
themselves, then this License, and its terms, do not apply to those
|
||||
sections when you distribute them as separate works. But when you
|
||||
distribute the same sections as part of a whole which is a work based
|
||||
on the Program, the distribution of the whole must be on the terms of
|
||||
this License, whose permissions for other licensees extend to the
|
||||
entire whole, and thus to each and every part regardless of who wrote it.
|
||||
|
||||
Thus, it is not the intent of this section to claim rights or contest
|
||||
your rights to work written entirely by you; rather, the intent is to
|
||||
exercise the right to control the distribution of derivative or
|
||||
collective works based on the Program.
|
||||
|
||||
In addition, mere aggregation of another work not based on the Program
|
||||
with the Program (or with a work based on the Program) on a volume of
|
||||
a storage or distribution medium does not bring the other work under
|
||||
the scope of this License.
|
||||
|
||||
3. You may copy and distribute the Program (or a work based on it,
|
||||
under Section 2) in object code or executable form under the terms of
|
||||
Sections 1 and 2 above provided that you also do one of the following:
|
||||
|
||||
a) Accompany it with the complete corresponding machine-readable
|
||||
source code, which must be distributed under the terms of Sections
|
||||
1 and 2 above on a medium customarily used for software interchange; or,
|
||||
|
||||
b) Accompany it with a written offer, valid for at least three
|
||||
years, to give any third party, for a charge no more than your
|
||||
cost of physically performing source distribution, a complete
|
||||
machine-readable copy of the corresponding source code, to be
|
||||
distributed under the terms of Sections 1 and 2 above on a medium
|
||||
customarily used for software interchange; or,
|
||||
|
||||
c) Accompany it with the information you received as to the offer
|
||||
to distribute corresponding source code. (This alternative is
|
||||
allowed only for noncommercial distribution and only if you
|
||||
received the program in object code or executable form with such
|
||||
an offer, in accord with Subsection b above.)
|
||||
|
||||
The source code for a work means the preferred form of the work for
|
||||
making modifications to it. For an executable work, complete source
|
||||
code means all the source code for all modules it contains, plus any
|
||||
associated interface definition files, plus the scripts used to
|
||||
control compilation and installation of the executable. However, as a
|
||||
special exception, the source code distributed need not include
|
||||
anything that is normally distributed (in either source or binary
|
||||
form) with the major components (compiler, kernel, and so on) of the
|
||||
operating system on which the executable runs, unless that component
|
||||
itself accompanies the executable.
|
||||
|
||||
If distribution of executable or object code is made by offering
|
||||
access to copy from a designated place, then offering equivalent
|
||||
access to copy the source code from the same place counts as
|
||||
distribution of the source code, even though third parties are not
|
||||
compelled to copy the source along with the object code.
|
||||
|
||||
4. You may not copy, modify, sublicense, or distribute the Program
|
||||
except as expressly provided under this License. Any attempt
|
||||
otherwise to copy, modify, sublicense or distribute the Program is
|
||||
void, and will automatically terminate your rights under this License.
|
||||
However, parties who have received copies, or rights, from you under
|
||||
this License will not have their licenses terminated so long as such
|
||||
parties remain in full compliance.
|
||||
|
||||
5. You are not required to accept this License, since you have not
|
||||
signed it. However, nothing else grants you permission to modify or
|
||||
distribute the Program or its derivative works. These actions are
|
||||
prohibited by law if you do not accept this License. Therefore, by
|
||||
modifying or distributing the Program (or any work based on the
|
||||
Program), you indicate your acceptance of this License to do so, and
|
||||
all its terms and conditions for copying, distributing or modifying
|
||||
the Program or works based on it.
|
||||
|
||||
6. Each time you redistribute the Program (or any work based on the
|
||||
Program), the recipient automatically receives a license from the
|
||||
original licensor to copy, distribute or modify the Program subject to
|
||||
these terms and conditions. You may not impose any further
|
||||
restrictions on the recipients' exercise of the rights granted herein.
|
||||
You are not responsible for enforcing compliance by third parties to
|
||||
this License.
|
||||
|
||||
7. If, as a consequence of a court judgment or allegation of patent
|
||||
infringement or for any other reason (not limited to patent issues),
|
||||
conditions are imposed on you (whether by court order, agreement or
|
||||
otherwise) that contradict the conditions of this License, they do not
|
||||
excuse you from the conditions of this License. If you cannot
|
||||
distribute so as to satisfy simultaneously your obligations under this
|
||||
License and any other pertinent obligations, then as a consequence you
|
||||
may not distribute the Program at all. For example, if a patent
|
||||
license would not permit royalty-free redistribution of the Program by
|
||||
all those who receive copies directly or indirectly through you, then
|
||||
the only way you could satisfy both it and this License would be to
|
||||
refrain entirely from distribution of the Program.
|
||||
|
||||
If any portion of this section is held invalid or unenforceable under
|
||||
any particular circumstance, the balance of the section is intended to
|
||||
apply and the section as a whole is intended to apply in other
|
||||
circumstances.
|
||||
|
||||
It is not the purpose of this section to induce you to infringe any
|
||||
patents or other property right claims or to contest validity of any
|
||||
such claims; this section has the sole purpose of protecting the
|
||||
integrity of the free software distribution system, which is
|
||||
implemented by public license practices. Many people have made
|
||||
generous contributions to the wide range of software distributed
|
||||
through that system in reliance on consistent application of that
|
||||
system; it is up to the author/donor to decide if he or she is willing
|
||||
to distribute software through any other system and a licensee cannot
|
||||
impose that choice.
|
||||
|
||||
This section is intended to make thoroughly clear what is believed to
|
||||
be a consequence of the rest of this License.
|
||||
|
||||
8. If the distribution and/or use of the Program is restricted in
|
||||
certain countries either by patents or by copyrighted interfaces, the
|
||||
original copyright holder who places the Program under this License
|
||||
may add an explicit geographical distribution limitation excluding
|
||||
those countries, so that distribution is permitted only in or among
|
||||
countries not thus excluded. In such case, this License incorporates
|
||||
the limitation as if written in the body of this License.
|
||||
|
||||
9. The Free Software Foundation may publish revised and/or new versions
|
||||
of the General Public License from time to time. Such new versions will
|
||||
be similar in spirit to the present version, but may differ in detail to
|
||||
address new problems or concerns.
|
||||
|
||||
Each version is given a distinguishing version number. If the Program
|
||||
specifies a version number of this License which applies to it and "any
|
||||
later version", you have the option of following the terms and conditions
|
||||
either of that version or of any later version published by the Free
|
||||
Software Foundation. If the Program does not specify a version number of
|
||||
this License, you may choose any version ever published by the Free Software
|
||||
Foundation.
|
||||
|
||||
10. If you wish to incorporate parts of the Program into other free
|
||||
programs whose distribution conditions are different, write to the author
|
||||
to ask for permission. For software which is copyrighted by the Free
|
||||
Software Foundation, write to the Free Software Foundation; we sometimes
|
||||
make exceptions for this. Our decision will be guided by the two goals
|
||||
of preserving the free status of all derivatives of our free software and
|
||||
of promoting the sharing and reuse of software generally.
|
||||
|
||||
NO WARRANTY
|
||||
|
||||
11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
|
||||
FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN
|
||||
OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
|
||||
PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
|
||||
OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
|
||||
MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS
|
||||
TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE
|
||||
PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
|
||||
REPAIR OR CORRECTION.
|
||||
|
||||
12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
|
||||
WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
|
||||
REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
|
||||
OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
|
||||
TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
|
||||
YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
|
||||
PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
|
||||
POSSIBILITY OF SUCH DAMAGES.
|
||||
25
sites/all/libraries/jquery.ui/MIT-LICENSE.txt
Normal file
25
sites/all/libraries/jquery.ui/MIT-LICENSE.txt
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
Copyright (c) 2008 Paul Bakaus, http://ui.jquery.com/
|
||||
|
||||
This software consists of voluntary contributions made by many
|
||||
individuals (AUTHORS.txt, http://ui.jquery.com/about) For exact
|
||||
contribution history, see the revision history and logs, available
|
||||
at http://jquery-ui.googlecode.com/svn/
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of this software and associated documentation files (the
|
||||
"Software"), to deal in the Software without restriction, including
|
||||
without limitation the rights to use, copy, modify, merge, publish,
|
||||
distribute, sublicense, and/or sell copies of the Software, and to
|
||||
permit persons to whom the Software is furnished to do so, subject to
|
||||
the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||||
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
||||
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||||
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
1030
sites/all/libraries/jquery.ui/demos/functional/css/base.css
Normal file
1030
sites/all/libraries/jquery.ui/demos/functional/css/base.css
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -0,0 +1,98 @@
|
|||
/*
|
||||
===============================================================================
|
||||
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; }
|
||||
|
||||
|
|
@ -0,0 +1,208 @@
|
|||
/*************************************/
|
||||
/* 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;
|
||||
}
|
||||
BIN
sites/all/libraries/jquery.ui/demos/functional/images/Thumbs.db
Normal file
BIN
sites/all/libraries/jquery.ui/demos/functional/images/Thumbs.db
Normal file
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
sites/all/libraries/jquery.ui/demos/functional/images/clock.png
Normal file
BIN
sites/all/libraries/jquery.ui/demos/functional/images/clock.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 102 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 163 B |
BIN
sites/all/libraries/jquery.ui/demos/functional/images/dot.png
Normal file
BIN
sites/all/libraries/jquery.ui/demos/functional/images/dot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 191 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 827 B |
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 131 B |
Binary file not shown.
|
After Width: | Height: | Size: 783 B |
BIN
sites/all/libraries/jquery.ui/demos/functional/images/logo.gif
Normal file
BIN
sites/all/libraries/jquery.ui/demos/functional/images/logo.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 422 B |
Binary file not shown.
|
After Width: | Height: | Size: 312 B |
Binary file not shown.
|
After Width: | Height: | Size: 164 B |
282
sites/all/libraries/jquery.ui/demos/functional/index.html
Normal file
282
sites/all/libraries/jquery.ui/demos/functional/index.html
Normal file
|
|
@ -0,0 +1,282 @@
|
|||
<!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" media="screen">
|
||||
<link rel="stylesheet" href="css/functional_demos.css" type="text/css" media="screen">
|
||||
<link rel="stylesheet" href="css/chilli-recipes.css" type="text/css" media="screen">
|
||||
<link rel="stylesheet" href="../../themes/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.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.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>
|
||||
533
sites/all/libraries/jquery.ui/demos/functional/js/beautify.js
Normal file
533
sites/all/libraries/jquery.ui/demos/functional/js/beautify.js
Normal file
|
|
@ -0,0 +1,533 @@
|
|||
/*
|
||||
|
||||
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('');
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
$(document).ready(function() {
|
||||
|
||||
$('.component-links a').history(function() {
|
||||
loadDemo( $(this).attr('href').replace(/^#/, "") );
|
||||
});
|
||||
|
||||
var instructions = $("#containerDemo").html();
|
||||
$.ajaxHistory.initialize(function() {
|
||||
$("#containerDemo").html(instructions);
|
||||
});
|
||||
|
||||
});
|
||||
205
sites/all/libraries/jquery.ui/demos/functional/js/behaviour.js
Normal file
205
sites/all/libraries/jquery.ui/demos/functional/js/behaviour.js
Normal file
|
|
@ -0,0 +1,205 @@
|
|||
$(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;
|
||||
};
|
||||
|
|
@ -0,0 +1,163 @@
|
|||
/*
|
||||
===============================================================================
|
||||
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';
|
||||
|
|
@ -0,0 +1,177 @@
|
|||
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);
|
||||
});
|
||||
|
||||
};
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
/*
|
||||
===============================================================================
|
||||
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);
|
||||
|
|
@ -0,0 +1,342 @@
|
|||
/**
|
||||
* 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.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 863 B |
Binary file not shown.
|
After Width: | Height: | Size: 941 B |
Binary file not shown.
|
After Width: | Height: | Size: 925 B |
Binary file not shown.
|
After Width: | Height: | Size: 269 B |
Binary file not shown.
|
After Width: | Height: | Size: 192 B |
Binary file not shown.
|
After Width: | Height: | Size: 169 B |
Binary file not shown.
|
After Width: | Height: | Size: 856 B |
Binary file not shown.
|
After Width: | Height: | Size: 840 B |
Binary file not shown.
|
After Width: | Height: | Size: 875 B |
Binary file not shown.
|
After Width: | Height: | Size: 948 B |
Binary file not shown.
|
After Width: | Height: | Size: 903 B |
Binary file not shown.
|
After Width: | Height: | Size: 71 B |
Binary file not shown.
|
After Width: | Height: | Size: 925 B |
Binary file not shown.
|
After Width: | Height: | Size: 72 B |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 892 B |
Binary file not shown.
|
After Width: | Height: | Size: 1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 896 B |
Binary file not shown.
|
After Width: | Height: | Size: 832 B |
Binary file not shown.
|
After Width: | Height: | Size: 900 B |
|
|
@ -0,0 +1,23 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,415 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,140 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<div class="sortable-container">
|
||||
|
||||
<div id="example3">
|
||||
|
||||
<div style="min-height: 50px; min-height:50px; height:auto !important;">
|
||||
<style type="text/css" media="screen">
|
||||
#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>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<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.
|
After Width: | Height: | Size: 139 B |
Binary file not shown.
|
After Width: | Height: | Size: 86 B |
Binary file not shown.
|
After Width: | Height: | Size: 452 B |
|
|
@ -0,0 +1,277 @@
|
|||
<!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" media="screen">
|
||||
<!--
|
||||
/*************************************/
|
||||
/* 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>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
$(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"); }); });
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
<!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" media="screen" 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>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
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;
|
||||
}
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
|
||||
/*************************************/
|
||||
/* 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 */
|
||||
|
||||
#_Container_Image, #\\_Container\\_Image {
|
||||
position: relative;
|
||||
}
|
||||
#_Container, #\\_Container {
|
||||
position: absolute;
|
||||
top:0px;
|
||||
left:0px;
|
||||
width: 150px;
|
||||
height:150px;
|
||||
}
|
||||
|
||||
#_Wrapper, #\\_Wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
var getSizeImg = function(src) {
|
||||
var timg = $('<img>').attr('src', src).css({ position: 'absolute', top: '-1000px', left: '-1000px' }).appendTo('body');
|
||||
var size = {width: timg.get(0).offsetWidth, height: timg.get(0).offsetHeight };
|
||||
|
||||
try { document.body.removeChild(timg[0]); }
|
||||
catch(e) {};
|
||||
|
||||
return size;
|
||||
};
|
||||
|
||||
$().ready(function(){
|
||||
|
||||
$('#_Container').resizable({
|
||||
containment: $('#_Wrapper'),
|
||||
handles: 'all',
|
||||
knobHandles: true,
|
||||
autoHide: true,
|
||||
minWidth: 100,
|
||||
minHeight: 100,
|
||||
resize: function(event, ui){
|
||||
var self = $(this).data("resizable"),
|
||||
imageSize = $('#_Container').data("image-size"),
|
||||
top = self.position.top,
|
||||
height = ((self.position.top + self.size.height) <= imageSize.height ? self.size.height : imageSize.height),
|
||||
left = self.position.left,
|
||||
width = ((self.position.left + self.size.width) <= imageSize.width ? self.size.width : imageSize.width);
|
||||
|
||||
left = left > 0 ? left : 0;
|
||||
top = top > 0 ? top : 0;
|
||||
|
||||
var bgPos = '-' + (left + 1) + 'px -' + (top + 1) + 'px';
|
||||
|
||||
//the borders of the resize rect are offsetting the bg pos incorrectly. subtract (add, since its a negative) 1 to fix.
|
||||
$(this).css({backgroundPosition: bgPos});
|
||||
|
||||
$("#log-top").html(top + "px");
|
||||
$("#log-height").html(height + "px");
|
||||
$("#log-left").html(left + "px");
|
||||
$("#log-width").html(width + "px");
|
||||
},
|
||||
stop: function(event, ui){
|
||||
var self = $(this).data("resizable"),
|
||||
top = self.position.top,
|
||||
left = self.position.left;
|
||||
|
||||
left = left > 0 ? left : 0;
|
||||
top = top > 0 ? top : 0;
|
||||
|
||||
$(this).css({backgroundPosition: ((left + 1) * -1) + 'px ' + ((top + 1) * -1) + 'px'});
|
||||
}
|
||||
})
|
||||
.draggable({
|
||||
cursor: 'move',
|
||||
containment: $('#_Wrapper'),
|
||||
drag: function(event, ui){
|
||||
var self = $(this).data("draggable");
|
||||
$(this).css({backgroundPosition: ((self.position.left + 1) * -1) + 'px ' + ((self.position.top + 1) * -1) + 'px'});
|
||||
|
||||
$("#log-top").html(self.position.top+"px");
|
||||
$("#log-left").html(self.position.left+"px");
|
||||
}
|
||||
});
|
||||
|
||||
$('.thumbs')
|
||||
.find("li a")
|
||||
.click(function(event){
|
||||
$('#_Container').css({top: '0', left: '0'});
|
||||
|
||||
var size = getSizeImg($(this).find("img").attr("src"));
|
||||
|
||||
$('#_Container_Image').css({
|
||||
width: size.width,
|
||||
height: size.height,
|
||||
background: 'transparent url('+$(this).find("img").attr("src")+') no-repeat scroll 0%'
|
||||
});
|
||||
|
||||
$('#_Wrapper').css({ width: size.width, height: size.height });
|
||||
$('#_Container')
|
||||
.css('background', 'transparent url('+$(this).find("img").attr("src")+') no-repeat scroll 0px 0px')
|
||||
.data("image-size", size);
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
$('#_Container_Image').css({ opacity: 0.5 });
|
||||
$("#log-height").html($('#_Container').height()+"px");
|
||||
$("#log-width").html($('#_Container').width()+"px");
|
||||
|
||||
$(".thumbs li a:first").click();
|
||||
});
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Some files were not shown because too many files have changed in this diff Show more
Reference in a new issue