| @@ -0,0 +1,197 @@ | ||
| /*! viewportSize | Author: Tyson Matanich, 2013 | License: MIT */ | ||
| (function(n){n.viewportSize={},n.viewportSize.getHeight=function(){return t("Height")},n.viewportSize.getWidth=function(){return t("Width")};var t=function(t){var f,o=t.toLowerCase(),e=n.document,i=e.documentElement,r,u;return n["inner"+t]===undefined?f=i["client"+t]:n["inner"+t]!=i["client"+t]?(r=e.createElement("body"),r.id="vpw-test-b",r.style.cssText="overflow:scroll",u=e.createElement("div"),u.id="vpw-test-d",u.style.cssText="position:absolute;top:-1000px",u.innerHTML="<style>@media("+o+":"+i["client"+t]+"px){body#vpw-test-b div#vpw-test-d{"+o+":7px!important}}<\/style>",r.appendChild(u),i.insertBefore(r,e.head),f=u["offset"+t]==7?i["client"+t]:n["inner"+t],i.removeChild(r)):f=n["inner"+t],f}})(this); | ||
|
|
||
|
|
||
| ( function( $ ) { | ||
|
|
||
| // Setup variables | ||
| $window = $(window); | ||
| $slide = $('.homeSlide'); | ||
| $slideTall = $('.homeSlideTall'); | ||
| $slideTall2 = $('.homeSlideTall2'); | ||
| $body = $('body'); | ||
| htmlbody = $('html,body'); | ||
| var duration = 500; | ||
|
|
||
| //FadeIn all sections | ||
| $body.imagesLoaded( function() { | ||
| setTimeout(function() { | ||
|
|
||
| // Resize sections | ||
| adjustWindow(); | ||
|
|
||
| // Init navigation | ||
| initHomepageNav(); | ||
|
|
||
| // Fade in sections | ||
| $body.removeClass('loading').addClass('loaded'); | ||
|
|
||
| }, 800); | ||
| }); | ||
|
|
||
| function adjustWindow(){ | ||
|
|
||
| // Init Skrollr | ||
| var s = skrollr.init({ | ||
| forceHeight: false, | ||
| render: function(data) { | ||
|
|
||
| //Debugging - Log the current scroll position. | ||
| //console.log(data.curTop); | ||
| } | ||
| }); | ||
|
|
||
| // Get window size | ||
| winH = $window.height(); | ||
|
|
||
| // Keep minimum height 550 | ||
| if(winH <= 550) { | ||
| winH = 550; | ||
| } | ||
|
|
||
| // Resize our slides | ||
| $slide.height(winH); | ||
| $slideTall.height(winH*2); | ||
| $slideTall2.height(winH*3); | ||
|
|
||
| // Refresh Skrollr after resizing our sections | ||
| s.refresh($('.homeSlide')); | ||
|
|
||
| } | ||
|
|
||
| function initHomepageNav(){ | ||
|
|
||
| var homeSlides = $('.homeSlide'); | ||
| var $slideContent = $('.hsContainer'); | ||
| var slidesCount = $(homeSlides).length; | ||
| var activeSlide = 1; | ||
|
|
||
| // Build HTML for Nav | ||
| $('<div/>', { | ||
| 'id' : 'slideNav' | ||
| }).append($('<ul><li class="slideNavPrev"><a class="disabled" href="#" title="Go to previous slide"><span class="ico ico-up">↑</span></a></li><li><span id="activeSlide">'+activeSlide+'</span>/<span id="maxSlides">'+slidesCount+'</span></li><li class="slideNavNext"><a href="#" title="Go to next slide"><span class="ico ico-down">↓</span></a></li></ul>')).appendTo('body').delay(1200).fadeIn(duration); | ||
|
|
||
|
|
||
| // Navigation highligting | ||
| var $activeSlide = $('#activeSlide'); | ||
| var $maxSlides = $('#maxSlides'); | ||
| var $numberOfSlides = parseInt($maxSlides.text()); | ||
| var slideNavPrev = $(''); | ||
| var $slideNavNext = $('.slideNavNext'); | ||
| var $slideNavPrev = $('.slideNavPrev'); | ||
| var $slideNavNextA = $('.slideNavNext a'); | ||
| var $slideNavPrevA = $('.slideNavPrev a'); | ||
|
|
||
| // Highlight the section currently scrolling DOWN | ||
| homeSlides.waypoint(function(direction) { | ||
| if (direction === 'down') { | ||
| var index = $(this).index(); | ||
| var index = index+1; | ||
| $activeSlide.text(index); | ||
| showHideNavItems(); | ||
| } | ||
| }, { offset: '50%' }); | ||
|
|
||
| // Highlight the section currently scrolling UP | ||
| homeSlides.waypoint(function(direction) { | ||
| if (direction === 'up') { | ||
| var index = $(this).index(); | ||
| var index = index+1; | ||
| $activeSlide.text(index); | ||
| showHideNavItems(); | ||
| } | ||
| }, { | ||
| offset: function() { | ||
| // This is the calculation that would give you | ||
| // "bottom of element hits middle of window" | ||
| return $.waypoints('viewportHeight') / 2 - $(this).outerHeight(); | ||
| } | ||
| }); | ||
|
|
||
| //Fade out unnecesary nav items | ||
| function showHideNavItems(){ | ||
| var $activeSlideNumber = parseInt($activeSlide.text()); | ||
|
|
||
| if($activeSlideNumber == 1){ | ||
|
|
||
| $slideNavNextA.removeAttr('class'); | ||
| $slideNavPrev.animate({opacity: 0.25}).find('a').addClass('disabled'); | ||
|
|
||
| } else if ($activeSlideNumber == $numberOfSlides) { | ||
|
|
||
| $slideNavPrevA.removeAttr('class'); | ||
| $slideNavNext.animate({opacity: 0.25}).find('a').addClass('disabled'); | ||
|
|
||
| } else { | ||
|
|
||
| $slideNavNext.add($slideNavPrev).animate({opacity: 1}); | ||
| $slideNavNextA.add($slideNavPrevA).removeAttr('class'); | ||
|
|
||
| } | ||
| } | ||
|
|
||
| //Next slide | ||
| $slideNavNext.click(function (e) { | ||
| e.preventDefault(); | ||
| var index = parseInt($activeSlide.text()); | ||
| index++; | ||
| if(index <= $numberOfSlides){ | ||
|
|
||
| scrollToSlide(index); | ||
|
|
||
| } | ||
| }); | ||
|
|
||
| //Prev slide | ||
| $slideNavPrev.click(function (e) { | ||
| e.preventDefault(); | ||
| var index = parseInt($activeSlide.text()); | ||
| index--; | ||
| if(index > 0){ | ||
|
|
||
| scrollToSlide(index); | ||
|
|
||
| } | ||
| }); | ||
|
|
||
|
|
||
| function scrollToSlide(slideId){ | ||
|
|
||
| // Custom slide content offset | ||
| var customSlideOffset = $("#slide-"+slideId).attr('data-content-offset'); | ||
|
|
||
|
|
||
| // Scroll to the top of a container if it doesn't have custom offset defined | ||
| if(typeof customSlideOffset === 'undefined'){ | ||
|
|
||
| htmlbody.animate({scrollTop: ($("#slide-"+slideId).offset().top) + 'px'},'slow'); | ||
|
|
||
| } else { | ||
|
|
||
| // Convert percentage 'eg. 25p' into pixels | ||
| if(customSlideOffset.indexOf('p')!=-1) { | ||
|
|
||
| var customSlideOffset = parseInt(customSlideOffset.split('p')[0]); | ||
| var slideHeight = $slide.height(); | ||
|
|
||
| customSlideOffset = Math.ceil((slideHeight/100) * customSlideOffset); | ||
|
|
||
| //console.log(slideHeight +' '+ customSlideOffset); | ||
|
|
||
| htmlbody.animate({scrollTop: ($("#slide-"+slideId).offset().top + customSlideOffset) + 'px'},'slow'); | ||
|
|
||
| } else { | ||
|
|
||
| var customSlideOffset = parseInt(customSlideOffset); | ||
|
|
||
| htmlbody.animate({scrollTop: ($("#slide-"+slideId).offset().top + customSlideOffset) + 'px'},'slow'); | ||
|
|
||
| } | ||
|
|
||
| } | ||
| } | ||
|
|
||
|
|
||
| } | ||
|
|
||
| } )( jQuery ); |
| @@ -0,0 +1,217 @@ | ||
| 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> | ||
| Ted 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> | ||
| Avinash R <nashpapa@gmail.com> | ||
| Cory Gackenheimer <cory.gack@gmail.com> |
| @@ -0,0 +1,26 @@ | ||
| Copyright 2012 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. |
| @@ -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.* |
| @@ -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.8.3.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> |
| @@ -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.8.3.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> |
| @@ -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.8.3.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> |
| @@ -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.8.3.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> |
| @@ -0,0 +1,133 @@ | ||
| <!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.8.3.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" | ||
| }); | ||
| }); | ||
|
|
||
| var cfg = ($.hoverintent = { | ||
| sensitivity: 7, | ||
| interval: 100 | ||
| }); | ||
|
|
||
| $.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 that = this, | ||
| args = arguments, | ||
| target = $( event.target ), | ||
| cX, cY, pX, pY; | ||
|
|
||
| function track( event ) { | ||
| cX = event.pageX; | ||
| cY = event.pageY; | ||
| }; | ||
| pX = event.pageX; | ||
| pY = event.pageY; | ||
| function clear() { | ||
| target | ||
| .unbind( "mousemove", track ) | ||
| .unbind( "mouseout", arguments.callee ); | ||
| clearTimeout( timeout ); | ||
| } | ||
| function handler() { | ||
| if ( ( Math.abs( pX - cX ) + Math.abs( pY - cY ) ) < cfg.sensitivity ) { | ||
| clear(); | ||
| event.type = "hoverintent"; | ||
| // prevent accessing the original event since the new event | ||
| // is fired asynchronously and the old event is no longer | ||
| // usable (#6028) | ||
| event.originalEvent = {}; | ||
| jQuery.event.handle.apply( that, args ); | ||
| } else { | ||
| pX = cX; | ||
| pY = cY; | ||
| timeout = setTimeout( handler, cfg.interval ); | ||
| } | ||
| } | ||
| var timeout = setTimeout( handler, cfg.interval ); | ||
| target.mousemove( track ).mouseout( clear ); | ||
| return 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> | ||
| 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> |
| @@ -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> |
| @@ -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.8.3.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> |
| @@ -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.8.3.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> |
| @@ -0,0 +1,45 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>jQuery UI Effects - addClass demo</title> | ||
| <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> | ||
| <script src="../../jquery-1.8.3.js"></script> | ||
| <script src="../../ui/jquery.ui.effect.js"></script> | ||
| <link rel="stylesheet" href="../demos.css"> | ||
| <style> | ||
| .toggler { width: 500px; height: 200px; position: relative; } | ||
| #button { padding: .5em 1em; text-decoration: none; } | ||
| #effect { width: 240px; padding: 1em; font-size: 1.2em; border: 1px solid #000; background: #eee; color: #333; } | ||
| .newClass { text-indent: 40px; letter-spacing: .4em; width: 410px; height: 100px; padding: 30px; margin: 10px; font-size: 1.6em; } | ||
| </style> | ||
| <script> | ||
| $(function() { | ||
| $( "#button" ).click(function() { | ||
| $( "#effect" ).addClass( "newClass", 1000, callback ); | ||
| return false; | ||
| }); | ||
|
|
||
| function callback() { | ||
| setTimeout(function() { | ||
| $( "#effect" ).removeClass( "newClass" ); | ||
| }, 1500 ); | ||
| } | ||
| }); | ||
| </script> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div class="toggler"> | ||
| <div id="effect" class="ui-corner-all"> | ||
| Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. | ||
| </div> | ||
| </div> | ||
|
|
||
| <a href="#" id="button" class="ui-state-default ui-corner-all">Run Effect</a> | ||
|
|
||
| <div class="demo-description"> | ||
| <p>This demo adds a class which animates: text-indent, letter-spacing, width, height, padding, margin, and font-size.</p> | ||
| </div> | ||
| </body> | ||
| </html> |
| @@ -0,0 +1,14 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>jQuery UI Effects Demos</title> | ||
| </head> | ||
| <body> | ||
|
|
||
| <ul> | ||
| <li><a href="default.html">Default functionality</a></li> | ||
| </ul> | ||
|
|
||
| </body> | ||
| </html> |
| @@ -0,0 +1,55 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>jQuery UI Effects - Animate demo</title> | ||
| <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> | ||
| <script src="../../jquery-1.8.3.js"></script> | ||
| <script src="../../ui/jquery.ui.effect.js"></script> | ||
| <link rel="stylesheet" href="../demos.css"> | ||
| <style> | ||
| .toggler { width: 500px; height: 200px; position: relative; } | ||
| #button { padding: .5em 1em; text-decoration: none; } | ||
| #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; } | ||
| #effect h3 { margin: 0; padding: 0.4em; text-align: center; } | ||
| </style> | ||
| <script> | ||
| $(function() { | ||
| var state = true; | ||
| $( "#button" ).click(function() { | ||
| if ( state ) { | ||
| $( "#effect" ).animate({ | ||
| backgroundColor: "#aa0000", | ||
| color: "#fff", | ||
| width: 500 | ||
| }, 1000 ); | ||
| } else { | ||
| $( "#effect" ).animate({ | ||
| backgroundColor: "#fff", | ||
| color: "#000", | ||
| width: 240 | ||
| }, 1000 ); | ||
| } | ||
| state = !state; | ||
| }); | ||
| }); | ||
| </script> | ||
| </head> | ||
| <body> | ||
|
|
||
| <div class="toggler"> | ||
| <div id="effect" class="ui-widget-content ui-corner-all"> | ||
| <h3 class="ui-widget-header ui-corner-all">Animate</h3> | ||
| <p> | ||
| Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. | ||
| </p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <a href="#" id="button" class="ui-state-default ui-corner-all">Toggle Effect</a> | ||
|
|
||
| <div class="demo-description"> | ||
| <p>Click the button above to preview the effect.</p> | ||
| </div> | ||
| </body> | ||
| </html> |
| @@ -0,0 +1,14 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>jQuery UI Effects Demos</title> | ||
| </head> | ||
| <body> | ||
|
|
||
| <ul> | ||
| <li><a href="default.html">Default functionality</a></li> | ||
| </ul> | ||
|
|
||
| </body> | ||
| </html> |
| @@ -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.8.3.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> |
| @@ -0,0 +1,211 @@ | ||
| <!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.8.3.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> | ||
| .ui-combobox { | ||
| position: relative; | ||
| display: inline-block; | ||
| } | ||
| .ui-combobox-toggle { | ||
| position: absolute; | ||
| top: 0; | ||
| bottom: 0; | ||
| margin-left: -1px; | ||
| padding: 0; | ||
| /* adjust styles for IE 6/7 */ | ||
| *height: 1.7em; | ||
| *top: 0.1em; | ||
| } | ||
| .ui-combobox-input { | ||
| margin: 0; | ||
| padding: 0.3em; | ||
| } | ||
| </style> | ||
| <script> | ||
| (function( $ ) { | ||
| $.widget( "ui.combobox", { | ||
| _create: function() { | ||
| var input, | ||
| that = this, | ||
| select = this.element.hide(), | ||
| selected = select.children( ":selected" ), | ||
| value = selected.val() ? selected.text() : "", | ||
| wrapper = this.wrapper = $( "<span>" ) | ||
| .addClass( "ui-combobox" ) | ||
| .insertAfter( select ); | ||
|
|
||
| function removeIfInvalid(element) { | ||
| var value = $( element ).val(), | ||
| matcher = new RegExp( "^" + $.ui.autocomplete.escapeRegex( value ) + "$", "i" ), | ||
| valid = false; | ||
| select.children( "option" ).each(function() { | ||
| if ( $( this ).text().match( matcher ) ) { | ||
| this.selected = valid = true; | ||
| return false; | ||
| } | ||
| }); | ||
| if ( !valid ) { | ||
| // remove invalid value, as it didn't match anything | ||
| $( element ) | ||
| .val( "" ) | ||
| .attr( "title", value + " didn't match any item" ) | ||
| .tooltip( "open" ); | ||
| select.val( "" ); | ||
| setTimeout(function() { | ||
| input.tooltip( "close" ).attr( "title", "" ); | ||
| }, 2500 ); | ||
| input.data( "autocomplete" ).term = ""; | ||
| return false; | ||
| } | ||
| } | ||
|
|
||
| input = $( "<input>" ) | ||
| .appendTo( wrapper ) | ||
| .val( value ) | ||
| .attr( "title", "" ) | ||
| .addClass( "ui-state-default ui-combobox-input" ) | ||
| .autocomplete({ | ||
| delay: 0, | ||
| minLength: 0, | ||
| source: function( request, response ) { | ||
| var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" ); | ||
| response( select.children( "option" ).map(function() { | ||
| var text = $( this ).text(); | ||
| if ( this.value && ( !request.term || matcher.test(text) ) ) | ||
| return { | ||
| label: text.replace( | ||
| new RegExp( | ||
| "(?![^&;]+;)(?!<[^<>]*)(" + | ||
| $.ui.autocomplete.escapeRegex(request.term) + | ||
| ")(?![^<>]*>)(?![^&;]+;)", "gi" | ||
| ), "<strong>$1</strong>" ), | ||
| value: text, | ||
| option: this | ||
| }; | ||
| }) ); | ||
| }, | ||
| select: function( event, ui ) { | ||
| ui.item.option.selected = true; | ||
| that._trigger( "selected", event, { | ||
| item: ui.item.option | ||
| }); | ||
| }, | ||
| change: function( event, ui ) { | ||
| if ( !ui.item ) | ||
| return removeIfInvalid( this ); | ||
| } | ||
| }) | ||
| .addClass( "ui-widget ui-widget-content ui-corner-left" ); | ||
|
|
||
| input.data( "autocomplete" )._renderItem = function( ul, item ) { | ||
| return $( "<li>" ) | ||
| .data( "item.autocomplete", item ) | ||
| .append( "<a>" + item.label + "</a>" ) | ||
| .appendTo( ul ); | ||
| }; | ||
|
|
||
| $( "<a>" ) | ||
| .attr( "tabIndex", -1 ) | ||
| .attr( "title", "Show All Items" ) | ||
| .tooltip() | ||
| .appendTo( wrapper ) | ||
| .button({ | ||
| icons: { | ||
| primary: "ui-icon-triangle-1-s" | ||
| }, | ||
| text: false | ||
| }) | ||
| .removeClass( "ui-corner-all" ) | ||
| .addClass( "ui-corner-right ui-combobox-toggle" ) | ||
| .click(function() { | ||
| // close if already visible | ||
| if ( input.autocomplete( "widget" ).is( ":visible" ) ) { | ||
| input.autocomplete( "close" ); | ||
| removeIfInvalid( input ); | ||
| return; | ||
| } | ||
|
|
||
| // work around a bug (likely same cause as #5265) | ||
| $( this ).blur(); | ||
|
|
||
| // pass empty string as value to search for, displaying all results | ||
| input.autocomplete( "search", "" ); | ||
| input.focus(); | ||
| }); | ||
|
|
||
| input | ||
| .tooltip({ | ||
| position: { | ||
| of: this.button | ||
| }, | ||
| tooltipClass: "ui-state-highlight" | ||
| }); | ||
| }, | ||
|
|
||
| destroy: function() { | ||
| this.wrapper.remove(); | ||
| this.element.show(); | ||
| $.Widget.prototype.destroy.call( this ); | ||
| } | ||
| }); | ||
| })( 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> |
| @@ -0,0 +1,91 @@ | ||
| <!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.8.3.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( "autocomplete" )._renderItem = function( ul, item ) { | ||
| return $( "<li>" ) | ||
| .data( "item.autocomplete", item ) | ||
| .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> |
| @@ -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.8.3.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> |
| @@ -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.8.3.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> |
| @@ -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> |
| @@ -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> |
| @@ -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.8.3.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> |
| @@ -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.8.3.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( "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> |
| @@ -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.8.3.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( "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> |
| @@ -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.8.3.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> |
| @@ -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.8.3.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> |
