master
Denis Knauf 2015-05-11 19:44:13 +02:00
commit ced6c67fcc
664 changed files with 115177 additions and 0 deletions

10
.gitignore vendored Normal file
View File

@ -0,0 +1,10 @@
tmp
html/icons
nginx
.*.swp
store/
html/upload.js
html/application.js
html/jBreadCrumb_1.1.zip
html/upload.coffee.old
html/mime-types.json

42
Rakefile Normal file
View File

@ -0,0 +1,42 @@
require 'pathname'
require 'shellwords'
class Pathname
def shellescape
to_s.shellescape
end
end
namespace :nginx do
task build: %w[tmp] do |t,conf|
sh './nginx.build'
end
def call_nginx *opts
base_dir = Pathname.new( '.').expand_path
binary = base_dir.join *%w[nginx sbin nginx]
config = base_dir.join *%w[config nginx.conf]
sh "sudo #{binary.shellescape} -c #{config.shellescape} #{opts.map(&:to_s).shelljoin}"
end
task :start do |t,conf|
call_nginx
end
task :stop do |t,conf|
call_nginx '-s', :quit
end
task :reload do |t,conf|
call_nginx '-s', :reload
end
end
task :mime_types_json do |t,conf|
sh './scripts/mimetype-mapper.json.rb config/mime.types html/icons/mimetypes > html/mime-types.json'
end
directory 'store'
directory 'tmp'
task build: %w[nginx:build mime_types_json store]

84
config/mime.types Normal file
View File

@ -0,0 +1,84 @@
types {
text/html html htm shtml;
text/css css;
text/xml xml;
image/gif gif;
image/jpeg jpeg jpg;
application/x-javascript js;
application/atom+xml atom;
application/rss+xml rss;
text/mathml mml;
text/plain txt;
text/vnd.sun.j2me.app-descriptor jad;
text/vnd.wap.wml wml;
text/x-component htc;
image/png png;
image/tiff tif tiff;
image/vnd.wap.wbmp wbmp;
image/x-icon ico;
image/x-jng jng;
image/x-ms-bmp bmp;
image/svg+xml svg svgz;
image/webp webp;
application/java-archive jar war ear;
application/mac-binhex40 hqx;
application/msword doc;
application/pdf pdf;
application/postscript ps eps ai;
application/rtf rtf;
application/vnd.ms-excel xls;
application/vnd.ms-powerpoint ppt;
application/vnd.wap.wmlc wmlc;
application/vnd.google-earth.kml+xml kml;
application/vnd.google-earth.kmz kmz;
application/x-7z-compressed 7z;
application/x-cocoa cco;
application/x-java-archive-diff jardiff;
application/x-java-jnlp-file jnlp;
application/x-makeself run;
application/x-perl pl pm;
application/x-ruby rb;
application/x-python py;
application/x-python-bytecode pyc;
application/x-awk awk;
application/x-pilot prc pdb;
application/x-rar-compressed rar;
application/x-redhat-package-manager rpm;
application/x-sea sea;
application/x-shockwave-flash swf;
application/x-stuffit sit;
application/x-tcl tcl tk;
application/x-x509-ca-cert der pem crt;
application/x-xpinstall xpi;
application/xhtml+xml xhtml;
application/zip zip;
application/octet-stream bin exe dll;
application/octet-stream deb;
application/octet-stream dmg;
application/octet-stream eot;
application/octet-stream iso img;
application/octet-stream msi msp msm;
audio/midi mid midi kar;
audio/mpeg mp3;
audio/ogg ogg;
audio/x-m4a m4a;
audio/x-realaudio ra;
video/3gpp 3gpp 3gp;
video/mp4 mp4;
video/mpeg mpeg mpg;
video/quicktime mov;
video/webm webm;
video/x-flv flv;
video/x-m4v m4v;
video/x-mng mng;
video/x-ms-asf asx asf;
video/x-ms-wmv wmv;
video/x-msvideo avi;
}

50
config/nginx.conf Normal file
View File

@ -0,0 +1,50 @@
#user mkv5bu;
worker_processes 10;
pid nginx.pid;
error_log logs/error.log debug;
events {
worker_connections 768;
multi_accept on;
}
http {
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 0;
types_hash_max_size 2048;
include mime.types;
default_type application/octet-stream;
access_log logs/access.log;
error_log logs/error.log debug;
#gzip on;
#gzip_types *;
create_full_put_path on;
autoindex on;
autoindex_exact_size off;
server {
charset utf-8;
listen 2280;
root ../store;
server_name share.local;
location /.:-==-:./ {
alias ../html/;
}
location / {
fancyindex on;
fancyindex_exact_size on;
fancyindex_header /.:-==-:./listing_header.html;
if (-d $request_filename) {
rewrite ^(.*[^/])$ $1/ break;
}
if ($request_method = MKCOL) {
rewrite ^(.*[^/])$ $1/ break;
}
dav_methods PUT DELETE MKCOL COPY MOVE;
dav_ext_methods PROPFIND OPTIONS;
client_max_body_size 256M;
}
}
}

21
html/50x.html Normal file
View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<title>Error</title>
<style>
body {
width: 35em;
margin: 0 auto;
font-family: Tahoma, Verdana, Arial, sans-serif;
}
</style>
</head>
<body>
<h1>An error occurred.</h1>
<p>Sorry, the page you are looking for is currently unavailable.<br/>
Please try again later.</p>
<p>If you are the system administrator of this resource then you should check
the <a href="http://nginx.org/r/error_log">error log</a> for details.</p>
<p><em>Faithfully yours, nginx.</em></p>
</body>
</html>

160
html/application.coffee Normal file
View File

@ -0,0 +1,160 @@
console ?= {}
console.log ?= ->
$.fn.breadcrumb = ->
bc = $ @
path = bc.text().split '/'
bc.empty()
path.shift()
path.pop()
bc.append " <a href='/'>/</a> " if 0 < path.length
ap = '/'
for p in path[0..-1]
ap = "#{ap}#{p}/"
bc.append " <a href='#{ap}'>#{p}/</a> "
#bc.append " #{path.slice -1}/"
bc.buttonset()
$.fn.fancy = (obj = 'html') ->
$t = $ @
$o = $ obj
f = $.cookie 'fancy'
$t.button().on 'change', (e) ->
e.preventDefault()
ch = $t.is(':checked')
$o.toggleClass 'fancy', ch
$.cookie 'fancy', (if ch then '1' else '0'), path: '/'
console.log 'fancy:', $.cookie('fancy'), ch
console.log 'fancy?', f, $t.is(':checked')
$t.click() if $t.is(':checked') != ('1' == f)
$o.toggleClass 'fancy', $t.is(':checked')
$.fn.icon = (($) ->
root = (filename = null) ->
$t = $ @
filename ?= $t.attr( 'data-filename') ? $t.attr( 'href')
type =
if /\/$/.test filename
'inode/directory'
else
ext = /\.([^.]*)$/.exec filename
if ext
ext = ext[1]
root.mime_types[ext]
type ?= 'unknown'
icon = root.mime_type_icons[type]
$img = $ '<img>'
$img.attr 'src', "/.:-==-:./icons/mimetypes/#{icon}"
$t.prepend $img
root.mime_types = {}
root.mime_type_icons = {}
root
)(jQuery)
$.fn.iconify = (($) ->
root = ->
$tr = $ @
$a = $tr.children('td:first-child').children 'a'
href = $a.attr 'href'
$a.icon()
menu = $('<td>').appendTo $tr
$('<a data-method="delete">&#x2716;</a>').appendTo(menu).on 'click', root.destroy
# $('<a data-method="mark">&#x2714;</a>').appendTo(menu).on 'click', root.mark
menu.buttonset().children('a').attr href: href
@
root.destroy = (e) ->
$t = $ @
e.preventDefault()
deleted = (e) -> $t.parent().parent().remove()
uri = $t.attr 'href'
if confirm "Delete #{uri}?"
$.ajax url: uri, method: 'delete', success: deleted
false
root.mark = (e) ->
$t = $ @
e.preventDefault()
$t.parent().parent().toggleClass 'marked'
false
root
)(jQuery)
$ ->
$.getJSON '/.:-==-:./mime-types.json', (data, textStatus, xhr) ->
i = $.fn.icon
i.mime_types = data.types
i.mime_type_icons = data.icons
i.mime_type_icons['inode/directory'] = 'inode-directory.png'
i.mime_type_icons['unknown'] = 'unknown.png'
$(a).iconify() for a in $('#list tbody tr')
@
$ -> $('#fancy-toggle').fancy()
$ -> $('#breadcrumb').appendTo('header').breadcrumb()
$ ->
for tr in $('#list tr')
$tr = $ tr
t = $tr.children( 'td:nth-child(2)').text()
$tr.addClass 'dir' if '-' == t
@
# for drop-events needed!
$ -> $.event.props.push "dataTransfer"
$.upload = (->
root = (file) ->
if root.window and root.window.opener
uw = root.window
if root.ready
root.upload file
return @
else
root.ready = false
uw = root.window = window.open '', 'upload_dialog',
'menubar=no,dependent=no,status=no,toolbar=no,location=no,width=480,height=320,top=64,left=64'
if uw.location and -1 == uw.location.href.indexOf( '/.:-==-:./upload.html')
uw.location.href = '/.:-==-:./upload.html'
else
root.ready = true
root.upload file
return @
root.queue.push file
uw.focus()
root.upload = (file) ->
uw = root.window
uw.jQuery( uw.document).trigger 'upload', [file, window.location.pathname]
root.queue = []
root.loaded = (e) ->
root.ready = true
root file while file = root.queue.pop()
root.finished = (e) ->
$('#menu').append( '<span>Dir was changed, reload to see changes!</span>')
root.activate = ->
$(document).on upload_window_ready: root.loaded, uploaded: root.finished
root
)()
$ -> $.upload.activate()
$ ->
drag = (e) ->
console.log 'drag', e.type, e
e.stopPropagation()
e.preventDefault()
$(document).toggleClass 'draghover', 'draghover' == e.type
false
drop = (e) ->
drag e
files = e.target.files || e.dataTransfer.files
console.log 'droped', files
$.upload file for file in files
$('#upload-file').on 'change', drop
$('body').on
dragover: drag
dragleaver: drag
drop: drop

132
html/application.css Normal file
View File

@ -0,0 +1,132 @@
/* general styles */
html {
background: white;
color: black;
margin: 0;
font-family: "Source Code Sans", Helvetica, Arial, sans-serif;
font-size: 0.7em;
overflow-y: scroll;
}
a, a:visited {
color: gray;
text-decoration: none;
}
a:hover, a:focus {
color: black;
}
/* listing window */
html.fancy #list { display: block }
html.fancy #list thead { display: none }
html.fancy #list tbody { display: block }
html.fancy #list tbody tr {
display: inline-block;
width: 8em;
height: 9.5em;
overflow: hidden;
margin: 0.2em;
padding: 0.2em;
border-radius: 1em;
position: relative;
}
html.fancy #list tbody tr:hover {
background: #ddd;
overflow: initial;
}
html.fancy #list tbody tr.marked { background: #afa; }
html.fancy #list tbody td {
display: block;
text-align: center;
}
html.fancy #list tbody tr:not(:hover) td:not(:first-child) { display: none }
html.fancy #list tbody td:last-child {
position: absolute;
top: -0.5em;
right: -0.5em;
z-index: 500;
}
html.fancy #list tbody td:last-child a {
/*padding: 0.3em;
background: black;
color: white;
border-radius: 0.5em;
height: 1em;
line-height: 1em;*/
opacity: 0.5;
}
html.fancy #list tbody td:last-child a:hover {
opacity: initial;
}
html.fancy #list tbody td:first-child img {
max-width: 5em;
max-height: 5em;
display: block;
margin-right: auto;
margin-left: auto;
}
html.listing-window body {
margin-top: 3em;
}
html.listing-window header {
position: fixed;
top: 0;
right: 0;
left: 0;
height: 3em;
background: gray;
padding: 0 1em;
box-sizing: border-box;
border-bottom: black solid 1px;
z-index: 900;
}
html.listing-window header>* {
display: inline-block;
margin: 0;
padding: 0;
}
#upload-form { display: inline-block; }
#breadcrumb { font-size: 1em; }
#breadcrumb a, #breadcrumb a:visited { color: black; }
html:not(.fancy) #list tbody tr td + td + td {
border-left: 1px solid gray;
}
html:not(.fancy) #list tbody tr td:first-child {
border-right: 1px solid gray;
}
#list tbody tr td:nth-child(2) { text-align: right }
#list tbody tr td:nth-child(2):after { content: 'B' }
#list tbody tr.dir td:nth-child(2) { visibility: hidden }
html.fancy #list tbody tr.dir td:nth-child(2) { display: none }
#list tbody tr:first-child, html.fancy #list tbody tr:first-child { display: none }
#list tbody tr td:first-child img { display: none }
#menu {
position: absolute;
top: 0;
right: 1em;
}
/*#fancy-toggle { color: red; }*/
/*html.fancy #fancy-toggle { color: green; } */
/* upload window */
html.upload-window #uploads {
margin: 0;
padding: 0;
}
html.upload-window #uploads li {
margin: 0;
padding: 0.4em;
list-style: none;
}
html.upload-window #uploads li.active {
border: white 1px solid;
background: #aaf;
}
html.upload-window #uploads progress {
width: 100%;
}
html.upload-window #uploads li.finished {
background: white;
}
html.upload-window #uploads li:hover {
background: #afa;
}

12
html/coffee-script.js Normal file

File diff suppressed because one or more lines are too long

25
html/index.html Normal file
View File

