mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
Merge branch 'master' into interactions
Conflicts: demos/draggable/constrain-movement.html demos/draggable/cursor-style.html demos/draggable/handle.html demos/draggable/index.html demos/draggable/revert.html demos/draggable/visual-feedback.html demos/index.html ui/jquery.ui.draggable.js ui/jquery.ui.droppable.js
This commit is contained in:
Scott González
commit
c07ae398fa
@ -1,13 +1,16 @@
|
||||
; This file is for unifying the coding style for different editors and IDEs.
|
||||
; More information at http://EditorConfig.org
|
||||
# This file is for unifying the coding style for different editors and IDEs
|
||||
# editorconfig.org
|
||||
|
||||
root = true
|
||||
|
||||
[grunt.js]
|
||||
[*]
|
||||
indent_style = tab
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
[ui/**.js]
|
||||
indent_style = tab
|
||||
|
||||
[tests/unit/**.js]
|
||||
indent_style = tab
|
||||
[external/**]
|
||||
trim_trailing_whitespace = false
|
||||
insert_final_newline = varies
|
||||
end_of_line = varies
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
"eqnull": true,
|
||||
"eqeqeq": true,
|
||||
"expr": true,
|
||||
"latedef": true,
|
||||
"noarg": true,
|
||||
"node": true,
|
||||
"onevar": true,
|
||||
"smarttabs": true,
|
||||
"trailing": true,
|
||||
"undef": true
|
||||
"undef": true,
|
||||
"unused": true
|
||||
}
|
||||
|
||||
50
AUTHORS.txt
50
AUTHORS.txt
@ -4,14 +4,14 @@ A list of current team members is available at http://jqueryui.com/about
|
||||
Paul Bakaus <paul.bakaus@googlemail.com>
|
||||
Richard Worth <rdworth@gmail.com>
|
||||
Yehuda Katz <wycats@gmail.com>
|
||||
Sean Catchpole <littlecooldude@gmail.com>
|
||||
Sean Catchpole <sean@sunsean.com>
|
||||
John Resig <jeresig@gmail.com>
|
||||
Tane Piper <tane@tanepiper.com>
|
||||
Tane Piper <piper.tane@gmail.com>
|
||||
Dmitri Gaskin <dmitrig01@gmail.com>
|
||||
Klaus Hartl <klaus.hartl@googlemail.com>
|
||||
Stefan Petre <stefan.petre@gmail.com>
|
||||
Gilles van den Hoven <gilles@webunity.nl>
|
||||
Micheil Smith <micheil@brandedcode.com>
|
||||
Micheil Bryan Smith <micheil@brandedcode.com>
|
||||
Jörn Zaefferer <joern.zaefferer@gmail.com>
|
||||
Marc Grabanski <m@marcgrabanski.com>
|
||||
Keith Wood <kbwood.au@gmail.com>
|
||||
@ -81,9 +81,9 @@ Khaled AlHourani <me@khaledalhourani.com>
|
||||
Marian Rudzynski <mr@impaled.org>
|
||||
Jean-Francois Remy <jfremy@virtuoz.com>
|
||||
Doug Blood <dougblood@gmail.com>
|
||||
Filippo Cavallarin <poplix@papuasia.org>
|
||||
Filippo Cavallarin <filippo.cavallarin@codseq.it>
|
||||
Heiko Henning <h.henning@educa.ch>
|
||||
Aliaxandr Rahalevich <saksmlz@gmail.com>
|
||||
Aliaksandr Rahalevich <saksmlz@gmail.com>
|
||||
Mario Visic <mario@mariovisic.com>
|
||||
Xavi Ramirez <xavi.rmz@gmail.com>
|
||||
Max Schnur <max.schnur@gmail.com>
|
||||
@ -92,7 +92,7 @@ Corey Frang <gnarf@gnarf.net>
|
||||
Aaron Peterson <aaronp123@yahoo.com>
|
||||
Ivan Peters <ivan@ivanpeters.com>
|
||||
Mohamed Cherif Bouchelaghem <cherifbouchelaghem@yahoo.fr>
|
||||
Marcos Sousa <marcos.sousa@corp.globo.com>
|
||||
Marcos Sousa <falecomigo@marcossousa.com>
|
||||
Michael DellaNoce <mdellanoce@mailtrust.com>
|
||||
George Marshall <echosx@gmail.com>
|
||||
Tobias Brunner <tobias@strongswan.org>
|
||||
@ -114,8 +114,8 @@ Hans Hillen <hans.hillen@gmail.com>
|
||||
Mark Johnson <virgofx@live.com>
|
||||
Trey Hunner <treyhunner@gmail.com>
|
||||
Shane Whittet <whittet@gmail.com>
|
||||
Edward Faulkner <ef@alum.mit.edu>
|
||||
Adam Baratz <adam.baratz@gmail.com>
|
||||
Edward A Faulkner <ef@alum.mit.edu>
|
||||
Adam Baratz <adam@adambaratz.com>
|
||||
Kato Kazuyoshi <kato.kazuyoshi@gmail.com>
|
||||
Eike Send <eike.send@gmail.com>
|
||||
Kris Borchers <kris.borchers@gmail.com>
|
||||
@ -125,27 +125,27 @@ Carson McDonald <carson@ioncannon.net>
|
||||
Jason Davies <jason@jasondavies.com>
|
||||
Garrison Locke <gplocke@gmail.com>
|
||||
David Murdoch <musicisair@yahoo.com>
|
||||
Ben Boyle <benjamins.boyle@gmail.com>
|
||||
Benjamin Scott Boyle <benjamins.boyle@gmail.com>
|
||||
Jesse Baird <jebaird@gmail.com>
|
||||
Jonathan Vingiano <jvingiano@gmail.com>
|
||||
Dylan Just <dev@ephox.com>
|
||||
Tomy Kaira <tomykaira@gmail.com>
|
||||
Hiroshi Tomita <tomykaira@gmail.com>
|
||||
Glenn Goodrich <glenn.goodrich@gmail.com>
|
||||
Ashek Elahi <mail.ashek@gmail.com>
|
||||
Tarafder Ashek-E-Elahi <mail.ashek@gmail.com>
|
||||
Ryan Neufeld <ryan@neufeldmail.com>
|
||||
Marc Neuwirth <marc.neuwirth@gmail.com>
|
||||
Philip Graham <philip.robert.graham@gmail.com>
|
||||
Benjamin Sterling <benjamin.sterling@kenzomedia.com>
|
||||
Wesley Walser <wwalser@atlassian.com>
|
||||
Wesley Walser <waw325@gmail.com>
|
||||
Kouhei Sutou <kou@clear-code.com>
|
||||
Karl Kirch <karl.ctr.kirch@faa.gov>
|
||||
Karl Kirch <karlkrch@gmail.com>
|
||||
Chris Kelly <ckdake@ckdake.com>
|
||||
Jay Oster <jay@loyalize.com>
|
||||
Alex Polomoshnov <alex.polomoshnov@gmail.com>
|
||||
Alexander Polomoshnov <alex.polomoshnov@gmail.com>
|
||||
David Leal <dgleal@gmail.com>
|
||||
igor milla <igor.fsp.milla@gmail.com>
|
||||
Igor Milla <igor.fsp.milla@gmail.com>
|
||||
Dave Methvin <dave.methvin@gmail.com>
|
||||
Florian Gutmann <blackfeet@gmx.at>
|
||||
Florian Gutmann <f.gutmann@chronimo.com>
|
||||
Marwan Al Jubeh <marwan.aljubeh@gmail.com>
|
||||
Milan Broum <midlis@googlemail.com>
|
||||
Sebastian Sauer <info@dynpages.de>
|
||||
@ -157,7 +157,7 @@ David Soms <david.soms@gmail.com>
|
||||
David De Sloovere <david.desloovere@hotmail.com>
|
||||
Michael P. Jung <michael.jung@terreon.de>
|
||||
Shannon Pekary <spekary@gmail.com>
|
||||
Matthew Hutton <meh@corefiling.co.uk>
|
||||
Matthew Edward Hutton <meh@corefiling.co.uk>
|
||||
James Khoury <james@jameskhoury.com>
|
||||
Rob Loach <robloach@gmail.com>
|
||||
Alberto Monteiro <betimbrasil@gmail.com>
|
||||
@ -168,7 +168,7 @@ Genie <386@mail.com>
|
||||
Rick Waldron <waldron.rick@gmail.com>
|
||||
Ian Simpson <spoonlikesham@gmail.com>
|
||||
Lev Kitsis <spam4lev@gmail.com>
|
||||
TJ VanToll <tj.vantoll@gmail.com>
|
||||
Ted VanToll <tj.vantoll@gmail.com>
|
||||
Justin Domnitz <jdomnitz@gmail.com>
|
||||
Douglas Cerna <douglascerna@yahoo.com>
|
||||
Bert ter Heide <bertjh@hotmail.com>
|
||||
@ -189,14 +189,22 @@ Eneko Illarramendi <eneko@illarra.com>
|
||||
EungJun Yi <semtlenori@gmail.com>
|
||||
Courtland Allen <courtlandallen@gmail.com>
|
||||
Viktar Varvanovich <non4eg@gmail.com>
|
||||
Danny Trunk <dtrunk90@googlemail.com>
|
||||
Danny Trunk <dtrunk90@gmail.com>
|
||||
Pavel Stetina <pavel.stetina@nangu.tv>
|
||||
Mike Stay <metaweta@gmail.com>
|
||||
Michael Stay <metaweta@gmail.com>
|
||||
Steven Roussey <sroussey@gmail.com>
|
||||
Mike Hollis <hollis21@gmail.com>
|
||||
Michael Hollis <hollis21@gmail.com>
|
||||
Lee Rowlands <lee.rowlands@previousnext.com.au>
|
||||
Timmy Willison <timmywillisn@gmail.com>
|
||||
Karl Swedberg <kswedberg@gmail.com>
|
||||
Baoju Yuan <the_guy_1987@hotmail.com>
|
||||
Maciej Mroziński <mrozik87@gmail.com>
|
||||
Luis Dalmolin <luis.nh@gmail.com>
|
||||
Mark Aaron Shirley <maspwr@gmail.com>
|
||||
Martin Hoch <martin@fidion.de>
|
||||
Jiayi Yang <tr870829@gmail.com>
|
||||
Philipp Benjamin Köppchen <xgxtpbk@gws.ms>
|
||||
Sindre Sorhus <sindresorhus@gmail.com>
|
||||
Bernhard Sirlinger <bernhard.sirlinger@tele2.de>
|
||||
Jared A. Scheel <jared@jaredscheel.com>
|
||||
Rafael Xavier de Souza <rxaviers@gmail.com>
|
||||
|
||||
278
GPL-LICENSE.txt
278
GPL-LICENSE.txt
@ -1,278 +0,0 @@
|
||||
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.
|
||||
@ -62,6 +62,7 @@
|
||||
"abstraction",
|
||||
"state",
|
||||
"factory"
|
||||
]
|
||||
],
|
||||
"docs": "http://api.jqueryui.com/jQuery.widget/"
|
||||
}
|
||||
}
|
||||
|
||||
@ -10,70 +10,100 @@ Move all commit notes to the appropriate section.
|
||||
- If there is no ticket number, search Trac for the relevant ticket.
|
||||
- If there is no ticket, create one (if needed), or leave just the commit link.
|
||||
|
||||
Double check that "XXXX" does not appear anywhere in the changelog.
|
||||
Double check that "TICKETREF" does not appear anywhere in the changelog.
|
||||
|
||||
Post this changelog at: CHANGELOG_URL
|
||||
Add this changelog to jqueryui.com.
|
||||
|
||||
|
||||
|
||||
DELETE EVERYTHING ABOVE THE FOLLOWING LINE
|
||||
------------------------------------------
|
||||
<script>{
|
||||
"title": "{title}"
|
||||
}</script>
|
||||
|
||||
= Summary =
|
||||
This is the final release of jQuery UI 1.8.
|
||||
-- OR --
|
||||
This is the second maintenance release for [[UI/Changelog/1.8|jQuery UI 1.8]].
|
||||
## Build
|
||||
|
||||
= Build =
|
||||
|
||||
= Core & Utilities =
|
||||
## Core & Utilities
|
||||
|
||||
=== UI Core ===
|
||||
### UI Core
|
||||
|
||||
=== Mouse ===
|
||||
|
||||
=== Widget Factory ===
|
||||
### Mouse
|
||||
|
||||
=== Position ===
|
||||
|
||||
= Interactions =
|
||||
### Widget Factory
|
||||
|
||||
=== Draggable ===
|
||||
|
||||
=== Droppable ===
|
||||
### Position
|
||||
|
||||
=== Resizable ===
|
||||
|
||||
=== Selectable ===
|
||||
## Interactions
|
||||
|
||||
=== Sortable ===
|
||||
### Draggable
|
||||
|
||||
= Widgets =
|
||||
|
||||
=== Accordion ===
|
||||
### Droppable
|
||||
|
||||
=== Autocomplete ===
|
||||
|
||||
=== Button ===
|
||||
### Resizable
|
||||
|
||||
=== Datepicker ===
|
||||
|
||||
=== Dialog ===
|
||||
### Selectable
|
||||
|
||||
=== Progressbar ===
|
||||
|
||||
=== Slider ===
|
||||
### Sortable
|
||||
|
||||
=== Tabs ===
|
||||
|
||||
= Effects =
|
||||
## Widgets
|
||||
|
||||
=== Individual effects ===
|
||||
### Accordion
|
||||
|
||||
= CSS Framework =
|
||||
|
||||
= Demos =
|
||||
### Autocomplete
|
||||
|
||||
= Website =
|
||||
|
||||
=== Download Builder ===
|
||||
### Button
|
||||
|
||||
|
||||
### Datepicker
|
||||
|
||||
|
||||
### Dialog
|
||||
|
||||
|
||||
### Menu
|
||||
|
||||
|
||||
### Progressbar
|
||||
|
||||
|
||||
### Slider
|
||||
|
||||
|
||||
### Spinner
|
||||
|
||||
|
||||
### Tabs
|
||||
|
||||
|
||||
### Tooltip
|
||||
|
||||
|
||||
## Effects
|
||||
|
||||
|
||||
### Individual effects
|
||||
|
||||
|
||||
## CSS Framework
|
||||
|
||||
|
||||
## Demos
|
||||
|
||||
|
||||
## Website
|
||||
|
||||
|
||||
### Download Builder
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
#!/usr/bin/env node
|
||||
/*global cat:true cd:true echo:true exec:true exit:true*/
|
||||
|
||||
"use strict";
|
||||
|
||||
var baseDir, repoDir, prevVersion, newVersion, nextVersion, tagTime,
|
||||
fs = require( "fs" ),
|
||||
@ -43,6 +46,8 @@ walk([
|
||||
section( "updating trac" ),
|
||||
updateTrac,
|
||||
confirm
|
||||
|
||||
// TODO: upload release zip to GitHub
|
||||
]);
|
||||
|
||||
|
||||
@ -62,6 +67,9 @@ function cloneRepo() {
|
||||
if ( exec( "npm install" ).code !== 0 ) {
|
||||
abort( "Error installing dependencies." );
|
||||
}
|
||||
if ( exec( "npm install download.jqueryui.com" ).code !== 0 ) {
|
||||
abort( "Error installing dependencies." );
|
||||
}
|
||||
echo();
|
||||
}
|
||||
|
||||
@ -101,10 +109,12 @@ function getVersions() {
|
||||
major = parseInt( parts[ 0 ], 10 );
|
||||
minor = parseInt( parts[ 1 ], 10 );
|
||||
patch = parseInt( parts[ 2 ], 10 );
|
||||
|
||||
// TODO: handle 2.0.0
|
||||
if ( minor === 0 ) {
|
||||
abort( "This script is not smart enough to handle the 2.0.0 release." );
|
||||
}
|
||||
|
||||
prevVersion = patch === 0 ?
|
||||
[ major, minor - 1, 0 ].join( "." ) :
|
||||
[ major, minor, patch - 1 ].join( "." );
|
||||
@ -128,6 +138,7 @@ function buildRelease() {
|
||||
echo( "Updating package.json..." );
|
||||
pkg = readPackage();
|
||||
pkg.version = newVersion;
|
||||
pkg.author.url = pkg.author.url.replace( "master", newVersion );
|
||||
pkg.licenses.forEach(function( license ) {
|
||||
license.url = license.url.replace( "master", newVersion );
|
||||
});
|
||||
@ -140,17 +151,13 @@ function buildRelease() {
|
||||
echo();
|
||||
|
||||
echo( "Building release..." );
|
||||
if ( exec( "grunt release" ).code !== 0 ) {
|
||||
if ( exec( "grunt release_cdn" ).code !== 0 ) {
|
||||
abort( "Error building release." );
|
||||
}
|
||||
echo();
|
||||
|
||||
// TODO: Build themes
|
||||
|
||||
// TODO: Move build out of dist/
|
||||
echo( "Committing release artifacts..." );
|
||||
git( "add *.jquery.json", "Error adding manifest files to git." );
|
||||
// TODO: Add built files
|
||||
git( "commit -am 'Tagging the " + newVersion + " release.'",
|
||||
"Error committing release changes." );
|
||||
echo();
|
||||
@ -190,7 +197,9 @@ function generateChangelog() {
|
||||
var commits,
|
||||
changelogPath = baseDir + "/changelog",
|
||||
changelog = cat( "build/release/changelog-shell" ) + "\n",
|
||||
fullFormat = "* %s (TICKETREF, [http://github.com/jquery/jquery-ui/commit/%H %h])";
|
||||
fullFormat = "* %s (TICKETREF, [%h](http://github.com/jquery/jquery-ui/commit/%H))";
|
||||
|
||||
changelog = changelog.replace( "{title}", "jQuery UI " + newVersion + " Changelog" );
|
||||
|
||||
echo ( "Adding commits..." );
|
||||
commits = gitLog( fullFormat );
|
||||
@ -205,7 +214,7 @@ function generateChangelog() {
|
||||
});
|
||||
return tickets.length ?
|
||||
commit.replace( "TICKETREF", tickets.map(function( ticket ) {
|
||||
return "[http://bugs.jqueryui.com/ticket/" + ticket + " #" + ticket + "]";
|
||||
return "[#" + ticket + "](http://bugs.jqueryui.com/ticket/" + ticket + ")";
|
||||
}).join( ", " ) ) :
|
||||
// Leave TICKETREF token in place so it's easy to find commits without tickets
|
||||
commit;
|
||||
@ -244,7 +253,7 @@ function gatherContributors() {
|
||||
echo ( "Adding people thanked in commits..." );
|
||||
contributors = contributors.concat(
|
||||
gitLog( "%b%n%s" ).filter(function( line ) {
|
||||
return /thank/i.test( line );
|
||||
return (/thank/i).test( line );
|
||||
}));
|
||||
|
||||
fs.writeFileSync( contributorsPath, contributors.join( "\n" ) );
|
||||
@ -341,8 +350,8 @@ function bootstrap( fn ) {
|
||||
return process.exit( 1 );
|
||||
}
|
||||
|
||||
require( baseDir + "/node_modules/shelljs/global" );
|
||||
require( baseDir + "/node_modules/colors" );
|
||||
require( "shelljs/global" );
|
||||
require( "colors" );
|
||||
|
||||
fn();
|
||||
});
|
||||
@ -385,7 +394,7 @@ function abort( msg ) {
|
||||
function walk( methods ) {
|
||||
var method = methods.shift();
|
||||
|
||||
function next( error ) {
|
||||
function next() {
|
||||
if ( methods.length ) {
|
||||
walk( methods );
|
||||
}
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
module.exports = function( grunt ) {
|
||||
|
||||
var path = require( "path" );
|
||||
"use strict";
|
||||
|
||||
var path = require( "path" ),
|
||||
fs = require( "fs" );
|
||||
|
||||
grunt.registerTask( "manifest", "Generate jquery.json manifest files", function() {
|
||||
var pkg = grunt.config( "pkg" ),
|
||||
@ -143,7 +146,7 @@ grunt.registerMultiTask( "zip", "Create a zip file for release", function() {
|
||||
opts: {
|
||||
cwd: 'dist'
|
||||
}
|
||||
}, function( err, result ) {
|
||||
}, function( err ) {
|
||||
if ( err ) {
|
||||
grunt.log.error( err );
|
||||
done();
|
||||
@ -171,97 +174,68 @@ grunt.registerMultiTask( "md5", "Create list of md5 hashes for CDN uploads", fun
|
||||
grunt.log.writeln( "Wrote " + this.file.dest + " with " + hashes.length + " hashes" );
|
||||
});
|
||||
|
||||
// only needed for 1.8
|
||||
grunt.registerTask( "download_docs", function() {
|
||||
function capitalize(value) {
|
||||
return value[0].toUpperCase() + value.slice(1);
|
||||
}
|
||||
// should be grunt.config("pkg.version")?
|
||||
var version = "1.8",
|
||||
docsDir = "dist/docs",
|
||||
files = "draggable droppable resizable selectable sortable accordion autocomplete button datepicker dialog progressbar slider tabs position"
|
||||
.split(" ").map(function(widget) {
|
||||
return {
|
||||
url: "http://docs.jquery.com/action/render/UI/API/" + version + "/" + capitalize(widget),
|
||||
dest: docsDir + '/' + widget + '.html'
|
||||
};
|
||||
});
|
||||
files = files.concat("animate addClass effect hide removeClass show switchClass toggle toggleClass".split(" ").map(function(widget) {
|
||||
return {
|
||||
url: "http://docs.jquery.com/action/render/UI/Effects/" + widget,
|
||||
dest: docsDir + '/' + widget + '.html'
|
||||
};
|
||||
}));
|
||||
files = files.concat("Blind Clip Drop Explode Fade Fold Puff Slide Scale Bounce Highlight Pulsate Shake Size Transfer".split(" ").map(function(widget) {
|
||||
return {
|
||||
url: "http://docs.jquery.com/action/render/UI/Effects/" + widget,
|
||||
dest: docsDir + '/effect-' + widget.toLowerCase() + '.html'
|
||||
};
|
||||
}));
|
||||
grunt.file.mkdir( "dist/docs" );
|
||||
grunt.utils.async.forEach( files, function( file, done ) {
|
||||
var out = fs.createWriteStream( file.dest );
|
||||
out.on( "close", done );
|
||||
request( file.url ).pipe( out );
|
||||
}, this.async() );
|
||||
});
|
||||
|
||||
grunt.registerTask( "download_themes", function() {
|
||||
// var AdmZip = require('adm-zip');
|
||||
var done = this.async(),
|
||||
themes = grunt.file.read( "build/themes" ).split(","),
|
||||
requests = 0;
|
||||
grunt.file.mkdir( "dist/tmp" );
|
||||
themes.forEach(function( theme, index ) {
|
||||
requests += 1;
|
||||
grunt.file.mkdir( "dist/tmp/" + index );
|
||||
var zipFileName = "dist/tmp/" + index + ".zip",
|
||||
out = fs.createWriteStream( zipFileName );
|
||||
out.on( "close", function() {
|
||||
grunt.log.writeln( "done downloading " + zipFileName );
|
||||
// TODO AdmZip produces "crc32 checksum failed", need to figure out why
|
||||
// var zip = new AdmZip(zipFileName);
|
||||
// zip.extractAllTo('dist/tmp/' + index + '/');
|
||||
// until then, using cli unzip...
|
||||
grunt.utils.spawn({
|
||||
cmd: "unzip",
|
||||
args: [ "-d", "dist/tmp/" + index, zipFileName ]
|
||||
}, function( err, result ) {
|
||||
grunt.log.writeln( "Unzipped " + zipFileName + ", deleting it now" );
|
||||
fs.unlinkSync( zipFileName );
|
||||
requests -= 1;
|
||||
if (requests === 0) {
|
||||
done();
|
||||
}
|
||||
});
|
||||
});
|
||||
request( "http://ui-dev.jquery.com/download/?" + theme ).pipe( out );
|
||||
});
|
||||
});
|
||||
|
||||
grunt.registerTask( "copy_themes", function() {
|
||||
// each package includes the base theme, ignore that
|
||||
var filter = /themes\/base/,
|
||||
files = grunt.file.expandFiles( "dist/tmp/*/development-bundle/themes/**/*" ).filter(function( file ) {
|
||||
return !filter.test( file );
|
||||
}),
|
||||
// TODO the grunt.template.process call shouldn't be necessary
|
||||
grunt.registerTask( "generate_themes", function() {
|
||||
var download, files, done,
|
||||
target = "dist/" + grunt.template.process( grunt.config( "files.themes" ), grunt.config() ) + "/",
|
||||
distFolder = "dist/" + grunt.template.process( grunt.config( "files.dist" ), grunt.config() );
|
||||
files.forEach(function( fileName ) {
|
||||
var targetFile = fileName.replace( /dist\/tmp\/\d+\/development-bundle\//, "" ).replace( "jquery-ui-.custom", "jquery-ui" );
|
||||
grunt.file.copy( fileName, target + targetFile );
|
||||
try {
|
||||
require.resolve( "download.jqueryui.com" );
|
||||
} catch( error ) {
|
||||
throw new Error( "You need to manually install download.jqueryui.com for this task to work" );
|
||||
}
|
||||
|
||||
// copy release files into download builder to avoid cloning again
|
||||
grunt.file.expandFiles( distFolder + "/**" ).forEach(function( file ) {
|
||||
grunt.file.copy( file, "node_modules/download.jqueryui.com/release/" + file.replace(/^dist/, "") );
|
||||
});
|
||||
|
||||
// copy minified base theme from regular release
|
||||
download = new ( require( "download.jqueryui.com" ) )();
|
||||
|
||||
files = grunt.file.expandFiles( distFolder + "/themes/base/**/*" );
|
||||
files.forEach(function( fileName ) {
|
||||
grunt.file.copy( fileName, target + fileName.replace( distFolder, "" ) );
|
||||
});
|
||||
|
||||
done = this.async();
|
||||
grunt.utils.async.forEach( download.themeroller.gallery(), function( theme, done ) {
|
||||
var folderName = theme.folderName(),
|
||||
concatTarget = "css-" + folderName,
|
||||
cssContent = theme.css(),
|
||||
cssFolderName = target + "themes/" + folderName + "/",
|
||||
cssFileName = cssFolderName + "jquery.ui.theme.css",
|
||||
cssFiles = grunt.config.get( "concat.css.src" )[ 1 ].slice();
|
||||
|
||||
grunt.file.write( cssFileName, cssContent );
|
||||
|
||||
// get css components, replace the last file with the current theme
|
||||
cssFiles.splice(-1);
|
||||
cssFiles.push( "<strip_all_banners:" + cssFileName + ">" );
|
||||
grunt.config.get( "concat" )[ concatTarget ] = {
|
||||
src: [ "<banner:meta.bannerCSS>", cssFiles ],
|
||||
dest: cssFolderName + "jquery-ui.css"
|
||||
};
|
||||
grunt.task.run( "concat:" + concatTarget );
|
||||
|
||||
theme.fetchImages(function( err, files ) {
|
||||
if ( err ) {
|
||||
done( err );
|
||||
return;
|
||||
}
|
||||
files.forEach(function( file ) {
|
||||
grunt.file.write( cssFolderName + "images/" + file.path, file.data );
|
||||
});
|
||||
done();
|
||||
});
|
||||
}, function( err ) {
|
||||
if ( err ) {
|
||||
grunt.log.error( err );
|
||||
}
|
||||
done( !err );
|
||||
});
|
||||
});
|
||||
|
||||
grunt.registerTask( "clean", function() {
|
||||
require( "rimraf" ).sync( "dist" );
|
||||
});
|
||||
|
||||
};
|
||||
};
|
||||
|
||||
@ -1,33 +1,32 @@
|
||||
/*jshint node: true */
|
||||
module.exports = function( grunt ) {
|
||||
|
||||
"use strict";
|
||||
|
||||
var versions = {
|
||||
"git": "git",
|
||||
"1.8": "1.8.0 1.8.1 1.8.2",
|
||||
"1.7": "1.7 1.7.1 1.7.2",
|
||||
"1.6": "1.6 1.6.1 1.6.2 1.6.3 1.6.4"
|
||||
},
|
||||
tests = {
|
||||
"Accordion": "accordion/accordion.html",
|
||||
"Accordion_deprecated": "accordion/accordion_deprecated.html",
|
||||
"Autocomplete": "autocomplete/autocomplete.html",
|
||||
"Button": "button/button.html",
|
||||
"Core": "core/core.html",
|
||||
//"datepicker/datepicker.html",
|
||||
//"dialog/dialog.html",
|
||||
//"draggable/draggable.html",
|
||||
//"droppable/droppable.html",
|
||||
//"Datepicker": "datepicker/datepicker.html",
|
||||
//"Dialog": "dialog/dialog.html",
|
||||
"Draggable": "draggable/draggable.html",
|
||||
"Droppable": "droppable/droppable.html",
|
||||
"Effects": "effects/effects.html",
|
||||
"Menu": "menu/menu.html",
|
||||
"Position": "position/position.html",
|
||||
"Position_deprecated": "position/position_deprecated.html",
|
||||
"Progressbar": "progressbar/progressbar.html",
|
||||
//"resizable/resizable.html",
|
||||
//"selectable/selectable.html",
|
||||
//"slider/slider.html",
|
||||
//"sortable/sortable.html",
|
||||
"Resizable": "resizable/resizable.html",
|
||||
"Selectable": "selectable/selectable.html",
|
||||
//"Slider": "slider/slider.html",
|
||||
"Sortable": "sortable/sortable.html",
|
||||
"Spinner": "spinner/spinner.html",
|
||||
"Tabs": "tabs/tabs.html",
|
||||
"Tabs_deprecated": "tabs/tabs_deprecated.html",
|
||||
"Tooltip": "tooltip/tooltip.html",
|
||||
"Widget": "widget/widget.html"
|
||||
};
|
||||
@ -41,19 +40,20 @@ function submit( commit, tests, configFile, version, done ) {
|
||||
for ( test in tests ) {
|
||||
testUrls.push( testBase + tests[ test ] );
|
||||
}
|
||||
version = version ? ( version + " " ) : "";
|
||||
testswarm({
|
||||
url: config.swarmUrl,
|
||||
pollInterval: 10000,
|
||||
timeout: 1000 * 60 * 30,
|
||||
timeout: 1000 * 60 * 45,
|
||||
done: done
|
||||
}, {
|
||||
authUsername: config.authUsername,
|
||||
authToken: config.authToken,
|
||||
jobName: 'jQuery UI ' + version + '<a href="https://github.com/jquery/jquery-ui/commit/' + commit + '">' + commit.substr( 0, 7 ) + '</a>',
|
||||
jobName: 'jQuery UI ' + version + '#<a href="https://github.com/jquery/jquery-ui/commit/' + commit + '">' + commit.substr( 0, 10 ) + '</a>',
|
||||
runMax: config.runMax,
|
||||
"runNames[]": Object.keys(tests),
|
||||
"runNames[]": Object.keys( tests ),
|
||||
"runUrls[]": testUrls,
|
||||
"browserSets[]": ["popular"]
|
||||
"browserSets[]": [ "popular-no-ie6" ]
|
||||
});
|
||||
}
|
||||
|
||||
@ -73,7 +73,7 @@ grunt.registerTask( "testswarm-multi-jquery", function( commit, configFile, mino
|
||||
allTests[ test + "-" + version ] = tests[ test ] + "?nojshint=true&jquery=" + version;
|
||||
}
|
||||
});
|
||||
submit( commit, allTests, configFile, minor + " core ", this.async() );
|
||||
submit( commit, allTests, configFile, minor + " core", this.async() );
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Accordion - Collapse content</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.accordion.js"></script>
|
||||
@ -19,8 +19,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="accordion">
|
||||
<h3>Section 1</h3>
|
||||
<div>
|
||||
@ -45,13 +43,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>By default, accordions always keep one section open. To allow for all sections to be be collapsible, set the <code>collapsible</code> option to true. Click on the currently open section to collapse its content pane.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Accordion - Customize icons</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.accordion.js"></script>
|
||||
@ -31,8 +31,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="accordion">
|
||||
<h3>Section 1</h3>
|
||||
<div>
|
||||
@ -59,13 +57,8 @@
|
||||
|
||||
<button id="toggle">Toggle icons</button>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Customize the header icons with the <code>icons</code> option, which accepts classes for the header's default and active (open) state. Use any class from the UI CSS framework, or create custom classes with background images.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Accordion - Default functionality</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.accordion.js"></script>
|
||||
@ -17,8 +17,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="accordion">
|
||||
<h3>Section 1</h3>
|
||||
<div>
|
||||
@ -68,8 +66,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
<div class="demo-description">
|
||||
<p>
|
||||
Click headers to expand/collapse content that is broken into logical sections, much like tabs.
|
||||
@ -79,7 +75,6 @@ Optionally, toggle sections open/closed on mouseover.
|
||||
The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is
|
||||
usable without JavaScript.
|
||||
</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,16 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Accordion - Fill space</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.resizable.js"></script>
|
||||
<script src="../../ui/jquery.ui.accordion.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#accordion-resizer {
|
||||
padding: 10px;
|
||||
width: 350px;
|
||||
height: 220px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#accordion" ).accordion({
|
||||
@ -18,7 +25,7 @@
|
||||
});
|
||||
});
|
||||
$(function() {
|
||||
$( "#accordionResizer" ).resizable({
|
||||
$( "#accordion-resizer" ).resizable({
|
||||
minHeight: 140,
|
||||
minWidth: 200,
|
||||
resize: function() {
|
||||
@ -30,48 +37,36 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<h3 class="docs">Resize the outer container:</h3>
|
||||
|
||||
<div id="accordionResizer" style="padding:10px; width:350px; height:220px;" class="ui-widget-content">
|
||||
|
||||
<div id="accordion">
|
||||
<h3>Section 1</h3>
|
||||
<div>
|
||||
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
|
||||
</div>
|
||||
<h3>Section 2</h3>
|
||||
<div>
|
||||
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
|
||||
</div>
|
||||
<h3>Section 3</h3>
|
||||
<div>
|
||||
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
|
||||
<ul>
|
||||
<li>List item one</li>
|
||||
<li>List item two</li>
|
||||
<li>List item three</li>
|
||||
</ul>
|
||||
</div>
|
||||
<h3>Section 4</h3>
|
||||
<div>
|
||||
<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
|
||||
<div id="accordion-resizer" class="ui-widget-content">
|
||||
<div id="accordion">
|
||||
<h3>Section 1</h3>
|
||||
<div>
|
||||
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
|
||||
</div>
|
||||
<h3>Section 2</h3>
|
||||
<div>
|
||||
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
|
||||
</div>
|
||||
<h3>Section 3</h3>
|
||||
<div>
|
||||
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
|
||||
<ul>
|
||||
<li>List item one</li>
|
||||
<li>List item two</li>
|
||||
<li>List item three</li>
|
||||
</ul>
|
||||
</div>
|
||||
<h3>Section 4</h3>
|
||||
<div>
|
||||
<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="ui-icon ui-icon-grip-dotted-horizontal" style="margin:2px auto;"></span>
|
||||
</div><!-- End accordionResizer -->
|
||||
|
||||
<div style="margin-top:7px; padding:10px; width:350px; height:50px;" class="ui-widget-content">I'm another panel</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Because the accordion is comprised of block-level elements, by default its width fills the available horizontal space. To fill the vertical space allocated by its container, set the <code>heightStyle</code> option to <code>"fill"</code>, and the script will automatically set the dimensions of the accordion to the height of its parent container.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,21 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Accordion - Open on hoverintent</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.accordion.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$("#accordion").accordion({
|
||||
$( "#accordion" ).accordion({
|
||||
event: "click hoverintent"
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
var cfg = ($.hoverintent = {
|
||||
sensitivity: 7,
|
||||
interval: 100
|
||||
@ -33,7 +33,7 @@
|
||||
args = arguments,
|
||||
target = $( event.target ),
|
||||
cX, cY, pX, pY;
|
||||
|
||||
|
||||
function track( event ) {
|
||||
cX = event.pageX;
|
||||
cY = event.pageY;
|
||||
@ -70,8 +70,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="accordion">
|
||||
<h3>Section 1</h3>
|
||||
<div>
|
||||
@ -121,8 +119,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
<div class="demo-description">
|
||||
<p>
|
||||
Click headers to expand/collapse content that is broken into logical sections, much like tabs.
|
||||
@ -132,7 +128,6 @@ Optionally, toggle sections open/closed on mouseover.
|
||||
The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is
|
||||
usable without JavaScript.
|
||||
</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,24 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Accordion Demos</title>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demos-nav">
|
||||
<h4>Examples</h4>
|
||||
<ul>
|
||||
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="fillspace.html">Fill space</a></li>
|
||||
<li><a href="no-auto-height.html">No auto height</a></li>
|
||||
<li><a href="collapsible.html">Collapse content</a></li>
|
||||
<li><a href="hoverintent.html">Open on hoverintent</a></li>
|
||||
<li><a href="custom-icons.html">Customize icons</a></li>
|
||||
<li><a href="sortable.html">Sortable</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="fillspace.html">Fill space</a></li>
|
||||
<li><a href="no-auto-height.html">No auto height</a></li>
|
||||
<li><a href="collapsible.html">Collapse content</a></li>
|
||||
<li><a href="hoverintent.html">Open on hoverintent</a></li>
|
||||
<li><a href="custom-icons.html">Customize icons</a></li>
|
||||
<li><a href="sortable.html">Sortable</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Accordion - No auto height</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.accordion.js"></script>
|
||||
@ -19,8 +19,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="accordion">
|
||||
<h3>Section 1</h3>
|
||||
<div>
|
||||
@ -45,13 +43,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Setting <code>heightStyle: "content"</code> allows the accordion panels to keep their native height.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Accordion - Sortable</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
@ -35,8 +35,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="accordion">
|
||||
<div class="group">
|
||||
<h3>Section 1</h3>
|
||||
@ -69,13 +67,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Drag the header to re-order panels.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Effects - addClass demo</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
@ -30,8 +30,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div class="toggler">
|
||||
<div id="effect" class="ui-corner-all">
|
||||
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede.
|
||||
@ -40,13 +38,8 @@
|
||||
|
||||
<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>This demo adds a class which animates: text-indent, letter-spacing, width, height, padding, margin, and font-size.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,18 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Effects Demos</title>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demos-nav">
|
||||
<h4>Examples</h4>
|
||||
<ul>
|
||||
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Effects - Animate demo</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
@ -37,8 +37,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div class="toggler">
|
||||
<div id="effect" class="ui-widget-content ui-corner-all">
|
||||
<h3 class="ui-widget-header ui-corner-all">Animate</h3>
|
||||
@ -50,13 +48,8 @@
|
||||
|
||||
<a href="#" id="button" class="ui-state-default ui-corner-all">Toggle Effect</a>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Click the button above to preview the effect.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,18 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Effects Demos</title>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demos-nav">
|
||||
<h4>Examples</h4>
|
||||
<ul>
|
||||
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Autocomplete - Categories</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
@ -29,7 +29,7 @@
|
||||
ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
|
||||
currentCategory = item.category;
|
||||
}
|
||||
that._renderItem( ul, item );
|
||||
that._renderItemData( ul, item );
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -57,16 +57,11 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
<label for="search">Search: </label>
|
||||
<input id="search">
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
<label for="search">Search: </label>
|
||||
<input id="search">
|
||||
|
||||
<div class="demo-description">
|
||||
<p>A categorized search result. Try typing "a" or "n".</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Autocomplete - Combobox</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
@ -111,7 +111,6 @@
|
||||
|
||||
input.data( "autocomplete" )._renderItem = function( ul, item ) {
|
||||
return $( "<li>" )
|
||||
.data( "item.autocomplete", item )
|
||||
.append( "<a>" + item.label + "</a>" )
|
||||
.appendTo( ul );
|
||||
};
|
||||
@ -172,8 +171,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div class="ui-widget">
|
||||
<label>Your preferred programming language: </label>
|
||||
<select id="combobox">
|
||||
@ -204,15 +201,10 @@
|
||||
</div>
|
||||
<button id="toggle">Show underlying select</button>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>A custom widget built by composition of Autocomplete and Button. You can either type something into the field to get filtered suggestions based on your input, or use the button to get the full list of selections.</p>
|
||||
<p>The input is read from an existing select-element for progressive enhancement, passed to Autocomplete with a customized source-option.</p>
|
||||
<p>This is not a supported or even complete widget. Its purely for demoing what autocomplete can do with a bit of customization. <a href="http://www.learningjquery.com/2010/06/a-jquery-ui-combobox-under-the-hood">For a detailed explanation of how the widget works, check out this Learning jQuery article.</a></p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Autocomplete - Custom data and display</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
@ -68,7 +68,6 @@
|
||||
})
|
||||
.data( "autocomplete" )._renderItem = function( ul, item ) {
|
||||
return $( "<li>" )
|
||||
.data( "item.autocomplete", item )
|
||||
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
|
||||
.appendTo( ul );
|
||||
};
|
||||
@ -77,20 +76,15 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
<div id="project-label">Select a project (type "j" for a start):</div>
|
||||
<img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="">
|
||||
<input id="project">
|
||||
<input type="hidden" id="project-id">
|
||||
<p id="project-description"></p>
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
<div id="project-label">Select a project (type "j" for a start):</div>
|
||||
<img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="">
|
||||
<input id="project">
|
||||
<input type="hidden" id="project-id">
|
||||
<p id="project-description"></p>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>You can use your own custom data formats and displays by simply overriding the default focus and select actions.</p>
|
||||
<p>Try typing "j" to get a list of projects or just press the down arrow.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Autocomplete - Default functionality</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
@ -44,22 +44,15 @@
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div class="ui-widget">
|
||||
<label for="tags">Tags: </label>
|
||||
<input id="tags">
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try.</p>
|
||||
<p>The datasource is a simple JavaScript array, provided to the widget using the source-option.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Autocomplete - Accent folding</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
@ -41,8 +41,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div class="ui-widget">
|
||||
<form>
|
||||
<label for="developer">Developer: </label>
|
||||
@ -50,14 +48,9 @@
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>The autocomplete field uses a custom source option which will match results that have accented characters even when the text field doesn't contain accented characters. However if the you type in accented characters in the text field it is smart enough not to show results that aren't accented.</p>
|
||||
<p>Try typing "Jo" to see "John" and "Jörn", then type "Jö" to see only "Jörn".</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,27 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Autocomplete Demos</title>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="demos-nav">
|
||||
<h4>Examples</h4>
|
||||
<ul>
|
||||
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="remote.html">Remote datasource</a></li>
|
||||
<li><a href="remote-with-cache.html">Remote with caching</a></li>
|
||||
<li><a href="remote-jsonp.html">Remote JSONP datasource</a></li>
|
||||
<li><a href="maxheight.html">Scrollable results</a></li>
|
||||
<li><a href="combobox.html">Combobox</a></li>
|
||||
<li><a href="custom-data.html">Custom data and display</a></li>
|
||||
<li><a href="xml.html">XML data parsed once</a></li>
|
||||
<li><a href="categories.html">Categories</a></li>
|
||||
<li><a href="folding.html">Accent folding</a></li>
|
||||
<li><a href="multiple.html">Multiple values</a></li>
|
||||
<li><a href="multiple-remote.html">Multiple, remote</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="remote.html">Remote datasource</a></li>
|
||||
<li><a href="remote-with-cache.html">Remote with caching</a></li>
|
||||
<li><a href="remote-jsonp.html">Remote JSONP datasource</a></li>
|
||||
<li><a href="maxheight.html">Scrollable results</a></li>
|
||||
<li><a href="combobox.html">Combobox</a></li>
|
||||
<li><a href="custom-data.html">Custom data and display</a></li>
|
||||
<li><a href="xml.html">XML data parsed once</a></li>
|
||||
<li><a href="categories.html">Categories</a></li>
|
||||
<li><a href="folding.html">Accent folding</a></li>
|
||||
<li><a href="multiple.html">Multiple values</a></li>
|
||||
<li><a href="multiple-remote.html">Multiple, remote</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Autocomplete - Scrollable results</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
@ -59,20 +59,13 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div class="ui-widget">
|
||||
<label for="tags">Tags: </label>
|
||||
<input id="tags">
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>When displaying a long list of options, you can simply set the max-height for the autocomplete menu to prevent the menu from growing too large. Try typing "a" or "s" above to get a long list of results that you can scroll through.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Autocomplete - Multiple, remote</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
@ -67,21 +67,14 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div class="ui-widget">
|
||||
<label for="birds">Birds: </label>
|
||||
<input id="birds" size="50">
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Usage: Enter at least two characters to get bird name suggestions. Select a value to continue adding more names.</p>
|
||||
<p>This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Autocomplete - Multiple values</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
@ -80,21 +80,14 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div class="ui-widget">
|
||||
<label for="tags">Tag programming languages: </label>
|
||||
<input id="tags" size="50">
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Usage: Type something, eg. "j" to see suggestions for tagging with programming languages. Select a value, then continue typing to add more.</p>
|
||||
<p>This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Autocomplete - Remote JSONP datasource</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
@ -63,8 +63,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div class="ui-widget">
|
||||
<label for="city">Your city: </label>
|
||||
<input id="city">
|
||||
@ -76,14 +74,9 @@
|
||||
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are cities, displayed when at least two characters are entered into the field.</p>
|
||||
<p>In this case, the datasource is the <a href="http://geonames.org">geonames.org webservice</a>. While only the city name itself ends up in the input after selecting an element, more info is displayed in the suggestions to help find the right entry. That data is also available in callbacks, as illustrated by the Result area below the input.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Autocomplete - Remote with caching</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
@ -18,8 +18,7 @@
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
var cache = {},
|
||||
lastXhr;
|
||||
var cache = {};
|
||||
$( "#birds" ).autocomplete({
|
||||
minLength: 2,
|
||||
source: function( request, response ) {
|
||||
@ -29,11 +28,9 @@
|
||||
return;
|
||||
}
|
||||
|
||||
lastXhr = $.getJSON( "search.php", request, function( data, status, xhr ) {
|
||||
$.getJSON( "search.php", request, function( data, status, xhr ) {
|
||||
cache[ term ] = data;
|
||||
if ( xhr === lastXhr ) {
|
||||
response( data );
|
||||
}
|
||||
response( data );
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -42,21 +39,14 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div class="ui-widget">
|
||||
<label for="birds">Birds: </label>
|
||||
<input id="birds">
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field.</p>
|
||||
<p>Similar to the remote datasource demo, though this adds some local caching to improve performance. The cache here saves just one query, and could be extended to cache multiple values, one for each term.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Autocomplete - Remote datasource</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
@ -37,8 +37,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div class="ui-widget">
|
||||
<label for="birds">Birds: </label>
|
||||
<input id="birds">
|
||||
@ -49,14 +47,9 @@
|
||||
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are bird names, displayed when at least two characters are entered into the field.</p>
|
||||
<p>The datasource is a server-side script which returns JSON data, specified via a simple URL for the source-option. In addition, the minLength-option is set to 2 to avoid queries that would return too many results and the select-event is used to display some feedback.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Autocomplete - XML data parsed once</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
@ -48,8 +48,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div class="ui-widget">
|
||||
<label for="birds">London matches: </label>
|
||||
<input id="birds" />
|
||||
@ -60,14 +58,9 @@
|
||||
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>This demo shows how to retrieve some XML data, parse it using jQuery's methods, then provide it to the autocomplete as the datasource.</p>
|
||||
<p>This should also serve as a reference on how to parse a remote XML datasource - the parsing would just happen for each request within the source-callback.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Button - Checkboxes</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
@ -21,8 +21,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<input type="checkbox" id="check" /><label for="check">Toggle</label>
|
||||
|
||||
<div id="format">
|
||||
@ -31,14 +29,9 @@
|
||||
<input type="checkbox" id="check3" /><label for="check3">U</label>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>A checkbox is styled as a toggle button with the button widget. The label element associated with the checkbox is used for the button text.</p>
|
||||
<p>This demo also demonstrates three checkboxes styled as a button set by calling <code>.buttonset()</code> on a common container.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,38 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Button - Default functionality</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "input[type=submit], a, button", ".demo" ).button();
|
||||
$( "a", ".demo" ).click(function() { return false; });
|
||||
$( "input[type=submit], a, button" )
|
||||
.button()
|
||||
.click(function( event ) {
|
||||
event.preventDefault();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<button>A button element</button>
|
||||
|
||||
<input type="submit" value="A submit button">
|
||||
|
||||
<a href="#">An anchor</a>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Examples of the markup that can be used for buttons: A button element, an input of type submit and an anchor.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,56 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Button - Icons</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( ".demo button:first" ).button({
|
||||
icons: {
|
||||
primary: "ui-icon-locked"
|
||||
},
|
||||
text: false
|
||||
}).next().button({
|
||||
icons: {
|
||||
primary: "ui-icon-locked"
|
||||
}
|
||||
}).next().button({
|
||||
icons: {
|
||||
primary: "ui-icon-gear",
|
||||
secondary: "ui-icon-triangle-1-s"
|
||||
}
|
||||
}).next().button({
|
||||
icons: {
|
||||
primary: "ui-icon-gear",
|
||||
secondary: "ui-icon-triangle-1-s"
|
||||
},
|
||||
text: false
|
||||
});
|
||||
$( "button:first" ).button({
|
||||
icons: {
|
||||
primary: "ui-icon-locked"
|
||||
},
|
||||
text: false
|
||||
}).next().button({
|
||||
icons: {
|
||||
primary: "ui-icon-locked"
|
||||
}
|
||||
}).next().button({
|
||||
icons: {
|
||||
primary: "ui-icon-gear",
|
||||
secondary: "ui-icon-triangle-1-s"
|
||||
}
|
||||
}).next().button({
|
||||
icons: {
|
||||
primary: "ui-icon-gear",
|
||||
secondary: "ui-icon-triangle-1-s"
|
||||
},
|
||||
text: false
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<button>Button with icon only</button>
|
||||
<button>Button with icon on the left</button>
|
||||
<button>Button with two icons</button>
|
||||
<button>Button with two icons and no text</button>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Some buttons with various combinations of text and icons, here specified via metadata.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
<p>Some buttons with various combinations of text and icons.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,23 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Button Demos</title>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demos-nav">
|
||||
<h4>Examples</h4>
|
||||
<ul>
|
||||
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="radio.html">Radios</a></li>
|
||||
<li><a href="checkbox.html">Checkboxes</a></li>
|
||||
<li><a href="icons.html">Icons</a></li>
|
||||
<li><a href="toolbar.html">Toolbar</a></li>
|
||||
<li><a href="splitbutton.html">Split Button</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="radio.html">Radios</a></li>
|
||||
<li><a href="checkbox.html">Checkboxes</a></li>
|
||||
<li><a href="icons.html">Icons</a></li>
|
||||
<li><a href="toolbar.html">Toolbar</a></li>
|
||||
<li><a href="splitbutton.html">Split Button</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Button - Radios</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
@ -17,8 +17,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<form>
|
||||
<div id="radio">
|
||||
<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
|
||||
@ -27,13 +25,8 @@
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>A set of three radio buttons transformed into a button set.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Button - Split button</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
@ -49,30 +49,21 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<button id="rerun">Run last action</button>
|
||||
<button id="select">Select an action</button>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="#">Open...</a></li>
|
||||
<li><a href="#">Save</a></li>
|
||||
<li><a href="#">Delete</a></li>
|
||||
</ul>
|
||||
<button id="rerun">Run last action</button>
|
||||
<button id="select">Select an action</button>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
<ul>
|
||||
<li><a href="#">Open...</a></li>
|
||||
<li><a href="#">Save</a></li>
|
||||
<li><a href="#">Delete</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
|
||||
<p>An example of a split button built with two buttons: A plain button with just text, one with only a primary icon
|
||||
and no text. Both are grouped together in a set.</p>
|
||||
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Button - Toolbar</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
@ -86,8 +86,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<span id="toolbar" class="ui-widget-header ui-corner-all">
|
||||
<button id="beginning">go to beginning</button>
|
||||
<button id="rewind">rewind</button>
|
||||
@ -95,9 +93,9 @@
|
||||
<button id="stop">stop</button>
|
||||
<button id="forward">fast forward</button>
|
||||
<button id="end">go to end</button>
|
||||
|
||||
|
||||
<input type="checkbox" id="shuffle" /><label for="shuffle">Shuffle</label>
|
||||
|
||||
|
||||
<span id="repeat">
|
||||
<input type="radio" id="repeat0" name="repeat" checked="checked" /><label for="repeat0">No Repeat</label>
|
||||
<input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label>
|
||||
@ -105,16 +103,11 @@
|
||||
</span>
|
||||
</span>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>
|
||||
A mediaplayer toolbar. Take a look at the underlying markup: A few button elements,
|
||||
an input of type checkbox for the Shuffle button, and three inputs of type radio for the Repeat options.
|
||||
</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Datepicker - Populate alternate field</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.datepicker.js"></script>
|
||||
@ -20,17 +20,10 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<p>Date: <input type="text" id="datepicker"> <input type="text" id="alternate" size="30"/></p>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Populate an alternate field with its own date format whenever a date is selected using the <code>altField</code> and <code>altFormat</code> options. This feature could be used to present a human-friendly date for user selection, while passing a more computer-friendly date through for further processing.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Datepicker - Animations</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect.js"></script>
|
||||
@ -27,8 +27,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<p>Date: <input type="text" id="datepicker" size="30"/></p>
|
||||
|
||||
<p>Animations:<br />
|
||||
@ -46,13 +44,8 @@
|
||||
</select>
|
||||
</p>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Use different animations when opening or closing the datepicker. Choose an animation from the dropdown, then click on the input to see its effect. You can use one of the three standard animations or any of the UI Effects.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Datepicker - Display button bar</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.datepicker.js"></script>
|
||||
@ -19,17 +19,10 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<p>Date: <input type="text" id="datepicker"></p>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Display a button for selecting Today's date and a Done button for closing the calendar with the boolean <code>showButtonPanel</code> option. Each button is enabled by default when the bar is displayed, but can be turned off with additional options. Button text is customizable.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Datepicker - Format date</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.datepicker.js"></script>
|
||||
@ -20,8 +20,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<p>Date: <input type="text" id="datepicker" size="30"/></p>
|
||||
|
||||
<p>Format options:<br />
|
||||
@ -35,13 +33,8 @@
|
||||
</select>
|
||||
</p>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Display date feedback in a variety of ways. Choose a date format from the dropdown, then click on the input and select a date to see it in that format.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Datepicker - Select a Date Range</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.datepicker.js"></script>
|
||||
@ -15,7 +15,7 @@
|
||||
defaultDate: "+1w",
|
||||
changeMonth: true,
|
||||
numberOfMonths: 3,
|
||||
onSelect: function( selectedDate ) {
|
||||
onClose: function( selectedDate ) {
|
||||
$( "#to" ).datepicker( "option", "minDate", selectedDate );
|
||||
}
|
||||
});
|
||||
@ -23,7 +23,7 @@
|
||||
defaultDate: "+1w",
|
||||
changeMonth: true,
|
||||
numberOfMonths: 3,
|
||||
onSelect: function( selectedDate ) {
|
||||
onClose: function( selectedDate ) {
|
||||
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
|
||||
}
|
||||
});
|
||||
@ -32,20 +32,13 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<label for="from">From</label>
|
||||
<input type="text" id="from" name="from"/>
|
||||
<label for="to">to</label>
|
||||
<input type="text" id="to" name="to"/>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Select the date range to search for.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Datepicker - Default functionality</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.datepicker.js"></script>
|
||||
@ -17,17 +17,10 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<p>Date: <input type="text" id="datepicker"></p>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input's value.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Datepicker - Display month & year menus</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.datepicker.js"></script>
|
||||
@ -20,17 +20,10 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<p>Date: <input type="text" id="datepicker"></p>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Show month and year dropdowns in place of the static month/year header to facilitate navigation through large timeframes. Add the boolean <code>changeMonth</code> and <code>changeYear</code> options.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Datepicker - Icon trigger</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.datepicker.js"></script>
|
||||
@ -21,17 +21,10 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<p>Date: <input type="text" id="datepicker"></p>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Click the icon next to the input field to show the datepicker. Set the datepicker to open on focus (default behavior), on icon click, or both.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,31 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Datepicker Demos</title>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demos-nav">
|
||||
<h4>Examples</h4>
|
||||
<ul>
|
||||
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="date-formats.html">Format date</a></li>
|
||||
<li><a href="min-max.html">Restrict date range</a></li>
|
||||
<li><a href="localization.html">Localize calendar</a></li>
|
||||
<li><a href="alt-field.html">Populate alternate field</a></li>
|
||||
<li><a href="inline.html">Display inline</a></li>
|
||||
<li><a href="buttonbar.html">Display button bar</a></li>
|
||||
<li><a href="dropdown-month-year.html">Display month & year menus</a></li>
|
||||
<li><a href="other-months.html">Dates in other months</a></li>
|
||||
<li><a href="show-week.html">Show week of the year</a></li>
|
||||
<li><a href="multiple-calendars.html">Display multiple months</a></li>
|
||||
<li><a href="icon-trigger.html">Icon trigger</a></li>
|
||||
<li><a href="animation.html">Animations</a></li>
|
||||
<li><a href="date-range.html">Date Range</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="date-formats.html">Format date</a></li>
|
||||
<li><a href="min-max.html">Restrict date range</a></li>
|
||||
<li><a href="localization.html">Localize calendar</a></li>
|
||||
<li><a href="alt-field.html">Populate alternate field</a></li>
|
||||
<li><a href="inline.html">Display inline</a></li>
|
||||
<li><a href="buttonbar.html">Display button bar</a></li>
|
||||
<li><a href="dropdown-month-year.html">Display month & year menus</a></li>
|
||||
<li><a href="other-months.html">Dates in other months</a></li>
|
||||
<li><a href="show-week.html">Show week of the year</a></li>
|
||||
<li><a href="multiple-calendars.html">Display multiple months</a></li>
|
||||
<li><a href="icon-trigger.html">Icon trigger</a></li>
|
||||
<li><a href="animation.html">Animations</a></li>
|
||||
<li><a href="date-range.html">Date Range</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Datepicker - Display inline</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.datepicker.js"></script>
|
||||
@ -17,17 +17,10 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
Date: <div id="datepicker"></div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Display the datepicker embedded in the page instead of in an overlay. Simply call .datepicker() on a div instead of an input.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Datepicker - Localize calendar</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.datepicker.js"></script>
|
||||
@ -90,8 +90,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<p>Date: <input type="text" id="datepicker"/>
|
||||
<select id="locale">
|
||||
<option value="af">Afrikaans</option>
|
||||
@ -164,13 +162,8 @@
|
||||
<option value="cy-GB">Welsh/UK (Cymraeg)</option>
|
||||
</select></p>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Localize the datepicker calendar language and format (English / Western formatting is the default). The datepicker includes built-in support for languages that read right-to-left, such as Arabic and Hebrew.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Datepicker - Restrict date range</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.datepicker.js"></script>
|
||||
@ -17,17 +17,10 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<p>Date: <input type="text" id="datepicker"></p>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Restrict the range of selectable dates with the <code>minDate</code> and <code>maxDate</code> options. Set the beginning and end dates as actual dates (new Date(2009, 1 - 1, 26)), as a numeric offset from today (-20), or as a string of periods and units ('+1M +10D'). For the last, use 'D' for days, 'W' for weeks, 'M' for months, or 'Y' for years.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Datepicker - Display multiple months</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.datepicker.js"></script>
|
||||
@ -20,17 +20,10 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<p>Date: <input type="text" id="datepicker"></p>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Set the <code>numberOfMonths</code> option to an integer of 2 or more to show multiple months in a single datepicker.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Datepicker - Dates in other months</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.datepicker.js"></script>
|
||||
@ -20,18 +20,11 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<p>Date: <input type="text" id="datepicker"></p>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>The datepicker can show dates that come from other than the main month
|
||||
being displayed. These other dates can also be made selectable.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Datepicker - Show week of the year</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.datepicker.js"></script>
|
||||
@ -20,20 +20,13 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<p>Date: <input type="text" id="datepicker"></p>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>The datepicker can show the week of the year. The default calculation follows
|
||||
the ISO 8601 definition: the week starts on Monday, the first week of the year
|
||||
contains the first Thursday of the year. This means that some days from one
|
||||
year may be placed into weeks 'belonging' to another year.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
324
demos/demos.css
324
demos/demos.css
@ -1,335 +1,19 @@
|
||||
body {
|
||||
font-size: 62.5%;
|
||||
font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
|
||||
}
|
||||
|
||||
table {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* Site
|
||||
-------------------------------- */
|
||||
|
||||
body {
|
||||
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
|
||||
}
|
||||
|
||||
/* Layout
|
||||
-------------------------------- */
|
||||
|
||||
.layout-grid {
|
||||
width: 960px;
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.layout-grid td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.layout-grid td.left-nav {
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.layout-grid td.normal {
|
||||
border-left: 1px solid #eee;
|
||||
padding: 20px 24px;
|
||||
font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
|
||||
}
|
||||
|
||||
.layout-grid td.demos {
|
||||
background: url('/images/demos_bg.jpg') no-repeat;
|
||||
height: 337px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Normal
|
||||
-------------------------------- */
|
||||
|
||||
.normal h3,
|
||||
.normal h4 {
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.normal h3 {
|
||||
padding: 0 0 9px;
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
.normal h4 {
|
||||
padding-bottom: 21px;
|
||||
border-bottom: 1px dashed #999;
|
||||
font-size: 1.2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.normal p {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
/* Demos */
|
||||
|
||||
.demos-nav, .demos-nav dt, .demos-nav dd, .demos-nav ul, .demos-nav li {
|
||||
margin: 0;
|
||||
padding: 0
|
||||
}
|
||||
|
||||
.demos-nav {
|
||||
float: left;
|
||||
width: 170px;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.demos-nav dt,
|
||||
.demos-nav h4 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font: normal 1.1em "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
|
||||
color: #e87b10;
|
||||
}
|
||||
|
||||
.demos-nav dt,
|
||||
.demos-nav h4 {
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 0;
|
||||
padding-left: 8px;
|
||||
padding-bottom:5px;
|
||||
line-height: 1.2em;
|
||||
border-bottom: 1px solid #F4F4F4;
|
||||
}
|
||||
|
||||
.demos-nav dd a,
|
||||
.demos-nav li a {
|
||||
border-bottom: 1px solid #F4F4F4;
|
||||
display:block;
|
||||
padding: 4px 3px 4px 8px;
|
||||
font-size: 90%;
|
||||
text-decoration: none;
|
||||
color: #555 ;
|
||||
margin:2px 0;
|
||||
height:13px;
|
||||
}
|
||||
|
||||
.demos-nav dd a:hover,
|
||||
.demos-nav dd a:focus,
|
||||
.demos-nav dd a:hover,
|
||||
.demos-nav dd a:focus {
|
||||
background: #f3f3f3;
|
||||
color:#000;
|
||||
-moz-border-radius: 5px; -webkit-border-radius: 5px;
|
||||
}
|
||||
.demos-nav dd a.selected {
|
||||
background: #555;
|
||||
color:#ffffff;
|
||||
-moz-border-radius: 5px; -webkit-border-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
/* new styles for demo pages, added by Filament 12.29.08
|
||||
eventually we should convert the font sizes to ems -- using px for now to minimize style conflicts
|
||||
*/
|
||||
|
||||
.normal h3.demo-header { font-size:32px; padding:0 0 5px; border-bottom:1px solid #eee; text-transform: capitalize; }
|
||||
.normal h4.demo-subheader { font-size:10px; text-transform: uppercase; color:#999; padding:8px 0 3px; border:0; margin:0; }
|
||||
#demo-notes a, #demo-link a, #demo-source a { color:#1b75bb; text-decoration:none; }
|
||||
.normal a:hover,
|
||||
.normal a:active { color:#0b559b; }
|
||||
|
||||
#demo-config { padding:20px 0 0; }
|
||||
|
||||
#demo-frame { float:left; width:540px; height:380px; border:1px solid #ddd; overflow: auto; position: relative; }
|
||||
#demo-frame h3, #demo-frame h4 { padding: 0; font-weight: bold; font-size: 1em; }
|
||||
|
||||
#demo-config-menu { float:right; width:180px; }
|
||||
#demo-config-menu h4 { font-size:13px; color:#666; font-weight:normal; border:0; padding-left:18px; }
|
||||
|
||||
#demo-config-menu ul { list-style: none; padding: 0; margin: 0; }
|
||||
|
||||
#demo-config-menu li { font-size:12px; padding:0 0 0 10px; margin:3px 0; zoom: 1; }
|
||||
|
||||
#demo-config-menu li a:link,
|
||||
#demo-config-menu li a:visited { display:block; padding:1px 8px 4px; border-bottom:1px dotted #b3b3b3; }
|
||||
* html #demo-config-menu li a:link,
|
||||
* html #demo-config-menu li a:visited { padding:1px 8px 2px; }
|
||||
#demo-config-menu li a:hover,
|
||||
#demo-config-menu li a:active { background-color:#f6f6f6; }
|
||||
|
||||
#demo-config-menu li.demo-config-on { background: url(images/demo-config-on-tile.gif) repeat-x left center; }
|
||||
|
||||
#demo-config-menu li.demo-config-on a:link,
|
||||
#demo-config-menu li.demo-config-on a:visited,
|
||||
#demo-config-menu li.demo-config-on a:hover,
|
||||
#demo-config-menu li.demo-config-on a:active { background: url(images/demo-config-on.gif) no-repeat left; padding-left:18px; color:#fff; border:0; margin-left:-10px; margin-top: 0px; margin-bottom: 0px; }
|
||||
|
||||
#demo-source, #demo-notes {
|
||||
.demo-description {
|
||||
clear: both;
|
||||
padding: 20px 0 0;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
#demo-notes { width:520px; color:#333; font-size: 1em; }
|
||||
#demo-notes p code, .demo-description p code { padding: 0; font-weight: bold; }
|
||||
#demo-source pre, #demo-source code { padding: 0; }
|
||||
code, pre { padding:8px 0 8px 20px ; font-size: 1.2em; line-height:130%; }
|
||||
|
||||
#demo-source a:link,
|
||||
#demo-source a:visited,
|
||||
#demo-source a:hover,
|
||||
#demo-source a:active { font-size:12px; padding-left:13px; background-position: left center; background-repeat: no-repeat; }
|
||||
|
||||
#demo-source a.source-open:link,
|
||||
#demo-source a.source-open:visited,
|
||||
#demo-source a.source-open:hover,
|
||||
#demo-source a.source-open:active { background-image: url(images/demo-spindown-open.gif); }
|
||||
|
||||
#demo-source a.source-closed:link,
|
||||
#demo-source a.source-closed:visited,
|
||||
#demo-source a.source-closed:hover,
|
||||
#demo-source a.source-closed:active { background-image: url(images/demo-spindown-closed.gif); }
|
||||
|
||||
div.demo {
|
||||
padding:12px;
|
||||
font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
|
||||
}
|
||||
|
||||
div.demo h3.docs { clear:left; font-size:12px; font-weight:normal; padding:0 0 1em; margin:0; }
|
||||
|
||||
div.demo-description {
|
||||
clear:both;
|
||||
padding:12px;
|
||||
font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
|
||||
padding: 12px;
|
||||
font-size: 1.3em;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
.ui-draggable, .ui-droppable {
|
||||
background-position: top left;
|
||||
background-position: top;
|
||||
}
|
||||
|
||||
.left-nav .demos-nav {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
#demo-link { font-size:11px; padding-top: 6px; clear: both; overflow: hidden; }
|
||||
#demo-link a span.ui-icon { float:left; margin-right:3px; }
|
||||
|
||||
/* Component containers
|
||||
----------------------------------*/
|
||||
#widget-docs .ui-widget { font-family: Trebuchet MS,Verdana,Arial,sans-serif; font-size: 1em; }
|
||||
#widget-docs .ui-widget input, #widget-docs .ui-widget select, #widget-docs .ui-widget textarea, #widget-docs .ui-widget button { font-family: Trebuchet MS,Verdana,Arial,sans-serif; font-size: 1em; }
|
||||
#widget-docs .ui-widget-header { border: 1px solid #ffffff; background: #464646 url(images/464646_40x100_textures_01_flat_100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }
|
||||
#widget-docs .ui-widget-header a { color: #ffffff; }
|
||||
#widget-docs .ui-widget-content { border: 1px solid #ffffff; background: #ffffff url(images/ffffff_40x100_textures_01_flat_75.png) 50% 50% repeat-x; color: #222222; }
|
||||
#widget-docs .ui-widget-content a { color: #222222; }
|
||||
|
||||
/* Interaction states
|
||||
----------------------------------*/
|
||||
#widget-docs .ui-state-default, #widget-docs .ui-widget-content #widget-docs .ui-state-default { border: 1px solid #666666; background: #555555 url(images/555555_40x100_textures_03_highlight_soft_75.png) 50% 50% repeat-x; font-weight: normal; color: #ffffff; outline: none; }
|
||||
#widget-docs .ui-state-default a { color: #ffffff; text-decoration: none; outline: none; }
|
||||
#widget-docs .ui-state-hover, #widget-docs .ui-widget-content #widget-docs .ui-state-hover, #widget-docs .ui-state-focus, #widget-docs .ui-widget-content #widget-docs .ui-state-focus { border: 1px solid #666666; background: #444444 url(images/444444_40x100_textures_03_highlight_soft_60.png) 50% 50% repeat-x; font-weight: normal; color: #ffffff; outline: none; }
|
||||
#widget-docs .ui-state-hover a { color: #ffffff; text-decoration: none; outline: none; }
|
||||
#widget-docs .ui-state-active, #widget-docs .ui-widget-content #widget-docs .ui-state-active { border: 1px solid #666666; background: #ffffff url(images/ffffff_40x100_textures_01_flat_65.png) 50% 50% repeat-x; font-weight: normal; color: #F6921E; outline: none; }
|
||||
#widget-docs .ui-state-active a { color: #F6921E; outline: none; text-decoration: none; }
|
||||
|
||||
/* Interaction Cues
|
||||
----------------------------------*/
|
||||
#widget-docs .ui-state-highlight, #widget-docs .ui-widget-content #widget-docs .ui-state-highlight {border: 1px solid #fcefa1; background: #fbf9ee url(images/fbf9ee_40x100_textures_02_glass_55.png) 50% 50% repeat-x; color: #363636; }
|
||||
#widget-docs .ui-state-error, #widget-docs .ui-widget-content #widget-docs .ui-state-error {border: 1px solid #cd0a0a; background: #fef1ec url(images/fef1ec_40x100_textures_05_inset_soft_95.png) 50% bottom repeat-x; color: #cd0a0a; }
|
||||
#widget-docs .ui-state-error-text, #widget-docs .ui-widget-content #widget-docs .ui-state-error-text { color: #cd0a0a; }
|
||||
#widget-docs .ui-state-disabled, #widget-docs .ui-widget-content #widget-docs .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }
|
||||
#widget-docs .ui-priority-primary, #widget-docs .ui-widget-content #widget-docs .ui-priority-primary { font-weight: bold; }
|
||||
#widget-docs .ui-priority-secondary, #widget-docs .ui-widget-content #widget-docs .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
|
||||
|
||||
/* Icons
|
||||
----------------------------------*/
|
||||
|
||||
/* states and images */
|
||||
#demo-frame-wrapper .ui-icon, #widget-docs .ui-icon { width: 16px; height: 16px; background-image: url(images/222222_256x240_icons_icons.png); }
|
||||
#widget-docs .ui-widget-content .ui-icon {background-image: url(images/222222_256x240_icons_icons.png); }
|
||||
#widget-docs .ui-widget-header .ui-icon {background-image: url(images/222222_256x240_icons_icons.png); }
|
||||
#widget-docs .ui-state-default .ui-icon { background-image: url(images/888888_256x240_icons_icons.png); }
|
||||
#widget-docs .ui-state-hover .ui-icon, #widget-docs .ui-state-focus .ui-icon {background-image: url(images/454545_256x240_icons_icons.png); }
|
||||
#widget-docs .ui-state-active .ui-icon {background-image: url(images/454545_256x240_icons_icons.png); }
|
||||
#widget-docs .ui-state-highlight .ui-icon {background-image: url(images/2e83ff_256x240_icons_icons.png); }
|
||||
#widget-docs .ui-state-error .ui-icon, #widget-docs .ui-state-error-text .ui-icon {background-image: url(images/cd0a0a_256x240_icons_icons.png); }
|
||||
|
||||
|
||||
/* Misc visuals
|
||||
----------------------------------*/
|
||||
|
||||
/* Corner radius */
|
||||
#widget-docs .ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; }
|
||||
#widget-docs .ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; }
|
||||
#widget-docs .ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; }
|
||||
#widget-docs .ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }
|
||||
#widget-docs .ui-corner-top { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; }
|
||||
#widget-docs .ui-corner-bottom { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }
|
||||
#widget-docs .ui-corner-right { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; }
|
||||
#widget-docs .ui-corner-left { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; }
|
||||
#widget-docs .ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; }
|
||||
|
||||
/* Overlays */
|
||||
#widget-docs .ui-widget-overlay { background: #aaaaaa url(images/aaaaaa_40x100_textures_01_flat_0.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); }
|
||||
#widget-docs .ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa url(images/aaaaaa_40x100_textures_01_flat_0.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); -moz-border-radius: 8px; -webkit-border-radius: 8px; }
|
||||
|
||||
/*
|
||||
----------------------------------*/
|
||||
|
||||
#widget-docs { margin:20px 0 0; border: none; }
|
||||
|
||||
#widget-docs h2, #widget-docs h3, #widget-docs h4, #widget-docs p, #widget-docs ul, #widget-docs code { margin:0; padding:0; }
|
||||
#widget-docs code { display:block; color:#444; font-size:.9em; margin:0 0 1em; }
|
||||
#widget-docs code strong { color:#000; }
|
||||
#widget-docs p { margin:0 3em 1.2em 0; }
|
||||
#widget-docs p.intro { font-size:13px; color:#666; line-height:1.3; }
|
||||
#widget-docs ul { list-style-type: none; }
|
||||
|
||||
#widget-docs h2 { font-size:16px; margin:1.2em 0 .5em; }
|
||||
#widget-docs h3 { font-size:14px; color:#e6820E; margin:1.5em 0 .5em; }
|
||||
.normal #widget-docs h4 { font-size:12px; color:#000; border:0; margin:0 0 .5em; }
|
||||
|
||||
#docs-overview-main { width:400px; }
|
||||
#docs-overview-sidebar { float:right; width:200px; }
|
||||
#docs-overview-sidebar a span { color:#666; }
|
||||
#widget-docs #docs-overview-main p { margin-right:0; }
|
||||
#widget-docs #docs-overview-sidebar h4 { padding-left:0; }
|
||||
|
||||
.docs-list-header { float:left; width:100%; margin:10px 0 0; border-bottom:1px solid #eee; }
|
||||
#widget-docs .docs-list-header h2 { float:left; margin:0; }
|
||||
#widget-docs .docs-list-header p { float:right; margin:5px 0; font-size:11px; }
|
||||
|
||||
.docs-list { float:left; width:100%; padding:0 0 10px; }
|
||||
.docs-list .param-header { float:left; clear:left; width:100%; padding:8px 0; border-top:1px solid #eee; }
|
||||
#widget-docs .param-header h3, #widget-docs .param-header p { margin:0; float:left; }
|
||||
#widget-docs .param-header h3 { width:50%; }
|
||||
#widget-docs .param-header h3 span { background: url(images/demo-spindown-closed.gif) no-repeat left; padding-left:13px; }
|
||||
#widget-docs .param-open .param-header h3 span { background: url(images/demo-spindown-open.gif) no-repeat left; }
|
||||
#widget-docs .param-header p { width:24%; }
|
||||
#widget-docs .param-header p.param-type span { background: url(images/icon-docs-info.gif) no-repeat left; cursor:pointer; border-bottom:1px dashed #ccc; padding-left:15px; }
|
||||
|
||||
.param-details { padding-left:13px; }
|
||||
.param-args { margin:0 0 1.5em; border-top:1px dotted #ccc;}
|
||||
.param-args td { padding:3px 30px 3px 5px; border-bottom:1px dotted #ccc; }
|
||||
|
||||
|
||||
/* overrides for ui-tab styles */
|
||||
#widget-docs ul.ui-tabs-nav { padding:0 0 0 8px; }
|
||||
#widget-docs .ui-tabs-nav li { margin:5px 5px 0 0; }
|
||||
|
||||
#widget-docs .ui-tabs-nav li a:link,
|
||||
#widget-docs .ui-tabs-nav li a:visited,
|
||||
#widget-docs .ui-tabs-nav li a:hover,
|
||||
#widget-docs .ui-tabs-nav li a:active { font-size:14px; padding:4px 1.2em 3px; color:#fff; }
|
||||
|
||||
#widget-docs .ui-tabs-nav li.ui-tabs-active a:link,
|
||||
#widget-docs .ui-tabs-nav li.ui-tabs-active a:visited,
|
||||
#widget-docs .ui-tabs-nav li.ui-tabs-active a:hover,
|
||||
#widget-docs .ui-tabs-nav li.ui-tabs-active a:active { color:#e6820E; }
|
||||
|
||||
#widget-docs .ui-tabs-panel { padding:20px 9px; font-size:12px; line-height:1.4; color:#000; }
|
||||
|
||||
#widget-docs .ui-widget-content a:link,
|
||||
#widget-docs .ui-widget-content a:visited { color:#1b75bb; text-decoration:none; }
|
||||
#widget-docs .ui-widget-content a:hover,
|
||||
#widget-docs .ui-widget-content a:active { color:#0b559b; }
|
||||
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Dialog - Animation</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../external/jquery.bgiframe-2.1.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
@ -18,39 +17,35 @@
|
||||
<script src="../../ui/jquery.ui.effect-explode.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
// increase the default animation speed to exaggerate the effect
|
||||
$.fx.speeds._default = 1000;
|
||||
$(function() {
|
||||
$( "#dialog" ).dialog({
|
||||
autoOpen: false,
|
||||
show: "blind",
|
||||
hide: "explode"
|
||||
show: {
|
||||
effect: "blind",
|
||||
duration: 1000
|
||||
},
|
||||
hide: {
|
||||
effect: "explode",
|
||||
duration: 1000
|
||||
}
|
||||
});
|
||||
|
||||
$( "#opener" ).click(function() {
|
||||
$( "#dialog" ).dialog( "open" );
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="dialog" title="Basic dialog">
|
||||
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
|
||||
</div>
|
||||
|
||||
<button id="opener">Open Dialog</button>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Dialogs may be animated by specifying an effect for the show and/or hide properties. You must include the individual effects file for any effects you would like to use.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Dialog - Default functionality</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../external/jquery.bgiframe-2.1.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
@ -22,33 +21,12 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="dialog" title="Basic dialog">
|
||||
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
|
||||
</div>
|
||||
|
||||
<!-- Sample page content to illustrate the layering of the dialog -->
|
||||
<div class="hiddenInViewSource" style="padding:20px;">
|
||||
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
|
||||
<form>
|
||||
<input value="text input" /><br />
|
||||
<input type="checkbox" />checkbox<br />
|
||||
<input type="radio" />radio<br />
|
||||
<select>
|
||||
<option>select</option>
|
||||
</select><br /><br />
|
||||
<textarea>textarea</textarea><br />
|
||||
</form>
|
||||
</div><!-- End sample page content -->
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) shining through with an iframe. It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,23 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Dialog Demos</title>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demos-nav">
|
||||
<h4>Examples</h4>
|
||||
<ul>
|
||||
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="animated.html">Animated dialog</a></li>
|
||||
<li><a href="modal.html">Modal dialog</a></li>
|
||||
<li><a href="modal-message.html">Modal message</a></li>
|
||||
<li><a href="modal-confirmation.html">Modal confirmation</a></li>
|
||||
<li><a href="modal-form.html">Modal form</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="animated.html">Animated dialog</a></li>
|
||||
<li><a href="modal.html">Modal dialog</a></li>
|
||||
<li><a href="modal-message.html">Modal message</a></li>
|
||||
<li><a href="modal-confirmation.html">Modal confirmation</a></li>
|
||||
<li><a href="modal-form.html">Modal form</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Dialog - Modal confirmation</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../external/jquery.bgiframe-2.1.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
@ -16,9 +15,6 @@
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
|
||||
$( "#dialog:ui-dialog" ).dialog( "destroy" );
|
||||
|
||||
$( "#dialog-confirm" ).dialog({
|
||||
resizable: false,
|
||||
height:140,
|
||||
@ -37,33 +33,14 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="dialog-confirm" title="Empty the recycle bin?">
|
||||
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
|
||||
</div>
|
||||
|
||||
<!-- Sample page content to illustrate the layering of the dialog -->
|
||||
<div class="hiddenInViewSource" style="padding:20px;">
|
||||
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
|
||||
<form>
|
||||
<input value="text input" /><br />
|
||||
<input type="checkbox" />checkbox<br />
|
||||
<input type="radio" />radio<br />
|
||||
<select>
|
||||
<option>select</option>
|
||||
</select><br /><br />
|
||||
<textarea>textarea</textarea><br />
|
||||
</form>
|
||||
</div><!-- End sample page content -->
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Confirm an action that may be destructive or important. Set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Dialog - Modal form</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../external/jquery.bgiframe-2.1.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
@ -30,9 +29,6 @@
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
|
||||
$( "#dialog:ui-dialog" ).dialog( "destroy" );
|
||||
|
||||
var name = $( "#name" ),
|
||||
email = $( "#email" ),
|
||||
password = $( "#password" ),
|
||||
@ -68,7 +64,7 @@
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
$( "#dialog-form" ).dialog({
|
||||
autoOpen: false,
|
||||
height: 300,
|
||||
@ -116,8 +112,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="dialog-form" title="Create new user">
|
||||
<p class="validateTips">All form fields are required.</p>
|
||||
|
||||
@ -155,13 +149,8 @@
|
||||
</div>
|
||||
<button id="create-user">Create new user</button>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the <code>modal</code> option to true, and specify primary and secondary user actions with the <code>buttons</code> option.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Dialog - Modal message</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../external/jquery.bgiframe-2.1.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
@ -17,9 +16,6 @@
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
|
||||
$( "#dialog:ui-dialog" ).dialog( "destroy" );
|
||||
|
||||
$( "#dialog-message" ).dialog({
|
||||
modal: true,
|
||||
buttons: {
|
||||
@ -33,8 +29,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="dialog-message" title="Download complete">
|
||||
<p>
|
||||
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
|
||||
@ -45,27 +39,10 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Sample page content to illustrate the layering of the dialog -->
|
||||
<div class="hiddenInViewSource" style="padding:20px;">
|
||||
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
|
||||
<form>
|
||||
<input value="text input" /><br />
|
||||
<input type="checkbox" />checkbox<br />
|
||||
<input type="radio" />radio<br />
|
||||
<select>
|
||||
<option>select</option>
|
||||
</select><br /><br />
|
||||
<textarea>textarea</textarea><br />
|
||||
</form>
|
||||
</div><!-- End sample page content -->
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Use a modal dialog to explicitly acknowledge information or an action before continuing their work. Set the <code>modal</code> option to true, and specify a primary action (Ok) with the <code>buttons</code> option.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Dialog - Basic modal</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../external/jquery.bgiframe-2.1.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
@ -16,9 +15,6 @@
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
|
||||
$( "#dialog:ui-dialog" ).dialog( "destroy" );
|
||||
|
||||
$( "#dialog-modal" ).dialog({
|
||||
height: 140,
|
||||
modal: true
|
||||
@ -28,33 +24,14 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="dialog-modal" title="Basic modal dialog">
|
||||
<p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
|
||||
</div>
|
||||
|
||||
<!-- Sample page content to illustrate the layering of the dialog -->
|
||||
<div class="hiddenInViewSource" style="padding:20px;">
|
||||
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
|
||||
<form>
|
||||
<input value="text input" /><br />
|
||||
<input type="checkbox" />checkbox<br />
|
||||
<input type="radio" />radio<br />
|
||||
<select>
|
||||
<option>select</option>
|
||||
</select><br /><br />
|
||||
<textarea>textarea</textarea><br />
|
||||
</form>
|
||||
</div><!-- End sample page content -->
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
<p>Sed vel diam id libero <a href="http://example.com">rutrum convallis</a>. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.</p>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>A modal dialog prevents the user from interacting with the rest of the page until it is closed.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable - Constrain movement</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.interaction.js"></script>
|
||||
@ -16,6 +16,7 @@
|
||||
#draggable { cursor: n-resize; }
|
||||
#draggable2 { cursor: e-resize; }
|
||||
#containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; }
|
||||
h3 { clear: left; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
@ -38,9 +39,7 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<h3 class="docs">Constrain movement along an axis:</h3>
|
||||
<h3>Constrain movement along an axis:</h3>
|
||||
|
||||
<div id="draggable" class="draggable ui-widget-content">
|
||||
<p>I can be dragged only vertically</p>
|
||||
@ -50,29 +49,20 @@
|
||||
<p>I can be dragged only horizontally</p>
|
||||
</div>
|
||||
|
||||
<h3 class="docs">Or to within another DOM element:</h3>
|
||||
<h3>Or to within another DOM element:</h3>
|
||||
<div id="containment-wrapper">
|
||||
<div id="draggable3" class="draggable ui-widget-content">
|
||||
<p>I'm contained within the box</p>
|
||||
<div id="draggable3" class="draggable ui-widget-content">
|
||||
<p>I'm contained within the box</p>
|
||||
</div>
|
||||
|
||||
<div class="draggable ui-widget-content">
|
||||
<p id="draggable5" class="ui-widget-header">I'm contained within my parent</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="draggable4" class="draggable ui-widget-content">
|
||||
<p>I'm contained within the box's parent</p>
|
||||
</div>
|
||||
|
||||
<div class="draggable ui-widget-content">
|
||||
<p id="draggable5" class="ui-widget-header">I'm contained within my parent</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Constrain the movement of each draggable by defining the boundaries of the draggable area. The <code>containment</code> option allows you to specify any element to use as a containing box; you can pass any selector or the string "parent".</p>
|
||||
<p>The draggable element can also be constrained with custom logic inside a drag event handler. Modifying the <code>ui.position</code> object's <code>left</code> and/or <code>top</code> properties will change where the element will be positioned. In this example, we're forcing the top or left to always be the same as where it started, resulting in the element being confined to a specific axis.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable - Cursor style</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.interaction.js"></script>
|
||||
@ -56,8 +56,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>I will always stick to the center (relative to the pointer)</p>
|
||||
</div>
|
||||
@ -66,13 +64,8 @@
|
||||
<p>My cursor position is always at the top</p>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>The <code>beforeStart</code> callback allows you to position the draggable element in order to adjust where the draggable movements will be calculated from. In this example, we adjust the position to control where the element is relative to the pointer during the drag.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable - Default functionality</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.interaction.js"></script>
|
||||
@ -21,19 +21,12 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Drag me around</p>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable - Delay start</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
@ -23,8 +23,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Only if you drag me by 20 pixels, the dragging will start</p>
|
||||
</div>
|
||||
@ -33,13 +31,8 @@
|
||||
<p>Regardless of the distance, you have to drag and wait for 1000ms before dragging starts</p>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Delay the start of dragging for a number of milliseconds with the <code>delay</code> option; prevent dragging until the cursor is held down and dragged a specifed number of pixels with the <code>distance</code> option. </p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable - Events</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.interaction.js"></script>
|
||||
@ -45,8 +45,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="draggable" class="ui-widget ui-widget-content">
|
||||
|
||||
<p>Drag me to trigger the chain of events.</p>
|
||||
@ -58,13 +56,8 @@
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Layer functionality onto the draggable using the <code>start</code>, <code>drag</code>, and <code>stop</code> events. Start is fired at the start of the drag; drag during the drag; and stop when dragging stops.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable - Handles</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.interaction.js"></script>
|
||||
@ -36,8 +36,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p class="ui-widget-header">I can be dragged only by this handle</p>
|
||||
</div>
|
||||
@ -47,14 +45,9 @@
|
||||
<p class="ui-widget-header">…but you can't drag me by this element.</p>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Allow dragging only when the cursor is over a specific part of the draggable. Use the <code>handle</code> option to specify the jQuery selector of an element (or group of elements) used to drag the object.</p>
|
||||
<p>Or prevent dragging when the cursor is over a specific element (or group of elements) within the draggable. Use the <code>cancel</code> option to specify a jQuery selector over which to "cancel" draggable functionality.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,29 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable Demos</title>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demos-nav">
|
||||
<h4>Examples</h4>
|
||||
<ul>
|
||||
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="events.html">Events</a></li>
|
||||
<li><a href="constrain-movement.html">Constrain movement</a></li>
|
||||
<li><a href="delay-start.html">Delay start</a></li>
|
||||
<li><a href="snap-to.html">Snap to element or grid</a></li>
|
||||
<li><a href="scroll.html">Auto-scroll</a></li>
|
||||
<li><a href="revert.html">Revert position</a></li>
|
||||
<li><a href="visual-feedback.html">Visual feedback</a></li>
|
||||
<li><a href="handle.html">Drag handle</a></li>
|
||||
<li><a href="cursor-style.html">Cursor style</a></li>
|
||||
<li><a href="sortable.html">Draggable + Sortable</a></li>
|
||||
<li><a href="map.html">Draggable Map</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="events.html">Events</a></li>
|
||||
<li><a href="constrain-movement.html">Constrain movement</a></li>
|
||||
<li><a href="delay-start.html">Delay start</a></li>
|
||||
<li><a href="snap-to.html">Snap to element or grid</a></li>
|
||||
<li><a href="scroll.html">Auto-scroll</a></li>
|
||||
<li><a href="revert.html">Revert position</a></li>
|
||||
<li><a href="visual-feedback.html">Visual feedback</a></li>
|
||||
<li><a href="handle.html">Drag handle</a></li>
|
||||
<li><a href="cursor-style.html">Cursor style</a></li>
|
||||
<li><a href="sortable.html">Draggable + Sortable</a></li>
|
||||
<li><a href="map.html">Draggable Map</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
|
||||
<title>jQuery UI Draggable - Draggable Map</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.interaction.js"></script>
|
||||
@ -62,19 +62,12 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="map" class="ui-widget-content">
|
||||
<img src="http://maps.google.com/maps/api/staticmap?zoom=11&size=640x640&maptype=terrain&sensor=false¢er=Vienna">
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
<div id="map" class="ui-widget-content">
|
||||
<img src="http://maps.google.com/maps/api/staticmap?zoom=11&size=640x640&maptype=terrain&sensor=false¢er=Vienna">
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Drag the map around inside the viewport. Works with touch devices. The container is kept small for the demo to work.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable - Revert position</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.interaction.js"></script>
|
||||
@ -35,8 +35,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Revert the original</p>
|
||||
</div>
|
||||
@ -45,13 +43,8 @@
|
||||
<p>Revert the helper</p>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>The <code>stop</code> callback can be used to perform an action after the user finishing dragging the element. For example, if you want to return the draggable (or it's helper) to its original location when dragging stops, you can do so in the <code>stop</code> callback.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable - Auto-scroll</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
@ -23,8 +23,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Scroll set to true, default settings</p>
|
||||
</div>
|
||||
@ -39,13 +37,8 @@
|
||||
|
||||
<div style='height: 5000px; width: 1px;'></div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Automatically scroll the document when the draggable is moved beyond the viewport. Set the <code>scroll</code> option to true to enable auto-scrolling, and fine-tune when scrolling is triggered and its speed with the <code>scrollSensitivity</code> and <code>scrollSpeed</code> options.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable - Snap to element or grid</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
@ -27,8 +27,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="snaptarget" class="ui-widget-header">
|
||||
<p>I'm a snap target</p>
|
||||
</div>
|
||||
@ -55,14 +53,9 @@
|
||||
<p>I snap to a 80 x 80 grid</p>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Snap the draggable to the inner or outer boundaries of a DOM element. Use the <code>snap</code>, <code>snapMode</code> (inner, outer, both), and <code>snapTolerance</code> (distance in pixels the draggable must be from the element when snapping is invoked) options. </p>
|
||||
<p>Or snap the draggable to a grid. Set the dimensions of grid cells (height and width in pixels) with the <code>grid</code> option.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable + Sortable</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
@ -12,8 +12,8 @@
|
||||
<script src="../../ui/jquery.ui.sortable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
.demo ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
|
||||
.demo li { margin: 5px; padding: 5px; width: 150px; }
|
||||
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
|
||||
li { margin: 5px; padding: 5px; width: 150px; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
@ -31,8 +31,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<ul>
|
||||
<li id="draggable" class="ui-state-highlight">Drag me down</li>
|
||||
</ul>
|
||||
@ -45,13 +43,8 @@
|
||||
<li class="ui-state-default">Item 5</li>
|
||||
</ul>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Draggables are built to interact seamlessly with <a href="#">sortables</a>.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
<p>Draggables are built to interact seamlessly with <a href="http://jqueryui.com/sortable">sortables</a>.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable - Visual feedback</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.interaction.js"></script>
|
||||
@ -31,9 +31,7 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<h3 class="docs">With helpers:</h3>
|
||||
<h3>With helpers:</h3>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Original</p>
|
||||
@ -47,7 +45,8 @@
|
||||
<p>Custom helper</p>
|
||||
</div>
|
||||
|
||||
<h3 class="docs">Stacked:</h3>
|
||||
<h3>Stacked:</h3>
|
||||
|
||||
<div id="set">
|
||||
<div class="ui-widget-content">
|
||||
<p>We are draggables..</p>
|
||||
@ -62,13 +61,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Provide feedback to users as they drag an element in the form of a helper. The <code>helper</code> option accepts the values false/null (the draggable element moves with the cursor), true (a clone of the draggable moves with the cursor), or a function that returns a DOM element or jQuery object (that element is shown near the cursor during drag).</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Droppable - Accept</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
@ -34,8 +34,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="draggable-nonvalid" class="ui-widget-content">
|
||||
<p>I'm draggable but can't be dropped</p>
|
||||
</div>
|
||||
@ -48,13 +46,8 @@
|
||||
<p>accept: '#draggable'</p>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Specify using the <code>accept</code> option which element (or group of elements) is accepted by the target droppable.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Droppable - Default functionality</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.interaction.js"></script>
|
||||
@ -31,8 +31,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Drag me to my target</p>
|
||||
</div>
|
||||
@ -41,13 +39,8 @@
|
||||
<p>Drop here</p>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Enable any DOM element to be droppable, a target for draggable elements.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,24 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Droppable Demos</title>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demos-nav">
|
||||
<h4>Examples</h4>
|
||||
<ul>
|
||||
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="accepted-elements.html">Accepted elements</a></li>
|
||||
<li><a href="propagation.html">Prevent propagation</a></li>
|
||||
<li><a href="visual-feedback.html">Visual feedback</a></li>
|
||||
<li><a href="revert.html">Revert draggable position</a></li>
|
||||
<li><a href="shopping-cart.html">Shopping Cart</a></li>
|
||||
<li><a href="photo-manager.html">Simple photo manager</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="accepted-elements.html">Accepted elements</a></li>
|
||||
<li><a href="propagation.html">Prevent propagation</a></li>
|
||||
<li><a href="visual-feedback.html">Visual feedback</a></li>
|
||||
<li><a href="revert.html">Revert draggable position</a></li>
|
||||
<li><a href="shopping-cart.html">Shopping Cart</a></li>
|
||||
<li><a href="photo-manager.html">Simple photo manager</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Droppable - Simple photo manager</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
@ -15,7 +15,7 @@
|
||||
<script src="../../ui/jquery.ui.dialog.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#gallery { float: left; width: 65%; min-height: 12em; } * html #gallery { height: 12em; } /* IE6 */
|
||||
#gallery { float: left; width: 65%; min-height: 12em; }
|
||||
.gallery.custom-state-active { background: #eee; }
|
||||
.gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
|
||||
.gallery li h5 { margin: 0 0 0.4em; cursor: move; }
|
||||
@ -23,7 +23,7 @@
|
||||
.gallery li a.ui-icon-zoomin { float: left; }
|
||||
.gallery li img { width: 100%; cursor: move; }
|
||||
|
||||
#trash { float: right; width: 32%; min-height: 18em; padding: 1%;} * html #trash { height: 18em; } /* IE6 */
|
||||
#trash { float: right; width: 32%; min-height: 18em; padding: 1%; }
|
||||
#trash h4 { line-height: 16px; margin: 0 0 0.4em; }
|
||||
#trash h4 .ui-icon { float: left; }
|
||||
#trash .gallery h5 { display: none; }
|
||||
@ -38,7 +38,7 @@
|
||||
$( "li", $gallery ).draggable({
|
||||
cancel: "a.ui-icon", // clicking an icon won't initiate dragging
|
||||
revert: "invalid", // when not dropped, the item will revert back to its initial position
|
||||
containment: $( "#demo-frame" ).length ? "#demo-frame" : "document", // stick to demo-frame if present
|
||||
containment: "document",
|
||||
helper: "clone",
|
||||
cursor: "move"
|
||||
});
|
||||
@ -138,7 +138,7 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo ui-widget ui-helper-clearfix">
|
||||
<div class="ui-widget ui-helper-clearfix">
|
||||
|
||||
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
|
||||
<li class="ui-widget-content ui-corner-tr">
|
||||
@ -171,14 +171,12 @@
|
||||
<h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>You can delete an image either by dragging it to the Trash or by clicking the trash icon.</p>
|
||||
<p>You can "recycle" an image by dragging it back to the gallery or by clicking the recycle icon.</p>
|
||||
<p>You can view larger image by clicking the zoom icon. jQuery UI dialog widget is used for the modal window.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Droppable - Prevent propagation</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
@ -48,8 +48,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Drag me to my target</p>
|
||||
</div>
|
||||
@ -68,13 +66,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>When working with nested droppables — for example, you may have an editable directory structure displayed as a tree, with folder and document nodes — the <code>greedy</code> option set to true prevents event propagation when a draggable is dropped on a child node (droppable).</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Droppable - Revert draggable position</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
@ -35,8 +35,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>I revert when I'm dropped</p>
|
||||
</div>
|
||||
@ -49,13 +47,8 @@
|
||||
<p>Drop me here</p>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Return the draggable (or it's helper) to its original location when dragging stops with the boolean <code>revert</code> option set on the draggable.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Droppable - Shopping Cart Demo</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
@ -48,8 +48,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="products">
|
||||
<h1 class="ui-widget-header">Products</h1>
|
||||
<div id="catalog">
|
||||
@ -89,13 +87,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Demonstrate how to use an accordion to structure products into a catalog and make use drag and drop for adding them to a shopping cart, where they are sortable.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
<p>Demonstrate how to use an accordion to structure products into a catalog and make use of drag and drop for adding them to a shopping cart, where they are sortable.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Droppable - Visual feedback</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
@ -14,6 +14,7 @@
|
||||
<style>
|
||||
#draggable, #draggable2 { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
|
||||
#droppable, #droppable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 10px; }
|
||||
h3 { clear: left; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
@ -44,10 +45,8 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
<h3>Feedback on hover:</h3>
|
||||
|
||||
<h3 class="docs">Feedback on hover:</h3>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Drag me to my target</p>
|
||||
</div>
|
||||
@ -56,7 +55,7 @@
|
||||
<p>Drop here</p>
|
||||
</div>
|
||||
|
||||
<h3 class="docs">Feedback on activating draggable:</h3>
|
||||
<h3>Feedback on activating draggable:</h3>
|
||||
|
||||
<div id="draggable2" class="ui-widget-content">
|
||||
<p>Drag me to my target</p>
|
||||
@ -66,13 +65,8 @@
|
||||
<p>Drop here</p>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Change the droppable's appearance on hover, or when the droppable is active (an acceptable draggable is dropped on it). Use the <code>hoverClass</code> or <code>activeClass</code> options to specify respective classes.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Effects - Effect demo</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect-blind.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect-bounce.js"></script>
|
||||
@ -25,15 +25,15 @@
|
||||
#button { padding: .5em 1em; text-decoration: none; }
|
||||
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
|
||||
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
|
||||
.ui-effects-transfer { border: 2px dotted gray; }
|
||||
.ui-effects-transfer { border: 2px dotted gray; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
// run the currently selected effect
|
||||
function runEffect() {
|
||||
// get effect type from
|
||||
// get effect type from
|
||||
var selectedEffect = $( "#effectTypes" ).val();
|
||||
|
||||
|
||||
// most effect types need no options passed by default
|
||||
var options = {};
|
||||
// some effects have required parameters
|
||||
@ -66,8 +66,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div class="toggler">
|
||||
<div id="effect" class="ui-widget-content ui-corner-all">
|
||||
<h3 class="ui-widget-header ui-corner-all">Effect</h3>
|
||||
@ -97,13 +95,8 @@
|
||||
|
||||
<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Click the button above to show the effect.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Effects - Easing demo</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
@ -93,17 +93,10 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="graphs"></div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p><strong>All easings provided by jQuery UI are drawn above, using a HTML canvas element</strong>. Click a diagram to see the easing in action.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,19 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Effects Demos</title>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demos-nav">
|
||||
<h4>Examples</h4>
|
||||
<ul>
|
||||
<li class="demo-config-on"><a href="default.html">Effect showcase</a></li>
|
||||
<li><a href="easing.html">Easing showcase</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="default.html">Effect showcase</a></li>
|
||||
<li><a href="easing.html">Easing showcase</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Effects - Hide Demo</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect-blind.js"></script>
|
||||
<script src="../../ui/jquery.ui.effect-bounce.js"></script>
|
||||
@ -61,8 +61,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div class="toggler">
|
||||
<div id="effect" class="ui-widget-content ui-corner-all">
|
||||
<h3 class="ui-widget-header ui-corner-all">Hide</h3>
|
||||
@ -90,13 +88,8 @@
|
||||
|
||||
<a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Click the button above to preview the effect.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,18 +1,14 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Effects Demos</title>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demos-nav">
|
||||
<h4>Examples</h4>
|
||||
<ul>
|
||||
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
359
demos/index.html
359
demos/index.html
@ -1,339 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Demos</title>
|
||||
<link rel="stylesheet" href="../themes/base/jquery.ui.all.css">
|
||||
<link rel="stylesheet" href="demos.css">
|
||||
<script src="../jquery-1.7.2.js"></script>
|
||||
<script src="../external/jquery.bgiframe-2.1.2.js"></script>
|
||||
<script src="../external/globalize.js"></script>
|
||||
<script src="../external/globalize.culture.de-DE.js"></script>
|
||||
<script src="../ui/jquery.ui.core.js"></script>
|
||||
<script src="../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../ui/jquery.ui.interaction.js"></script>
|
||||
<script src="../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../ui/jquery.ui.accordion.js"></script>
|
||||
<script src="../ui/jquery.ui.autocomplete.js"></script>
|
||||
<script src="../ui/jquery.ui.button.js"></script>
|
||||
<script src="../ui/jquery.ui.datepicker.js"></script>
|
||||
<script src="../ui/jquery.ui.dialog.js"></script>
|
||||
<script src="../ui/jquery.ui.draggable.js"></script>
|
||||
<script src="../ui/jquery.ui.droppable.js"></script>
|
||||
<script src="../ui/jquery.ui.menu.js"></script>
|
||||
<script src="../ui/jquery.ui.position.js"></script>
|
||||
<script src="../ui/jquery.ui.progressbar.js"></script>
|
||||
<script src="../ui/jquery.ui.resizable.js"></script>
|
||||
<script src="../ui/jquery.ui.selectable.js"></script>
|
||||
<script src="../ui/jquery.ui.slider.js"></script>
|
||||
<script src="../ui/jquery.ui.sortable.js"></script>
|
||||
<script src="../ui/jquery.ui.spinner.js"></script>
|
||||
<script src="../ui/jquery.ui.tabs.js"></script>
|
||||
<script src="../ui/jquery.ui.tooltip.js"></script>
|
||||
<script src="../ui/jquery.ui.effect.js"></script>
|
||||
<script src="../ui/jquery.ui.effect-blind.js"></script>
|
||||
<script src="../ui/jquery.ui.effect-bounce.js"></script>
|
||||
<script src="../ui/jquery.ui.effect-clip.js"></script>
|
||||
<script src="../ui/jquery.ui.effect-drop.js"></script>
|
||||
<script src="../ui/jquery.ui.effect-explode.js"></script>
|
||||
<script src="../ui/jquery.ui.effect-fold.js"></script>
|
||||
<script src="../ui/jquery.ui.effect-highlight.js"></script>
|
||||
<script src="../ui/jquery.ui.effect-pulsate.js"></script>
|
||||
<script src="../ui/jquery.ui.effect-scale.js"></script>
|
||||
<script src="../ui/jquery.ui.effect-shake.js"></script>
|
||||
<script src="../ui/jquery.ui.effect-slide.js"></script>
|
||||
<script src="../ui/jquery.ui.effect-transfer.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-af.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-ar.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-ar-DZ.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-az.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-bs.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-bg.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-ca.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-cs.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-cy-GB.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-da.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-de.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-el.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-en-AU.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-en-GB.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-en-NZ.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-eo.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-es.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-et.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-eu.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-fa.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-fi.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-fo.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-fr.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-fr-CH.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-gl.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-he.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-hi.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-hr.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-hu.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-hy.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-id.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-is.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-it.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-ja.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-ka.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-kk.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-km.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-ko.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-lb.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-lt.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-lv.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-mk.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-ml.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-ms.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-nl.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-nl-BE.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-no.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-pl.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-pt.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-pt-BR.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-rm.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-ro.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-ru.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-sk.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-sl.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-sq.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-sr.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-sr-SR.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-sv.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-ta.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-th.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-tj.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-tr.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-uk.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-vi.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-zh-CN.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-zh-HK.js"></script>
|
||||
<script src="../ui/i18n/jquery.ui.datepicker-zh-TW.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
|
||||
$('.left-nav a').click(function(ev) {
|
||||
window.location.hash = this.href.replace(/.+\/([^\/]+)\/index\.html/,'$1') + '|default';
|
||||
loadPage(this.href);
|
||||
$('.left-nav a.selected').removeClass('selected');
|
||||
$(this).addClass('selected');
|
||||
ev.preventDefault();
|
||||
});
|
||||
|
||||
if (window.location.hash) {
|
||||
if (window.location.hash.indexOf('|') === -1) {
|
||||
window.location.hash += '|default';
|
||||
}
|
||||
var path = window.location.href.replace(/(index\.html)?#/,'');
|
||||
path = path.replace('\|','/') + '.html';
|
||||
loadPage(path);
|
||||
}
|
||||
|
||||
function loadPage(path) {
|
||||
var section = path.replace(/\/[^\/]+\.html/,'');
|
||||
var header = section.replace(/.+\/([^\/]+)/,'$1').replace(/_/, ' ');
|
||||
|
||||
$('td.normal div.normal')
|
||||
.empty()
|
||||
.append('<h4 class="demo-subheader">Functional demo:</h4>')
|
||||
.append('<h3 class="demo-header">'+ header +'</h3>')
|
||||
.append('<div id="demo-config"></div>')
|
||||
.find('#demo-config')
|
||||
.append('<div id="demo-frame"></div><div id="demo-config-menu"></div><div id="demo-link"><a class="demoWindowLink" href="#"><span class="ui-icon ui-icon-newwin"></span>Open demo in a new window</a></div>')
|
||||
.find('#demo-config-menu')
|
||||
.load(section + '/index.html .demos-nav', function() {
|
||||
$('#demo-config-menu a').each(function() {
|
||||
this.setAttribute('href', section + '/' + this.getAttribute('href').replace(/.+\/([^\/]+)/,'$1'));
|
||||
$(this).attr('target', 'demo-frame');
|
||||
$(this).click(function() {
|
||||
|
||||
resetDemos();
|
||||
|
||||
$(this).parents('ul').find('li').removeClass('demo-config-on');
|
||||
$(this).parent().addClass('demo-config-on');
|
||||
$('#demo-notes').fadeOut();
|
||||
|
||||
//Set the hash to the actual page without ".html"
|
||||
window.location.hash = header + '|' + this.getAttribute('href').match((/\/([^\/\\]+)\.html/))[1];
|
||||
|
||||
loadDemo(this.getAttribute('href'));
|
||||
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
if (window.location.hash) {
|
||||
var demo = window.location.hash.split('|')[1];
|
||||
$('#demo-config-menu a').each(function(){
|
||||
if (this.href.indexOf(demo + '.html') !== -1) {
|
||||
$(this).parents('ul').find('li').removeClass('demo-config-on');
|
||||
$(this).parent().addClass('demo-config-on');
|
||||
loadDemo(this.href);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
updateDemoNotes();
|
||||
})
|
||||
.end()
|
||||
.find('#demo-link a')
|
||||
.bind('click', function(ev){
|
||||
window.open(this.href);
|
||||
ev.preventDefault();
|
||||
})
|
||||
.end()
|
||||
.end()
|
||||
;
|
||||
|
||||
resetDemos();
|
||||
}
|
||||
|
||||
function loadDemo(path) {
|
||||
var directory = path.match(/([^\/]+)\/[^\/\.]+\.html$/)[1];
|
||||
$.get(path, function(data) {
|
||||
var source = data;
|
||||
data = data.replace(/<script.*>.*<\/script>/ig,""); // Remove script tags
|
||||
data = data.replace(/<\/?link.*>/ig,""); //Remove link tags
|
||||
data = data.replace(/<\/?html.*>/ig,""); //Remove html tag
|
||||
data = data.replace(/<\/?body.*>/ig,""); //Remove body tag
|
||||
data = data.replace(/<\/?head.*>/ig,""); //Remove head tag
|
||||
data = data.replace(/<\/?!doctype.*>/ig,""); //Remove doctype
|
||||
data = data.replace(/<title.*>.*<\/title>/ig,""); // Remove title tags
|
||||
data = data.replace(/((href|src)=["'])(?!(http|#))/ig, "$1" + directory + "/");
|
||||
|
||||
$('#demo-style').remove();
|
||||
$('#demo-frame').empty().html(data);
|
||||
$('#demo-frame style').clone().appendTo('head').attr('id','demo-style');
|
||||
$('#demo-link a').attr('href', path);
|
||||
updateDemoNotes();
|
||||
updateDemoSource(source);
|
||||
|
||||
if (/default.html$/.test(path)) {
|
||||
$.get("documentation/docs-" + path.match(/demos\/(.+)\//)[1] + ".html", function(html) {
|
||||
$("#demo-source").after(html);
|
||||
$("#widget-docs").tabs();
|
||||
$(".param-header").click(function() {
|
||||
$(this).parent().toggleClass("param-open").end().next().toggle();
|
||||
});
|
||||
$(".docs-list-header").each(function() {
|
||||
var header = $(this);
|
||||
var details = header.next().find(".param-details").hide();
|
||||
$("a:first", header).click(function() {
|
||||
details.show().parent().addClass("param-open");
|
||||
return false;
|
||||
});
|
||||
$("a:last", header).click(function() {
|
||||
details.hide().parent().removeClass("param-open");
|
||||
return false;
|
||||
});
|
||||
});
|
||||
}, "html" );
|
||||
}
|
||||
}, "html" );
|
||||
}
|
||||
|
||||
function updateDemoNotes() {
|
||||
var notes = $('#demo-frame .demo-description');
|
||||
if ($('#demo-notes').length == 0) {
|
||||
$('<div id="demo-notes"></div>').insertAfter('#demo-config');
|
||||
}
|
||||
$('#demo-notes').hide().empty().html(notes.html());
|
||||
$('#demo-notes').show();
|
||||
notes.hide();
|
||||
}
|
||||
|
||||
function updateDemoSource(source) {
|
||||
if ($('#demo-source').length == 0) {
|
||||
$('<div id="demo-source"><a href="#" class="source-closed">View Source</a><div><pre><code></code></pre></div></div>').insertAfter('#demo-notes');
|
||||
$('#demo-source').find(">a").click(function() {
|
||||
$(this).toggleClass("source-closed").toggleClass("source-open").next().toggle();
|
||||
return false;
|
||||
}).end().find(">div").hide();
|
||||
}
|
||||
var cleanedSource = source
|
||||
.replace('themes/base/jquery.ui.all.css', 'theme/jquery.ui.all.css')
|
||||
.replace(/\s*\x3Clink.*demos\x2Ecss.*\x3E\s*/, '\r\n\t')
|
||||
.replace(/\x2E\x2E\x2F\x2E\x2E\x2F/g, '');
|
||||
|
||||
$('#demo-source code').empty().text(cleanedSource);
|
||||
}
|
||||
|
||||
function resetDemos() {
|
||||
$.datepicker.setDefaults($.extend({showMonthAfterYear: false}, $.datepicker.regional['']));
|
||||
$(".ui-dialog-content").remove();
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<table class="layout-grid">
|
||||
<tr>
|
||||
<td class="left-nav">
|
||||
<dl class="demos-nav">
|
||||
<dt>Interactions</dt>
|
||||
<dd><a href="draggable/index.html">Draggable</a></dd>
|
||||
<dd><a href="droppable/index.html">Droppable</a></dd>
|
||||
<dd><a href="resizable/index.html">Resizable</a></dd>
|
||||
<dd><a href="selectable/index.html">Selectable</a></dd>
|
||||
<dd><a href="sortable/index.html">Sortable</a></dd>
|
||||
<dt>Widgets</dt>
|
||||
<dd><a href="accordion/index.html">Accordion</a></dd>
|
||||
<dd><a href="autocomplete/index.html">Autocomplete</a></dd>
|
||||
<dd><a href="button/index.html">Button</a></dd>
|
||||
<dd><a href="datepicker/index.html">Datepicker</a></dd>
|
||||
<dd><a href="dialog/index.html">Dialog</a></dd>
|
||||
<dd><a href="menu/index.html">Menu</a></dd>
|
||||
<dd><a href="progressbar/index.html">Progressbar</a></dd>
|
||||
<dd><a href="slider/index.html">Slider</a></dd>
|
||||
<dd><a href="spinner/index.html">Spinner</a></dd>
|
||||
<dd><a href="tabs/index.html">Tabs</a></dd>
|
||||
<dd><a href="tooltip/index.html">Tooltip</a></dd>
|
||||
<dt>Effects</dt>
|
||||
<dd><a href="animate/index.html">Color Animation</a></dd>
|
||||
<dd><a href="toggleClass/index.html">Toggle Class</a></dd>
|
||||
<dd><a href="addClass/index.html">Add Class</a></dd>
|
||||
<dd><a href="removeClass/index.html">Remove Class</a></dd>
|
||||
<dd><a href="switchClass/index.html">Switch Class</a></dd>
|
||||
<dd><a href="effect/index.html">Effect</a></dd>
|
||||
<dd><a href="toggle/index.html">Toggle</a></dd>
|
||||
<dd><a href="hide/index.html">Hide</a></dd>
|
||||
<dd><a href="show/index.html">Show</a></dd>
|
||||
<dt>Utilities</dt>
|
||||
<dd><a href="interaction/index.html">Interaction</a></dd>
|
||||
<dd><a href="position/index.html">Position</a></dd>
|
||||
<dd><a href="widget/index.html">Widget</a></dd>
|
||||
<dt>About jQuery UI</dt>
|
||||
<dd><a href="http://jqueryui.com/docs/Getting_Started">Getting Started</a></dd>
|
||||
<dd><a href="http://jqueryui.com/docs/Upgrade_Guide">Upgrade Guide</a></dd>
|
||||
<dd><a href="http://jqueryui.com/docs/Changelog">Changelog</a></dd>
|
||||
<dd><a href="http://jqueryui.com/docs/Roadmap">Roadmap</a></dd>
|
||||
<dd><a href="http://jqueryui.com/docs/Subversion">Subversion Access</a></dd>
|
||||
<dd><a href="http://jqueryui.com/docs/Developer_Guide">UI Developer Guidelines</a></dd>
|
||||
<dt>Theming</dt>
|
||||
<dd><a href="http://jqueryui.com/docs/Theming">Theming jQuery UI</a></dd>
|
||||
<dd><a href="http://jqueryui.com/docs/Theming/API">jQuery UI CSS Framework</a></dd>
|
||||
<dd><a href="http://jqueryui.com/docs/Theming/Themeroller">ThemeRoller application</a></dd>
|
||||
<dd><a href="http://jqueryui.com/docs/Theming/ThemeSwitcher">Theme Switcher Widget</a></dd>
|
||||
<ul>
|
||||
<li><a href="accordion/">accordion</a></li>
|
||||
<li><a href="addClass/">addClass</a></li>
|
||||
<li><a href="animate/">animate</a></li>
|
||||
<li><a href="autocomplete/">autocomplete</a></li>
|
||||
<li><a href="button/">button</a></li>
|
||||
<li><a href="datepicker/">datepicker</a></li>
|
||||
<li><a href="dialog/">dialog</a></li>
|
||||
<li><a href="draggable/">draggable</a></li>
|
||||
<li><a href="droppable/">droppable</a></li>
|
||||
<li><a href="effect/">effect</a></li>
|
||||
<li><a href="hide/">hide</a></li>
|
||||
<li><a href="menu/">menu</a></li>
|
||||
<li><a href="position/">position</a></li>
|
||||
<li><a href="progressbar/">progressbar</a></li>
|
||||
<li><a href="removeClass/">removeClass</a></li>
|
||||
<li><a href="resizable/">resizable</a></li>
|
||||
<li><a href="selectable/">selectable</a></li>
|
||||
<li><a href="show/">show</a></li>
|
||||
<li><a href="slider/">slider</a></li>
|
||||
<li><a href="sortable/">sortable</a></li>
|
||||
<li><a href="spinner/">spinner</a></li>
|
||||
<li><a href="switchClass/">switchClass</a></li>
|
||||
<li><a href="tabs/">tabs</a></li>
|
||||
<li><a href="toggle/">toggle</a></li>
|
||||
<li><a href="toggleClass/">toggleClass</a></li>
|
||||
<li><a href="tooltip/">tooltip</a></li>
|
||||
<li><a href="widget/">widget</a></li>
|
||||
</ul>
|
||||
|
||||
</dl>
|
||||
</td>
|
||||
<td class="normal">
|
||||
|
||||
<div class="normal">
|
||||
|
||||
<h3>Instructions</h3>
|
||||
<p>
|
||||
These demos showcase some common uses of each jQuery UI plugin. Simply copy and paste code from the demos to get started. Have fun playing with them.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Interaction - Box</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.interaction.js"></script>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Interaction - Default functionality</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.interaction.js"></script>
|
||||
|
||||
@ -4,9 +4,10 @@
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Menu - Default functionality</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.menu.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
@ -14,36 +15,53 @@
|
||||
$( "#menu" ).menu();
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.ui-menu { width: 150px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<ul id="menu">
|
||||
<li><a href="#Aberdeen">Aberdeen</a></li>
|
||||
<li><a href="#Ada">Ada</a></li>
|
||||
<li><a href="#Adamsville">Adamsville</a></li>
|
||||
<li><a href="#Addyston">Addyston</a></li>
|
||||
<li><a href="#Adelphi">Adelphi</a></li>
|
||||
<li><a href="#Adena">Adena</a></li>
|
||||
<li><a href="#Adrian">Adrian</a></li>
|
||||
<li><a href="#Akron">Akron</a></li>
|
||||
<li><a href="#Albany">Albany</a></li>
|
||||
<li><a href="#Alexandria">Alexandria</a></li>
|
||||
<li><a href="#Alger">Alger</a></li>
|
||||
<li><a href="#Alledonia">Alledonia</a></li>
|
||||
<li><a href="#Alliance">Alliance</a></li>
|
||||
<li><a href="#Alpha">Alpha</a></li>
|
||||
<li><a href="#Alvada">Alvada</a></li>
|
||||
</ul>
|
||||
|
||||
</div><!-- End demo -->
|
||||
<ul id="menu">
|
||||
<li class="ui-state-disabled"><a href="#">Aberdeen</a></li>
|
||||
<li><a href="#">Ada</a></li>
|
||||
<li><a href="#">Adamsville</a></li>
|
||||
<li><a href="#">Addyston</a></li>
|
||||
<li>
|
||||
<a href="#">Delphi</a>
|
||||
<ul>
|
||||
<li class="ui-state-disabled"><a href="#">Ada</a></li>
|
||||
<li><a href="#">Saarland</a></li>
|
||||
<li><a href="#">Salzburg</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Saarland</a></li>
|
||||
<li>
|
||||
<a href="#">Salzburg</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">Delphi</a>
|
||||
<ul>
|
||||
<li><a href="#">Ada</a></li>
|
||||
<li><a href="#">Saarland</a></li>
|
||||
<li><a href="#">Salzburg</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Delphi</a>
|
||||
<ul>
|
||||
<li><a href="#">Ada</a></li>
|
||||
<li><a href="#">Saarland</a></li>
|
||||
<li><a href="#">Salzburg</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Perch</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="ui-state-disabled"><a href="#">Amesville</a></li>
|
||||
</ul>
|
||||
|
||||
<div class="demo-description">
|
||||
|
||||
<p>A menu with the default configuration. A list is transformed, adding theming, mouse and keyboard navigation support. Try to tab to the menu then use the cursor keys to navigate.</p>
|
||||
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
<p>A menu with the default configuration, disabled items and nested menus. A list is transformed, adding theming, mouse and keyboard navigation support. Try to tab to the menu then use the cursor keys to navigate.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
44
demos/menu/icons.html
Normal file
44
demos/menu/icons.html
Normal file
@ -0,0 +1,44 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Menu - Icons</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.menu.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#menu" ).menu();
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.ui-menu { width: 150px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul id="menu">
|
||||
<li><a href="#"><span class="ui-icon ui-icon-disk"></span>Save</a></li>
|
||||
<li><a href="#"><span class="ui-icon ui-icon-zoomin"></span>Zoom In</a></li>
|
||||
<li><a href="#"><span class="ui-icon ui-icon-zoomout"></span>Zoom Out</a></li>
|
||||
<li class="ui-state-disabled"><a href="#"><span class="ui-icon ui-icon-print"></span>Print...</a></li>
|
||||
<li>
|
||||
<a href="#">Playback</a>
|
||||
<ul>
|
||||
<li><a href="#"><span class="ui-icon ui-icon-seek-start"></span>Prev</a></li>
|
||||
<li><a href="#"><span class="ui-icon ui-icon-stop"></span>Stop</a></li>
|
||||
<li><a href="#"><span class="ui-icon ui-icon-play"></span>Play</a></li>
|
||||
<li><a href="#"><span class="ui-icon ui-icon-seek-end"></span>Next</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>A menu with the default configuration, showing how to use a menu with icons.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -3,16 +3,13 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Menu Demos</title>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="demos-nav">
|
||||
<h4>Examples</h4>
|
||||
<ul>
|
||||
<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="topalignmenu.html">Top-aligned sub menus</a></li>
|
||||
<li><a href="navigationmenu.html">Navigation menu</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="icons.html">Icons</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,81 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Menu - Navigation Menu</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.menu.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#menu" ).menu({
|
||||
select: function( event, ui ) {
|
||||
var link = ui.item.children( "a:first" );
|
||||
if ( link.attr( "target" ) || event.metaKey || event.shiftKey || event.ctrlKey ) {
|
||||
return;
|
||||
}
|
||||
location.href = link.attr( "href" );
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.ui-menu { width: 200px; margin-bottom: 2em; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<ul id="menu">
|
||||
<li><a href="?Aberdeen">Aberdeen</a></li>
|
||||
<li><a href="?Ada">Ada</a></li>
|
||||
<li><a href="?Adamsville">Adamsville</a></li>
|
||||
<li><a href="?Addyston">Addyston</a></li>
|
||||
<li>
|
||||
<a href="?Delphi">Delphi</a>
|
||||
<ul>
|
||||
<li><a href="?Ada">Ada</a></li>
|
||||
<li><a href="?Saarland">Saarland</a></li>
|
||||
<li><a href="?Salzburg">Salzburg</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="?Saarland">Saarland</a></li>
|
||||
<li>
|
||||
<a href="?Salzburg">Salzburg</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="?Delphi">Delphi</a>
|
||||
<ul>
|
||||
<li><a href="?Ada">Ada</a></li>
|
||||
<li><a href="?Saarland">Saarland</a></li>
|
||||
<li><a href="?Salzburg">Salzburg</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="?Delphi">Delphi</a>
|
||||
<ul>
|
||||
<li><a href="?Ada">Ada</a></li>
|
||||
<li><a href="?Saarland">Saarland</a></li>
|
||||
<li><a href="?Salzburg">Salzburg</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="?Perch">Perch</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
<div class="demo-description">
|
||||
|
||||
<p>A navigation menu. A list is transformed, adding theming, mouse and keyboard navigation support. Try to tab to the menu then use the cursor keys to navigate.</p>
|
||||
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,84 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Menu Demo: Top-aligned Menu</title>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.menu.js"></script>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#menu" ).menu({
|
||||
position: { of: "ul:has(a.ui-state-focus):last" },
|
||||
icons: {
|
||||
submenu: "ui-icon-carat-1-e"
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.ui-menu { width: 200px; margin-bottom: 2em; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul id="menu">
|
||||
<li><a href="#">Aberdeen</a></li>
|
||||
<li><a href="#">Ada</a></li>
|
||||
<li><a href="#">Adamsville</a></li>
|
||||
<li><a href="#">Addyston</a></li>
|
||||
<li>
|
||||
<a href="#">Delphi</a>
|
||||
<ul>
|
||||
<li><a href="#">Ada</a></li>
|
||||
<li><a href="#">Saarland</a></li>
|
||||
<li><a href="#">Salzburg</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Saarland</a></li>
|
||||
<li>
|
||||
<a href="#">Salzburg</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">Delphi</a>
|
||||
<ul>
|
||||
<li><a href="#">Ada</a></li>
|
||||
<li><a href="#">Saarland</a></li>
|
||||
<li><a href="#">Salzburg</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Adamsville</a>
|
||||
<ul>
|
||||
<li><a href="#">Aberdeen</a></li>
|
||||
<li><a href="#">Ada</a></li>
|
||||
<li><a href="#">Adamsville</a></li>
|
||||
<li><a href="#">Addyston</a></li>
|
||||
<li>
|
||||
<a href="#">Delphi</a>
|
||||
<ul>
|
||||
<li><a href="#">Ada</a></li>
|
||||
<li><a href="#">Saarland</a></li>
|
||||
<li><a href="#">Salzburg</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Saarland</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Perch</a>
|
||||
<ul>
|
||||
<li><a href="#">Addyston</a></li>
|
||||
<li><a href="#">Delphi</a></li>
|
||||
<li><a href="#">Perch</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,92 +1,82 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Position - Default functionality</title>
|
||||
<title>jQuery UI Position - Image Cycler</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
#container {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
// TODO refactor into a widget and get rid of these plugin methods
|
||||
$.fn.position2 = function( options ) {
|
||||
return this.position( $.extend({
|
||||
of: window,
|
||||
using: function( to ) {
|
||||
$( this ).css({
|
||||
top: to.top,
|
||||
left: to.left
|
||||
})
|
||||
},
|
||||
collision: "none"
|
||||
}, options));
|
||||
}
|
||||
|
||||
$.fn.left = function( using ) {
|
||||
return this.position2({
|
||||
return this.position({
|
||||
my: "right middle",
|
||||
at: "left+25 middle",
|
||||
using: using
|
||||
});
|
||||
}
|
||||
$.fn.right = function( using ) {
|
||||
return this.position2({
|
||||
my: "left middle",
|
||||
at: "right-25 middle",
|
||||
using: using
|
||||
});
|
||||
}
|
||||
$.fn.center = function( using ) {
|
||||
return this.position2({
|
||||
my: "center middle",
|
||||
at: "center middle",
|
||||
of: "#container",
|
||||
collision: "none",
|
||||
using: using
|
||||
});
|
||||
};
|
||||
$.fn.right = function( using ) {
|
||||
return this.position({
|
||||
my: "left middle",
|
||||
at: "right-25 middle",
|
||||
of: "#container",
|
||||
collision: "none",
|
||||
using: using
|
||||
});
|
||||
};
|
||||
$.fn.center = function( using ) {
|
||||
return this.position({
|
||||
my: "center middle",
|
||||
at: "center middle",
|
||||
of: "#container",
|
||||
using: using
|
||||
});
|
||||
};
|
||||
|
||||
$( "body" ).css({
|
||||
overflow: "hidden"
|
||||
})
|
||||
$( ".demo" ).css({
|
||||
position: "relative",
|
||||
});
|
||||
$( ".demo img" ).css({
|
||||
position: "absolute",
|
||||
});
|
||||
|
||||
$( "img:eq(0)" ).left();
|
||||
$( "img:eq(1)" ).center();
|
||||
$( "img:eq(2)" ).right();
|
||||
|
||||
function animate( to ) {
|
||||
$(this).stop( true, false ).animate( to );
|
||||
$( this ).stop( true, false ).animate( to );
|
||||
}
|
||||
function next( event ) {
|
||||
event.preventDefault();
|
||||
$( "img:eq(2)" ).center( animate );
|
||||
$( "img:eq(1)" ).left( animate )
|
||||
$( "img:eq(0)" ).right().appendTo( ".demo" );
|
||||
$( "img:eq(0)" ).right().appendTo( "#container" );
|
||||
}
|
||||
function previous( event ) {
|
||||
event.preventDefault();
|
||||
$( "img:eq(0)" ).center( animate );
|
||||
$( "img:eq(1)" ).right( animate );
|
||||
$( "img:eq(2)" ).left().prependTo( ".demo" );
|
||||
$( "img:eq(2)" ).left().prependTo( "#container" );
|
||||
}
|
||||
$( "#previous" ).click( previous );
|
||||
$( "#next" ).click( next );
|
||||
|
||||
$( ".demo img" ).click(function( event ) {
|
||||
$( ".demo img" ).index( this ) === 0 ? previous( event ) : next( event );
|
||||
$( "img" ).click(function( event ) {
|
||||
$( "img" ).index( this ) === 0 ? previous( event ) : next( event );
|
||||
});
|
||||
|
||||
$( window ).resize(function() {
|
||||
@ -99,25 +89,19 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<img src="images/earth.jpg" width="458" height="308" alt="earth" />
|
||||
<img src="images/flight.jpg" width="512" height="307" alt="flight" />
|
||||
<img src="images/rocket.jpg" width="300" height="353" alt="rocket" />
|
||||
|
||||
<a id="previous" href="#">Previous</a>
|
||||
<a id="next" href="#">Next</a>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
<div id="container">
|
||||
<img src="images/earth.jpg" width="458" height="308" alt="earth">
|
||||
<img src="images/flight.jpg" width="512" height="307" alt="flight">
|
||||
<img src="images/rocket.jpg" width="300" height="353" alt="rocket">
|
||||
|
||||
<a id="previous" href="#">Previous</a>
|
||||
<a id="next" href="#">Next</a>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>A prototype for the <a href="http://wiki.jqueryui.com/Photoviewer">Photoviewer</a> using Position to place images at the center, left and right and cycle them.
|
||||
<br/>Use the links at the top to cycle, or click on the images on the left and right.
|
||||
<br/>Note how the images are repositioned when resizing the window.
|
||||
<br/>Warning: Doesn't currently work inside the demo viewer; open in a new window instead!</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
<p>A photoviewer prototype using Position to place images at the center, left and right and cycle them.
|
||||
<br>Use the links at the top to cycle, or click on the images on the left and right.
|
||||
<br>Note how the images are repositioned when resizing the window.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Position - Default functionality</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.7.2.js"></script>
|
||||
<script src="../../jquery-1.8.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
@ -48,7 +48,6 @@
|
||||
of: $( "#parent" ),
|
||||
my: $( "#my_horizontal" ).val() + " " + $( "#my_vertical" ).val(),
|
||||
at: $( "#at_horizontal" ).val() + " " + $( "#at_vertical" ).val(),
|
||||
offset: $( "#offset" ).val(),
|
||||
collision: $( "#collision_horizontal" ).val() + " " + $( "#collision_vertical" ).val()
|
||||
});
|
||||
}
|
||||
@ -67,8 +66,6 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="demo">
|
||||
|
||||
<div id="parent">
|
||||
<p>
|
||||
This is the position parent element.
|
||||
@ -115,10 +112,6 @@
|
||||
<option value="bottom">bottom</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style="padding-bottom: 20px;">
|
||||
<b>offset:</b>
|
||||
<input id="offset">
|
||||
</div>
|
||||
<div style="padding-bottom: 20px;">
|
||||
<b>collision:</b>
|
||||
<select id="collision_horizontal">
|
||||
@ -136,14 +129,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!-- End demo -->
|
||||
|
||||
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Use the form controls to configure the positioning, or drag the positioned element to modify its offset.
|
||||
<br/>Drag around the parent element to see collision detection in action.</p>
|
||||
</div><!-- End demo-description -->
|
||||
|
||||
<br>Drag around the parent element to see collision detection in action.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user