@ -0,0 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<title>Welcome to nginx!</title>
<style>
body {
width: 35em;
margin: 0 auto;
font-family: Tahoma, Verdana, Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Welcome to nginx!</h1>
<p>If you see this page, the nginx web server is successfully installed and
working. Further configuration is required.</p>
<p>For online documentation and support please refer to
<a href="http://nginx.org/">nginx.org</a>.<br/>
Commercial support is available at
<a href="http://nginx.com/">nginx.com</a>.</p>
<p><em>Thank you for using nginx.</em></p>
</body>
</html>

12
html/jbreadcrumb/.project Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>jQuery Plugins</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
</buildSpec>
<natures>
<nature>com.aptana.ide.project.nature.web</nature>
</natures>
</projectDescription>

View File

@ -0,0 +1,208 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CompareNetworks jQuery'd Bread Crumb - jBreadCrumb</title>
<link rel="stylesheet" href="Styles/Base.css" type="text/css">
<link rel="stylesheet" href="Styles/BreadCrumb.css" type="text/css">
<script src="js/jquery.js" type="text/javascript" language="JavaScript">
</script>
<script src="js/jquery.easing.1.3.js" type="text/javascript" language="JavaScript">
</script>
<script src="js/jquery.jBreadCrumb.js" type="text/javascript" language="JavaScript">
</script>
<script type="text/javascript">
jQuery(document).ready(function()
{
jQuery("#breadCrumb0").jBreadCrumb();
jQuery("#breadCrumb1").jBreadCrumb();
jQuery("#breadCrumb2").jBreadCrumb();
jQuery("#breadCrumb3").jBreadCrumb();
})
</script>
</head>
<body>
<div id="container">
<h1>CompareNetworks jQuery'd Bread Crumb - jBreadCrumb</h1>
<!-- Bread Crumb Code - Be sure to include the chevronOverlay element so we can load the semi transparend png -->
<div class="breadCrumbHolder module">
<div id="breadCrumb0" class="breadCrumb module">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Biocompare Home</a>
</li>
<li>
<a href="#">Product Discovery</a>
</li>
<li>
<a href="#">Life Science Products / Laboratory Supplies</a>
</li>
<li>
<a href="#">Kits and Assays</a>
</li>
<li>
<a href="#">Mutagenesis Kits</a>
</li>
<li>
Mutation Generation System&trade;
</li>
</ul>
</div>
</div>
<div class="breadCrumbHolder module">
<div id="breadCrumb1" class="breadCrumb module">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Biocompare Home</a>
</li>
<li>
<a href="#">Product Discovery</a>
</li>
<li>
<a href="#">Life Science Products / Laboratory Supplies</a>
</li>
<li>
<a href="#">Kits and Assays</a>
</li>
<li>
<a href="#">Mutagenesis Kits</a>
</li>
<li>
Mutation Generation System&trade; Kit (MGS&trade; Kit) from Finnzymes Oy
</li>
</ul>
</div>
</div>
<div class="breadCrumbHolder module">
<div id="breadCrumb2" class="breadCrumb module">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Biocompare Home</a>
</li>
<li>
<a href="#">Product Discovery</a>
</li>
<li>
<a href="#">Life Science Products / Laboratory Supplies</a>
</li>
<li>
<a href="#">Kits and Assays</a>
</li>
<li>
<a href="#">Mutagenesis Kits</a>
</li>
<li>
Mutation Generation System&trade; Kit (MGS&trade; Kit) from Finnzymes Oy. Ok, let's get ridiculously long here, we all know it happens.
</li>
</ul>
</div>
</div>
<div class="breadCrumbHolder module">
<div id="breadCrumb3" class="breadCrumb module">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Biocompare Home</a>
</li>
<li>
Mutation Generation System&trade;
</li>
</ul>
</div>
</div>
<div class="chevronOverlay main">
</div>
<!-- End Bread Crumb Code -->
<div class="writeup module">
<div class="description">
<h2>Explanation</h2>
<p>
This collapsible breadcrumb was developed to deal with deeply nested, verbosely named pages. Rather than limit the amount of elements shown on the sever side, we decided to go with a client side solution for usability and SEO reasons. It also turned out nice to look at and fun to play with.
</p>
<p>
It is smart in the sense that it collapses based upon the amount and length of the elements in the set. The breadcrumb uses a semitransparent .png overlay to achieve the gradient effect seen on the elements. Visually, it helps to show a "peek" at what is underneath.
</p>
<p>
Oh, and it's compatible with ie 6, ie 7 and all standards compliant browsers.
</p>
<p>
To use the plugin, it's as simple as the code below.
</p>
<pre>jQuery(document).ready(function()
{
jQuery("#breadCrumb").jBreadCrumb();
})</pre>
<p>
The only additional jQuery plugin required is the <a href="http://gsgd.co.uk/sandbox/jquery/easing/" title="jQuery Easing">easing plugin</a>
written by GSGD. The plugin uses Robert Penner's wonderful easing equations that anyone from a flash background is familiar with, I love 'easeOutQuad', it makes things so smooooth.
</p>
<p>
If you don't want to use the plugin, set the options to use the normal "swing" (esentially "easeInOut") or "linear" easing provided by jQuery. The easing equations will no longer be necessary.
</p>
<pre>jQuery(document).ready(function()
{
jQuery("#breadCrumb").jBreadCrumb({easing:'swing'});
})
</pre>
<p>
Or, set it globally
</p>
<pre>
jQuery.fn.jBreadCrumb.defaults.easing = 'linear';
</pre>
<p>
There are a lot of options in there, you can adjust many of the features pretty easily through the options. Have fun with it.</p>
<p>
Written by Jason Roy for CompareNetworks Inc.
</p>
<div class="license">
<p>
Copyright (c) 2008 CompareNetworks Inc.
</p>
<p>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
</p>
<p>
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
</p>
<p>
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
</p>
</div>
</div>
<div class="sideBar">
<h3>Get jQuery.jBreadCrumb</h3>
<p>
You can download the files necessary to use the plugin here
</p>
<p>
<strong><a href="jBreadCrumb.zip" title="Download jBreadCrumb Plugin">Download jBreadCrumb Plugin</a></strong>
</p>
</div>
</div>
</div>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 121 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 310 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 549 B

View File

@ -0,0 +1,231 @@
/* Float Clearing
---------------------------------------------------------------------*/
.module:after
{
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
/* float clearing for IE6 */
* html .module
{
height: 1%;
overflow: visible;
}
/* float clearing for IE7 */
* + html .module
{
min-height: 1%;
}
/* General Typography
---------------------------------------------------------------------*/
html, body
{
font-size: 12px;
line-height: 21px;
color: #444;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;
background:#f3f3f3;
}
html > body
{
font-size: 12px;
line-height: 21px;
}
h1
{
font-weight: bold;
color: #007ac3;
font-size: 2em;
line-height: 1em;
margin: 1.25em 0 .75em 0;
}
h2
{
color: #1371aa;
font-weight: bold;
font-size: 1.6666em;
line-height: 1em;
margin: 1.25em 0 .75em 0;
}
h3
{
color: #1371aa;
font-size: 1.41667em;
line-height: 1em;
font-weight: bold;
margin: 1.25em 0 .75em 0;
}
h4
{
color: #000;
font-size: 1.1667em;
line-height: 1em;
font-weight: bold;
margin: 1.25em 0 .5em 0;
}
h5
{
color: #000;
font-size: 1em;
line-height: 1em;
font-weight: bold;
margin: 1.25em 0 .5em 0;
}
h6
{
color: #000;
font-size: 1em;
line-height: 1em;
font-weight: bold;
margin: 1.25em 0 .5em 0;
}
strong
{
font-weight: bold;
}
em
{
font-style: italic;
line-height: 1.75em;
}
p
{
font-size: 1em;
line-height: 1.75em;
margin: .25em 0 1.5em;
}
td, td a, th, th a, span
{
line-height: 1.3333em;
}
blockquote
{
margin: .416em 0 .416em 1.1667em;
}
a
{
color: #0e82c7;
text-decoration: none;
font-size: inherit;
font-weight: inherit;
}
a:hover
{
text-decoration: underline;
}
ul, ol
{
margin: .833em 0;
padding-left: 2em;
}
ul
{
list-style-type: disc;
}
ol
{
list-style-type: decimal;
}
ul li, ol li
{
line-height: 1.5em;
}
dt
{
margin: .416em 0 0 0;
}
dd
{
margin: .416em 0 .416em 1.1667em;
}
pre, code, tt
{
font-family: "Andale Mono" , "Lucida Console" , "Courier New" , Courier, monospace;
margin: .833em 0;
}
sub
{
vertical-align: sub;
font-size: smaller;
line-height:inherit;
}
sup
{
vertical-align: super;
font-size: smaller;
line-height:inherit;
}
/* Page Specific
---------------------------------------------------------------------*/
#container
{
margin:0 auto 10px;
text-align:left;
width:1000px;
}
.breadCrumbHolder
{
margin:0 0 20px 0;
}
pre
{
background:#ddd;
border:solid 1px #fff;
padding:10px;
color:#111;
}
.description
{
float:left;
width:700px;
margin-right:20px;
}
.sideBar
{
float:left;
background:#fff;
border:solid 1px #dedede;
padding:20px;
width:238px;
margin:50px 0 0 0;
}
.license p
{
font-size:0.83333em;
color:#888;
}

View File

@ -0,0 +1,109 @@
/* Float Clearing
---------------------------------------------------------------------*/
.module:after
{
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
/* float clearing for IE6 */
* html .module
{
height: 1%;
overflow: visible;
}
/* float clearing for IE7 */
* + html .module
{
min-height: 1%;
}
/* Breadcrumb Styles
---------------------------------------------------------------------*/
.breadCrumb
{
margin: 0;
padding: 0;
float: left;
display: block;
height: 21px;
overflow: hidden;
width: 990px;
padding:5px;
border:solid 1px #dedede;
background:#fff;
}
.breadCrumb ul
{
margin: 0;
padding: 0;
height: 21px;
display: block;
}
.breadCrumb ul li
{
display: block;
float: left;
position: relative;
height: 21px;
overflow: hidden;
line-height: 21px;
margin: 0px 6px 0px 0;
padding: 0px 10px 0px 0;
font-size: .9167em;
background: url(../Images/Chevron.gif) no-repeat 100% 0;
}
.breadCrumb ul li div.chevronOverlay
{
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
.breadCrumb ul li span
{
display: block;
overflow: hidden;
}
.breadCrumb ul li a
{
display: block;
position: relative;
height: 21px;
line-height: 21px;
overflow: hidden;
float: left;
}
.breadCrumb ul li.first a
{
height: 16px !important;
text-indent:-1000em;
width:16px;
padding: 0;
margin-top: 2px;
overflow: hidden;
background:url(../Images/IconHome.gif) no-repeat 0 0;
}
.breadCrumb ul li.first a:hover
{
background-position: 0 -16px;
}
.breadCrumb ul li.last
{
background: none;
margin-right: 0;
padding-right: 0;
}
.chevronOverlay
{
display: none;
background: url(../Images/ChevronOverlay.png) no-repeat 100% 0;
width: 13px;
height: 20px;
}

View File

@ -0,0 +1,210 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CompareNetworks jQuery'd Bread Crumb - jBreadCrumb</title>
<link rel="stylesheet" href="Styles/Base.css" type="text/css">
<link rel="stylesheet" href="Styles/BreadCrumb.css" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script src="js/jquery.easing.1.3.js" type="text/javascript" language="JavaScript">
</script>
<script src="js/jquery.jBreadCrumb.1.1.js" type="text/javascript" language="JavaScript">
</script>
<script type="text/javascript">
jQuery(document).ready(function()
{
jQuery("#breadCrumb0").jBreadCrumb();
jQuery("#breadCrumb1").jBreadCrumb();
jQuery("#breadCrumb2").jBreadCrumb();
jQuery("#breadCrumb3").jBreadCrumb();
})
</script>
</head>
<body>
<div id="container">
<h1>CompareNetworks jQuery'd Bread Crumb - jBreadCrumb</h1>
<!-- Bread Crumb Code - Be sure to include the chevronOverlay element so we can load the semi transparend png -->
<div class="breadCrumbHolder module">
<div id="breadCrumb0" class="breadCrumb module">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Biocompare Home</a>
</li>
<li>
<a href="#">Product Discovery</a>
</li>
<li>
<a href="#">Life Science Products / Laboratory Supplies</a>
</li>
<li>
<a href="#">Kits and Assays</a>
</li>
<li>
<a href="#">Mutagenesis Kits</a>
</li>
<li>
Mutation Generation System&trade;
</li>
</ul>
</div>
</div>
<div class="breadCrumbHolder module">
<div id="breadCrumb1" class="breadCrumb module">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Biocompare Home</a>
</li>
<li>
<a href="#">Product Discovery</a>
</li>
<li>
<a href="#">Life Science Products / Laboratory Supplies</a>
</li>
<li>
<a href="#">Kits and Assays</a>
</li>
<li>
<a href="#">Mutagenesis Kits</a>
</li>
<li>
Mutation Generation System&trade; Kit (MGS&trade; Kit) from Finnzymes Oy
</li>
</ul>
</div>
</div>
<div class="breadCrumbHolder module">
<div id="breadCrumb2" class="breadCrumb module">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Biocompare Home</a>
</li>
<li>
<a href="#">Product Discovery</a>
</li>
<li>
<a href="#">Life Science Products / Laboratory Supplies</a>
</li>
<li>
<a href="#">Kits and Assays</a>
</li>
<li>
<a href="#">Mutagenesis Kits</a>
</li>
<li>
Mutation Generation System&trade; Kit (MGS&trade; Kit) from Finnzymes Oy. Ok, let's get ridiculously long here, we all know it happens.
</li>
</ul>
</div>
</div>
<div class="breadCrumbHolder module">
<div id="breadCrumb3" class="breadCrumb module">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Biocompare Home</a>
</li>
<li>
Mutation Generation System&trade;
</li>
</ul>
</div>
</div>
<div class="chevronOverlay main">
</div>
<!-- End Bread Crumb Code -->
<div class="writeup module">
<div class="description">
<h2>Update - jBreadCrumb 1.1</h2>
With a little help from jquery user "mikejbond", the chevron overlay div no longer needs to be part of the HTML, it is inserted dynamically. You may still want include it if you want to cache image on page load. Also, the easing plugn is no longer required, the animation will default to "swing" easing. I still recommend "easeOutQuad" for the best looking animation, but it's not necessary.<h2>Explanation</h2>
<p>
This collapsible breadcrumb was developed to deal with deeply nested, verbosely named pages. Rather than limit the amount of elements shown on the sever side, we decided to go with a client side solution for usability and SEO reasons. It also turned out nice to look at and fun to play with.
</p>
<p>
It is smart in the sense that it collapses based upon the amount and length of the elements in the set. The breadcrumb uses a semitransparent .png overlay to achieve the gradient effect seen on the elements. Visually, it helps to show a "peek" at what is underneath.
</p>
<p>
Oh, and it's compatible with ie 6, ie 7 and all standards compliant browsers.
</p>
<p>
To use the plugin, it's as simple as the code below.
</p>
<pre>jQuery(document).ready(function()
{
jQuery("#breadCrumb").jBreadCrumb();
})</pre>
<p>
The only additional jQuery plugin required is the <a href="http://gsgd.co.uk/sandbox/jquery/easing/" title="jQuery Easing">easing plugin</a>
written by GSGD. The plugin uses Robert Penner's wonderful easing equations that anyone from a flash background is familiar with, I love 'easeOutQuad', it makes things so smooooth.
</p>
<p>
If you don't want to use the plugin, set the options to use the normal "swing" (esentially "easeInOut") or "linear" easing provided by jQuery. The easing equations will no longer be necessary.
</p>
<pre>jQuery(document).ready(function()
{
jQuery("#breadCrumb").jBreadCrumb({easing:'swing'});
})
</pre>
<p>
Or, set it globally
</p>
<pre>
jQuery.fn.jBreadCrumb.defaults.easing = 'linear';
</pre>
<p>
There are a lot of options in there, you can adjust many of the features pretty easily through the options. Have fun with it.
</p>
<p>
Written by Jason Roy for CompareNetworks Inc.
</p>
<div class="license">
<p>
Copyright (c) 2008 CompareNetworks Inc.
</p>
<p>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
</p>
<p>
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
</p>
<p>
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
</p>
</div>
</div>
<div class="sideBar">
<h3>Get jQuery.jBreadCrumb</h3>
<p>
You can download the files necessary to use the plugin here
</p>
<p>
<strong><a href="jBreadCrumb.zip" title="Download jBreadCrumb Plugin">Download jBreadCrumb Plugin</a></strong>
</p>
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,205 @@
/*
* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
*
* Uses the built in easing capabilities added In jQuery 1.1
* to offer multiple easing options
*
* TERMS OF USE - jQuery Easing
*
* Open source under the BSD License.
*
* Copyright © 2008 George McGinley Smith
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without modification,
* are permitted provided that the following conditions are met:
*
* Redistributions of source code must retain the above copyright notice, this list of
* conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list
* of conditions and the following disclaimer in the documentation and/or other materials
* provided with the distribution.
*
* Neither the name of the author nor the names of contributors may be used to endorse
* or promote products derived from this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
* OF THE POSSIBILITY OF SUCH DAMAGE.
*
*/
// t: current time, b: begInnIng value, c: change In value, d: duration
jQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.extend( jQuery.easing,
{
def: 'easeOutQuad',
swing: function (x, t, b, c, d) {
//alert(jQuery.easing.default);
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
},
easeInQuad: function (x, t, b, c, d) {
return c*(t/=d)*t + b;
},
easeOutQuad: function (x, t, b, c, d) {
return -c *(t/=d)*(t-2) + b;
},
easeInOutQuad: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInCubic: function (x, t, b, c, d) {
return c*(t/=d)*t*t + b;
},
easeOutCubic: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t + 1) + b;
},
easeInOutCubic: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t + b;
return c/2*((t-=2)*t*t + 2) + b;
},
easeInQuart: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t + b;
},
easeOutQuart: function (x, t, b, c, d) {
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeInOutQuart: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
easeInQuint: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t*t + b;
},
easeOutQuint: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t*t*t + 1) + b;
},
easeInOutQuint: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
return c/2*((t-=2)*t*t*t*t + 2) + b;
},
easeInSine: function (x, t, b, c, d) {
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
},
easeOutSine: function (x, t, b, c, d) {
return c * Math.sin(t/d * (Math.PI/2)) + b;
},
easeInOutSine: function (x, t, b, c, d) {
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
},
easeInExpo: function (x, t, b, c, d) {
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
},
easeOutExpo: function (x, t, b, c, d) {
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
},
easeInOutExpo: function (x, t, b, c, d) {
if (t==0) return b;
if (t==d) return b+c;
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
},
easeInCirc: function (x, t, b, c, d) {
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
},
easeOutCirc: function (x, t, b, c, d) {
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
},
easeInOutCirc: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
},
easeInElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
easeOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
easeInOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
},
easeInBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
},
easeOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeInOutBack: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
easeInBounce: function (x, t, b, c, d) {
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
},
easeOutBounce: function (x, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
},
easeInOutBounce: function (x, t, b, c, d) {
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
}
});
/*
*
* TERMS OF USE - EASING EQUATIONS
*
* Open source under the BSD License.
*
* Copyright © 2001 Robert Penner
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without modification,
* are permitted provided that the following conditions are met:
*
* Redistributions of source code must retain the above copyright notice, this list of
* conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list
* of conditions and the following disclaimer in the documentation and/or other materials
* provided with the distribution.
*
* Neither the name of the author nor the names of contributors may be used to endorse
* or promote products derived from this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
* OF THE POSSIBILITY OF SUCH DAMAGE.
*
*/

View File

@ -0,0 +1,240 @@
/**
* @author Jason Roy for CompareNetworks Inc.
* Thanks to mikejbond for suggested udaptes
*
* Version 1.1
* Copyright (c) 2009 CompareNetworks Inc.
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
*/
(function($)
{
// Private variables
var _options = {};
var _container = {};
var _breadCrumbElements = {};
var _autoIntervalArray = [];
var _easingEquation;
// Public functions
jQuery.fn.jBreadCrumb = function(options)
{
_options = $.extend({}, $.fn.jBreadCrumb.defaults, options);
return this.each(function()
{
_container = $(this);
setupBreadCrumb();
});
};
// Private functions
function setupBreadCrumb()
{
//Check if easing plugin exists. If it doesn't, use "swing"
if(typeof(jQuery.easing) == 'object')
{
_easingEquation = 'easeOutQuad'
}
else
{
_easingEquation = 'swing'
}
//The reference object containing all of the breadcrumb elements
_breadCrumbElements = jQuery(_container).find('li');
//Keep it from overflowing in ie6 & 7
jQuery(_container).find('ul').wrap('<div style="overflow:hidden; position:relative; width: ' + jQuery(_container).css("width") + ';"><div>');
//Set an arbitrary width width to avoid float drop on the animation
jQuery(_container).find('ul').width(5000);
//If the breadcrumb contains nothing, don't do anything
if (_breadCrumbElements.length > 0)
{
jQuery(_breadCrumbElements[_breadCrumbElements.length - 1]).addClass('last');
jQuery(_breadCrumbElements[0]).addClass('first');
//If the breadcrumb object length is long enough, compress.
if (_breadCrumbElements.length > _options.minimumCompressionElements)
{
compressBreadCrumb();
};
};
};
function compressBreadCrumb()
{
// Factor to determine if we should compress the element at all
var finalElement = jQuery(_breadCrumbElements[_breadCrumbElements.length - 1]);
// If the final element is really long, compress more elements
if (jQuery(finalElement).width() > _options.maxFinalElementLength)
{
if (_options.beginingElementsToLeaveOpen > 0)
{
_options.beginingElementsToLeaveOpen--;
}
if (_options.endElementsToLeaveOpen > 0)
{
_options.endElementsToLeaveOpen--;
}
}
// If the final element is within the short and long range, compress to the default end elements and 1 less beginning elements
if (jQuery(finalElement).width() < _options.maxFinalElementLength && jQuery(finalElement).width() > _options.minFinalElementLength)
{
if (_options.beginingElementsToLeaveOpen > 0)
{
_options.beginingElementsToLeaveOpen--;
}
}
var itemsToRemove = _breadCrumbElements.length - 1 - _options.endElementsToLeaveOpen;
// We compress only elements determined by the formula setting below
//TODO : Make this smarter, it's only checking the final elements length. It could also check the amount of elements.
jQuery(_breadCrumbElements[_breadCrumbElements.length - 1]).css(
{
background: 'none'
});
$(_breadCrumbElements).each(function(i, listElement)
{
if (i > _options.beginingElementsToLeaveOpen && i < itemsToRemove)
{
jQuery(listElement).find('a').wrap('<span></span>').width(jQuery(listElement).find('a').width() + 10);
// Add the overlay png.
jQuery(listElement).append(jQuery('<div class="' + _options.overlayClass + '"></div>').css(
{
display: 'block'
})).css(
{
background: 'none'
});
if (isIE6OrLess())
{
fixPNG(jQuery(listElement).find('.' + _options.overlayClass).css(
{
width: '20px',
right: "-1px"
}));
}
var options =
{
id: i,
width: jQuery(listElement).width(),
listElement: jQuery(listElement).find('span'),
isAnimating: false,
element: jQuery(listElement).find('span')
};
jQuery(listElement).bind('mouseover', options, expandBreadCrumb).bind('mouseout', options, shrinkBreadCrumb);
jQuery(listElement).find('a').unbind('mouseover', expandBreadCrumb).unbind('mouseout', shrinkBreadCrumb);
listElement.autoInterval = setInterval(function()
{
clearInterval(listElement.autoInterval);
jQuery(listElement).find('span').animate(
{
width: _options.previewWidth
}, _options.timeInitialCollapse, _options.easing);
}, (150 * (i - 2)));
}
});
};
function expandBreadCrumb(e)
{
var elementID = e.data.id;
var originalWidth = e.data.width;
jQuery(e.data.element).stop();
jQuery(e.data.element).animate(
{
width: originalWidth
},
{
duration: _options.timeExpansionAnimation,
easing: _options.easing,
queue: false
});
return false;
};
function shrinkBreadCrumb(e)
{
var elementID = e.data.id;
jQuery(e.data.element).stop();
jQuery(e.data.element).animate(
{
width: _options.previewWidth
},
{
duration: _options.timeCompressionAnimation,
easing: _options.easing,
queue: false
});
return false;
};
function isIE6OrLess()
{
var isIE6 = $.browser.msie && /MSIE\s(5\.5|6\.)/.test(navigator.userAgent);
return isIE6;
};
// Fix The Overlay for IE6
function fixPNG(element)
{
var image;
if (jQuery(element).is('img'))
{
image = jQuery(element).attr('src');
}
else
{
image = $(element).css('backgroundImage');
image.match(/^url\(["']?(.*\.png)["']?\)$/i);
image = RegExp.$1;
;
}
$(element).css(
{
'backgroundImage': 'none',
'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='" + image + "')"
});
};
// Public global variables
jQuery.fn.jBreadCrumb.defaults =
{
maxFinalElementLength: 400,
minFinalElementLength: 200,
minimumCompressionElements: 4,
endElementsToLeaveOpen: 1,
beginingElementsToLeaveOpen: 1,
timeExpansionAnimation: 800,
timeCompressionAnimation: 500,
timeInitialCollapse: 600,
easing: _easingEquation,
overlayClass: 'chevronOverlay',
previewWidth: 5
};
})(jQuery);

3655
html/jbreadcrumb/js/jquery.js vendored Normal file

File diff suppressed because it is too large Load Diff

5
html/jquery-1.9.1.min.js vendored Normal file

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 212 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 220 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 206 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 220 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 262 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 262 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 262 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 253 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 281 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.4 KiB

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,245 @@
Authors ordered by first contribution
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 <sean@sunsean.com>
John Resig <jeresig@gmail.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 Bryan Smith <micheil@brandedcode.com>
Jörn Zaefferer <joern.zaefferer@gmail.com>
Marc Grabanski <m@marcgrabanski.com>
Keith Wood <kbwood.au@gmail.com>
Brandon Aaron <brandon.aaron@gmail.com>
Scott González <scott.gonzalez@gmail.com>
Eduardo Lundgren <eduardolundgren@gmail.com>
Aaron Eisenberger <aaronchi@gmail.com>
Joan Piedra <theneojp@gmail.com>
Bruno Basto <b.basto@gmail.com>
Remy Sharp <remy@leftlogic.com>
Bohdan Ganicky <bohdan.ganicky@gmail.com>
David Bolter <david.bolter@gmail.com>
Chi Cheng <cloudream@gmail.com>
Ca-Phun Ung <pazu2k@gmail.com>
Ariel Flesler <aflesler@gmail.com>
Maggie Costello Wachs <fg.maggie@gmail.com>
Scott Jehl <scott@scottjehl.com>
Todd Parker <fg.todd@gmail.com>
Andrew Powell <powella@gmail.com>
Brant Burnett <btburnett3@gmail.com>
Douglas Neiner <doug@pixelgraphics.us>
Paul Irish <paul.irish@gmail.com>
Ralph Whitbeck <ralph.whitbeck@gmail.com>
Thibault Duplessis <thibault.duplessis@gmail.com>
Dominique Vincent <dominique.vincent@toitl.com>
Jack Hsu <jack.hsu@gmail.com>
Adam Sontag <ajpiano@ajpiano.com>
Carl Fürstenberg <carl@excito.com>
Kevin Dalman <development@allpro.net>
Alberto Fernández Capel <afcapel@gmail.com>
Jacek Jędrzejewski (http://jacek.jedrzejewski.name)
Ting Kuei <ting@kuei.com>
Samuel Cormier-Iijima <sam@chide.it>
Jon Palmer <jonspalmer@gmail.com>
Ben Hollis <bhollis@amazon.com>
Justin MacCarthy <Justin@Rubystars.biz>
Eyal Kobrigo <kobrigo@hotmail.com>
Tiago Freire <tiago.freire@gmail.com>
Diego Tres <diegotres@gmail.com>
Holger Rüprich <holger@rueprich.de>
Ziling Zhao <zizhao@cisco.com>
Mike Alsup <malsup@gmail.com>
Robson Braga Araujo <robsonbraga@gmail.com>
Pierre-Henri Ausseil <ph.ausseil@gmail.com>
Christopher McCulloh <cmcculloh@gmail.com>
Andrew Newcomb <ext.github@preceptsoftware.co.uk>
Lim Chee Aun <cheeaun@gmail.com>
Jorge Barreiro <yortx.barry@gmail.com>
Daniel Steigerwald <daniel@steigerwald.cz>
John Firebaugh <john_firebaugh@bigfix.com>
John Enters <github@darkdark.net>
Andrey Kapitcyn <ru.m157y@gmail.com>
Dmitry Petrov <dpetroff@gmail.com>
Eric Hynds <eric@hynds.net>
Chairat Sunthornwiphat <pipo@sixhead.com>
Josh Varner <josh.varner@gmail.com>
Stéphane Raimbault <stephane.raimbault@gmail.com>
Jay Merrifield <fracmak@gmail.com>
J. Ryan Stinnett <jryans@gmail.com>
Peter Heiberg <peter@heiberg.se>
Alex Dovenmuehle <adovenmuehle@gmail.com>
Jamie Gegerson <git@jamiegegerson.com>
Raymond Schwartz <skeetergraphics@gmail.com>
Phillip Barnes <philbar@gmail.com>
Kyle Wilkinson <kai@wikyd.org>
Khaled AlHourani <me@khaledalhourani.com>
Marian Rudzynski <mr@impaled.org>
Jean-Francois Remy <jfremy@virtuoz.com>
Doug Blood <dougblood@gmail.com>
Filippo Cavallarin <filippo.cavallarin@codseq.it>
Heiko Henning <h.henning@educa.ch>
Aliaksandr Rahalevich <saksmlz@gmail.com>
Mario Visic <mario@mariovisic.com>
Xavi Ramirez <xavi.rmz@gmail.com>
Max Schnur <max.schnur@gmail.com>
Saji Nediyanchath <saji89@gmail.com>
Corey Frang <gnarf@gnarf.net>
Aaron Peterson <aaronp123@yahoo.com>
Ivan Peters <ivan@ivanpeters.com>
Mohamed Cherif Bouchelaghem <cherifbouchelaghem@yahoo.fr>
Marcos Sousa <falecomigo@marcossousa.com>
Michael DellaNoce <mdellanoce@mailtrust.com>
George Marshall <echosx@gmail.com>
Tobias Brunner <tobias@strongswan.org>
Martin Solli <msolli@gmail.com>
David Petersen <public@petersendidit.com>
Dan Heberden <danheberden@gmail.com>
William Kevin Manire <williamkmanire@gmail.com>
Gilmore Davidson <gilmoreorless@gmail.com>
Michael Wu <michaelmwu@gmail.com>
Adam Parod <mystic414@gmail.com>
Guillaume Gautreau <guillaume+github@ghusse.com>
Marcel Toele <EleotleCram@gmail.com>
Dan Streetman <ddstreet@ieee.org>
Matt Hoskins <furlined@cat-basket.org>
Giovanni Giacobbi <giovanni@giacobbi.net>
Kyle Florence <kyle.florence@gmail.com>
Pavol Hluchý <lopo@losys.sk>
Hans Hillen <hans.hillen@gmail.com>
Mark Johnson <virgofx@live.com>
Trey Hunner <treyhunner@gmail.com>
Shane Whittet <whittet@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>
Eddie Monge <eddie@eddiemonge.com>
Israel Tsadok <itsadok@gmail.com>
Carson McDonald <carson@ioncannon.net>
Jason Davies <jason@jasondavies.com>
Garrison Locke <gplocke@gmail.com>
David Murdoch <musicisair@yahoo.com>
Benjamin Scott Boyle <benjamins.boyle@gmail.com>
Jesse Baird <jebaird@gmail.com>
Jonathan Vingiano <jvingiano@gmail.com>
Dylan Just <dev@ephox.com>
Hiroshi Tomita <tomykaira@gmail.com>
Glenn Goodrich <glenn.goodrich@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 <waw325@gmail.com>
Kouhei Sutou <kou@clear-code.com>
Karl Kirch <karlkrch@gmail.com>
Chris Kelly <ckdake@ckdake.com>
Jay Oster <jay@loyalize.com>
Alexander Polomoshnov <alex.polomoshnov@gmail.com>
David Leal <dgleal@gmail.com>
Igor Milla <igor.fsp.milla@gmail.com>
Dave Methvin <dave.methvin@gmail.com>
Florian Gutmann <f.gutmann@chronimo.com>
Marwan Al Jubeh <marwan.aljubeh@gmail.com>
Milan Broum <midlis@googlemail.com>
Sebastian Sauer <info@dynpages.de>
Gaëtan Muller <m.gaetan89@gmail.com>
Michel Weimerskirch <michel@weimerskirch.net>
William Griffiths <william@ycymro.com>
Stojce Slavkovski <stojce@gmail.com>
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 Edward Hutton <meh@corefiling.co.uk>
James Khoury <james@jameskhoury.com>
Rob Loach <robloach@gmail.com>
Alberto Monteiro <betimbrasil@gmail.com>
Alex Rhea <alex.rhea@gmail.com>
Krzysztof Rosiński <rozwell69@gmail.com>
Ryan Olton <oltonr@gmail.com>
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>
Justin Domnitz <jdomnitz@gmail.com>
Douglas Cerna <douglascerna@yahoo.com>
Bert ter Heide <bertjh@hotmail.com>
Jasvir Nagra <jasvir@gmail.com>
Petr Hromadko <yuriy@tokyoscale.com>
Harri Kilpiö <harri.kilpio@gmail.com>
Lado Lomidze <lado.lomidze@gmail.com>
Amir E. Aharoni <amir.aharoni@mail.huji.ac.il>
Simon Sattes <simon.sattes@gmail.com>
Jo Liss <joliss42@gmail.com>
Guntupalli Karunakar <karunakarg@yahoo.com>
Shahyar Ghobadpour <shahyar@gmail.com>
Lukasz Lipinski <uzza17@gmail.com>
Timo Tijhof <krinklemail@gmail.com>
Jason Moon <jmoon@socialcast.com>
Martin Frost <martinf55@hotmail.com>
Eneko Illarramendi <eneko@illarra.com>
EungJun Yi <semtlenori@gmail.com>
Courtland Allen <courtlandallen@gmail.com>
Viktar Varvanovich <non4eg@gmail.com>
Danny Trunk <dtrunk90@gmail.com>
Pavel Stetina <pavel.stetina@nangu.tv>
Michael Stay <metaweta@gmail.com>
Steven Roussey <sroussey@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>
John Chen <zhang.z.chen@intel.com>
Dale Kocian <dale.kocian@gmail.com>
Mike Sherov <mike.sherov@gmail.com>
Andrew Couch <andy@couchand.com>
Marc-Andre Lafortune <github@marc-andre.ca>
Nate Eagle <nate.eagle@teamaol.com>
David Souther <davidsouther@gmail.com>
Mathias Stenbom <mathias@stenbom.com>
Sergey Kartashov <ebishkek@yandex.ru>
Avinash R <nashpapa@gmail.com>
Ethan Romba <ethanromba@gmail.com>
Cory Gackenheimer <cory.gack@gmail.com>
Juan Pablo Kaniefsky <jpkaniefsky@gmail.com>
Roman Salnikov <bardt.dz@gmail.com>
Anika Henke <anika@selfthinker.org>
Samuel Bovée <samycookie2000@yahoo.fr>
Fabrício Matté <ult_combo@hotmail.com>
Viktor Kojouharov <vkojouharov@gmail.com>
Pawel Maruszczyk <lord_t@o2.pl>
Pavel Selitskas <p.selitskas@gmail.com>
Bjørn Johansen <bjorn.johansen@metronet.no>
Matthieu Penant <thieum22@hotmail.com>
Dominic Barnes <dominic@dbarnes.info>
David Sullivan <david.sullivan@gmail.com>
Thomas Jaggi <thomas.jaggi@gmail.com>
Vahid Sohrabloo <vahid4134@gmail.com>
Travis Carden <travis.carden@gmail.com>
Bruno M. Custódio <bruno@brunomcustodio.com>
Nathanael Silverman <nathanael.silverman@gmail.com>
Christian Wenz <christian@wenz.org>
Steve Urmston <steve@urm.st>
Zaven Muradyan <megalivoithos@gmail.com>
Woody Gilk <shadowhand@deviantart.com>
Zbigniew Motyka <zbigniew.motyka@gmail.com>
Suhail Alkowaileet <xsoh.k7@gmail.com>

View File

@ -0,0 +1,378 @@
module.exports = function( grunt ) {
"use strict";
var
// files
coreFiles = [
"jquery.ui.core.js",
"jquery.ui.widget.js",
"jquery.ui.mouse.js",
"jquery.ui.draggable.js",
"jquery.ui.droppable.js",
"jquery.ui.resizable.js",
"jquery.ui.selectable.js",
"jquery.ui.sortable.js",
"jquery.ui.effect.js"
],
uiFiles = coreFiles.map(function( file ) {
return "ui/" + file;
}).concat( expandFiles( "ui/*.js" ).filter(function( file ) {
return coreFiles.indexOf( file.substring(3) ) === -1;
})),
allI18nFiles = expandFiles( "ui/i18n/*.js" ),
cssFiles = [
"core",
"accordion",
"autocomplete",
"button",
"datepicker",
"dialog",
"menu",
"progressbar",
"resizable",
"selectable",
"slider",
"spinner",
"tabs",
"tooltip",
"theme"
].map(function( component ) {
return "themes/base/jquery.ui." + component + ".css";
}),
// minified files
minify = {
options: {
preserveComments: false
},
main: {
options: {
banner: createBanner( uiFiles )
},
files: {
"dist/jquery-ui.min.js": "dist/jquery-ui.js"
}
},
i18n: {
options: {
banner: createBanner( allI18nFiles )
},
files: {
"dist/i18n/jquery-ui-i18n.min.js": "dist/i18n/jquery-ui-i18n.js"
}
}
},
minifyCSS = {
options: {
keepSpecialComments: 0
},
main: {
options: {
keepSpecialComments: "*"
},
src: "dist/jquery-ui.css",
dest: "dist/jquery-ui.min.css"
}
},
compareFiles = {
all: [
"dist/jquery-ui.js",
"dist/jquery-ui.min.js"
]
};
function mapMinFile( file ) {
return "dist/" + file.replace( /\.js$/, ".min.js" ).replace( /ui\//, "minified/" );
}
function expandFiles( files ) {
return grunt.util._.pluck( grunt.file.expandMapping( files ), "src" ).map(function( values ) {
return values[ 0 ];
});
}
uiFiles.concat( allI18nFiles ).forEach(function( file ) {
minify[ file ] = {
options: {
banner: createBanner()
},
files: {}
};
minify[ file ].files[ mapMinFile( file ) ] = file;
});
cssFiles.forEach(function( file ) {
minifyCSS[ file ] = {
options: {
banner: createBanner()
},
src: file,
dest: "dist/" + file.replace( /\.css$/, ".min.css" ).replace( /themes\/base\//, "themes/base/minified/" )
};
});
uiFiles.forEach(function( file ) {
// TODO this doesn't do anything until https://github.com/rwldrn/grunt-compare-size/issues/13
compareFiles[ file ] = [ file, mapMinFile( file ) ];
});
// grunt plugins
grunt.loadNpmTasks( "grunt-contrib-jshint" );
grunt.loadNpmTasks( "grunt-contrib-uglify" );
grunt.loadNpmTasks( "grunt-contrib-concat" );
grunt.loadNpmTasks( "grunt-contrib-qunit" );
grunt.loadNpmTasks( "grunt-contrib-csslint" );
grunt.loadNpmTasks( "grunt-contrib-cssmin" );
grunt.loadNpmTasks( "grunt-html" );
grunt.loadNpmTasks( "grunt-compare-size" );
grunt.loadNpmTasks( "grunt-git-authors" );
// local testswarm and build tasks
grunt.loadTasks( "build/tasks" );
function stripDirectory( file ) {
return file.replace( /.+\/(.+?)>?$/, "$1" );
}
function createBanner( files ) {
// strip folders
var fileNames = files && files.map( stripDirectory );
return "/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - " +
"<%= grunt.template.today('isoDate') %>\n" +
"<%= pkg.homepage ? '* ' + pkg.homepage + '\\n' : '' %>" +
(files ? "* Includes: " + fileNames.join(", ") + "\n" : "")+
"* Copyright <%= grunt.template.today('yyyy') %> <%= pkg.author.name %>;" +
" Licensed <%= _.pluck(pkg.licenses, 'type').join(', ') %> */\n";
}
grunt.initConfig({
pkg: grunt.file.readJSON("package.json"),
files: {
dist: "<%= pkg.name %>-<%= pkg.version %>",
cdn: "<%= pkg.name %>-<%= pkg.version %>-cdn",
themes: "<%= pkg.name %>-themes-<%= pkg.version %>"
},
compare_size: compareFiles,
concat: {
ui: {
options: {
banner: createBanner( uiFiles ),
stripBanners: {
block: true
}
},
src: uiFiles,
dest: "dist/jquery-ui.js"
},
i18n: {
options: {
banner: createBanner( allI18nFiles )
},
src: allI18nFiles,
dest: "dist/i18n/jquery-ui-i18n.js"
},
css: {
options: {
banner: createBanner( cssFiles ),
stripBanners: {
block: true
}
},
src: cssFiles,
dest: "dist/jquery-ui.css"
}
},
uglify: minify,
cssmin: minifyCSS,
htmllint: {
// ignore files that contain invalid html, used only for ajax content testing
all: grunt.file.expand( [ "demos/**/*.html", "tests/**/*.html" ] ).filter(function( file ) {
return !/(?:ajax\/content\d\.html|tabs\/data\/test\.html|tests\/unit\/core\/core\.html)/.test( file );
})
},
copy: {
dist: {
src: [
"AUTHORS.txt",
"jquery-*.js",
"MIT-LICENSE.txt",
"README.md",
"Gruntfile.js",
"package.json",
"*.jquery.json",
"ui/**/*",
"ui/.jshintrc",
"demos/**/*",
"themes/**/*",
"external/**/*",
"tests/**/*"
],
renames: {
"dist/jquery-ui.js": "ui/jquery-ui.js",
"dist/jquery-ui.min.js": "ui/minified/jquery-ui.min.js",
"dist/i18n/jquery-ui-i18n.js": "ui/i18n/jquery-ui-i18n.js",
"dist/i18n/jquery-ui-i18n.min.js": "ui/minified/i18n/jquery-ui-i18n.min.js",
"dist/jquery-ui.css": "themes/base/jquery-ui.css",
"dist/jquery-ui.min.css": "themes/base/minified/jquery-ui.min.css"
},
dest: "dist/<%= files.dist %>"
},
dist_min: {
src: "dist/minified/**/*",
strip: /^dist/,
dest: "dist/<%= files.dist %>/ui"
},
dist_css_min: {
src: "dist/themes/base/minified/*.css",
strip: /^dist/,
dest: "dist/<%= files.dist %>"
},
dist_units_images: {
src: "themes/base/images/*",
strip: /^themes\/base\//,
dest: "dist/"
},
dist_min_images: {
src: "themes/base/images/*",
strip: /^themes\/base\//,
dest: "dist/<%= files.dist %>/themes/base/minified"
},
cdn: {
src: [
"AUTHORS.txt",
"MIT-LICENSE.txt",
"ui/*.js",
"package.json"
],
renames: {
"dist/jquery-ui.js": "jquery-ui.js",
"dist/jquery-ui.min.js": "jquery-ui.min.js",
"dist/i18n/jquery-ui-i18n.js": "i18n/jquery-ui-i18n.js",
"dist/i18n/jquery-ui-i18n.min.js": "i18n/jquery-ui-i18n.min.js"
},
dest: "dist/<%= files.cdn %>"
},
cdn_i18n: {
src: "ui/i18n/jquery.ui.datepicker-*.js",
strip: "ui/",
dest: "dist/<%= files.cdn %>"
},
cdn_i18n_min: {
src: "dist/minified/i18n/jquery.ui.datepicker-*.js",
strip: "dist/minified",
dest: "dist/<%= files.cdn %>"
},
cdn_min: {
src: "dist/minified/*.js",
strip: /^dist\/minified/,
dest: "dist/<%= files.cdn %>/ui"
},
cdn_themes: {
src: "dist/<%= files.themes %>/themes/**/*",
strip: "dist/<%= files.themes %>",
dest: "dist/<%= files.cdn %>"
},
themes: {
src: [
"AUTHORS.txt",
"MIT-LICENSE.txt",
"package.json"
],
dest: "dist/<%= files.themes %>"
}
},
zip: {
dist: {
src: "<%= files.dist %>",
dest: "<%= files.dist %>.zip"
},
cdn: {
src: "<%= files.cdn %>",
dest: "<%= files.cdn %>.zip"
},
themes: {
src: "<%= files.themes %>",
dest: "<%= files.themes %>.zip"
}
},
md5: {
dist: {
src: "dist/<%= files.dist %>",
dest: "dist/<%= files.dist %>/MANIFEST"
},
cdn: {
src: "dist/<%= files.cdn %>",
dest: "dist/<%= files.cdn %>/MANIFEST"
},
themes: {
src: "dist/<%= files.themes %>",
dest: "dist/<%= files.themes %>/MANIFEST"
}
},
qunit: {
files: expandFiles( "tests/unit/**/*.html" ).filter(function( file ) {
// disabling everything that doesn't (quite) work with PhantomJS for now
// TODO except for all|index|test, try to include more as we go
return !( /(all|index|test|dialog|dialog_deprecated|tabs|tooltip)\.html$/ ).test( file );
})
},
jshint: {
ui: {
options: {
jshintrc: "ui/.jshintrc"
},
files: {
src: "ui/*.js"
}
},
grunt: {
options: {
jshintrc: ".jshintrc"
},
files: {
src: [ "Gruntfile.js", "build/**/*.js" ]
}
},
tests: {
options: {
jshintrc: "tests/.jshintrc"
},
files: {
src: "tests/unit/**/*.js"
}
}
},
csslint: {
base_theme: {
src: "themes/base/*.css",
options: {
"adjoining-classes": false,
"box-model": false,
"compatible-vendor-prefixes": false,
"duplicate-background-images": false,
"import": false,
"important": false,
"outline-none": false,
"overqualified-elements": false,
"text-indent": false
}
}
}
});
grunt.registerTask( "default", [ "lint", "test" ] );
grunt.registerTask( "lint", [ "jshint", "csslint", "htmllint" ] );
grunt.registerTask( "test", [ "qunit" ] );
grunt.registerTask( "sizer", [ "concat:ui", "uglify:main", "compare_size:all" ] );
grunt.registerTask( "sizer_all", [ "concat:ui", "uglify", "compare_size" ] );
grunt.registerTask( "build", [ "concat", "uglify", "cssmin", "copy:dist_units_images" ] );
grunt.registerTask( "release", "clean build copy:dist copy:dist_min copy:dist_min_images copy:dist_css_min md5:dist zip:dist".split( " " ) );
grunt.registerTask( "release_themes", "release generate_themes copy:themes md5:themes zip:themes".split( " " ) );
grunt.registerTask( "release_cdn", "release_themes copy:cdn copy:cdn_min copy:cdn_i18n copy:cdn_i18n_min copy:cdn_themes md5:cdn zip:cdn".split( " " ) );
};

View File

@ -0,0 +1,26 @@
Copyright 2013 jQuery Foundation and other contributors,
http://jqueryui.com/
This software consists of voluntary contributions made by many
individuals (AUTHORS.txt, http://jqueryui.com/about) For exact
contribution history, see the revision history and logs, available
at http://jquery-ui.googlecode.com/svn/
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View File

@ -0,0 +1,99 @@
[jQuery UI](http://jqueryui.com/) - Interactions and Widgets for the web
================================
jQuery UI provides interactions like Drag and Drop and widgets like Autocomplete, Tabs and Slider and makes these as easy to use as jQuery itself.
If you want to use jQuery UI, go to [jqueryui.com](http://jqueryui.com) to get started. Or visit the [Using jQuery UI Forum](http://forum.jquery.com/using-jquery-ui) for discussions and questions.
If you are interested in helping develop jQuery UI, you are in the right place.
To discuss development with team members and the community, visit the [Developing jQuery UI Forum](http://forum.jquery.com/developing-jquery-ui) or in #jquery on irc.freednode.net.
For contributors
---
If you want to help and provide a patch for a bugfix or new feature, please take
a few minutes and look at [our Getting Involved guide](http://wiki.jqueryui.com/w/page/35263114/Getting-Involved).
In particular check out the [Coding standards](http://wiki.jqueryui.com/w/page/12137737/Coding-standards)
and [Commit Message Style Guide](http://wiki.jqueryui.com/w/page/25941597/Commit-Message-Style-Guide).
In general, fork the project, create a branch for a specific change and send a
pull request for that branch. Don't mix unrelated changes. You can use the commit
message as the description for the pull request.
Running the Unit Tests
---
Run the unit tests with a local server that supports PHP. No database is required. Pre-configured php local servers are available for Windows and Mac. Here are some options:
- Windows: [WAMP download](http://www.wampserver.com/en/)
- Mac: [MAMP download](http://www.mamp.info/en/index.html)
- Linux: [Setting up LAMP](https://www.linux.com/learn/tutorials/288158-easy-lamp-server-installation)
- [Mongoose (most platforms)](http://code.google.com/p/mongoose/)
Building jQuery UI
---
jQuery UI uses the [grunt](http://github.com/cowboy/grunt) build system. Building jQuery UI requires node.js and a command line zip program.
Install grunt.
`npm install grunt -g`
Clone the jQuery UI git repo.
`git clone git://github.com/jquery/jquery-ui.git`
`cd jquery-ui`
Install node modules.
`npm install`
Run grunt.
`grunt build`
There are many other tasks that can be run through grunt. For a list of all tasks:
`grunt --help`
For committers
---
When looking at pull requests, first check for [proper commit messages](http://wiki.jqueryui.com/w/page/12137724/Bug-Fixing-Guide).
Do not merge pull requests directly through GitHub's interface.
Most pull requests are a single commit; cherry-picking will avoid creating a merge commit.
It's also common for contributors to make minor fixes in an additional one or two commits.
These should be squashed before landing in master.
**Make sure the author has a valid name and email address associated with the commit.**
Fetch the remote first:
git fetch [their-fork.git] [their-branch]
Then cherry-pick the commit(s):
git cherry-pick [sha-of-commit]
If you need to edit the commit message:
git cherry-pick -e [sha-of-commit]
If you need to edit the changes:
git cherry-pick -n [sha-of-commit]
# make changes
git commit --author="[author-name-and-email]"
If it should go to the stable brach, cherry-pick it to stable:
git checkout 1-8-stable
git cherry-pick -x [sha-of-commit-from-master]
*NOTE: Do not cherry-pick into 1-8-stable until you have pushed the commit from master upstream.*

View File

@ -0,0 +1,50 @@
<!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.9.1.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({
collapsible: true
});
});
</script>
</head>
<body>
<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 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>
</body>
</html>

View File

@ -0,0 +1,64 @@
<!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.9.1.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>
<script src="../../ui/jquery.ui.button.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
var icons = {
header: "ui-icon-circle-arrow-e",
activeHeader: "ui-icon-circle-arrow-s"
};
$( "#accordion" ).accordion({
icons: icons
});
$( "#toggle" ).button().click(function() {
if ( $( "#accordion" ).accordion( "option", "icons" ) ) {
$( "#accordion" ).accordion( "option", "icons", null );
} else {
$( "#accordion" ).accordion( "option", "icons", icons );
}
});
});
</script>
</head>
<body>
<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>
<button id="toggle">Toggle icons</button>
<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>
</body>
</html>

View File

@ -0,0 +1,80 @@
<!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.9.1.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();
});
</script>
</head>
<body>
<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 class="demo-description">
<p>
Click headers to expand/collapse content that is broken into logical sections, much like tabs.
Optionally, toggle sections open/closed on mouseover.
</p>
<p>
The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is
usable without JavaScript.
</p>
</div>
</body>
</html>

View File

@ -0,0 +1,72 @@
<!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.9.1.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({
heightStyle: "fill"
});
});
$(function() {
$( "#accordion-resizer" ).resizable({
minHeight: 140,
minWidth: 200,
resize: function() {
$( "#accordion" ).accordion( "refresh" );
}
});
});
</script>
</head>
<body>
<h3 class="docs">Resize the outer container:</h3>
<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>
<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>
</body>
</html>

View File

@ -0,0 +1,148 @@
<!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.9.1.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({
event: "click hoverintent"
});
});
/*
* hoverIntent | Copyright 2011 Brian Cherne
* http://cherne.net/brian/resources/jquery.hoverIntent.html
* modified by the jQuery UI team
*/
$.event.special.hoverintent = {
setup: function() {
$( this ).bind( "mouseover", jQuery.event.special.hoverintent.handler );
},
teardown: function() {
$( this ).unbind( "mouseover", jQuery.event.special.hoverintent.handler );
},
handler: function( event ) {
var currentX, currentY, timeout,
args = arguments,
target = $( event.target ),
previousX = event.pageX,
previousY = event.pageY;
function track( event ) {
currentX = event.pageX;
currentY = event.pageY;
};
function clear() {
target
.unbind( "mousemove", track )
.unbind( "mouseout", clear );
clearTimeout( timeout );
}
function handler() {
var prop,
orig = event;
if ( ( Math.abs( previousX - currentX ) +
Math.abs( previousY - currentY ) ) < 7 ) {
clear();
event = $.Event( "hoverintent" );
for ( prop in orig ) {
if ( !( prop in event ) ) {
event[ prop ] = orig[ prop ];
}
}
// Prevent accessing the original event since the new event
// is fired asynchronously and the old event is no longer
// usable (#6028)
delete event.originalEvent;
target.trigger( event );
} else {
previousX = currentX;
previousY = currentY;
timeout = setTimeout( handler, 100 );
}
}
timeout = setTimeout( handler, 100 );
target.bind({
mousemove: track,
mouseout: clear
});
}
};
</script>
</head>
<body>
<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 class="demo-description">
<p>
Click headers to expand/collapse content that is broken into logical sections, much like tabs.
Optionally, toggle sections open/closed on mouseover.
</p>
<p>
The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is
usable without JavaScript.
</p>
</div>
</body>
</html>

View File

@ -0,0 +1,20 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Accordion Demos</title>
</head>
<body>
<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>

View File

@ -0,0 +1,50 @@
<!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.9.1.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({
heightStyle: "content"
});
});
</script>
</head>
<body>
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>Mauris mauris ante, blandit et, ultrices a, susceros. 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</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>
</div>
<div class="demo-description">
<p>Setting <code>heightStyle: "content"</code> allows the accordion panels to keep their native height.</p>
</div>
</body>
</html>

View File

@ -0,0 +1,74 @@
<!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.9.1.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.sortable.js"></script>
<script src="../../ui/jquery.ui.accordion.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
/* IE has layout issues when sorting (see #5413) */
.group { zoom: 1 }
</style>
<script>
$(function() {
$( "#accordion" )
.accordion({
header: "> div > h3"
})
.sortable({
axis: "y",
handle: "h3",
stop: function( event, ui ) {
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children( "h3" ).triggerHandler( "focusout" );
}
});
});
</script>
</head>
<body>
<div id="accordion">
<div class="group">
<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>
</div>
<div class="group">
<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>
</div>
<div class="group">
<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>
</div>
<div class="group">
<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>
<div class="demo-description">
<p>Drag the header to re-order panels.</p>
</div>
</body>
</html>

View File

@ -0,0 +1,67 @@
<!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.9.1.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 src="../../ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.ui-autocomplete-category {
font-weight: bold;
padding: .2em .4em;
margin: .8em 0 .2em;
line-height: 1.5;
}
</style>
<script>
$.widget( "custom.catcomplete", $.ui.autocomplete, {
_renderMenu: function( ul, items ) {
var that = this,
currentCategory = "";
$.each( items, function( index, item ) {
if ( item.category != currentCategory ) {
ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
currentCategory = item.category;
}
that._renderItemData( ul, item );
});
}
});
</script>
<script>
$(function() {
var data = [
{ label: "anders", category: "" },
{ label: "andreas", category: "" },
{ label: "antal", category: "" },
{ label: "annhhx10", category: "Products" },
{ label: "annk K12", category: "Products" },
{ label: "annttop C13", category: "Products" },
{ label: "anders andersson", category: "People" },
{ label: "andreas andersson", category: "People" },
{ label: "andreas johnson", category: "People" }
];
$( "#search" ).catcomplete({
delay: 0,
source: data
});
});
</script>
</head>
<body>
<label for="search">Search: </label>
<input id="search">
<div class="demo-description">
<p>A categorized search result. Try typing "a" or "n".</p>
</div>
</body>
</html>

View File

@ -0,0 +1,213 @@
<!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.9.1.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>
<script src="../../ui/jquery.ui.position.js"></script>
<script src="../../ui/jquery.ui.menu.js"></script>
<script src="../../ui/jquery.ui.autocomplete.js"></script>
<script src="../../ui/jquery.ui.tooltip.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.custom-combobox {
position: relative;
display: inline-block;
}
.custom-combobox-toggle {
position: absolute;
top: 0;
bottom: 0;
margin-left: -1px;
padding: 0;
/* support: IE7 */
*height: 1.7em;
*top: 0.1em;
}
.custom-combobox-input {
margin: 0;
padding: 0.3em;
}
</style>
<script>
(function( $ ) {
$.widget( "custom.combobox", {
_create: function() {
this.wrapper = $( "<span>" )
.addClass( "custom-combobox" )
.insertAfter( this.element );
this.element.hide();
this._createAutocomplete();
this._createShowAllButton();
},
_createAutocomplete: function() {
var selected = this.element.children( ":selected" ),
value = selected.val() ? selected.text() : "";
this.input = $( "<input>" )
.appendTo( this.wrapper )
.val( value )
.attr( "title", "" )
.addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
.autocomplete({
delay: 0,
minLength: 0,
source: $.proxy( this, "_source" )
})
.tooltip({
tooltipClass: "ui-state-highlight"
});
this._on( this.input, {
autocompleteselect: function( event, ui ) {
ui.item.option.selected = true;
this._trigger( "select", event, {
item: ui.item.option
});
},
autocompletechange: "_removeIfInvalid"
});
},
_createShowAllButton: function() {
var input = this.input,
wasOpen = false;
$( "<a>" )
.attr( "tabIndex", -1 )
.attr( "title", "Show All Items" )
.tooltip()
.appendTo( this.wrapper )
.button({
icons: {
primary: "ui-icon-triangle-1-s"
},
text: false
})
.removeClass( "ui-corner-all" )
.addClass( "custom-combobox-toggle ui-corner-right" )
.mousedown(function() {
wasOpen = input.autocomplete( "widget" ).is( ":visible" );
})
.click(function() {
input.focus();
// Close if already visible
if ( wasOpen ) {
return;
}
// Pass empty string as value to search for, displaying all results
input.autocomplete( "search", "" );
});
},
_source: function( request, response ) {
var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
response( this.element.children( "option" ).map(function() {
var text = $( this ).text();
if ( this.value && ( !request.term || matcher.test(text) ) )
return {
label: text,
value: text,
option: this
};
}) );
},
_removeIfInvalid: function( event, ui ) {
// Selected an item, nothing to do
if ( ui.item ) {
return;
}
// Search for a match (case-insensitive)
var value = this.input.val(),
valueLowerCase = value.toLowerCase(),
valid = false;
this.element.children( "option" ).each(function() {
if ( $( this ).text().toLowerCase() === valueLowerCase ) {
this.selected = valid = true;
return false;
}
});
// Found a match, nothing to do
if ( valid ) {
return;
}
// Remove invalid value
this.input
.val( "" )
.attr( "title", value + " didn't match any item" )
.tooltip( "open" );
this.element.val( "" );
this._delay(function() {
this.input.tooltip( "close" ).attr( "title", "" );
}, 2500 );
this.input.data( "ui-autocomplete" ).term = "";
},
_destroy: function() {
this.wrapper.remove();
this.element.show();
}
});
})( jQuery );
$(function() {
$( "#combobox" ).combobox();
$( "#toggle" ).click(function() {
$( "#combobox" ).toggle();
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label>Your preferred programming language: </label>
<select id="combobox">
<option value="">Select one...</option>
<option value="ActionScript">ActionScript</option>
<option value="AppleScript">AppleScript</option>
<option value="Asp">Asp</option>
<option value="BASIC">BASIC</option>
<option value="C">C</option>
<option value="C++">C++</option>
<option value="Clojure">Clojure</option>
<option value="COBOL">COBOL</option>
<option value="ColdFusion">ColdFusion</option>
<option value="Erlang">Erlang</option>
<option value="Fortran">Fortran</option>
<option value="Groovy">Groovy</option>
<option value="Haskell">Haskell</option>
<option value="Java">Java</option>
<option value="JavaScript">JavaScript</option>
<option value="Lisp">Lisp</option>
<option value="Perl">Perl</option>
<option value="PHP">PHP</option>
<option value="Python">Python</option>
<option value="Ruby">Ruby</option>
<option value="Scala">Scala</option>
<option value="Scheme">Scheme</option>
</select>
</div>
<button id="toggle">Show underlying select</button>
<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>
</body>
</html>

View File

@ -0,0 +1,90 @@
<!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.9.1.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 src="../../ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
#project-label {
display: block;
font-weight: bold;
margin-bottom: 1em;
}
#project-icon {
float: left;
height: 32px;
width: 32px;
}
#project-description {
margin: 0;
padding: 0;
}
</style>
<script>
$(function() {
var projects = [
{
value: "jquery",
label: "jQuery",
desc: "the write less, do more, JavaScript library",
icon: "jquery_32x32.png"
},
{
value: "jquery-ui",
label: "jQuery UI",
desc: "the official user interface library for jQuery",
icon: "jqueryui_32x32.png"
},
{
value: "sizzlejs",
label: "Sizzle JS",
desc: "a pure-JavaScript CSS selector engine",
icon: "sizzlejs_32x32.png"
}
];
$( "#project" ).autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
$( "#project" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( "#project" ).val( ui.item.label );
$( "#project-id" ).val( ui.item.value );
$( "#project-description" ).html( ui.item.desc );
$( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
return false;
}
})
.data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul );
};
});
</script>
</head>
<body>
<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>
</body>
</html>

View File

@ -0,0 +1,58 @@
<!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.9.1.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 src="../../ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
<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>
</body>
</html>

View File

@ -0,0 +1,56 @@
<!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.9.1.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 src="../../ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
var names = [ "Jörn Zaefferer", "Scott González", "John Resig" ];
var accentMap = {
"á": "a",
"ö": "o"
};
var normalize = function( term ) {
var ret = "";
for ( var i = 0; i < term.length; i++ ) {
ret += accentMap[ term.charAt(i) ] || term.charAt(i);
}
return ret;
};
$( "#developer" ).autocomplete({
source: function( request, response ) {
var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
response( $.grep( names, function( value ) {
value = value.label || value.value || value;
return matcher.test( value ) || matcher.test( normalize( value ) );
}) );
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<form>
<label for="developer">Developer: </label>
<input id="developer">
</form>
</div>
<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>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 999 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 95 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -0,0 +1,25 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete Demos</title>
</head>
<body>
<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>

View File

@ -0,0 +1,114 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<geonames style="MEDIUM">
<totalResultsCount>6987</totalResultsCount>
<geoname>
<name>London</name>
<lat>51.5084152563931</lat>
<lng>-0.125532746315002</lng>
<geonameId>2643743</geonameId>
<countryCode>GB</countryCode>
<countryName>United Kingdom</countryName>
<fcl>P</fcl>
<fcode>PPLC</fcode>
</geoname>
<geoname>
<name>London</name>
<lat>42.983389283</lat>
<lng>-81.233042387</lng>
<geonameId>6058560</geonameId>
<countryCode>CA</countryCode>
<countryName>Canada</countryName>
<fcl>P</fcl>
<fcode>PPL</fcode>
</geoname>
<geoname>
<name>East London</name>
<lat>-33.0152850934643</lat>
<lng>27.9116249084473</lng>
<geonameId>1006984</geonameId>
<countryCode>ZA</countryCode>
<countryName>South Africa</countryName>
<fcl>P</fcl>
<fcode>PPL</fcode>
</geoname>
<geoname>
<name>City</name>
<lat>51.5133363996235</lat>
<lng>-0.0890064239501953</lng>
<geonameId>2643744</geonameId>
<countryCode>GB</countryCode>
<countryName>United Kingdom</countryName>
<fcl>A</fcl>
<fcode>ADM2</fcode>
</geoname>
<geoname>
<name>London</name>
<lat>37.1289771</lat>
<lng>-84.0832646</lng>
<geonameId>4298960</geonameId>
<countryCode>US</countryCode>
<countryName>United States</countryName>
<fcl>P</fcl>
<fcode>PPL</fcode>
</geoname>
<geoname>
<name>The Tower of London</name>
<lat>51.5082349601834</lat>
<lng>-0.0763034820556641</lng>
<geonameId>6286786</geonameId>
<countryCode>GB</countryCode>
<countryName>United Kingdom</countryName>
<fcl>S</fcl>
<fcode>CSTL</fcode>
</geoname>
<geoname>
<name>London Reefs</name>
<lat>8.85</lat>
<lng>112.5333333</lng>
<geonameId>1879967</geonameId>
<countryCode> </countryCode>
<countryName> </countryName>
<fcl>U</fcl>
<fcode>RFSU</fcode>
</geoname>
<geoname>
<name>Greater London</name>
<lat>51.5</lat>
<lng>-0.1666667</lng>
<geonameId>2648110</geonameId>
<countryCode>GB</countryCode>
<countryName>United Kingdom</countryName>
<fcl>A</fcl>
<fcode>ADM2</fcode>
</geoname>
<geoname>
<name>London</name>
<lat>46.1666667</lat>
<lng>6.0166667</lng>
<geonameId>2661811</geonameId>
<countryCode>CH</countryCode>
<countryName>Switzerland</countryName>
<fcl>H</fcl>
<fcode>STM</fcode>
</geoname>
<geoname>
<name>London Borough of Islington</name>
<lat>51.5333333</lat>
<lng>-0.1333333</lng>
<geonameId>3333156</geonameId>
<countryCode>GB</countryCode>
<countryName>United Kingdom</countryName>
<fcl>A</fcl>
<fcode>ADM2</fcode>
</geoname>
</geonames>

View File

@ -0,0 +1,71 @@
<!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.9.1.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 src="../../ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 100px;
}
</style>
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags">
</div>
<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>
</body>
</html>

View File

@ -0,0 +1,80 @@
<!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.9.1.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 src="../../ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.ui-autocomplete-loading {
background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
}
</style>
<script>
$(function() {
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#birds" )
// don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).data( "ui-autocomplete" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
source: function( request, response ) {
$.getJSON( "search.php", {
term: extractLast( request.term )
}, response );
},
search: function() {
// custom minLength
var term = extractLast( this.value );
if ( term.length < 2 ) {
return false;
}
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" );
this.value = terms.join( ", " );
return false;
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="birds">Birds: </label>
<input id="birds" size="50">
</div>
<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>
</body>
</html>

View File

@ -0,0 +1,93 @@
<!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.9.1.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 src="../../ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$( "#tags" )
// don't navigate away from the field on tab when selecting an item
.bind( "keydown", function( event ) {
if ( event.keyCode === $.ui.keyCode.TAB &&
$( this ).data( "ui-autocomplete" ).menu.active ) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function( request, response ) {
// delegate back to autocomplete, but extract the last term
response( $.ui.autocomplete.filter(
availableTags, extractLast( request.term ) ) );
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function( event, ui ) {
var terms = split( this.value );
// remove the current input
terms.pop();
// add the selected item
terms.push( ui.item.value );
// add placeholder to get the comma-and-space at the end
terms.push( "" );
this.value = terms.join( ", " );
return false;
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tag programming languages: </label>
<input id="tags" size="50">
</div>
<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>
</body>
</html>

View File

@ -0,0 +1,82 @@
<!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.9.1.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 src="../../ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.ui-autocomplete-loading {
background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
}
#city { width: 25em; }
</style>
<script>
$(function() {
function log( message ) {
$( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$( "#city" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "http://ws.geonames.org/searchJSON",
dataType: "jsonp",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
name_startsWith: request.term
},
success: function( data ) {
response( $.map( data.geonames, function( item ) {
return {
label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
value: item.name
}
}));
}
});
},
minLength: 2,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.label :
"Nothing selected, input was " + this.value);
},
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="city">Your city: </label>
<input id="city">
Powered by <a href="http://geonames.org">geonames.org</a>
</div>
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
Result:
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
<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>
</body>
</html>

View File

@ -0,0 +1,52 @@
<!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.9.1.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 src="../../ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.ui-autocomplete-loading {
background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
}
</style>
<script>
$(function() {
var cache = {};
$( "#birds" ).autocomplete({
minLength: 2,
source: function( request, response ) {
var term = request.term;
if ( term in cache ) {
response( cache[ term ] );
return;
}
$.getJSON( "search.php", request, function( data, status, xhr ) {
cache[ term ] = data;
response( data );
});
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="birds">Birds: </label>
<input id="birds">
</div>
<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>
</body>
</html>

View File

@ -0,0 +1,55 @@
<!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.9.1.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 src="../../ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.ui-autocomplete-loading {
background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
}
</style>
<script>
$(function() {
function log( message ) {
$( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$( "#birds" ).autocomplete({
source: "search.php",
minLength: 2,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.value + " aka " + ui.item.id :
"Nothing selected, input was " + this.value );
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="birds">Birds: </label>
<input id="birds">
</div>
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
Result:
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
<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>
</body>
</html>

View File

@ -0,0 +1,590 @@
<?php
sleep( 3 );
// no term passed - just exit early with no response
if (empty($_GET['term'])) exit ;
$q = strtolower($_GET["term"]);
// remove slashes if they were magically added
if (get_magic_quotes_gpc()) $q = stripslashes($q);
$items = array(
"Great Bittern"=>"Botaurus stellaris",
"Little Grebe"=>"Tachybaptus ruficollis",
"Black-necked Grebe"=>"Podiceps nigricollis",
"Little Bittern"=>"Ixobrychus minutus",
"Black-crowned Night Heron"=>"Nycticorax nycticorax",
"Purple Heron"=>"Ardea purpurea",
"White Stork"=>"Ciconia ciconia",
"Spoonbill"=>"Platalea leucorodia",
"Red-crested Pochard"=>"Netta rufina",
"Common Eider"=>"Somateria mollissima",
"Red Kite"=>"Milvus milvus",
"Hen Harrier"=>"Circus cyaneus",
"Montagu`s Harrier"=>"Circus pygargus",
"Black Grouse"=>"Tetrao tetrix",
"Grey Partridge"=>"Perdix perdix",
"Spotted Crake"=>"Porzana porzana",
"Corncrake"=>"Crex crex",
"Common Crane"=>"Grus grus",
"Avocet"=>"Recurvirostra avosetta",
"Stone Curlew"=>"Burhinus oedicnemus",
"Common Ringed Plover"=>"Charadrius hiaticula",
"Kentish Plover"=>"Charadrius alexandrinus",
"Ruff"=>"Philomachus pugnax",
"Common Snipe"=>"Gallinago gallinago",
"Black-tailed Godwit"=>"Limosa limosa",
"Common Redshank"=>"Tringa totanus",
"Sandwich Tern"=>"Sterna sandvicensis",
"Common Tern"=>"Sterna hirundo",
"Arctic Tern"=>"Sterna paradisaea",
"Little Tern"=>"Sternula albifrons",
"Black Tern"=>"Chlidonias niger",
"Barn Owl"=>"Tyto alba",
"Little Owl"=>"Athene noctua",
"Short-eared Owl"=>"Asio flammeus",
"European Nightjar"=>"Caprimulgus europaeus",
"Common Kingfisher"=>"Alcedo atthis",
"Eurasian Hoopoe"=>"Upupa epops",
"Eurasian Wryneck"=>"Jynx torquilla",
"European Green Woodpecker"=>"Picus viridis",
"Crested Lark"=>"Galerida cristata",
"White-headed Duck"=>"Oxyura leucocephala",
"Pale-bellied Brent Goose"=>"Branta hrota",
"Tawny Pipit"=>"Anthus campestris",
"Whinchat"=>"Saxicola rubetra",
"European Stonechat"=>"Saxicola rubicola",
"Northern Wheatear"=>"Oenanthe oenanthe",
"Savi`s Warbler"=>"Locustella luscinioides",
"Sedge Warbler"=>"Acrocephalus schoenobaenus",
"Great Reed Warbler"=>"Acrocephalus arundinaceus",
"Bearded Reedling"=>"Panurus biarmicus",
"Red-backed Shrike"=>"Lanius collurio",
"Great Grey Shrike"=>"Lanius excubitor",
"Woodchat Shrike"=>"Lanius senator",
"Common Raven"=>"Corvus corax",
"Yellowhammer"=>"Emberiza citrinella",
"Ortolan Bunting"=>"Emberiza hortulana",
"Corn Bunting"=>"Emberiza calandra",
"Great Cormorant"=>"Phalacrocorax carbo",
"Hawfinch"=>"Coccothraustes coccothraustes",
"Common Shelduck"=>"Tadorna tadorna",
"Bluethroat"=>"Luscinia svecica",
"Grey Heron"=>"Ardea cinerea",
"Barn Swallow"=>"Hirundo rustica",
"Hooded Crow"=>"Corvus cornix",
"Dunlin"=>"Calidris alpina",
"Eurasian Pied Flycatcher"=>"Ficedula hypoleuca",
"Eurasian Nuthatch"=>"Sitta europaea",
"Short-toed Tree Creeper"=>"Certhia brachydactyla",
"Wood Lark"=>"Lullula arborea",
"Tree Pipit"=>"Anthus trivialis",
"Eurasian Hobby"=>"Falco subbuteo",
"Marsh Warbler"=>"Acrocephalus palustris",
"Wood Sandpiper"=>"Tringa glareola",
"Tawny Owl"=>"Strix aluco",
"Lesser Whitethroat"=>"Sylvia curruca",
"Barnacle Goose"=>"Branta leucopsis",
"Common Goldeneye"=>"Bucephala clangula",
"Western Marsh Harrier"=>"Circus aeruginosus",
"Common Buzzard"=>"Buteo buteo",
"Sanderling"=>"Calidris alba",
"Little Gull"=>"Larus minutus",
"Eurasian Magpie"=>"Pica pica",
"Willow Warbler"=>"Phylloscopus trochilus",
"Wood Warbler"=>"Phylloscopus sibilatrix",
"Great Crested Grebe"=>"Podiceps cristatus",
"Eurasian Jay"=>"Garrulus glandarius",
"Common Redstart"=>"Phoenicurus phoenicurus",
"Blue-headed Wagtail"=>"Motacilla flava",
"Common Swift"=>"Apus apus",
"Marsh Tit"=>"Poecile palustris",
"Goldcrest"=>"Regulus regulus",
"European Golden Plover"=>"Pluvialis apricaria",
"Eurasian Bullfinch"=>"Pyrrhula pyrrhula",
"Common Whitethroat"=>"Sylvia communis",
"Meadow Pipit"=>"Anthus pratensis",
"Greylag Goose"=>"Anser anser",
"Spotted Flycatcher"=>"Muscicapa striata",
"European Greenfinch"=>"Carduelis chloris",
"Common Greenshank"=>"Tringa nebularia",
"Great Spotted Woodpecker"=>"Dendrocopos major",
"Greater Canada Goose"=>"Branta canadensis",
"Mistle Thrush"=>"Turdus viscivorus",
"Great Black-backed Gull"=>"Larus marinus",
"Goosander"=>"Mergus merganser",
"Great Egret"=>"Casmerodius albus",
"Northern Goshawk"=>"Accipiter gentilis",
"Dunnock"=>"Prunella modularis",
"Stock Dove"=>"Columba oenas",
"Common Wood Pigeon"=>"Columba palumbus",
"Eurasian Woodcock"=>"Scolopax rusticola",
"House Sparrow"=>"Passer domesticus",
"Common House Martin"=>"Delichon urbicum",
"Red Knot"=>"Calidris canutus",
"Western Jackdaw"=>"Corvus monedula",
"Brambling"=>"Fringilla montifringilla",
"Northern Lapwing"=>"Vanellus vanellus",
"European Reed Warbler"=>"Acrocephalus scirpaceus",
"Lesser Black-backed Gull"=>"Larus fuscus",
"Little Egret"=>"Egretta garzetta",
"Little Stint"=>"Calidris minuta",
"Common Linnet"=>"Carduelis cannabina",
"Mute Swan"=>"Cygnus olor",
"Common Cuckoo"=>"Cuculus canorus",
"Black-headed Gull"=>"Larus ridibundus",
"Greater White-fronted Goose"=>"Anser albifrons",
"Great Tit"=>"Parus major",
"Redwing"=>"Turdus iliacus",
"Gadwall"=>"Anas strepera",
"Fieldfare"=>"Turdus pilaris",
"Tufted Duck"=>"Aythya fuligula",
"Crested Tit"=>"Lophophanes cristatus",
"Willow Tit"=>"Poecile montanus",
"Eurasian Coot"=>"Fulica atra",
"Common Blackbird"=>"Turdus merula",
"Smew"=>"Mergus albellus",
"Common Sandpiper"=>"Actitis hypoleucos",
"Sand Martin"=>"Riparia riparia",
"Purple Sandpiper"=>"Calidris maritima",
"Northern Pintail"=>"Anas acuta",
"Blue Tit"=>"Cyanistes caeruleus",
"European Goldfinch"=>"Carduelis carduelis",
"Eurasian Whimbrel"=>"Numenius phaeopus",
"Common Reed Bunting"=>"Emberiza schoeniclus",
"Eurasian Tree Sparrow"=>"Passer montanus",
"Rook"=>"Corvus frugilegus",
"European Robin"=>"Erithacus rubecula",
"Bar-tailed Godwit"=>"Limosa lapponica",
"Dark-bellied Brent Goose"=>"Branta bernicla",
"Eurasian Oystercatcher"=>"Haematopus ostralegus",
"Eurasian Siskin"=>"Carduelis spinus",
"Northern Shoveler"=>"Anas clypeata",
"Eurasian Wigeon"=>"Anas penelope",
"Eurasian Sparrow Hawk"=>"Accipiter nisus",
"Icterine Warbler"=>"Hippolais icterina",
"Common Starling"=>"Sturnus vulgaris",
"Long-tailed Tit"=>"Aegithalos caudatus",
"Ruddy Turnstone"=>"Arenaria interpres",
"Mew Gull"=>"Larus canus",
"Common Pochard"=>"Aythya ferina",
"Common Chiffchaff"=>"Phylloscopus collybita",
"Greater Scaup"=>"Aythya marila",
"Common Kestrel"=>"Falco tinnunculus",
"Garden Warbler"=>"Sylvia borin",
"Eurasian Collared Dove"=>"Streptopelia decaocto",
"Eurasian Skylark"=>"Alauda arvensis",
"Common Chaffinch"=>"Fringilla coelebs",
"Common Moorhen"=>"Gallinula chloropus",
"Water Pipit"=>"Anthus spinoletta",
"Mallard"=>"Anas platyrhynchos",
"Winter Wren"=>"Troglodytes troglodytes",
"Common Teal"=>"Anas crecca",
"Green Sandpiper"=>"Tringa ochropus",
"White Wagtail"=>"Motacilla alba",
"Eurasian Curlew"=>"Numenius arquata",
"Song Thrush"=>"Turdus philomelos",
"European Herring Gull"=>"Larus argentatus",
"Grey Plover"=>"Pluvialis squatarola",
"Carrion Crow"=>"Corvus corone",
"Coal Tit"=>"Periparus ater",
"Spotted Redshank"=>"Tringa erythropus",
"Blackcap"=>"Sylvia atricapilla",
"Egyptian Vulture"=>"Neophron percnopterus",
"Razorbill"=>"Alca torda",
"Alpine Swift"=>"Apus melba",
"Long-legged Buzzard"=>"Buteo rufinus",
"Audouin`s Gull"=>"Larus audouinii",
"Balearic Shearwater"=>"Puffinus mauretanicus",
"Upland Sandpiper"=>"Bartramia longicauda",
"Greater Spotted Eagle"=>"Aquila clanga",
"Ring Ouzel"=>"Turdus torquatus",
"Yellow-browed Warbler"=>"Phylloscopus inornatus",
"Blue Rock Thrush"=>"Monticola solitarius",
"Buff-breasted Sandpiper"=>"Tryngites subruficollis",
"Jack Snipe"=>"Lymnocryptes minimus",
"White-rumped Sandpiper"=>"Calidris fuscicollis",
"Ruddy Shelduck"=>"Tadorna ferruginea",
"Cetti's Warbler"=>"Cettia cetti",
"Citrine Wagtail"=>"Motacilla citreola",
"Roseate Tern"=>"Sterna dougallii",
"Black-legged Kittiwake"=>"Rissa tridactyla",
"Pygmy Cormorant"=>"Phalacrocorax pygmeus",
"Booted Eagle"=>"Aquila pennata",
"Lesser White-fronted Goose"=>"Anser erythropus",
"Little Bunting"=>"Emberiza pusilla",
"Eleonora's Falcon"=>"Falco eleonorae",
"European Serin"=>"Serinus serinus",
"Twite"=>"Carduelis flavirostris",
"Yellow-legged Gull"=>"Larus michahellis",
"Gyr Falcon"=>"Falco rusticolus",
"Greenish Warbler"=>"Phylloscopus trochiloides",
"Red-necked Phalarope"=>"Phalaropus lobatus",
"Mealy Redpoll"=>"Carduelis flammea",
"Glaucous Gull"=>"Larus hyperboreus",
"Great Skua"=>"Stercorarius skua",
"Great Bustard"=>"Otis tarda",
"Velvet Scoter"=>"Melanitta fusca",
"Pine Grosbeak"=>"Pinicola enucleator",
"House Crow"=>"Corvus splendens",
"Hume`s Leaf Warbler"=>"Phylloscopus humei",
"Great Northern Loon"=>"Gavia immer",
"Long-tailed Duck"=>"Clangula hyemalis",
"Lapland Longspur"=>"Calcarius lapponicus",
"Northern Gannet"=>"Morus bassanus",
"Eastern Imperial Eagle"=>"Aquila heliaca",
"Little Auk"=>"Alle alle",
"Lesser Spotted Woodpecker"=>"Dendrocopos minor",
"Iceland Gull"=>"Larus glaucoides",
"Parasitic Jaeger"=>"Stercorarius parasiticus",
"Bewick`s Swan"=>"Cygnus bewickii",
"Little Bustard"=>"Tetrax tetrax",
"Little Crake"=>"Porzana parva",
"Baillon`s Crake"=>"Porzana pusilla",
"Long-tailed Jaeger"=>"Stercorarius longicaudus",
"King Eider"=>"Somateria spectabilis",
"Greater Short-toed Lark"=>"Calandrella brachydactyla",
"Houbara Bustard"=>"Chlamydotis undulata",
"Curlew Sandpiper"=>"Calidris ferruginea",
"Common Crossbill"=>"Loxia curvirostra",
"European Shag"=>"Phalacrocorax aristotelis",
"Horned Grebe"=>"Podiceps auritus",
"Common Quail"=>"Coturnix coturnix",
"Bearded Vulture"=>"Gypaetus barbatus",
"Lanner Falcon"=>"Falco biarmicus",
"Middle Spotted Woodpecker"=>"Dendrocopos medius",
"Pomarine Jaeger"=>"Stercorarius pomarinus",
"Red-breasted Merganser"=>"Mergus serrator",
"Eurasian Black Vulture"=>"Aegypius monachus",
"Eurasian Dotterel"=>"Charadrius morinellus",
"Common Nightingale"=>"Luscinia megarhynchos",
"Northern willow warbler"=>"Phylloscopus trochilus acredula",
"Manx Shearwater"=>"Puffinus puffinus",
"Northern Fulmar"=>"Fulmarus glacialis",
"Eurasian Eagle Owl"=>"Bubo bubo",
"Orphean Warbler"=>"Sylvia hortensis",
"Melodious Warbler"=>"Hippolais polyglotta",
"Pallas's Leaf Warbler"=>"Phylloscopus proregulus",
"Atlantic Puffin"=>"Fratercula arctica",
"Black-throated Loon"=>"Gavia arctica",
"Bohemian Waxwing"=>"Bombycilla garrulus",
"Marsh Sandpiper"=>"Tringa stagnatilis",
"Great Snipe"=>"Gallinago media",
"Squacco Heron"=>"Ardeola ralloides",
"Long-eared Owl"=>"Asio otus",
"Caspian Tern"=>"Hydroprogne caspia",
"Red-breasted Goose"=>"Branta ruficollis",
"Red-throated Loon"=>"Gavia stellata",
"Common Rosefinch"=>"Carpodacus erythrinus",
"Red-footed Falcon"=>"Falco vespertinus",
"Ross's Goose"=>"Anser rossii",
"Red Phalarope"=>"Phalaropus fulicarius",
"Pied Wagtail"=>"Motacilla yarrellii",
"Rose-coloured Starling"=>"Sturnus roseus",
"Rough-legged Buzzard"=>"Buteo lagopus",
"Saker Falcon"=>"Falco cherrug",
"European Roller"=>"Coracias garrulus",
"Short-toed Eagle"=>"Circaetus gallicus",
"Peregrine Falcon"=>"Falco peregrinus",
"Merlin"=>"Falco columbarius",
"Snow Goose"=>"Anser caerulescens",
"Snowy Owl"=>"Bubo scandiacus",
"Snow Bunting"=>"Plectrophenax nivalis",
"Common Grasshopper Warbler"=>"Locustella naevia",
"Golden Eagle"=>"Aquila chrysaetos",
"Black-winged Stilt"=>"Himantopus himantopus",
"Steppe Eagle"=>"Aquila nipalensis",
"Pallid Harrier"=>"Circus macrourus",
"European Storm-petrel"=>"Hydrobates pelagicus",
"Horned Lark"=>"Eremophila alpestris",
"Eurasian Treecreeper"=>"Certhia familiaris",
"Taiga Bean Goose"=>"Anser fabalis",
"Temminck`s Stint"=>"Calidris temminckii",
"Terek Sandpiper"=>"Xenus cinereus",
"Tundra Bean Goose"=>"Anser serrirostris",
"European Turtle Dove"=>"Streptopelia turtur",
"Leach`s Storm-petrel"=>"Oceanodroma leucorhoa",
"Eurasian Griffon Vulture"=>"Gyps fulvus",
"Paddyfield Warbler"=>"Acrocephalus agricola",
"Osprey"=>"Pandion haliaetus",
"Firecrest"=>"Regulus ignicapilla",
"Water Rail"=>"Rallus aquaticus",
"European Honey Buzzard"=>"Pernis apivorus",
"Eurasian Golden Oriole"=>"Oriolus oriolus",
"Whooper Swan"=>"Cygnus cygnus",
"Two-barred Crossbill"=>"Loxia leucoptera",
"White-tailed Eagle"=>"Haliaeetus albicilla",
"Atlantic Murre"=>"Uria aalge",
"Garganey"=>"Anas querquedula",
"Black Redstart"=>"Phoenicurus ochruros",
"Common Scoter"=>"Melanitta nigra",
"Rock Pipit"=>"Anthus petrosus",
"Lesser Spotted Eagle"=>"Aquila pomarina",
"Cattle Egret"=>"Bubulcus ibis",
"White-winged Black Tern"=>"Chlidonias leucopterus",
"Black Stork"=>"Ciconia nigra",
"Mediterranean Gull"=>"Larus melanocephalus",
"Black Kite"=>"Milvus migrans",
"Yellow Wagtail"=>"Motacilla flavissima",
"Red-necked Grebe"=>"Podiceps grisegena",
"Gull-billed Tern"=>"Gelochelidon nilotica",
"Pectoral Sandpiper"=>"Calidris melanotos",
"Barred Warbler"=>"Sylvia nisoria",
"Red-throated Pipit"=>"Anthus cervinus",
"Grey Wagtail"=>"Motacilla cinerea",
"Richard`s Pipit"=>"Anthus richardi",
"Black Woodpecker"=>"Dryocopus martius",
"Little Ringed Plover"=>"Charadrius dubius",
"Whiskered Tern"=>"Chlidonias hybrida",
"Lesser Redpoll"=>"Carduelis cabaret",
"Pallas' Bunting"=>"Emberiza pallasi",
"Ferruginous Duck"=>"Aythya nyroca",
"Whistling Swan"=>"Cygnus columbianus",
"Black Brant"=>"Branta nigricans",
"Marbled Teal"=>"Marmaronetta angustirostris",
"Canvasback"=>"Aythya valisineria",
"Redhead"=>"Aythya americana",
"Lesser Scaup"=>"Aythya affinis",
"Steller`s Eider"=>"Polysticta stelleri",
"Spectacled Eider"=>"Somateria fischeri",
"Harlequin Duck"=>"Histronicus histrionicus",
"Black Scoter"=>"Melanitta americana",
"Surf Scoter"=>"Melanitta perspicillata",
"Barrow`s Goldeneye"=>"Bucephala islandica",
"Falcated Duck"=>"Anas falcata",
"American Wigeon"=>"Anas americana",
"Blue-winged Teal"=>"Anas discors",
"American Black Duck"=>"Anas rubripes",
"Baikal Teal"=>"Anas formosa",
"Green-Winged Teal"=>"Anas carolinensis",
"Hazel Grouse"=>"Bonasa bonasia",
"Rock Partridge"=>"Alectoris graeca",
"Red-legged Partridge"=>"Alectoris rufa",
"Yellow-billed Loon"=>"Gavia adamsii",
"Cory`s Shearwater"=>"Calonectris borealis",
"Madeiran Storm-Petrel"=>"Oceanodroma castro",
"Great White Pelican"=>"Pelecanus onocrotalus",
"Dalmatian Pelican"=>"Pelecanus crispus",
"American Bittern"=>"Botaurus lentiginosus",
"Glossy Ibis"=>"Plegadis falcinellus",
"Spanish Imperial Eagle"=>"Aquila adalberti",
"Lesser Kestrel"=>"Falco naumanni",
"Houbara Bustard"=>"Chlamydotis undulata",
"Crab-Plover"=>"Dromas ardeola",
"Cream-coloured Courser"=>"Cursorius cursor",
"Collared Pratincole"=>"Glareola pratincola",
"Black-winged Pratincole"=>"Glareola nordmanni",
"Killdeer"=>"Charadrius vociferus",
"Lesser Sand Plover"=>"Charadrius mongolus",
"Greater Sand Plover"=>"Charadrius leschenaultii",
"Caspian Plover"=>"Charadrius asiaticus",
"American Golden Plover"=>"Pluvialis dominica",
"Pacific Golden Plover"=>"Pluvialis fulva",
"Sharp-tailed Sandpiper"=>"Calidris acuminata",
"Broad-billed Sandpiper"=>"Limicola falcinellus",
"Spoon-Billed Sandpiper"=>"Eurynorhynchus pygmaeus",
"Short-Billed Dowitcher"=>"Limnodromus griseus",
"Long-billed Dowitcher"=>"Limnodromus scolopaceus",
"Hudsonian Godwit"=>"Limosa haemastica",
"Little Curlew"=>"Numenius minutus",
"Lesser Yellowlegs"=>"Tringa flavipes",
"Wilson`s Phalarope"=>"Phalaropus tricolor",
"Pallas`s Gull"=>"Larus ichthyaetus",
"Laughing Gull"=>"Larus atricilla",
"Franklin`s Gull"=>"Larus pipixcan",
"Bonaparte`s Gull"=>"Larus philadelphia",
"Ring-billed Gull"=>"Larus delawarensis",
"American Herring Gull"=>"Larus smithsonianus",
"Caspian Gull"=>"Larus cachinnans",
"Ivory Gull"=>"Pagophila eburnea",
"Royal Tern"=>"Sterna maxima",
"Brünnich`s Murre"=>"Uria lomvia",
"Crested Auklet"=>"Aethia cristatella",
"Parakeet Auklet"=>"Cyclorrhynchus psittacula",
"Tufted Puffin"=>"Lunda cirrhata",
"Laughing Dove"=>"Streptopelia senegalensis",
"Great Spotted Cuckoo"=>"Clamator glandarius",
"Great Grey Owl"=>"Strix nebulosa",
"Tengmalm`s Owl"=>"Aegolius funereus",
"Red-Necked Nightjar"=>"Caprimulgus ruficollis",
"Chimney Swift"=>"Chaetura pelagica",
"Green Bea-Eater"=>"Merops orientalis",
"Grey-headed Woodpecker"=>"Picus canus",
"Lesser Short-Toed Lark"=>"Calandrella rufescens",
"Eurasian Crag Martin"=>"Hirundo rupestris",
"Red-rumped Swallow"=>"Cecropis daurica",
"Blyth`s Pipit"=>"Anthus godlewskii",
"Pechora Pipit"=>"Anthus gustavi",
"Grey-headed Wagtail"=>"Motacilla thunbergi",
"Yellow-Headed Wagtail"=>"Motacilla lutea",
"White-throated Dipper"=>"Cinclus cinclus",
"Rufous-Tailed Scrub Robin"=>"Cercotrichas galactotes",
"Thrush Nightingale"=>"Luscinia luscinia",
"White-throated Robin"=>"Irania gutturalis",
"Caspian Stonechat"=>"Saxicola maura variegata",
"Western Black-eared Wheatear"=>"Oenanthe hispanica",
"Rufous-tailed Rock Thrush"=>"Monticola saxatilis",
"Red-throated Thrush/Black-throated"=>"Turdus ruficollis",
"American Robin"=>"Turdus migratorius",
"Zitting Cisticola"=>"Cisticola juncidis",
"Lanceolated Warbler"=>"Locustella lanceolata",
"River Warbler"=>"Locustella fluviatilis",
"Blyth`s Reed Warbler"=>"Acrocephalus dumetorum",
"Caspian Reed Warbler"=>"Acrocephalus fuscus",
"Aquatic Warbler"=>"Acrocephalus paludicola",
"Booted Warbler"=>"Acrocephalus caligatus",
"Marmora's Warbler"=>"Sylvia sarda",
"Dartford Warbler"=>"Sylvia undata",
"Subalpine Warbler"=>"Sylvia cantillans",
"Ménétries's Warbler"=>"Sylvia mystacea",
"Rüppel's Warbler"=>"Sylvia rueppelli",
"Asian Desert Warbler"=>"Sylvia nana",
"Western Orphean Warbler"=>"Sylvia hortensis hortensis",
"Arctic Warbler"=>"Phylloscopus borealis",
"Radde`s Warbler"=>"Phylloscopus schwarzi",
"Western Bonelli`s Warbler"=>"Phylloscopus bonelli",
"Red-breasted Flycatcher"=>"Ficedula parva",
"Eurasian Penduline Tit"=>"Remiz pendulinus",
"Daurian Shrike"=>"Lanius isabellinus",
"Long-Tailed Shrike"=>"Lanius schach",
"Lesser Grey Shrike"=>"Lanius minor",
"Southern Grey Shrike"=>"Lanius meridionalis",
"Masked Shrike"=>"Lanius nubicus",
"Spotted Nutcracker"=>"Nucifraga caryocatactes",
"Daurian Jackdaw"=>"Corvus dauuricus",
"Purple-Backed Starling"=>"Sturnus sturninus",
"Red-Fronted Serin"=>"Serinus pusillus",
"Arctic Redpoll"=>"Carduelis hornemanni",
"Scottish Crossbill"=>"Loxia scotica",
"Parrot Crossbill"=>"Loxia pytyopsittacus",
"Black-faced Bunting"=>"Emberiza spodocephala",
"Pink-footed Goose"=>"Anser brachyrhynchus",
"Black-winged Kite"=>"Elanus caeruleus",
"European Bee-eater"=>"Merops apiaster",
"Sabine`s Gull"=>"Larus sabini",
"Sooty Shearwater"=>"Puffinus griseus",
"Lesser Canada Goose"=>"Branta hutchinsii",
"Ring-necked Duck"=>"Aythya collaris",
"Greater Flamingo"=>"Phoenicopterus roseus",
"Iberian Chiffchaff"=>"Phylloscopus ibericus",
"Ashy-headed Wagtail"=>"Motacilla cinereocapilla",
"Stilt Sandpiper"=>"Calidris himantopus",
"Siberian Stonechat"=>"Saxicola maurus",
"Greater Yellowlegs"=>"Tringa melanoleuca",
"Forster`s Tern"=>"Sterna forsteri",
"Dusky Warbler"=>"Phylloscopus fuscatus",
"Cirl Bunting"=>"Emberiza cirlus",
"Olive-backed Pipit"=>"Anthus hodgsoni",
"Sociable Lapwing"=>"Vanellus gregarius",
"Spotted Sandpiper"=>"Actitis macularius",
"Baird`s Sandpiper"=>"Calidris bairdii",
"Rustic Bunting"=>"Emberiza rustica",
"Yellow-browed Bunting"=>"Emberiza chrysophrys",
"Great Shearwater"=>"Puffinus gravis",
"Bonelli`s Eagle"=>"Aquila fasciata",
"Calandra Lark"=>"Melanocorypha calandra",
"Sardinian Warbler"=>"Sylvia melanocephala",
"Ross's Gull"=>"Larus roseus",
"Yellow-Breasted Bunting"=>"Emberiza aureola",
"Pine Bunting"=>"Emberiza leucocephalos",
"Black Guillemot"=>"Cepphus grylle",
"Pied-billed Grebe"=>"Podilymbus podiceps",
"Soft-plumaged Petrel"=>"Pterodroma mollis",
"Bulwer's Petrel"=>"Bulweria bulwerii",
"White-Faced Storm-Petrel"=>"Pelagodroma marina",
"Pallass Fish Eagle"=>"Haliaeetus leucoryphus",
"Sandhill Crane"=>"Grus canadensis",
"Macqueens Bustard"=>"Chlamydotis macqueenii",
"White-tailed Lapwing"=>"Vanellus leucurus",
"Great Knot"=>"Calidris tenuirostris",
"Semipalmated Sandpiper"=>"Calidris pusilla",
"Red-necked Stint"=>"Calidris ruficollis",
"Slender-billed Curlew"=>"Numenius tenuirostris",
"Bridled Tern"=>"Onychoprion anaethetus",
"Pallass Sandgrouse"=>"Syrrhaptes paradoxus",
"European Scops Owl"=>"Otus scops",
"Northern Hawk Owl"=>"Surnia ulula",
"White-Throated Needletail"=>"Hirundapus caudacutus",
"Belted Kingfisher"=>"Ceryle alcyon",
"Blue-cheeked Bee-eater"=>"Merops persicus",
"Black-headed Wagtail"=>"Motacilla feldegg",
"Northern Mockingbird"=>"Mimus polyglottos",
"Alpine Accentor"=>"Prunella collaris",
"Red-flanked Bluetail"=>"Tarsiger cyanurus",
"Isabelline Wheatear"=>"Oenanthe isabellina",
"Pied Wheatear"=>"Oenanthe pleschanka",
"Eastern Black-eared Wheatear"=>"Oenanthe melanoleuca",
"Desert Wheatear"=>"Oenanthe deserti",
"White`s Thrush"=>"Zoothera aurea",
"Siberian Thrush"=>"Zoothera sibirica",
"Eyebrowed Thrush"=>"Turdus obscurus",
"Dusky Thrush"=>"Turdus eunomus",
"Black-throated Thrush"=>"Turdus atrogularis",
"Pallas`s Grasshopper Warbler"=>"Locustella certhiola",
"Spectacled Warbler"=>"Sylvia conspicillata",
"Two-barred Warbler"=>"Phylloscopus plumbeitarsus",
"Eastern Bonellis Warbler"=>"Phylloscopus orientalis",
"Collared Flycatcher"=>"Ficedula albicollis",
"Wallcreeper"=>"Tichodroma muraria",
"Turkestan Shrike"=>"Lanius phoenicuroides",
"Steppe Grey Shrike"=>"Lanius pallidirostris",
"Spanish Sparrow"=>"Passer hispaniolensis",
"Red-eyed Vireo"=>"Vireo olivaceus",
"Myrtle Warbler"=>"Dendroica coronata",
"White-crowned Sparrow"=>"Zonotrichia leucophrys",
"White-throated Sparrow"=>"Zonotrichia albicollis",
"Cretzschmar`s Bunting"=>"Emberiza caesia",
"Chestnut Bunting"=>"Emberiza rutila",
"Red-headed Bunting"=>"Emberiza bruniceps",
"Black-headed Bunting"=>"Emberiza melanocephala",
"Indigo Bunting"=>"Passerina cyanea",
"Balearic Woodchat Shrike"=>"Lanius senator badius",
"Demoiselle Crane"=>"Grus virgo",
"Chough"=>"Pyrrhocorax pyrrhocorax",
"Red-Billed Chough"=>"Pyrrhocorax graculus",
"Elegant Tern"=>"Sterna elegans",
"Chukar"=>"Alectoris chukar",
"Yellow-Billed Cuckoo"=>"Coccyzus americanus",
"American Sandwich Tern"=>"Sterna sandvicensis acuflavida",
"Olive-Tree Warbler"=>"Hippolais olivetorum",
"Eastern Olivaceous Warbler"=>"Acrocephalus pallidus",
"Indian Cormorant"=>"Phalacrocorax fuscicollis",
"Spur-Winged Lapwing"=>"Vanellus spinosus",
"Yelkouan Shearwater"=>"Puffinus yelkouan",
"Trumpeter Finch"=>"Bucanetes githagineus",
"Red Grouse"=>"Lagopus scoticus",
"Rock Ptarmigan"=>"Lagopus mutus",
"Long-Tailed Cormorant"=>"Phalacrocorax africanus",
"Double-crested Cormorant"=>"Phalacrocorax auritus",
"Magnificent Frigatebird"=>"Fregata magnificens",
"Naumann's Thrush"=>"Turdus naumanni",
"Oriental Pratincole"=>"Glareola maldivarum",
"Bufflehead"=>"Bucephala albeola",
"Snowfinch"=>"Montifrigilla nivalis",
"Ural owl"=>"Strix uralensis",
"Spanish Wagtail"=>"Motacilla iberiae",
"Song Sparrow"=>"Melospiza melodia",
"Rock Bunting"=>"Emberiza cia",
"Siberian Rubythroat"=>"Luscinia calliope",
"Pallid Swift"=>"Apus pallidus",
"Eurasian Pygmy Owl"=>"Glaucidium passerinum",
"Madeira Little Shearwater"=>"Puffinus baroli",
"House Finch"=>"Carpodacus mexicanus",
"Green Heron"=>"Butorides virescens",
"Solitary Sandpiper"=>"Tringa solitaria",
"Heuglin's Gull"=>"Larus heuglini"
);
$result = array();
foreach ($items as $key=>$value) {
if (strpos(strtolower($key), $q) !== false) {
array_push($result, array("id"=>$value, "label"=>$key, "value" => strip_tags($key)));
}
if (count($result) > 11)
break;
}
// json_encode is available in PHP 5.2 and above, or you can install a PECL module in earlier versions
echo json_encode($result);
?>

View File

@ -0,0 +1,66 @@
<!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.9.1.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 src="../../ui/jquery.ui.autocomplete.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
</style>
<script>
$(function() {
function log( message ) {
$( "<div/>" ).text( message ).prependTo( "#log" );
$( "#log" ).attr( "scrollTop", 0 );
}
$.ajax({
url: "london.xml",
dataType: "xml",
success: function( xmlResponse ) {
var data = $( "geoname", xmlResponse ).map(function() {
return {
value: $( "name", this ).text() + ", " +
( $.trim( $( "countryName", this ).text() ) || "(unknown country)" ),
id: $( "geonameId", this ).text()
};
}).get();
$( "#birds" ).autocomplete({
source: data,
minLength: 0,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.value + ", geonameId: " + ui.item.id :
"Nothing selected, input was " + this.value );
}
});
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="birds">London matches: </label>
<input id="birds" />
</div>
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
Result:
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
<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>
</body>
</html>

View File

@ -0,0 +1,37 @@
<!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.9.1.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() {
$( "#check" ).button();
$( "#format" ).buttonset();
});
</script>
<style>
#format { margin-top: 2em; }
</style>
</head>
<body>
<input type="checkbox" id="check" /><label for="check">Toggle</label>
<div id="format">
<input type="checkbox" id="check1" /><label for="check1">B</label>
<input type="checkbox" id="check2" /><label for="check2">I</label>
<input type="checkbox" id="check3" /><label for="check3">U</label>
</div>
<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>
</body>
</html>

View File

@ -0,0 +1,34 @@
<!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.9.1.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" )
.button()
.click(function( event ) {
event.preventDefault();
});
});
</script>
</head>
<body>
<button>A button element</button>
<input type="submit" value="A submit button">
<a href="#">An anchor</a>
<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>
</body>
</html>

View File

@ -0,0 +1,49 @@
<!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.9.1.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() {
$( "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>
<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 class="demo-description">
<p>Some buttons with various combinations of text and icons.</p>
</div>
</body>
</html>

View File

@ -0,0 +1,19 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Button Demos</title>
</head>
<body>
<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>

View File

@ -0,0 +1,32 @@
<!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.9.1.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() {
$( "#radio" ).buttonset();
});
</script>
</head>
<body>
<form>
<div id="radio">
<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
</div>
</form>
<div class="demo-description">
<p>A set of three radio buttons transformed into a button set.</p>
</div>
</body>
</html>

View File

@ -0,0 +1,69 @@
<!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.9.1.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>
<script src="../../ui/jquery.ui.position.js"></script>
<script src="../../ui/jquery.ui.menu.js"></script>
<link rel="stylesheet" href="../demos.css">
<style>
.ui-menu { position: absolute; width: 100px; }
</style>
<script>
$(function() {
$( "#rerun" )
.button()
.click(function() {
alert( "Running the last action" );
})
.next()
.button({
text: false,
icons: {
primary: "ui-icon-triangle-1-s"
}
})
.click(function() {
var menu = $( this ).parent().next().show().position({
my: "left top",
at: "left bottom",
of: this
});
$( document ).one( "click", function() {
menu.hide();
});
return false;
})
.parent()
.buttonset()
.next()
.hide()
.menu();
});
</script>
</head>
<body>
<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>
</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>
</body>
</html>

View File

@ -0,0 +1,118 @@
<!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.9.1.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">
<style>
#toolbar {
padding: 4px;
display: inline-block;
}
/* support: IE7 */
*+html #toolbar {
display: inline;
}
</style>
<script>
$(function() {
$( "#beginning" ).button({
text: false,
icons: {
primary: "ui-icon-seek-start"
}
});
$( "#rewind" ).button({
text: false,
icons: {
primary: "ui-icon-seek-prev"
}
});
$( "#play" ).button({
text: false,
icons: {
primary: "ui-icon-play"
}
})
.click(function() {
var options;
if ( $( this ).text() === "play" ) {
options = {
label: "pause",
icons: {
primary: "ui-icon-pause"
}
};
} else {
options = {
label: "play",
icons: {
primary: "ui-icon-play"
}
};
}
$( this ).button( "option", options );
});
$( "#stop" ).button({
text: false,
icons: {
primary: "ui-icon-stop"
}
})
.click(function() {
$( "#play" ).button( "option", {
label: "play",
icons: {
primary: "ui-icon-play"
}
});
});
$( "#forward" ).button({
text: false,
icons: {
primary: "ui-icon-seek-next"
}
});
$( "#end" ).button({
text: false,
icons: {
primary: "ui-icon-seek-end"
}
});
$( "#shuffle" ).button();
$( "#repeat" ).buttonset();
});
</script>
</head>
<body>
<div id="toolbar" class="ui-widget-header ui-corner-all">
<button id="beginning">go to beginning</button>
<button id="rewind">rewind</button>
<button id="play">play</button>
<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>
<input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label>
</span>
</div>
<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>
</body>
</html>

View File

@ -0,0 +1,29 @@
<!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.9.1.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>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({
altField: "#alternate",
altFormat: "DD, d MM, yy"
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker">&nbsp;<input type="text" id="alternate" size="30"/></p>
<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>
</body>
</html>

View File

@ -0,0 +1,51 @@
<!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.9.1.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>
<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-fold.js"></script>
<script src="../../ui/jquery.ui.effect-slide.js"></script>
<script src="../../ui/jquery.ui.datepicker.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
$( "#anim" ).change(function() {
$( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() );
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" size="30"/></p>
<p>Animations:<br />
<select id="anim">
<option value="show">Show (default)</option>
<option value="slideDown">Slide down</option>
<option value="fadeIn">Fade in</option>
<option value="blind">Blind (UI Effect)</option>
<option value="bounce">Bounce (UI Effect)</option>
<option value="clip">Clip (UI Effect)</option>
<option value="drop">Drop (UI Effect)</option>
<option value="fold">Fold (UI Effect)</option>
<option value="slide">Slide (UI Effect)</option>
<option value="">None</option>
</select>
</p>
<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>
</body>
</html>

View File

@ -0,0 +1,28 @@
<!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.9.1.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>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({
showButtonPanel: true
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
<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>
</body>
</html>

View File

@ -0,0 +1,40 @@
<!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.9.1.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>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
$( "#format" ).change(function() {
$( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" size="30"/></p>
<p>Format options:<br />
<select id="format">
<option value="mm/dd/yy">Default - mm/dd/yy</option>
<option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
<option value="d M, y">Short - d M, y</option>
<option value="d MM, y">Medium - d MM, y</option>
<option value="DD, d MM, yy">Full - DD, d MM, yy</option>
<option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the year' yy</option>
</select>
</p>
<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>
</body>
</html>

View File

@ -0,0 +1,44 @@
<!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.9.1.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>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
</head>
<body>
<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 class="demo-description">
<p>Select the date range to search for.</p>
</div>
</body>
</html>

View File

@ -0,0 +1,26 @@
<!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.9.1.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>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
<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>
</body>
</html>

View File

@ -0,0 +1,29 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Display month &amp; year menus</title>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<script src="../../jquery-1.9.1.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>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({
changeMonth: true,
changeYear: true
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
<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>
</body>
</html>

View File

@ -0,0 +1,30 @@
<!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.9.1.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>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
<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>
</body>
</html>

Binary file not shown.

After

Width:  |  Height:  |  Size: 269 B

View File

@ -0,0 +1,27 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker Demos</title>
</head>
<body>
<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 &amp; 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>

View File

@ -0,0 +1,26 @@
<!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.9.1.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>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
Date: <div id="datepicker"></div>
<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>
</body>
</html>

View File

@ -0,0 +1,23 @@
/* Arabic Translation for jQuery UI date picker plugin. */
/* Khaled Alhourani -- me@khaledalhourani.com */
/* NOTE: monthNames are the original months names and they are the Arabic names, not the new months name فبراير - يناير and there isn't any Arabic roots for these months */
jQuery(function($){
$.datepicker.regional['ar'] = {
closeText: 'إغلاق',
prevText: '&#x3C;السابق',
nextText: 'التالي&#x3E;',
currentText: 'اليوم',
monthNames: ['كانون الثاني', 'شباط', 'آذار', 'نيسان', 'مايو', 'حزيران',
'تموز', 'آب', 'أيلول', 'تشرين الأول', 'تشرين الثاني', 'كانون الأول'],
monthNamesShort: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
dayNames: ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'],
dayNamesShort: ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'],
dayNamesMin: ['ح', 'ن', 'ث', 'ر', 'خ', 'ج', 'س'],
weekHeader: 'أسبوع',
dateFormat: 'dd/mm/yy',
firstDay: 6,
isRTL: true,
showMonthAfterYear: false,
yearSuffix: ''};
$.datepicker.setDefaults($.datepicker.regional['ar']);
});

View File

@ -0,0 +1,25 @@
/* French initialisation for the jQuery UI date picker plugin. */
/* Written by Keith Wood (kbwood{at}iinet.com.au),
Stéphane Nahmani (sholby@sholby.net),
Stéphane Raimbault <stephane.raimbault@gmail.com> */
jQuery(function($){
$.datepicker.regional['fr'] = {
closeText: 'Fermer',
prevText: 'Précédent',
nextText: 'Suivant',
currentText: 'Aujourd\'hui',
monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin',
'Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
monthNamesShort: ['Janv.','Févr.','Mars','Avril','Mai','Juin',
'Juil.','Août','Sept.','Oct.','Nov.','Déc.'],
dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
dayNamesShort: ['Dim.','Lun.','Mar.','Mer.','Jeu.','Ven.','Sam.'],
dayNamesMin: ['D','L','M','M','J','V','S'],
weekHeader: 'Sem.',
dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''};
$.datepicker.setDefaults($.datepicker.regional['fr']);
});

View File

@ -0,0 +1,23 @@
/* Hebrew initialisation for the UI Datepicker extension. */
/* Written by Amir Hardon (ahardon at gmail dot com). */
jQuery(function($){
$.datepicker.regional['he'] = {
closeText: 'סגור',
prevText: '&#x3C;הקודם',
nextText: 'הבא&#x3E;',
currentText: 'היום',
monthNames: ['ינואר','פברואר','מרץ','אפריל','מאי','יוני',
'יולי','אוגוסט','ספטמבר','אוקטובר','נובמבר','דצמבר'],
monthNamesShort: ['ינו','פבר','מרץ','אפר','מאי','יוני',
'יולי','אוג','ספט','אוק','נוב','דצמ'],
dayNames: ['ראשון','שני','שלישי','רביעי','חמישי','שישי','שבת'],
dayNamesShort: ['א\'','ב\'','ג\'','ד\'','ה\'','ו\'','שבת'],
dayNamesMin: ['א\'','ב\'','ג\'','ד\'','ה\'','ו\'','שבת'],
weekHeader: 'Wk',
dateFormat: 'dd/mm/yy',
firstDay: 0,
isRTL: true,
showMonthAfterYear: false,
yearSuffix: ''};
$.datepicker.setDefaults($.datepicker.regional['he']);
});

View File

@ -0,0 +1,23 @@
/* Chinese initialisation for the jQuery UI date picker plugin. */
/* Written by Ressol (ressol@gmail.com). */
jQuery(function($){
$.datepicker.regional['zh-TW'] = {
closeText: '關閉',
prevText: '&#x3C;上月',
nextText: '下月&#x3E;',
currentText: '今天',
monthNames: ['一月','二月','三月','四月','五月','六月',
'七月','八月','九月','十月','十一月','十二月'],
monthNamesShort: ['一月','二月','三月','四月','五月','六月',
'七月','八月','九月','十月','十一月','十二月'],
dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
dayNamesMin: ['日','一','二','三','四','五','六'],
weekHeader: '周',
dateFormat: 'yy/mm/dd',
firstDay: 1,
isRTL: false,
showMonthAfterYear: true,
yearSuffix: '年'};
$.datepicker.setDefaults($.datepicker.regional['zh-TW']);
});

View File

@ -0,0 +1,41 @@
<!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.9.1.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>
<script src="jquery.ui.datepicker-ar.js"></script>
<script src="jquery.ui.datepicker-fr.js"></script>
<script src="jquery.ui.datepicker-he.js"></script>
<script src="jquery.ui.datepicker-zh-TW.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] );
$( "#locale" ).change(function() {
$( "#datepicker" ).datepicker( "option",
$.datepicker.regional[ $( this ).val() ] );
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"/>&nbsp;
<select id="locale">
<option value="ar">Arabic (&#8235;(&#1575;&#1604;&#1593;&#1585;&#1576;&#1610;&#1577;</option>
<option value="zh-TW">Chinese Traditional (&#32321;&#39636;&#20013;&#25991;)</option>
<option value="">English</option>
<option value="fr" selected="selected">French (Fran&ccedil;ais)</option>
<option value="he">Hebrew (&#8235;(&#1506;&#1489;&#1512;&#1497;&#1514;</option>
</select></p>
<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>
</body>
</html>

View File

@ -0,0 +1,26 @@
<!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.9.1.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>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
<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>
</body>
</html>

View File

@ -0,0 +1,29 @@
<!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.9.1.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>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({
numberOfMonths: 3,
showButtonPanel: true
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
<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>
</body>
</html>

View File

@ -0,0 +1,30 @@
<!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.9.1.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>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({
showOtherMonths: true,
selectOtherMonths: true
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
<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>
</body>
</html>

View File

@ -0,0 +1,32 @@
<!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.9.1.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>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({
showWeek: true,
firstDay: 1
});
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
<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>
</body>
</html>

View File

@ -0,0 +1,19 @@
body {
font-size: 62.5%;
font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
}
table {
font-size: 1em;
}
.demo-description {
clear: both;
padding: 12px;
font-size: 1.3em;
line-height: 1.4em;
}
.ui-draggable, .ui-droppable {
background-position: top;
}

View File

@ -0,0 +1,52 @@
<!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.9.1.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.draggable.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
<script src="../../ui/jquery.ui.resizable.js"></script>
<script src="../../ui/jquery.ui.button.js"></script>
<script src="../../ui/jquery.ui.dialog.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-explode.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
</head>
<body>
<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 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>
</body>
</html>

View File

@ -0,0 +1,33 @@
<!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.9.1.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.draggable.js"></script>
<script src="../../ui/jquery.ui.position.js"></script>
<script src="../../ui/jquery.ui.resizable.js"></script>
<script src="../../ui/jquery.ui.button.js"></script>
<script src="../../ui/jquery.ui.dialog.js"></script>
<link rel="stylesheet" href="../demos.css">
<script>
$(function() {
$( "#dialog" ).dialog();
});
</script>
</head>
<body>
<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>
<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>
</body>
</html>

Some files were not shown because too many files have changed in this diff Show More