# HG changeset patch # User dwinter # Date 1309417669 -7200 # Node ID b2e4605f20b263f812adb5bf9768954cfdc2d6bf beta version diff -r 000000000000 -r b2e4605f20b2 .project --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/.project Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,17 @@ + + + MPIWGThesaurus + + + + + + org.python.pydev.PyDevBuilder + + + + + + org.python.pydev.pythonNature + + diff -r 000000000000 -r b2e4605f20b2 .pydevproject --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/.pydevproject Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,10 @@ + + + + +python2.4 +python 2.4 + +/MPIWGThesaurus + + diff -r 000000000000 -r b2e4605f20b2 .settings/org.eclipse.core.resources.prefs --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/.settings/org.eclipse.core.resources.prefs Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,3 @@ +#Mon Apr 11 12:31:27 CEST 2011 +eclipse.preferences.version=1 +encoding/=UTF-8 diff -r 000000000000 -r b2e4605f20b2 MPIWGThesaurus.py --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/MPIWGThesaurus.py Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,943 @@ +# TODO: generell verwaltung der tags im triple store und nicht in zope. +from OFS.Folder import Folder +from Globals import package_home +from Products.PageTemplates.PageTemplateFile import PageTemplateFile +from BTrees.OOBTree import OOBTree +from BTrees.OOBTree import OOSet + +#import os +import os.path +import logging +import time +import email.Utils +from types import ListType +import transaction +import random +import urllib2 +import urllib + +class Entry: + """publicClass""" + def __init__(self,title,entries=[]): + self.title=title + self.entries=entries + + def getTitle(self): + """getTitle""" + return self.title + +class SuggestedTag: + """publicClass""" + type="" + userName="" + def __init__(self,name,comment,type,userName): + self.name=name + self.comment=comment + self.type=type + self.userName=userName + + +class MPIWGThesaurus(Folder): + """MPIWGThesaurus main folder""" + meta_type="MPIWGThesaurus" + + TMP_PERSON_NS="http://ontologies.mpiwg-berlin.mpg.de/tempObjects/person/" + ONTOLOGY_NS="http://ontologies.mpiwg-berlin.mpg.de/authorities/namedIdentities/" + #personproviderURL="http://127.0.0.1:8280/MetaDataManagerRestlet/person/" + personproviderURL="http://virtuoso.mpiwg-berlin.mpg.de:8080/MetaDataManagerRestlet/person/" + additionalNamesGraphURL="file://newpersonsFromProjects" + + #virtuosoServer="http://ontologies.mpiwg-berlin.mpg.de" + virtuosoServer="http://virtuoso.mpiwg-berlin.mpg.de:8890" + virtuosoDAV="/DAV/home/websiteuser/" + virtuosoDAVUser="websiteuser" + virtuosoDAVPW="w3s45us3" + virtuosoGraph="file://newpersonsFromProjects" + + projectPersons= OOBTree() + projectObjects= OOBTree() + projectHistoricalPlaces= OOBTree() + projectSuggestedTags= OOBTree() + persons2Projects= OOBTree() + object2Projects=OOBTree() + historicalPlaces2Projects=OOBTree() + suggestedTags2Projects=OOBTree() + personIDtoNames=OOBTree() + suggestedPersons= OOBTree(); #TODO: das sollte die ueberfluessig werde und nur im triple store stehen. + + tagList=[] + approachesTxt="""A + --- + ent1 + --- + B + --- + enta + entb + entc + """ + + disciplines=[] + disciplinesTxt="""A + B + C + """ + + periods=[] + periodsTxt="""PA + PB + PC + """ + + spaces=[] + spacesTxt="""SPA + --- + sPent1 + --- + SPB + --- + SPenta + SPentb + SPentc + """ + technologies=[] + technologiesTxt="""TPA + --- + TPent1 + --- + TPB + --- + TPenta + TPentb + TPentc + """ + + knowledgeTransfers=[] + knowledgeTransfersTxt="""KTPA + --- + TPent1 + --- + TPB + --- + TPenta + TPentb + TPentc + """ + + + + + + + manage_options = Folder.manage_options+( + {'label':'Main Config','action':'changeMPIWGThesaurusForm'}, + #{'label':'Change Publications Special','action':'changePublications_specialForm'}, + ) + + def __init__(self,id): + """init""" + self.id=id + + + def index_html(self): + """index file""" + +# if hasattr(self,"storedProjectPersons"): +# self.projectPersons= getattr(self,"storedProjectPersons"); +# +# if hasattr(self,"storedProjectObjects"): +# self.projectPersons= getattr(self,"storedProjectObjects"); +# +# + + pt=PageTemplateFile(os.path.join(package_home(globals()),'zpt','index.html')).__of__(self) + return pt() + + + def changeMPIWGThesaurusForm(self): + """form for changing the project""" + pt=PageTemplateFile(os.path.join(package_home(globals()),'zpt','changeMPIWGThesaurusForm.zpt')).__of__(self) + return pt() + + def changeMPIWGThesaurus(self,approachesTxt,disciplinesTxt,periodsTxt,spacesTxt,technologiesTxt,knowledgeTransfersTxt,RESPONSE=None): + """change it""" + self.approachesTxt=approachesTxt + self.disciplinesTxt=disciplinesTxt + self.periodsTxt=periodsTxt + self.spacesTxt=spacesTxt + self.technologiesTxt=technologiesTxt + self.knowledgeTransfersTxt=knowledgeTransfersTxt + + if RESPONSE is not None: + redirect(RESPONSE,'manage_main') + + #In der Anzeige soll der Name der zitierten Personen in Klartext angezeigt werden, ausserdem die Varianten, wie sie tatsaechlich + #in den Projekten benutzt werden + def collectPersonNamesToIds(self): + """finde Namen zu den personen ids""" + self.personIDtoNames=OOBTree() # loessche alle + + for personID in self.persons2Projects: + mainName=self.getMainNameFromTripleStore(personID); # hole die hauptbezeichnung aus dem triplestore + + personNames=[] + for project in self.persons2Projects.get(personID): + #hole die personen aus dem projekte + logging.debug("Found:project:"+project) + namesInProject = self.projectPersons.get(project) + + for nameInProjectTuple in namesInProject: + logging.debug(repr(nameInProjectTuple)) + nameInProject=nameInProjectTuple[1] + logging.debug(nameInProjectTuple[0]+"??"+personID) + if nameInProjectTuple[0]==personID: + logging.debug("changing") + if mainName=="": # es gibt keinen Eintrag im Triplestore fuer name (sollte eigentlich nicht sein, ist dann ein Fehler dort) + mainName=nameInProject #nimm dann aber den ersten aus den projekten + if nameInProject!=mainName: + personNames.append(nameInProject) + + logging.debug(str(mainName)+"- foundalso :"+",".join(personNames)) + self.personIDtoNames.update({personID:(mainName,personNames)}) + + self.personIDtoNames=self.personIDtoNames # make clear that it has changed #TODO: change this to variablen with names _p + + def getNamesFromID(self,personID): + retStr="" + retStr+=self.personIDtoNames.get(personID)[0] # hole die Hauptbezeichnung + additionalNames = self.personIDtoNames.get(personID)[1] + if len(additionalNames)>0: + retStr+=" ("+",".join(additionalNames)+","+")" + return retStr + + + def getMainNameFromTripleStore(self,personID): + + + cmdString ="""select * where { <%s> ?name}"""%personID + + + auth_handler = urllib2.HTTPBasicAuthHandler() + auth_handler.add_password(realm='sparql', + uri=self.virtuosoServer+"/sparql", + user=self.virtuosoDAVUser, + passwd=self.virtuosoDAVPW) + + opener = urllib2.build_opener(auth_handler) + opener.addheaders = [('Content-Type','application/sparql-query')] + + logging.debug(cmdString) + try: + r= opener.open(self.virtuosoServer+"/sparql", urllib.urlencode({'query':cmdString,'default-graph-uri':self.virtuosoGraph,'named-graph-uri':None,'format':'text/csv'})) + namesTxt=r.read() + except urllib2.URLError, e: + logging.error(e.code) + logging.error(e.read()) + return + + names=namesTxt.split("\n") + if len(names) < 2: #in der ersten Zeile stehen bei der Rückgabe die Spaltennamen, <2 heiss also es gibt keinen Eintrag + return + + return names[1].replace('"','') # wir nehmen nur den ersten treffer + + + def changeTags(self,projectID,approaches=[],disciplines=[],periods=[],spaces=[],technologies=[],transfers=[],RESPONSE=None): + """change tags""" + self.changeTagFromList(projectID,"approaches", approaches) + self.changeTagFromList(projectID,"disciplines", disciplines) + self.changeTagFromList(projectID,"periods", periods) + self.changeTagFromList(projectID,"spaces", spaces) + self.changeTagFromList(projectID,"technologies", technologies) + self.changeTagFromList(projectID,"transfers", transfers) + + self.projectObjects=self.projectObjects #necessesary to make the object persistent after the first call + self.projectHistoricalPlaces=self.projectHistoricalPlaces #necessesary to make the object persistent after the first call + self.projectPersons=self.projectPersons #necessesary to make the object persistent after the first call + self.projectSuggestedTags=self.projectSuggestedTags + + self.persons2Projects=self.persons2Projects + self.object2Projects=self.object2Projects + self.historicalPlaces2Projects=self.historicalPlaces2Projects + self.suggestedTags2Projects=self.suggestedTags2Projects; + + self.suggestedPersons=self.suggestedPersons; + + def deleteAllTags(self): + """deleteAllTags - TODO: take this out!!,""" + setattr(self,"tags",None) + + return "DONE!" + + def deleteAllPersons(self): + """deleteAllTags - TODO: take this out!!,""" + self.projectPersons= OOBTree() + self.persons2Projects= OOBTree() + self.personIDtoNames=OOBTree() + self.suggestedPersons= OOBTree(); #TODO: das sollte die ueberfluessig werde und nur im triple store stehen. + + + return "DONE!" + def changeTagFromList(self,projectID,tagType,tagList): + + logging.debug("changing:"+projectID) + logging.debug("asking tag::"+tagType) + if type(tagList) is not ListType: + tagList=[tagList] + + + tags = getattr(self,"tags",None) + if tags is None: + logging.debug("Create new tags") + tags=OOBTree() + setattr(self,"tags",tags) + + + tagsStored=tags.get(tagType,None) + if tagsStored is None: + tagsStored=OOBTree(); + + + + for tag in tagsStored.keys(): #gehe durch alle gespeichteren tags + logging.debug("checking:"+tag) + currentApproach = tagsStored.get(tag,None) + logging.debug(currentApproach) + if currentApproach is None: + currentApproach=OOSet() + + if tag in tagList: #dieser ist getagged + currentApproach.update([projectID]); + tagList.remove(tag); + else: + if currentApproach.has_key(projectID): + currentApproach.remove(projectID); + + tagsStored.update({tag:currentApproach}); + + for tag in tagList: # alle die nich nicht abearbeitet worden muessen noch angelegt werden + logging.debug("adding:"+tag) + newApproach=OOSet() + newApproach.update([projectID]); + tagsStored.insert(tag, newApproach); + + tags.update({tagType:tagsStored}) + + transaction.commit() + + def getTitle(self,entry): + return entry.title + + def getEntries(self,entry): + return entry.entries + + def getEntriesFromTxt(self,txt): + apps=[] + lines=txt.split("\n"); + level=False + for line in lines: + line=line.rstrip().lstrip() + if line=="": + continue + if line=="---": + + if level: + level=False + else: + level=True + else: + if not level: + entry=Entry(line,[]) + apps.append(entry) + else: + entry.entries.append(Entry(line)) + + return apps[0:] + + def getApproaches(self): + + self.tagList=self.getEntriesFromTxt(self.approachesTxt) + return self.tagList + + def getTagsJSON(self,projectID,tagType,RESPONSE=None): + """get all selected tagList""" + logging.debug("asking:"+projectID) + logging.debug("asking tag::"+tagType) + retList=[] + tags = getattr(self,"tags",None) + if tags is None: + return; + + tagsStored=tags.get(tagType,None) + if tagsStored is None: + return; + + for tag in tagsStored.keys(): #gehe durch alle gespeichteren approached + logging.debug("checking:"+tag) + currentTag = tagsStored.get(tag,None) + if currentTag is None: + continue + if currentTag.has_key(projectID): + retList.append(""" "%s" """%tag) + + if RESPONSE: + RESPONSE.setHeader('Content-Type', "application/json") + + logging.debug(retList) + return "["+",".join(retList)+"]" + + def getDisciplines(self): + + self.disciplines=self.getEntriesFromTxt(self.disciplinesTxt) + return self.disciplines + + + def getObjectsJSON(self,term="",RESPONSE=None): + """ get all stored objects as json list starting with term""" + term=term.lower(); + logging.debug("Asking:"+term) + #objectList=["baus","berg","lurg"] + objects = self.objects2Projects; + + objectList= [x for x in objects.keys()] + + logging.debug("Create:"+repr(objectList)) + retList=[] + for object in objectList: + if object.find(term)>-1: + retList.append(""" "%s" """%object) + ret="[" + ret+=",".join(retList) + ret+="]" + logging.debug("Objects:"+ret) + if RESPONSE: + RESPONSE.setHeader('Content-Type', "application/json") + return ret + + + def getHistoricalPlacesJSON(self,term="",RESPONSE=None): + """ get all stored historicalPlaces as json list starting with term""" + term=term.lower(); + logging.debug("Asking:"+term) + #historicalPlaceList=["baus","berg","lurg"] + historicalPlaces = self.historicalPlaces2Projects; + + historicalPlaceList= [x for x in historicalPlaces.keys()] + + logging.debug("Create:"+repr(historicalPlaceList)) + retList=[] + for historicalPlace in historicalPlaceList: + if historicalPlace.find(term)>-1: + retList.append(""" "%s" """%historicalPlace) + ret="[" + ret+=",".join(retList) + ret+="]" + logging.debug("historicalPlaces:"+ret) + if RESPONSE: + RESPONSE.setHeader('Content-Type', "application/json") + return ret + + + def getPeriods(self): + + self.periodes=self.getEntriesFromTxt(self.periodsTxt) + return self.periodes + + def getSpaces(self): + + self.spaces=self.getEntriesFromTxt(self.spacesTxt) + return self.spaces + + def getTechnologies(self): + + self.technologies=self.getEntriesFromTxt(self.technologiesTxt) + return self.technologies + + def getKnowledgeTransfers(self): + + self.knowledgeTransfers=self.getEntriesFromTxt(self.knowledgeTransfersTxt) + return self.knowledgeTransfers + + + def getObjectsFromProject(self,projectID): + return self.getFromProject(self.projectObjects,projectID); + + def getHistoricalPlacesFromProject(self,projectID): + return self.getFromProject(self.projectHistoricalPlaces,projectID); + + def getSuggestedTagsFromProject(self,projectID): + return self.getFromProject(self.projectSuggestedTags,projectID); + + + def getPersonsFromProject(self,projectID): + return self.getFromProject(self.projectPersons,projectID); + + def getFromProject(self,objects,projectID): + if objects.has_key(projectID): + logging.debug("key exists:"+projectID) + persons=objects.get(projectID); + else: + persons=OOSet() + objects.update({projectID:persons}) + logging.debug("key does not exists:"+projectID) + + + return persons + + def getHistoricalPlacesFromProjectAsHTML(self,projectID): + """gertobjects""" + return self.getFromProjectAsHTML(self.projectHistoricalPlaces, projectID, "HistoricalPlace"); + + def getObjectsFromProjectAsHTML(self,projectID): + """gertobjects""" + return self.getFromProjectAsHTML(self.projectObjects, projectID, "Object"); + + def getPersonsFromProjectAsHTML(self,projectID): + """getpersons""" + return self.getFromProjectAsHTML(self.projectPersons, projectID, "Person"); + + + def getFromProjectAsHTML(self,objects,projectID,type): + """getpersons""" + ret="" + if objects.has_key(projectID): + persons=objects.get(projectID); + else: + persons=OOSet() + + + for person in persons: + ret+="""
+ %s
remove
+
"""%(person[1],type,person[0]) + + +# ret+="""
+# +# %s +#
"""%(person[0],person[1]) +# + logging.debug(type+":"+ret) + return ret + + + def removeHistoricalPlaceFromProject(self,projectID,value): + """remove""" + logging.debug("removeHP:"+projectID+":"+value); + + HistoricalPlaces = self.getHistoricalPlacesFromProject(projectID) + for HistoricalPlace in HistoricalPlaces.keys(): + + logging.debug("trying:"+repr(HistoricalPlace[0])+"::"+repr(value)+"__") + if HistoricalPlace[0]==value: + logging.debug("---removed!") + HistoricalPlaces.remove(HistoricalPlace) + + self.projectHistoricalPlaces.update({projectID:HistoricalPlaces}) + retstring = self.getHistoricalPlacesFromProjectAsHTML(projectID) + logging.debug(retstring) + return retstring + + def removeObjectFromProject(self,projectID,value): + """remove""" + logging.debug("remove:"+projectID+":"+value); + + objects = self.getObjectsFromProject(projectID) + for object in objects.keys(): + + logging.debug("trying:"+repr(object[0])+"::"+repr(value)+"__") + if object[0]==value: + logging.debug("---removed!") + objects.remove(object) + + self.projectObjects.update({projectID:objects}) + retstring = self.getObjectsFromProjectAsHTML(projectID) + logging.debug(retstring) + return retstring + + def removePersonFromProject(self,projectID,value): + """remove""" + logging.debug("remove:"+projectID+":"+value); + + persons = self.getPersonsFromProject(projectID) + for person in persons.keys(): + + logging.debug("trying:"+repr(person[0])+"::"+repr(value)+"__") + if person[0]==value: + logging.debug("---removed!") + persons.remove(person) + + self.projectPersons.update({projectID:persons}) + retstring = self.getPersonsFromProjectAsHTML(projectID) + logging.debug(retstring) + return retstring + + #fuegt die neue Person zur personIDtoNames hinzu, für die spätere Anzeige in der Personenliste + def addNameTOPersonIDNames(self,personID,label): + personName = self.personIDtoNames.get(personID) + if personName==None: # Anlegen falls noch nicht existent + personName=(label,[]) + else: + if (not label in personName[1]) and (not label==personName[0]): # hinzufuegen falls der neuen name noch nicht als bezeichnugn fuer personID eingetragen ist + personName[1].append(label) + + self.personIDtoNames.update({personID:personName}) + + + def addPersonToProject(self,projectID,value,label): + """ add a person so the project""" + persons=self.getPersonsFromProject(projectID); + + logging.debug("adding:"+projectID+":"+value+":"+label); + + persons.insert([value,label]) + self.projectPersons.update({projectID:persons}) + + for personTuple in persons: + #hole die abgespeicherten Projekte zu einer Person + person=personTuple[0] #hole die ID + + + if getattr(self,"persons2Projects",None)==None: + setattr(self,"persons2Projects",OOBTree()) + + projects = self.persons2Projects.get(person,None) + + if projects==None: + projects=OOSet(); + + projects.insert(projectID ) + logging.debug("update:"+person) + self.persons2Projects.update({person:projects}) + + self.addNameTOPersonIDNames(value,label) + retstring = self.getPersonsFromProjectAsHTML(projectID) + logging.debug(retstring) + transaction.commit() + return retstring + + def getPersonsWithProjectIDs(self): + """holt die getaggted Personen mit Projekten""" + persons = self.persons2Projects; + ret={} + logging.debug("Check Person:"+repr(persons.keys())) + for person in persons.keys(): + logging.debug("Check:"+person) + #TODO: person muss duch den namen von provuder geholt werden + list=[] + for projectID in persons.get(person): + list.append(self.getProjectDetails(projectID)) + + ret[person]=list[0:] + return ret + + def getHistoricalPlacesWithProjectIDs(self): + """holt die getaggted Personen mit Projekten""" + HistoricalPlaces = self.HistoricalPlaces2Projects; + ret={} + logging.debug("Check HistoricalPlace:"+repr(HistoricalPlaces.keys())) + for HistoricalPlace in HistoricalPlaces.keys(): + logging.debug("Check:"+HistoricalPlace) + #TODO: HistoricalPlace muss duch den namen von provuder geholt werden + list=[] + for projectID in HistoricalPlaces.get(HistoricalPlace): + list.append(self.getProjectDetails(projectID)) + + ret[HistoricalPlace]=list[0:] + return ret + + def getObjectsWithProjectIDs(self): + """holt die getaggted Personen mit Projekten""" + objects = self.objects2Projects; + ret={} + logging.debug("Check Object:"+repr(objects.keys())) + for object in objects.keys(): + logging.debug("Check:"+object) + #TODO: object muss duch den namen von provuder geholt werden + list=[] + for projectID in objects.get(object): + list.append(self.getProjectDetails(projectID)) + + ret[object]=list[0:] + return ret + + def listAllSuggestedTags(self): + """list all tags""" + ret="" + for projectID in self.projectSuggestedTags: + ret+="

"+projectID+"

" + for tags in self.projectSuggestedTags.get(projectID): + ret+="" + ret+="
"+tags[0]+""+tags[1].type+""+tags[1].comment+""+tags[1].userName+"
" + ret+="" + logging.debug(ret); + return ret + + def suggestTag(self,projectID,tagName,tagComment,tagType,tagUserName): + """suggest a new tag""" + """ add a person so the project""" + SuggestedTags=self.getSuggestedTagsFromProject(projectID); + + logging.debug("suggested:"+projectID+":"+tagName); + + + #TODO: Im moment noch keine Zuordnung zu einer ID. + newTag = SuggestedTag(tagName,tagComment,tagType,tagUserName) + SuggestedTags.insert([tagName,newTag]) + self.projectSuggestedTags.update({projectID:SuggestedTags}) + + + + for SuggestedTagTuple in SuggestedTags: + #hole die abgespeicherten Projekte zu einer Person + person=SuggestedTagTuple[0] #hile die ID + + + if getattr(self,"SuggestedTags2Projects",None)==None: + setattr(self,"SuggestedTags2Projects",OOBTree()) + + projects = self.SuggestedTags2Projects.get(person,None) + + if projects==None: + projects=OOSet(); + + projects.insert(projectID ) + logging.debug("update:"+person) + self.SuggestedTags2Projects.update({person:projects}) + + + + #retstring = self.getSuggestedTagsFromProjectAsHTML(projectID) + #logging.debug(retstring) + + + + #return retstring + + + def addHistoricalPlaceToProject(self,projectID,value): + """ add a person so the project""" + HistoricalPlaces=self.getHistoricalPlacesFromProject(projectID); + + logging.debug("adding:"+projectID+":"+value); + + + #TODO: Im moment noch keine Zuordnung zu einer ID. + HistoricalPlaces.insert([value,value]) + self.projectHistoricalPlaces.update({projectID:HistoricalPlaces}) + + + + for HistoricalPlaceTuple in HistoricalPlaces: + #hole die abgespeicherten Projekte zu einer Person + person=HistoricalPlaceTuple[0] #hile die ID + + + if getattr(self,"HistoricalPlaces2Projects",None)==None: + setattr(self,"HistoricalPlaces2Projects",OOBTree()) + + projects = self.HistoricalPlaces2Projects.get(person,None) + + if projects==None: + projects=OOSet(); + + projects.insert(projectID ) + logging.debug("update:"+person) + self.HistoricalPlaces2Projects.update({person:projects}) + + + + retstring = self.getHistoricalPlacesFromProjectAsHTML(projectID) + logging.debug(retstring) + + + + return retstring + + def addObjectToProject(self,projectID,value): + """ add a person so the project""" + objects=self.getObjectsFromProject(projectID); + + logging.debug("adding:"+projectID+":"+value); + + + #TODO: Im moment noch keine Zuordnung zu einer ID. + objects.insert([value,value]) + self.projectObjects.update({projectID:objects}) + + + + for objectTuple in objects: + #hole die abgespeicherten Projekte zu einer Person + person=objectTuple[0] #hile die ID + + + if getattr(self,"objects2Projects",None)==None: + setattr(self,"objects2Projects",OOBTree()) + + projects = self.objects2Projects.get(person,None) + + if projects==None: + projects=OOSet(); + + projects.insert(projectID ) + logging.debug("update:"+person) + self.objects2Projects.update({person:projects}) + + + + retstring = self.getObjectsFromProjectAsHTML(projectID) + logging.debug(retstring) + + + + return retstring + + + def getProjectsWithTag(self,tagType,tagName): + tags = getattr(self,"tags",None) + if tags is None: + logging.debug("can't find Tags") + return [] + + + + tagsStored=tags.get(tagType,None) + if tagsStored is None: + logging.debug("can't find Tag:"+tagType) + return [] + + projects = tagsStored.get(tagName,None) + if projects is None: + logging.debug("can't find any projects for Tag:"+tagName+"("+tagType+")") + return [] + + ret=[] + for project in projects: + logging.debug("found:"+project) + ret.append(self.getProjectDetails(project)) + + return ret + + def getProjectDetails(self,getID): + project=getattr(self.www_neu.projects,getID,None) + if project is None: + logging.debug("no project!! " +getID) + return + + link="/en/research/projects/"+getID + + title=project.getContent("short_title") + #persons=project.getPersonKeyList() + persons=project.getContent('xdata_01') + logging.debug("%s %s %s"%(link,title,persons)) + return link,title,persons + +# $.post("addNewPerson",{"projectID": +# $('#projectID').val(), +# "personName":$("#suggest_newPerson").val(), +# "personComment":$("#suggest_newPerson_comment").val()} +# +# ); +# + + def addAndCreateNewPerson(self,projectID,personName,personComment,personUserName): + """adds anew person to the project which is not in the authority file""" + + id = random.randint(0, 1000000); + idstring="http://ontologies.mpiwg-berlin.mpg.de/tempObjects/person/"+str(id) + while self.suggestedPersons.has_key(idstring): + id = random.randint(0, 1000000); + #idstring="http://ontologies.mpiwg-berlin.mpg.de/tempObjects/person/"+str(id); + idstring=self.TEMP_PERSON_NS+str(id); + + + self.suggestedPersons.update({idstring:(personName,personComment,projectID,personUserName)}) + self.createTempPersonInVirtuoso(projectID, idstring, personName, personComment) #TODO: add suername to the triplestore + return self.addPersonToProject(projectID, idstring, personName); + + def createTempPersonInVirtuoso(self,projectID,personURI, personName,personComment): + """add a new person to the triple store of tempory persons""" + triples=[]; + personID="<"+personURI+">" + triples.append((personID,"","")) + triples.append((personID,"",'"'+personComment+'"')) + triples.append((personID,"",'"'+personName+'"')) + triples.append((personID,"","")) + + cmdString ="insert in GRAPH <"+self.virtuosoGraph+"> {" + for triple in triples: + cmdString+=" ".join(triple)+"." + + cmdString+="}" + + auth_handler = urllib2.HTTPBasicAuthHandler() + auth_handler.add_password(realm='sparql', + uri=self.virtuosoServer+"/sparql", + user=self.virtuosoDAVUser, + passwd=self.virtuosoDAVPW) + + opener = urllib2.build_opener(auth_handler) + opener.addheaders = [('Content-Type','application/sparql-query')] + + logging.debug(cmdString) + try: + r= opener.open(self.virtuosoServer+"/sparql", urllib.urlencode({'query':cmdString,'default-graph-uri':self.virtuosoGraph,'named-graph-uri':None})) + logging.debug(r.read()) + except urllib2.URLError, e: + logging.error(e.code) + logging.error(e.read()) + return + + opener2 = urllib2.build_opener() + + + personIDencoded=urllib.quote(personURI,safe="") + graphEncoded=urllib.quote(self.additionalNamesGraphURL,safe="") + url = self.personproviderURL+"id/"+personIDencoded+"/"+graphEncoded + + try: + request = urllib2.Request(url); + request.get_method = lambda : 'PUT' + r= opener2.open(request); + logging.debug(r.read()) + except urllib2.URLError, e: + logging.error(e.code) + logging.error(e.read()) + return + + + + return + +def redirect(RESPONSE,url): + """mache ein redirect mit einem angehaengten time stamp um ein reload zu erzwingen""" + + timeStamp=time.time() + + if url.find("?")>-1: #giebt es schon parameter + addStr="&time=%s" + else: + addStr="?time=%s" + + RESPONSE.setHeader('Last-Modified',email.Utils.formatdate().split("-")[0]+'GMT') + logging.error(email.Utils.formatdate()+' GMT') + RESPONSE.redirect(url+addStr%timeStamp) + +def manage_addMPIWGThesaurusForm(self): + """form for adding the project""" + pt=PageTemplateFile(os.path.join(package_home(globals()),'zpt','addMPIWGThesaurusForm.zpt')).__of__(self) + return pt() + + + +def manage_addMPIWGThesaurus(self,id,RESPONSE=None): + """add it""" + newObj=MPIWGThesaurus(id) + + self._setObject(id,newObj) + + + if RESPONSE is not None: + redirect(RESPONSE,'manage_main') \ No newline at end of file diff -r 000000000000 -r b2e4605f20b2 __init__.py --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/__init__.py Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,14 @@ +import MPIWGThesaurus + +def initialize(context): + """initialize MPIWGWeb""" + context.registerClass( + MPIWGThesaurus.MPIWGThesaurus, + constructors = ( + MPIWGThesaurus.manage_addMPIWGThesaurusForm, + MPIWGThesaurus.manage_addMPIWGThesaurus + ) + ) + + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/css/ui-lightness/images/ui-bg_diagonals-thick_18_b81900_40x40.png Binary file jquery-ui/css/ui-lightness/images/ui-bg_diagonals-thick_18_b81900_40x40.png has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/css/ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png Binary file jquery-ui/css/ui-lightness/images/ui-bg_diagonals-thick_20_666666_40x40.png has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/css/ui-lightness/images/ui-bg_flat_10_000000_40x100.png Binary file jquery-ui/css/ui-lightness/images/ui-bg_flat_10_000000_40x100.png has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/css/ui-lightness/images/ui-bg_glass_100_f6f6f6_1x400.png Binary file jquery-ui/css/ui-lightness/images/ui-bg_glass_100_f6f6f6_1x400.png has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/css/ui-lightness/images/ui-bg_glass_100_fdf5ce_1x400.png Binary file jquery-ui/css/ui-lightness/images/ui-bg_glass_100_fdf5ce_1x400.png has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/css/ui-lightness/images/ui-bg_glass_65_ffffff_1x400.png Binary file jquery-ui/css/ui-lightness/images/ui-bg_glass_65_ffffff_1x400.png has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/css/ui-lightness/images/ui-bg_gloss-wave_35_f6a828_500x100.png Binary file jquery-ui/css/ui-lightness/images/ui-bg_gloss-wave_35_f6a828_500x100.png has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/css/ui-lightness/images/ui-bg_highlight-soft_100_eeeeee_1x100.png Binary file jquery-ui/css/ui-lightness/images/ui-bg_highlight-soft_100_eeeeee_1x100.png has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/css/ui-lightness/images/ui-bg_highlight-soft_75_ffe45c_1x100.png Binary file jquery-ui/css/ui-lightness/images/ui-bg_highlight-soft_75_ffe45c_1x100.png has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/css/ui-lightness/images/ui-icons_222222_256x240.png Binary file jquery-ui/css/ui-lightness/images/ui-icons_222222_256x240.png has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/css/ui-lightness/images/ui-icons_228ef1_256x240.png Binary file jquery-ui/css/ui-lightness/images/ui-icons_228ef1_256x240.png has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/css/ui-lightness/images/ui-icons_ef8c08_256x240.png Binary file jquery-ui/css/ui-lightness/images/ui-icons_ef8c08_256x240.png has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/css/ui-lightness/images/ui-icons_ffd27a_256x240.png Binary file jquery-ui/css/ui-lightness/images/ui-icons_ffd27a_256x240.png has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/css/ui-lightness/images/ui-icons_ffffff_256x240.png Binary file jquery-ui/css/ui-lightness/images/ui-icons_ffffff_256x240.png has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/css/ui-lightness/jquery-ui-1.8.11.custom.css --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/css/ui-lightness/jquery-ui-1.8.11.custom.css Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,454 @@ +/* + * jQuery UI CSS Framework 1.8.11 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Theming/API + */ + +/* Layout helpers +----------------------------------*/ +.ui-helper-hidden { display: none; } +.ui-helper-hidden-accessible { position: absolute !important; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); } +.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; } +.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } +.ui-helper-clearfix { display: inline-block; } +/* required comment for clearfix to work in Opera \*/ +* html .ui-helper-clearfix { height:1%; } +.ui-helper-clearfix { display:block; } +/* end clearfix */ +.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); } + + +/* Interaction Cues +----------------------------------*/ +.ui-state-disabled { cursor: default !important; } + + +/* Icons +----------------------------------*/ + +/* states and images */ +.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; } + + +/* Misc visuals +----------------------------------*/ + +/* Overlays */ +.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } + + +/* + * jQuery UI CSS Framework 1.8.11 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Theming/API + * + * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Trebuchet%20MS,%20Tahoma,%20Verdana,%20Arial,%20sans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=f6a828&bgTextureHeader=12_gloss_wave.png&bgImgOpacityHeader=35&borderColorHeader=e78f08&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=eeeeee&bgTextureContent=03_highlight_soft.png&bgImgOpacityContent=100&borderColorContent=dddddd&fcContent=333333&iconColorContent=222222&bgColorDefault=f6f6f6&bgTextureDefault=02_glass.png&bgImgOpacityDefault=100&borderColorDefault=cccccc&fcDefault=1c94c4&iconColorDefault=ef8c08&bgColorHover=fdf5ce&bgTextureHover=02_glass.png&bgImgOpacityHover=100&borderColorHover=fbcb09&fcHover=c77405&iconColorHover=ef8c08&bgColorActive=ffffff&bgTextureActive=02_glass.png&bgImgOpacityActive=65&borderColorActive=fbd850&fcActive=eb8f00&iconColorActive=ef8c08&bgColorHighlight=ffe45c&bgTextureHighlight=03_highlight_soft.png&bgImgOpacityHighlight=75&borderColorHighlight=fed22f&fcHighlight=363636&iconColorHighlight=228ef1&bgColorError=b81900&bgTextureError=08_diagonals_thick.png&bgImgOpacityError=18&borderColorError=cd0a0a&fcError=ffffff&iconColorError=ffd27a&bgColorOverlay=666666&bgTextureOverlay=08_diagonals_thick.png&bgImgOpacityOverlay=20&opacityOverlay=50&bgColorShadow=000000&bgTextureShadow=01_flat.png&bgImgOpacityShadow=10&opacityShadow=20&thicknessShadow=5px&offsetTopShadow=-5px&offsetLeftShadow=-5px&cornerRadiusShadow=5px + */ + + +/* Component containers +----------------------------------*/ +.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; } +.ui-widget .ui-widget { font-size: 1em; } +.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1em; } +.ui-widget-content { border: 1px solid #dddddd; background: #eeeeee url(images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x; color: #333333; } +.ui-widget-content a { color: #333333; } +.ui-widget-header { border: 1px solid #e78f08; background: #f6a828 url(images/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; } +.ui-widget-header a { color: #ffffff; } + +/* Interaction states +----------------------------------*/ +.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #cccccc; background: #f6f6f6 url(images/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #1c94c4; } +.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #1c94c4; text-decoration: none; } +.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #fbcb09; background: #fdf5ce url(images/ui-bg_glass_100_fdf5ce_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #c77405; } +.ui-state-hover a, .ui-state-hover a:hover { color: #c77405; text-decoration: none; } +.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #fbd850; background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; font-weight: bold; color: #eb8f00; } +.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #eb8f00; text-decoration: none; } +.ui-widget :active { outline: none; } + +/* Interaction Cues +----------------------------------*/ +.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {border: 1px solid #fed22f; background: #ffe45c url(images/ui-bg_highlight-soft_75_ffe45c_1x100.png) 50% top repeat-x; color: #363636; } +.ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #363636; } +.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #cd0a0a; background: #b81900 url(images/ui-bg_diagonals-thick_18_b81900_40x40.png) 50% 50% repeat; color: #ffffff; } +.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #ffffff; } +.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #ffffff; } +.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; } +.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; } +.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; } + +/* Icons +----------------------------------*/ + +/* states and images */ +.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); } +.ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); } +.ui-widget-header .ui-icon {background-image: url(images/ui-icons_ffffff_256x240.png); } +.ui-state-default .ui-icon { background-image: url(images/ui-icons_ef8c08_256x240.png); } +.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_ef8c08_256x240.png); } +.ui-state-active .ui-icon {background-image: url(images/ui-icons_ef8c08_256x240.png); } +.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_228ef1_256x240.png); } +.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_ffd27a_256x240.png); } + +/* positioning */ +.ui-icon-carat-1-n { background-position: 0 0; } +.ui-icon-carat-1-ne { background-position: -16px 0; } +.ui-icon-carat-1-e { background-position: -32px 0; } +.ui-icon-carat-1-se { background-position: -48px 0; } +.ui-icon-carat-1-s { background-position: -64px 0; } +.ui-icon-carat-1-sw { background-position: -80px 0; } +.ui-icon-carat-1-w { background-position: -96px 0; } +.ui-icon-carat-1-nw { background-position: -112px 0; } +.ui-icon-carat-2-n-s { background-position: -128px 0; } +.ui-icon-carat-2-e-w { background-position: -144px 0; } +.ui-icon-triangle-1-n { background-position: 0 -16px; } +.ui-icon-triangle-1-ne { background-position: -16px -16px; } +.ui-icon-triangle-1-e { background-position: -32px -16px; } +.ui-icon-triangle-1-se { background-position: -48px -16px; } +.ui-icon-triangle-1-s { background-position: -64px -16px; } +.ui-icon-triangle-1-sw { background-position: -80px -16px; } +.ui-icon-triangle-1-w { background-position: -96px -16px; } +.ui-icon-triangle-1-nw { background-position: -112px -16px; } +.ui-icon-triangle-2-n-s { background-position: -128px -16px; } +.ui-icon-triangle-2-e-w { background-position: -144px -16px; } +.ui-icon-arrow-1-n { background-position: 0 -32px; } +.ui-icon-arrow-1-ne { background-position: -16px -32px; } +.ui-icon-arrow-1-e { background-position: -32px -32px; } +.ui-icon-arrow-1-se { background-position: -48px -32px; } +.ui-icon-arrow-1-s { background-position: -64px -32px; } +.ui-icon-arrow-1-sw { background-position: -80px -32px; } +.ui-icon-arrow-1-w { background-position: -96px -32px; } +.ui-icon-arrow-1-nw { background-position: -112px -32px; } +.ui-icon-arrow-2-n-s { background-position: -128px -32px; } +.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; } +.ui-icon-arrow-2-e-w { background-position: -160px -32px; } +.ui-icon-arrow-2-se-nw { background-position: -176px -32px; } +.ui-icon-arrowstop-1-n { background-position: -192px -32px; } +.ui-icon-arrowstop-1-e { background-position: -208px -32px; } +.ui-icon-arrowstop-1-s { background-position: -224px -32px; } +.ui-icon-arrowstop-1-w { background-position: -240px -32px; } +.ui-icon-arrowthick-1-n { background-position: 0 -48px; } +.ui-icon-arrowthick-1-ne { background-position: -16px -48px; } +.ui-icon-arrowthick-1-e { background-position: -32px -48px; } +.ui-icon-arrowthick-1-se { background-position: -48px -48px; } +.ui-icon-arrowthick-1-s { background-position: -64px -48px; } +.ui-icon-arrowthick-1-sw { background-position: -80px -48px; } +.ui-icon-arrowthick-1-w { background-position: -96px -48px; } +.ui-icon-arrowthick-1-nw { background-position: -112px -48px; } +.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; } +.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; } +.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; } +.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; } +.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; } +.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; } +.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; } +.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; } +.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; } +.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; } +.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; } +.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; } +.ui-icon-arrowreturn-1-w { background-position: -64px -64px; } +.ui-icon-arrowreturn-1-n { background-position: -80px -64px; } +.ui-icon-arrowreturn-1-e { background-position: -96px -64px; } +.ui-icon-arrowreturn-1-s { background-position: -112px -64px; } +.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; } +.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; } +.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; } +.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; } +.ui-icon-arrow-4 { background-position: 0 -80px; } +.ui-icon-arrow-4-diag { background-position: -16px -80px; } +.ui-icon-extlink { background-position: -32px -80px; } +.ui-icon-newwin { background-position: -48px -80px; } +.ui-icon-refresh { background-position: -64px -80px; } +.ui-icon-shuffle { background-position: -80px -80px; } +.ui-icon-transfer-e-w { background-position: -96px -80px; } +.ui-icon-transferthick-e-w { background-position: -112px -80px; } +.ui-icon-folder-collapsed { background-position: 0 -96px; } +.ui-icon-folder-open { background-position: -16px -96px; } +.ui-icon-document { background-position: -32px -96px; } +.ui-icon-document-b { background-position: -48px -96px; } +.ui-icon-note { background-position: -64px -96px; } +.ui-icon-mail-closed { background-position: -80px -96px; } +.ui-icon-mail-open { background-position: -96px -96px; } +.ui-icon-suitcase { background-position: -112px -96px; } +.ui-icon-comment { background-position: -128px -96px; } +.ui-icon-person { background-position: -144px -96px; } +.ui-icon-print { background-position: -160px -96px; } +.ui-icon-trash { background-position: -176px -96px; } +.ui-icon-locked { background-position: -192px -96px; } +.ui-icon-unlocked { background-position: -208px -96px; } +.ui-icon-bookmark { background-position: -224px -96px; } +.ui-icon-tag { background-position: -240px -96px; } +.ui-icon-home { background-position: 0 -112px; } +.ui-icon-flag { background-position: -16px -112px; } +.ui-icon-calendar { background-position: -32px -112px; } +.ui-icon-cart { background-position: -48px -112px; } +.ui-icon-pencil { background-position: -64px -112px; } +.ui-icon-clock { background-position: -80px -112px; } +.ui-icon-disk { background-position: -96px -112px; } +.ui-icon-calculator { background-position: -112px -112px; } +.ui-icon-zoomin { background-position: -128px -112px; } +.ui-icon-zoomout { background-position: -144px -112px; } +.ui-icon-search { background-position: -160px -112px; } +.ui-icon-wrench { background-position: -176px -112px; } +.ui-icon-gear { background-position: -192px -112px; } +.ui-icon-heart { background-position: -208px -112px; } +.ui-icon-star { background-position: -224px -112px; } +.ui-icon-link { background-position: -240px -112px; } +.ui-icon-cancel { background-position: 0 -128px; } +.ui-icon-plus { background-position: -16px -128px; } +.ui-icon-plusthick { background-position: -32px -128px; } +.ui-icon-minus { background-position: -48px -128px; } +.ui-icon-minusthick { background-position: -64px -128px; } +.ui-icon-close { background-position: -80px -128px; } +.ui-icon-closethick { background-position: -96px -128px; } +.ui-icon-key { background-position: -112px -128px; } +.ui-icon-lightbulb { background-position: -128px -128px; } +.ui-icon-scissors { background-position: -144px -128px; } +.ui-icon-clipboard { background-position: -160px -128px; } +.ui-icon-copy { background-position: -176px -128px; } +.ui-icon-contact { background-position: -192px -128px; } +.ui-icon-image { background-position: -208px -128px; } +.ui-icon-video { background-position: -224px -128px; } +.ui-icon-script { background-position: -240px -128px; } +.ui-icon-alert { background-position: 0 -144px; } +.ui-icon-info { background-position: -16px -144px; } +.ui-icon-notice { background-position: -32px -144px; } +.ui-icon-help { background-position: -48px -144px; } +.ui-icon-check { background-position: -64px -144px; } +.ui-icon-bullet { background-position: -80px -144px; } +.ui-icon-radio-off { background-position: -96px -144px; } +.ui-icon-radio-on { background-position: -112px -144px; } +.ui-icon-pin-w { background-position: -128px -144px; } +.ui-icon-pin-s { background-position: -144px -144px; } +.ui-icon-play { background-position: 0 -160px; } +.ui-icon-pause { background-position: -16px -160px; } +.ui-icon-seek-next { background-position: -32px -160px; } +.ui-icon-seek-prev { background-position: -48px -160px; } +.ui-icon-seek-end { background-position: -64px -160px; } +.ui-icon-seek-start { background-position: -80px -160px; } +/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */ +.ui-icon-seek-first { background-position: -80px -160px; } +.ui-icon-stop { background-position: -96px -160px; } +.ui-icon-eject { background-position: -112px -160px; } +.ui-icon-volume-off { background-position: -128px -160px; } +.ui-icon-volume-on { background-position: -144px -160px; } +.ui-icon-power { background-position: 0 -176px; } +.ui-icon-signal-diag { background-position: -16px -176px; } +.ui-icon-signal { background-position: -32px -176px; } +.ui-icon-battery-0 { background-position: -48px -176px; } +.ui-icon-battery-1 { background-position: -64px -176px; } +.ui-icon-battery-2 { background-position: -80px -176px; } +.ui-icon-battery-3 { background-position: -96px -176px; } +.ui-icon-circle-plus { background-position: 0 -192px; } +.ui-icon-circle-minus { background-position: -16px -192px; } +.ui-icon-circle-close { background-position: -32px -192px; } +.ui-icon-circle-triangle-e { background-position: -48px -192px; } +.ui-icon-circle-triangle-s { background-position: -64px -192px; } +.ui-icon-circle-triangle-w { background-position: -80px -192px; } +.ui-icon-circle-triangle-n { background-position: -96px -192px; } +.ui-icon-circle-arrow-e { background-position: -112px -192px; } +.ui-icon-circle-arrow-s { background-position: -128px -192px; } +.ui-icon-circle-arrow-w { background-position: -144px -192px; } +.ui-icon-circle-arrow-n { background-position: -160px -192px; } +.ui-icon-circle-zoomin { background-position: -176px -192px; } +.ui-icon-circle-zoomout { background-position: -192px -192px; } +.ui-icon-circle-check { background-position: -208px -192px; } +.ui-icon-circlesmall-plus { background-position: 0 -208px; } +.ui-icon-circlesmall-minus { background-position: -16px -208px; } +.ui-icon-circlesmall-close { background-position: -32px -208px; } +.ui-icon-squaresmall-plus { background-position: -48px -208px; } +.ui-icon-squaresmall-minus { background-position: -64px -208px; } +.ui-icon-squaresmall-close { background-position: -80px -208px; } +.ui-icon-grip-dotted-vertical { background-position: 0 -224px; } +.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; } +.ui-icon-grip-solid-vertical { background-position: -32px -224px; } +.ui-icon-grip-solid-horizontal { background-position: -48px -224px; } +.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; } +.ui-icon-grip-diagonal-se { background-position: -80px -224px; } + + +/* Misc visuals +----------------------------------*/ + +/* Corner radius */ +.ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; } +.ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; } +.ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; } +.ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } +.ui-corner-top { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; } +.ui-corner-bottom { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } +.ui-corner-right { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; } +.ui-corner-left { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; } +.ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } + +/* Overlays */ +.ui-widget-overlay { background: #666666 url(images/ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat; opacity: .50;filter:Alpha(Opacity=50); } +.ui-widget-shadow { margin: -5px 0 0 -5px; padding: 5px; background: #000000 url(images/ui-bg_flat_10_000000_40x100.png) 50% 50% repeat-x; opacity: .20;filter:Alpha(Opacity=20); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }/* + * jQuery UI Resizable 1.8.11 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Resizable#theming + */ +.ui-resizable { position: relative;} +.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;} +.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; } +.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; } +.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; } +.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; } +.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; } +.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; } +.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; } +.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; } +.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}/* + * jQuery UI Selectable 1.8.11 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Selectable#theming + */ +.ui-selectable-helper { position: absolute; z-index: 100; border:1px dotted black; } +/* + * jQuery UI Accordion 1.8.11 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Accordion#theming + */ +/* IE/Win - Fix animation bug - #4615 */ +.ui-accordion { width: 100%; } +.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; } +.ui-accordion .ui-accordion-li-fix { display: inline; } +.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; } +.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; } +.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; } +.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; } +.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; } +.ui-accordion .ui-accordion-content-active { display: block; } +/* + * jQuery UI Autocomplete 1.8.11 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Autocomplete#theming + */ +.ui-autocomplete { position: absolute; cursor: default; } + +/* workarounds */ +* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */ + +/* + * jQuery UI Menu 1.8.11 + * + * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Menu#theming + */ +.ui-menu { + list-style:none; + padding: 2px; + margin: 0; + display:block; + float: left; +} +.ui-menu .ui-menu { + margin-top: -3px; +} +.ui-menu .ui-menu-item { + margin:0; + padding: 0; + zoom: 1; + float: left; + clear: left; + width: 100%; +} +.ui-menu .ui-menu-item a { + text-decoration:none; + display:block; + padding:.2em .4em; + line-height:1.5; + zoom:1; +} +.ui-menu .ui-menu-item a.ui-state-hover, +.ui-menu .ui-menu-item a.ui-state-active { + font-weight: normal; + margin: -1px; +} +/* + * jQuery UI Button 1.8.11 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Button#theming + */ +.ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */ +.ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */ +button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */ +.ui-button-icons-only { width: 3.4em; } +button.ui-button-icons-only { width: 3.7em; } + +/*button text element */ +.ui-button .ui-button-text { display: block; line-height: 1.4; } +.ui-button-text-only .ui-button-text { padding: .4em 1em; } +.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; } +.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; } +.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; } +.ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; } +/* no icon support for input elements, provide padding by default */ +input.ui-button { padding: .4em 1em; } + +/*button icon element(s) */ +.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; } +.ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; } +.ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; } +.ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; } +.ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; } + +/*button sets*/ +.ui-buttonset { margin-right: 7px; } +.ui-buttonset .ui-button { margin-left: 0; margin-right: -.3em; } + +/* workarounds */ +button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */ +/* + * jQuery UI Dialog 1.8.11 + * + * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) + * Dual licensed under the MIT or GPL Version 2 licenses. + * http://jquery.org/license + * + * http://docs.jquery.com/UI/Dialog#theming + */ +.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; } +.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; } +.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .1em 0; } +.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; } +.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; } +.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; } +.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; } +.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; } +.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; } +.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; } +.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; } +.ui-draggable .ui-dialog-titlebar { cursor: move; } diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/AUTHORS.txt --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/AUTHORS.txt Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,30 @@ +jQuery UI Authors (http://jqueryui.com/about) + +This software consists of voluntary contributions made by many +individuals. For exact contribution history, see the revision history +and logs, available at http://github.com/jquery/jquery-ui + +Brandon Aaron +Paul Bakaus (paulbakaus.com) +David Bolter +Rich Caloggero +Chi Cheng (cloudream@gmail.com) +Colin Clark (http://colin.atrc.utoronto.ca/) +Michelle D'Souza +Aaron Eisenberger (aaronchi@gmail.com) +Ariel Flesler +Bohdan Ganicky +Scott González +Marc Grabanski (m@marcgrabanski.com) +Klaus Hartl (stilbuero.de) +Scott Jehl +Cody Lindley +Eduardo Lundgren (eduardolundgren@gmail.com) +Todd Parker +John Resig +Patty Toland +Ca-Phun Ung (yelotofu.com) +Keith Wood (kbwood@virginbroadband.com.au) +Maggie Costello Wachs +Richard D. Worth (rdworth.org) +Jörn Zaefferer (bassistance.de) diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/GPL-LICENSE.txt --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/GPL-LICENSE.txt Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,278 @@ + GNU GENERAL PUBLIC LICENSE + Version 2, June 1991 + + Copyright (C) 1989, 1991 Free Software Foundation, Inc. + 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA + Everyone is permitted to copy and distribute verbatim copies + of this license document, but changing it is not allowed. + + Preamble + + The licenses for most software are designed to take away your +freedom to share and change it. By contrast, the GNU General Public +License is intended to guarantee your freedom to share and change free +software--to make sure the software is free for all its users. This +General Public License applies to most of the Free Software +Foundation's software and to any other program whose authors commit to +using it. (Some other Free Software Foundation software is covered by +the GNU Lesser General Public License instead.) You can apply it to +your programs, too. + + When we speak of free software, we are referring to freedom, not +price. Our General Public Licenses are designed to make sure that you +have the freedom to distribute copies of free software (and charge for +this service if you wish), that you receive source code or can get it +if you want it, that you can change the software or use pieces of it +in new free programs; and that you know you can do these things. + + To protect your rights, we need to make restrictions that forbid +anyone to deny you these rights or to ask you to surrender the rights. +These restrictions translate to certain responsibilities for you if you +distribute copies of the software, or if you modify it. + + For example, if you distribute copies of such a program, whether +gratis or for a fee, you must give the recipients all the rights that +you have. You must make sure that they, too, receive or can get the +source code. And you must show them these terms so they know their +rights. + + We protect your rights with two steps: (1) copyright the software, and +(2) offer you this license which gives you legal permission to copy, +distribute and/or modify the software. + + Also, for each author's protection and ours, we want to make certain +that everyone understands that there is no warranty for this free +software. If the software is modified by someone else and passed on, we +want its recipients to know that what they have is not the original, so +that any problems introduced by others will not reflect on the original +authors' reputations. + + Finally, any free program is threatened constantly by software +patents. We wish to avoid the danger that redistributors of a free +program will individually obtain patent licenses, in effect making the +program proprietary. To prevent this, we have made it clear that any +patent must be licensed for everyone's free use or not licensed at all. + + The precise terms and conditions for copying, distribution and +modification follow. + + GNU GENERAL PUBLIC LICENSE + TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION + + 0. This License applies to any program or other work which contains +a notice placed by the copyright holder saying it may be distributed +under the terms of this General Public License. The "Program", below, +refers to any such program or work, and a "work based on the Program" +means either the Program or any derivative work under copyright law: +that is to say, a work containing the Program or a portion of it, +either verbatim or with modifications and/or translated into another +language. (Hereinafter, translation is included without limitation in +the term "modification".) Each licensee is addressed as "you". + +Activities other than copying, distribution and modification are not +covered by this License; they are outside its scope. The act of +running the Program is not restricted, and the output from the Program +is covered only if its contents constitute a work based on the +Program (independent of having been made by running the Program). +Whether that is true depends on what the Program does. + + 1. You may copy and distribute verbatim copies of the Program's +source code as you receive it, in any medium, provided that you +conspicuously and appropriately publish on each copy an appropriate +copyright notice and disclaimer of warranty; keep intact all the +notices that refer to this License and to the absence of any warranty; +and give any other recipients of the Program a copy of this License +along with the Program. + +You may charge a fee for the physical act of transferring a copy, and +you may at your option offer warranty protection in exchange for a fee. + + 2. You may modify your copy or copies of the Program or any portion +of it, thus forming a work based on the Program, and copy and +distribute such modifications or work under the terms of Section 1 +above, provided that you also meet all of these conditions: + + a) You must cause the modified files to carry prominent notices + stating that you changed the files and the date of any change. + + b) You must cause any work that you distribute or publish, that in + whole or in part contains or is derived from the Program or any + part thereof, to be licensed as a whole at no charge to all third + parties under the terms of this License. + + c) If the modified program normally reads commands interactively + when run, you must cause it, when started running for such + interactive use in the most ordinary way, to print or display an + announcement including an appropriate copyright notice and a + notice that there is no warranty (or else, saying that you provide + a warranty) and that users may redistribute the program under + these conditions, and telling the user how to view a copy of this + License. (Exception: if the Program itself is interactive but + does not normally print such an announcement, your work based on + the Program is not required to print an announcement.) + +These requirements apply to the modified work as a whole. If +identifiable sections of that work are not derived from the Program, +and can be reasonably considered independent and separate works in +themselves, then this License, and its terms, do not apply to those +sections when you distribute them as separate works. But when you +distribute the same sections as part of a whole which is a work based +on the Program, the distribution of the whole must be on the terms of +this License, whose permissions for other licensees extend to the +entire whole, and thus to each and every part regardless of who wrote it. + +Thus, it is not the intent of this section to claim rights or contest +your rights to work written entirely by you; rather, the intent is to +exercise the right to control the distribution of derivative or +collective works based on the Program. + +In addition, mere aggregation of another work not based on the Program +with the Program (or with a work based on the Program) on a volume of +a storage or distribution medium does not bring the other work under +the scope of this License. + + 3. You may copy and distribute the Program (or a work based on it, +under Section 2) in object code or executable form under the terms of +Sections 1 and 2 above provided that you also do one of the following: + + a) Accompany it with the complete corresponding machine-readable + source code, which must be distributed under the terms of Sections + 1 and 2 above on a medium customarily used for software interchange; or, + + b) Accompany it with a written offer, valid for at least three + years, to give any third party, for a charge no more than your + cost of physically performing source distribution, a complete + machine-readable copy of the corresponding source code, to be + distributed under the terms of Sections 1 and 2 above on a medium + customarily used for software interchange; or, + + c) Accompany it with the information you received as to the offer + to distribute corresponding source code. (This alternative is + allowed only for noncommercial distribution and only if you + received the program in object code or executable form with such + an offer, in accord with Subsection b above.) + +The source code for a work means the preferred form of the work for +making modifications to it. For an executable work, complete source +code means all the source code for all modules it contains, plus any +associated interface definition files, plus the scripts used to +control compilation and installation of the executable. However, as a +special exception, the source code distributed need not include +anything that is normally distributed (in either source or binary +form) with the major components (compiler, kernel, and so on) of the +operating system on which the executable runs, unless that component +itself accompanies the executable. + +If distribution of executable or object code is made by offering +access to copy from a designated place, then offering equivalent +access to copy the source code from the same place counts as +distribution of the source code, even though third parties are not +compelled to copy the source along with the object code. + + 4. You may not copy, modify, sublicense, or distribute the Program +except as expressly provided under this License. Any attempt +otherwise to copy, modify, sublicense or distribute the Program is +void, and will automatically terminate your rights under this License. +However, parties who have received copies, or rights, from you under +this License will not have their licenses terminated so long as such +parties remain in full compliance. + + 5. You are not required to accept this License, since you have not +signed it. However, nothing else grants you permission to modify or +distribute the Program or its derivative works. These actions are +prohibited by law if you do not accept this License. Therefore, by +modifying or distributing the Program (or any work based on the +Program), you indicate your acceptance of this License to do so, and +all its terms and conditions for copying, distributing or modifying +the Program or works based on it. + + 6. Each time you redistribute the Program (or any work based on the +Program), the recipient automatically receives a license from the +original licensor to copy, distribute or modify the Program subject to +these terms and conditions. You may not impose any further +restrictions on the recipients' exercise of the rights granted herein. +You are not responsible for enforcing compliance by third parties to +this License. + + 7. If, as a consequence of a court judgment or allegation of patent +infringement or for any other reason (not limited to patent issues), +conditions are imposed on you (whether by court order, agreement or +otherwise) that contradict the conditions of this License, they do not +excuse you from the conditions of this License. If you cannot +distribute so as to satisfy simultaneously your obligations under this +License and any other pertinent obligations, then as a consequence you +may not distribute the Program at all. For example, if a patent +license would not permit royalty-free redistribution of the Program by +all those who receive copies directly or indirectly through you, then +the only way you could satisfy both it and this License would be to +refrain entirely from distribution of the Program. + +If any portion of this section is held invalid or unenforceable under +any particular circumstance, the balance of the section is intended to +apply and the section as a whole is intended to apply in other +circumstances. + +It is not the purpose of this section to induce you to infringe any +patents or other property right claims or to contest validity of any +such claims; this section has the sole purpose of protecting the +integrity of the free software distribution system, which is +implemented by public license practices. Many people have made +generous contributions to the wide range of software distributed +through that system in reliance on consistent application of that +system; it is up to the author/donor to decide if he or she is willing +to distribute software through any other system and a licensee cannot +impose that choice. + +This section is intended to make thoroughly clear what is believed to +be a consequence of the rest of this License. + + 8. If the distribution and/or use of the Program is restricted in +certain countries either by patents or by copyrighted interfaces, the +original copyright holder who places the Program under this License +may add an explicit geographical distribution limitation excluding +those countries, so that distribution is permitted only in or among +countries not thus excluded. In such case, this License incorporates +the limitation as if written in the body of this License. + + 9. The Free Software Foundation may publish revised and/or new versions +of the General Public License from time to time. Such new versions will +be similar in spirit to the present version, but may differ in detail to +address new problems or concerns. + +Each version is given a distinguishing version number. If the Program +specifies a version number of this License which applies to it and "any +later version", you have the option of following the terms and conditions +either of that version or of any later version published by the Free +Software Foundation. If the Program does not specify a version number of +this License, you may choose any version ever published by the Free Software +Foundation. + + 10. If you wish to incorporate parts of the Program into other free +programs whose distribution conditions are different, write to the author +to ask for permission. For software which is copyrighted by the Free +Software Foundation, write to the Free Software Foundation; we sometimes +make exceptions for this. Our decision will be guided by the two goals +of preserving the free status of all derivatives of our free software and +of promoting the sharing and reuse of software generally. + + NO WARRANTY + + 11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY +FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN +OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES +PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED +OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF +MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS +TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE +PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, +REPAIR OR CORRECTION. + + 12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING +WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR +REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, +INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING +OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED +TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY +YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER +PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE +POSSIBILITY OF SUCH DAMAGES. diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/MIT-LICENSE.txt --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/MIT-LICENSE.txt Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,25 @@ +Copyright (c) 2011 Paul Bakaus, 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. diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/accordion/collapsible.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/accordion/collapsible.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,57 @@ + + + + + jQuery UI Accordion - Collapse content + + + + + + + + + + +
+ +
+

Section 1

+
+

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.

+
+

Section 2

+
+

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.

+
+

Section 3

+
+

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.

+
    +
  • List item one
  • +
  • List item two
  • +
  • List item three
  • +
+
+

Section 4

+
+

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.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

+
+
+ +
+ + + +
+

By default, accordions always keep one section open. To allow for all sections to be be collapsible, set the collapsible option to true. Click on the currently open section to collapse its content pane.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/accordion/custom-icons.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/accordion/custom-icons.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,69 @@ + + + + + jQuery UI Accordion - Customize icons + + + + + + + + + + + +
+ +
+

Section 1

+
+

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.

+
+

Section 2

+
+

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.

+
+

Section 3

+
+

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.

+
    +
  • List item one
  • +
  • List item two
  • +
  • List item three
  • +
+
+

Section 4

+
+

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.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

+
+
+ + + +
+ + + +
+

Customize the header icons with the icons option, which accepts classes for the header's default and selected (open) state. Use any class from the UI CSS framework, or create custom classes with background images.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/accordion/default.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/accordion/default.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,85 @@ + + + + + jQuery UI Accordion - Default functionality + + + + + + + + + + +
+ +
+

Section 1

+
+

+ 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. +

+
+

Section 2

+
+

+ 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. +

+
+

Section 3

+
+

+ 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. +

+
    +
  • List item one
  • +
  • List item two
  • +
  • List item three
  • +
+
+

Section 4

+
+

+ 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. +

+

+ Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. + Class aptent taciti sociosqu ad litora torquent per conubia nostra, per + inceptos himenaeos. +

+
+
+ +
+ +
+

+Click headers to expand/collapse content that is broken into logical sections, much like tabs. +Optionally, toggle sections open/closed on mouseover. +

+

+The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is +usable without JavaScript. +

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/accordion/fillspace.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/accordion/fillspace.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,76 @@ + + + + + jQuery UI Accordion - Fill space + + + + + + + + + + + + +
+ +

Resize the outer container:

+ +
+ +
+

Section 1

+
+

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.

+
+

Section 2

+
+

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.

+
+

Section 3

+
+

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.

+
    +
  • List item one
  • +
  • List item two
  • +
  • List item three
  • +
+
+

Section 4

+
+

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.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

+
+
+ + +
+ +
I'm another panel
+ +
+ + + +
+

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 boolean fillSpace option to true, and the script will automatically set the dimensions of the accordion to the height of its parent container. The accordion will also resize with its container if the container is resizable.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/accordion/hoverintent.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/accordion/hoverintent.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,134 @@ + + + + + jQuery UI Accordion - Open on hoverintent + + + + + + + + + + +
+ +
+

Section 1

+
+

+ 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. +

+
+

Section 2

+
+

+ 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. +

+
+

Section 3

+
+

+ 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. +

+
    +
  • List item one
  • +
  • List item two
  • +
  • List item three
  • +
+
+

Section 4

+
+

+ 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. +

+

+ Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. + Class aptent taciti sociosqu ad litora torquent per conubia nostra, per + inceptos himenaeos. +

+
+
+ +
+ +
+

+Click headers to expand/collapse content that is broken into logical sections, much like tabs. +Optionally, toggle sections open/closed on mouseover. +

+

+The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is +usable without JavaScript. +

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/accordion/index.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/accordion/index.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,25 @@ + + + + + jQuery UI Accordion Demos + + + + + + + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/accordion/mouseover.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/accordion/mouseover.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,57 @@ + + + + + jQuery UI Accordion - Open on mouseover + + + + + + + + + + +
+ +
+

Section 1

+
+

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.

+
+

Section 2

+
+

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.

+
+

Section 3

+
+

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.

+
    +
  • List item one
  • +
  • List item two
  • +
  • List item three
  • +
+
+

Section 4

+
+

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.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

+
+
+ +
+ + + +
+

Toggle sections open/closed on mouseover with the event option. The default value for event is "click."

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/accordion/no-auto-height.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/accordion/no-auto-height.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,60 @@ + + + + + jQuery UI Accordion - No auto height + + + + + + + + + + +
+ +
+

Section 1

+
+

Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

+
+

Section 2

+
+

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.

+
+

Section 3

+
+

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.

+
    +
  • List item
  • +
  • List item
  • +
  • List item
  • +
  • List item
  • +
  • List item
  • +
  • List item
  • +
  • List item
  • +
+ Link to other content +
+
+ +
+ + + +
+

Setting autoHeight: false allows to accordion panels to keep their native height.

+

In addition, the navigation option is enabled, opening the panel based on the current location, eg. no-auto-height.html#panel2 would open the second panel on page load. It also finds anchors within the content, so #othercontent will open the third section, as it contains a link with that href.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/accordion/sortable.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/accordion/sortable.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,83 @@ + + + + + jQuery UI Accordion - Sortable + + + + + + + + + + + + +
+ +
+
+

Section 1

+
+

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.

+
+
+
+

Section 2

+
+

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.

+
+
+
+

Section 3

+
+

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.

+
    +
  • List item one
  • +
  • List item two
  • +
  • List item three
  • +
+
+
+
+

Section 4

+
+

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.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

+
+
+
+ +
+ + + +
+

Drag the header to re-order panels.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/autocomplete/categories.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/autocomplete/categories.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,71 @@ + + + + + jQuery UI Autocomplete - Categories + + + + + + + + + + + + + +
+ + +
+ + + +
+

A categorized search result. Try typing "a" or "n".

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/autocomplete/combobox.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/autocomplete/combobox.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,171 @@ + + + + + jQuery UI Autocomplete - Combobox + + + + + + + + + + + + + +
+ +
+ + +
+ + +
+ + + +
+

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.

+

The input is read from an existing select-element for progressive enhancement, passed to Autocomplete with a customized source-option.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/autocomplete/custom-data.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/autocomplete/custom-data.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,95 @@ + + + + + jQuery UI Autocomplete - Custom data and display + + + + + + + + + + + + +
+
Select a project (type "j" for a start):
+ + + +

+
+ + + +
+

You can use your own custom data formats and displays by simply overriding the default focus and select actions.

+

Try typing "j" to get a list of projects or just press the down arrow.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/autocomplete/default.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/autocomplete/default.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,64 @@ + + + + + jQuery UI Autocomplete - Default functionality + + + + + + + + + + + +
+ +
+ + +
+ +
+ + + +
+

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.

+

The datasource is a simple JavaScript array, provided to the widget using the source-option.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/autocomplete/folding.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/autocomplete/folding.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,62 @@ + + + + + jQuery UI Autocomplete - Accent folding + + + + + + + + + + + +
+ +
+
+ + +
+
+ +
+ + + +
+

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.

+

Try typing "Jo" to see "John" and "Jörn", then type "Jö" to see only "Jörn".

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/autocomplete/images/jquery_32x32.png Binary file jquery-ui/development-bundle/demos/autocomplete/images/jquery_32x32.png has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/autocomplete/images/jqueryui_32x32.png Binary file jquery-ui/development-bundle/demos/autocomplete/images/jqueryui_32x32.png has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/autocomplete/images/sizzlejs_32x32.png Binary file jquery-ui/development-bundle/demos/autocomplete/images/sizzlejs_32x32.png has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/autocomplete/images/transparent_1x1.png Binary file jquery-ui/development-bundle/demos/autocomplete/images/transparent_1x1.png has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/autocomplete/images/ui-anim_basic_16x16.gif Binary file jquery-ui/development-bundle/demos/autocomplete/images/ui-anim_basic_16x16.gif has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/autocomplete/index.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/autocomplete/index.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,27 @@ + + + + + jQuery UI Autocomplete Demos + + + + + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/autocomplete/london.xml --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/autocomplete/london.xml Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,114 @@ + + +6987 + +London +51.5084152563931 +-0.125532746315002 +2643743 +GB +United Kingdom + +P +PPLC + + +London +42.983389283 +-81.233042387 +6058560 +CA +Canada + +P +PPL + + +East London +-33.0152850934643 +27.9116249084473 +1006984 +ZA +South Africa + +P +PPL + + +City +51.5133363996235 +-0.0890064239501953 +2643744 +GB +United Kingdom + +A +ADM2 + + +London +37.1289771 +-84.0832646 +4298960 +US +United States + +P +PPL + + +The Tower of London +51.5082349601834 +-0.0763034820556641 +6286786 +GB +United Kingdom + +S +CSTL + + +London Reefs +8.85 +112.5333333 +1879967 + + + +U +RFSU + + +Greater London +51.5 +-0.1666667 +2648110 +GB +United Kingdom + +A +ADM2 + + +London +46.1666667 +6.0166667 +2661811 +CH +Switzerland + +H +STM + + +London Borough of Islington +51.5333333 +-0.1333333 +3333156 +GB +United Kingdom + +A +ADM2 + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/autocomplete/maxheight.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/autocomplete/maxheight.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,79 @@ + + + + + jQuery UI Autocomplete - Scrollable results + + + + + + + + + + + + +
+ +
+ + +
+ +
+ + + +
+

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.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/autocomplete/multiple-remote.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/autocomplete/multiple-remote.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,84 @@ + + + + + jQuery UI Autocomplete - Multiple, remote + + + + + + + + + + + + +
+ +
+ + +
+ +
+ + + +
+

Usage: Enter at least two characters to get bird name suggestions. Select a value to continue adding more names.

+

This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/autocomplete/multiple.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/autocomplete/multiple.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,99 @@ + + + + + jQuery UI Autocomplete - Multiple values + + + + + + + + + + + +
+ +
+ + +
+ +
+ + + +
+

Usage: Type something, eg. "j" to see suggestions for tagging with programming languages. Select a value, then continue typing to add more.

+

This is an example showing how to use the source-option along with some events to enable autocompleting multiple values into a single field.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/autocomplete/remote-jsonp.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/autocomplete/remote-jsonp.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,86 @@ + + + + + jQuery UI Autocomplete - Remote JSONP datasource + + + + + + + + + + + + +
+ +
+ + + Powered by geonames.org +
+ +
+ Result: +
+
+ +
+ + + +
+

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.

+

In this case, the datasource is the geonames.org webservice. 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.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/autocomplete/remote-with-cache.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/autocomplete/remote-with-cache.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,59 @@ + + + + + jQuery UI Autocomplete - Remote with caching + + + + + + + + + + + + +
+ +
+ + +
+ +
+ + + +
+

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.

+

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.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/autocomplete/remote.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/autocomplete/remote.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,59 @@ + + + + + jQuery UI Autocomplete - Remote datasource + + + + + + + + + + + + +
+ +
+ + +
+ +
+ Result: +
+
+ +
+ + + +
+

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.

+

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.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/autocomplete/search.php --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/autocomplete/search.php Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,640 @@ +"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", +"Pallas’s Fish Eagle"=>"Haliaeetus leucoryphus", +"Sandhill Crane"=>"Grus canadensis", +"Macqueen’s 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", +"Pallas’s 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 Bonelli’s 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" +); + +function array_to_json( $array ){ + + if( !is_array( $array ) ){ + return false; + } + + $associative = count( array_diff( array_keys($array), array_keys( array_keys( $array )) )); + if( $associative ){ + + $construct = array(); + foreach( $array as $key => $value ){ + + // We first copy each key/value pair into a staging array, + // formatting each key and value properly as we go. + + // Format the key: + if( is_numeric($key) ){ + $key = "key_$key"; + } + $key = "\"".addslashes($key)."\""; + + // Format the value: + if( is_array( $value )){ + $value = array_to_json( $value ); + } else if( !is_numeric( $value ) || is_string( $value ) ){ + $value = "\"".addslashes($value)."\""; + } + + // Add to staging array: + $construct[] = "$key: $value"; + } + + // Then we collapse the staging array into the JSON form: + $result = "{ " . implode( ", ", $construct ) . " }"; + + } else { // If the array is a vector (not associative): + + $construct = array(); + foreach( $array as $value ){ + + // Format the value: + if( is_array( $value )){ + $value = array_to_json( $value ); + } else if( !is_numeric( $value ) || is_string( $value ) ){ + $value = "'".addslashes($value)."'"; + } + + // Add to staging array: + $construct[] = $value; + } + + // Then we collapse the staging array into the JSON form: + $result = "[ " . implode( ", ", $construct ) . " ]"; + } + + return $result; +} + +$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; +} +echo array_to_json($result); + +?> \ No newline at end of file diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/autocomplete/xml.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/autocomplete/xml.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,72 @@ + + + + + jQuery UI Autocomplete - XML data parsed once + + + + + + + + + + + + +
+ +
+ + +
+ +
+ Result: +
+
+ +
+ + + +
+

This demo shows how to retrieve some XML data, parse it using jQuery's methods, then provide it to the autocomplete as the datasource.

+

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.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/button/checkbox.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/button/checkbox.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,44 @@ + + + + + jQuery UI Button - Checkboxes + + + + + + + + + + + +
+ + + +
+ + + +
+ +
+ + + +
+

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.

+

This demo also demonstrates three checkboxes styled as a button set by calling .buttonset() on a common container.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/button/default.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/button/default.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,38 @@ + + + + + jQuery UI Button - Default functionality + + + + + + + + + + +
+ + + + + +An anchor + +
+ + + +
+

Examples of the markup that can be used for buttons: A button element, an input of type submit and an anchor.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/button/icons.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/button/icons.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,56 @@ + + + + + jQuery UI Button - Icons + + + + + + + + + + +
+ + + + + + +
+ + + +
+

Some buttons with various combinations of text and icons, here specified via metadata.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/button/index.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/button/index.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,23 @@ + + + + + jQuery UI Button Demos + + + + + + + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/button/radio.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/button/radio.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,39 @@ + + + + + jQuery UI Button - Radios + + + + + + + + + + +
+ +
+
+ + + +
+
+ +
+ + + +
+

A set of three radio buttons transformed into a button set.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/button/splitbutton.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/button/splitbutton.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,55 @@ + + + + + jQuery UI Button - Split button + + + + + + + + + + + +
+ +
+ + +
+ +
+ + + +
+

An example of a split button built with two buttons: A plan button with just text, one with only a primary icon and no text. Both are grouped together in a set.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/button/toolbar.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/button/toolbar.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,120 @@ + + + + + jQuery UI Button - Toolbar + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + +
+ + + +
+

+ 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. +

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/demos.css --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/demos.css Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,334 @@ +body { + font-size: 62.5%; +} + +table { + font-size: 1em; +} + +/* Site + -------------------------------- */ + +body { + font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif"; +} + +/* Layout + -------------------------------- */ + +.layout-grid { + width: 960px; +} + +.layout-grid td { + vertical-align: top; +} + +.layout-grid td.left-nav { + width: 140px; +} + +.layout-grid td.normal { + border-left: 1px solid #eee; + padding: 20px 24px; + font-family: "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif"; +} + +.layout-grid td.demos { + background: url('/images/demos_bg.jpg') no-repeat; + height: 337px; + overflow: hidden; +} + +/* Normal + -------------------------------- */ + +.normal h3, +.normal h4 { + margin: 0; + font-weight: normal; +} + +.normal h3 { + padding: 0 0 9px; + font-size: 1.8em; +} + +.normal h4 { + padding-bottom: 21px; + border-bottom: 1px dashed #999; + font-size: 1.2em; + font-weight: bold; +} + +.normal p { + font-size: 1.2em; +} + +/* Demos */ + +.demos-nav, .demos-nav dt, .demos-nav dd, .demos-nav ul, .demos-nav li { + margin: 0; + padding: 0 +} + +.demos-nav { + float: left; + width: 170px; + font-size: 1.3em; +} + +.demos-nav dt, +.demos-nav h4 { + margin: 0; + padding: 0; + font: normal 1.1em "Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif"; + color: #e87b10; +} + +.demos-nav dt, +.demos-nav h4 { + margin-top: 1.5em; + margin-bottom: 0; + padding-left: 8px; + padding-bottom:5px; + line-height: 1.2em; + border-bottom: 1px solid #F4F4F4; +} + +.demos-nav dd a, +.demos-nav li a { + border-bottom: 1px solid #F4F4F4; + display:block; + padding: 4px 3px 4px 8px; + font-size: 90%; + text-decoration: none; + color: #555 ; + margin:2px 0; + height:13px; +} + +.demos-nav dd a:hover, +.demos-nav dd a:focus, +.demos-nav dd a:hover, +.demos-nav dd a:focus { + background: #f3f3f3; + color:#000; + -moz-border-radius: 5px; -webkit-border-radius: 5px; +} + .demos-nav dd a.selected { + background: #555; + color:#ffffff; + -moz-border-radius: 5px; -webkit-border-radius: 5px; +} + + +/* new styles for demo pages, added by Filament 12.29.08 +eventually we should convert the font sizes to ems -- using px for now to minimize style conflicts +*/ + +.normal h3.demo-header { font-size:32px; padding:0 0 5px; border-bottom:1px solid #eee; text-transform: capitalize; } +.normal h4.demo-subheader { font-size:10px; text-transform: uppercase; color:#999; padding:8px 0 3px; border:0; margin:0; } +.normal a:link, +.normal a:visited { color:#1b75bb; text-decoration:none; } +.normal a:hover, +.normal a:active { color:#0b559b; } + +#demo-config { padding:20px 0 0; } + +#demo-frame { float:left; width:540px; height:380px; border:1px solid #ddd; overflow: auto; position: relative; } +#demo-frame h3, #demo-frame h4 { padding: 0; font-weight: bold; font-size: 1em; } + +#demo-config-menu { float:right; width:180px; } +#demo-config-menu h4 { font-size:13px; color:#666; font-weight:normal; border:0; padding-left:18px; } + +#demo-config-menu ul { list-style: none; padding: 0; margin: 0; } + +#demo-config-menu li { font-size:12px; padding:0 0 0 10px; margin:3px 0; zoom: 1; } + +#demo-config-menu li a:link, +#demo-config-menu li a:visited { display:block; padding:1px 8px 4px; border-bottom:1px dotted #b3b3b3; } +* html #demo-config-menu li a:link, +* html #demo-config-menu li a:visited { padding:1px 8px 2px; } +#demo-config-menu li a:hover, +#demo-config-menu li a:active { background-color:#f6f6f6; } + +#demo-config-menu li.demo-config-on { background: url(images/demo-config-on-tile.gif) repeat-x left center; } + +#demo-config-menu li.demo-config-on a:link, +#demo-config-menu li.demo-config-on a:visited, +#demo-config-menu li.demo-config-on a:hover, +#demo-config-menu li.demo-config-on a:active { background: url(images/demo-config-on.gif) no-repeat left; padding-left:18px; color:#fff; border:0; margin-left:-10px; margin-top: 0px; margin-bottom: 0px; } + +#demo-source, #demo-notes { + clear: both; + padding: 20px 0 0; + font-size: 1.3em; +} + +#demo-notes { width:520px; color:#333; font-size: 1em; } +#demo-notes p code, .demo-description p code { padding: 0; font-weight: bold; } +#demo-source pre, #demo-source code { padding: 0; } +code, pre { padding:8px 0 8px 20px ; font-size: 1.2em; line-height:130%; } + +#demo-source a:link, +#demo-source a:visited, +#demo-source a:hover, +#demo-source a:active { font-size:12px; padding-left:13px; background-position: left center; background-repeat: no-repeat; } + +#demo-source a.source-open:link, +#demo-source a.source-open:visited, +#demo-source a.source-open:hover, +#demo-source a.source-open:active { background-image: url(images/demo-spindown-open.gif); } + +#demo-source a.source-closed:link, +#demo-source a.source-closed:visited, +#demo-source a.source-closed:hover, +#demo-source a.source-closed:active { background-image: url(images/demo-spindown-closed.gif); } + +div.demo { + padding:12px; + font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"; +} + +div.demo h3.docs { clear:left; font-size:12px; font-weight:normal; padding:0 0 1em; margin:0; } + +div.demo-description { + clear:both; + padding:12px; + font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"; + font-size: 1.3em; + line-height: 1.4em; +} + +.ui-draggable, .ui-droppable { + background-position: top left; +} + +.left-nav .demos-nav { + padding-right: 10px; +} + +#demo-link { font-size:11px; padding-top: 6px; clear: both; overflow: hidden; } +#demo-link a span.ui-icon { float:left; margin-right:3px; } + +/* Component containers +----------------------------------*/ +#widget-docs .ui-widget { font-family: Trebuchet MS,Verdana,Arial,sans-serif; font-size: 1em; } +#widget-docs .ui-widget input, #widget-docs .ui-widget select, #widget-docs .ui-widget textarea, #widget-docs .ui-widget button { font-family: Trebuchet MS,Verdana,Arial,sans-serif; font-size: 1em; } +#widget-docs .ui-widget-header { border: 1px solid #ffffff; background: #464646 url(images/464646_40x100_textures_01_flat_100.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; } +#widget-docs .ui-widget-header a { color: #ffffff; } +#widget-docs .ui-widget-content { border: 1px solid #ffffff; background: #ffffff url(images/ffffff_40x100_textures_01_flat_75.png) 50% 50% repeat-x; color: #222222; } +#widget-docs .ui-widget-content a { color: #222222; } + +/* Interaction states +----------------------------------*/ +#widget-docs .ui-state-default, #widget-docs .ui-widget-content #widget-docs .ui-state-default { border: 1px solid #666666; background: #555555 url(images/555555_40x100_textures_03_highlight_soft_75.png) 50% 50% repeat-x; font-weight: normal; color: #ffffff; outline: none; } +#widget-docs .ui-state-default a { color: #ffffff; text-decoration: none; outline: none; } +#widget-docs .ui-state-hover, #widget-docs .ui-widget-content #widget-docs .ui-state-hover, #widget-docs .ui-state-focus, #widget-docs .ui-widget-content #widget-docs .ui-state-focus { border: 1px solid #666666; background: #444444 url(images/444444_40x100_textures_03_highlight_soft_60.png) 50% 50% repeat-x; font-weight: normal; color: #ffffff; outline: none; } +#widget-docs .ui-state-hover a { color: #ffffff; text-decoration: none; outline: none; } +#widget-docs .ui-state-active, #widget-docs .ui-widget-content #widget-docs .ui-state-active { border: 1px solid #666666; background: #ffffff url(images/ffffff_40x100_textures_01_flat_65.png) 50% 50% repeat-x; font-weight: normal; color: #F6921E; outline: none; } +#widget-docs .ui-state-active a { color: #F6921E; outline: none; text-decoration: none; } + +/* Interaction Cues +----------------------------------*/ +#widget-docs .ui-state-highlight, #widget-docs .ui-widget-content #widget-docs .ui-state-highlight {border: 1px solid #fcefa1; background: #fbf9ee url(images/fbf9ee_40x100_textures_02_glass_55.png) 50% 50% repeat-x; color: #363636; } +#widget-docs .ui-state-error, #widget-docs .ui-widget-content #widget-docs .ui-state-error {border: 1px solid #cd0a0a; background: #fef1ec url(images/fef1ec_40x100_textures_05_inset_soft_95.png) 50% bottom repeat-x; color: #cd0a0a; } +#widget-docs .ui-state-error-text, #widget-docs .ui-widget-content #widget-docs .ui-state-error-text { color: #cd0a0a; } +#widget-docs .ui-state-disabled, #widget-docs .ui-widget-content #widget-docs .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; } +#widget-docs .ui-priority-primary, #widget-docs .ui-widget-content #widget-docs .ui-priority-primary { font-weight: bold; } +#widget-docs .ui-priority-secondary, #widget-docs .ui-widget-content #widget-docs .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; } + +/* Icons +----------------------------------*/ + +/* states and images */ +#demo-frame-wrapper .ui-icon, #widget-docs .ui-icon { width: 16px; height: 16px; background-image: url(images/222222_256x240_icons_icons.png); } +#widget-docs .ui-widget-content .ui-icon {background-image: url(images/222222_256x240_icons_icons.png); } +#widget-docs .ui-widget-header .ui-icon {background-image: url(images/222222_256x240_icons_icons.png); } +#widget-docs .ui-state-default .ui-icon { background-image: url(images/888888_256x240_icons_icons.png); } +#widget-docs .ui-state-hover .ui-icon, #widget-docs .ui-state-focus .ui-icon {background-image: url(images/454545_256x240_icons_icons.png); } +#widget-docs .ui-state-active .ui-icon {background-image: url(images/454545_256x240_icons_icons.png); } +#widget-docs .ui-state-highlight .ui-icon {background-image: url(images/2e83ff_256x240_icons_icons.png); } +#widget-docs .ui-state-error .ui-icon, #widget-docs .ui-state-error-text .ui-icon {background-image: url(images/cd0a0a_256x240_icons_icons.png); } + + +/* Misc visuals +----------------------------------*/ + +/* Corner radius */ +#widget-docs .ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; } +#widget-docs .ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; } +#widget-docs .ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; } +#widget-docs .ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; } +#widget-docs .ui-corner-top { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; } +#widget-docs .ui-corner-bottom { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; } +#widget-docs .ui-corner-right { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; } +#widget-docs .ui-corner-left { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; } +#widget-docs .ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; } + +/* Overlays */ +#widget-docs .ui-widget-overlay { background: #aaaaaa url(images/aaaaaa_40x100_textures_01_flat_0.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); } +#widget-docs .ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa url(images/aaaaaa_40x100_textures_01_flat_0.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); -moz-border-radius: 8px; -webkit-border-radius: 8px; } + +/* +----------------------------------*/ + +#widget-docs { margin:20px 0 0; border: none; } + +#widget-docs h2, #widget-docs h3, #widget-docs h4, #widget-docs p, #widget-docs ul, #widget-docs code { margin:0; padding:0; } +#widget-docs code { display:block; color:#444; font-size:.9em; margin:0 0 1em; } +#widget-docs code strong { color:#000; } +#widget-docs p { margin:0 3em 1.2em 0; } +#widget-docs p.intro { font-size:13px; color:#666; line-height:1.3; } +#widget-docs ul { list-style-type: none; } + +#widget-docs h2 { font-size:16px; margin:1.2em 0 .5em; } +#widget-docs h3 { font-size:14px; color:#e6820E; margin:1.5em 0 .5em; } +.normal #widget-docs h4 { font-size:12px; color:#000; border:0; margin:0 0 .5em; } + +#docs-overview-main { width:400px; } +#docs-overview-sidebar { float:right; width:200px; } +#docs-overview-sidebar a span { color:#666; } +#widget-docs #docs-overview-main p { margin-right:0; } +#widget-docs #docs-overview-sidebar h4 { padding-left:0; } + +.docs-list-header { float:left; width:100%; margin:10px 0 0; border-bottom:1px solid #eee; } +#widget-docs .docs-list-header h2 { float:left; margin:0; } +#widget-docs .docs-list-header p { float:right; margin:5px 0; font-size:11px; } + +.docs-list { float:left; width:100%; padding:0 0 10px; } +.docs-list .param-header { float:left; clear:left; width:100%; padding:8px 0; border-top:1px solid #eee; } +#widget-docs .param-header h3, #widget-docs .param-header p { margin:0; float:left; } +#widget-docs .param-header h3 { width:50%; } +#widget-docs .param-header h3 span { background: url(images/demo-spindown-closed.gif) no-repeat left; padding-left:13px; } +#widget-docs .param-open .param-header h3 span { background: url(images/demo-spindown-open.gif) no-repeat left; } +#widget-docs .param-header p { width:24%; } +#widget-docs .param-header p.param-type span { background: url(images/icon-docs-info.gif) no-repeat left; cursor:pointer; border-bottom:1px dashed #ccc; padding-left:15px; } + +.param-details { padding-left:13px; } +.param-args { margin:0 0 1.5em; border-top:1px dotted #ccc;} +.param-args td { padding:3px 30px 3px 5px; border-bottom:1px dotted #ccc; } + + +/* overrides for ui-tab styles */ +#widget-docs ul.ui-tabs-nav { padding:0 0 0 8px; } +#widget-docs .ui-tabs-nav li { margin:5px 5px 0 0; } + +#widget-docs .ui-tabs-nav li a:link, +#widget-docs .ui-tabs-nav li a:visited, +#widget-docs .ui-tabs-nav li a:hover, +#widget-docs .ui-tabs-nav li a:active { font-size:14px; padding:4px 1.2em 3px; color:#fff; } + +#widget-docs .ui-tabs-nav li.ui-tabs-selected a:link, +#widget-docs .ui-tabs-nav li.ui-tabs-selected a:visited, +#widget-docs .ui-tabs-nav li.ui-tabs-selected a:hover, +#widget-docs .ui-tabs-nav li.ui-tabs-selected a:active { color:#e6820E; } + +#widget-docs .ui-tabs-panel { padding:20px 9px; font-size:12px; line-height:1.4; color:#000; } + +#widget-docs .ui-widget-content a:link, +#widget-docs .ui-widget-content a:visited { color:#1b75bb; text-decoration:none; } +#widget-docs .ui-widget-content a:hover, +#widget-docs .ui-widget-content a:active { color:#0b559b; } + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/dialog/animated.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/dialog/animated.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,56 @@ + + + + + jQuery UI Dialog - Animation + + + + + + + + + + + + + + + + + + +
+ +
+

This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.

+
+ + + +
+ + + +
+

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.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/dialog/default.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/dialog/default.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,54 @@ + + + + + jQuery UI Dialog - Default functionality + + + + + + + + + + + + + + + +
+ +
+

This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.

+
+ + +
+

Sed vel diam id libero rutrum convallis. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.

+
+
+ checkbox
+ radio
+

+
+
+
+ +
+ + + +
+

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.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/dialog/index.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/dialog/index.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,23 @@ + + + + + jQuery UI Dialog Demos + + + + + + + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/dialog/modal-confirmation.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/dialog/modal-confirmation.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,69 @@ + + + + + jQuery UI Dialog - Modal confirmation + + + + + + + + + + + + + + + +
+ +
+

These items will be permanently deleted and cannot be recovered. Are you sure?

+
+ + +
+

Sed vel diam id libero rutrum convallis. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.

+
+
+ checkbox
+ radio
+

+
+
+
+ +
+ + + +
+

Confirm an action that may be destructive or important. Set the modal option to true, and specify primary and secondary user actions with the buttons option.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/dialog/modal-form.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/dialog/modal-form.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,167 @@ + + + + + jQuery UI Dialog - Modal form + + + + + + + + + + + + + + + + + + +
+ +
+

All form fields are required.

+ +
+
+ + + + + + +
+
+
+ + +
+

Existing Users:

+ + + + + + + + + + + + + + + +
NameEmailPassword
John Doejohn.doe@example.comjohndoe1
+
+ + +
+ + + +
+

Use a modal dialog to require that the user enter data during a multi-step process. Embed form markup in the content area, set the modal option to true, and specify primary and secondary user actions with the buttons option.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/dialog/modal-message.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/dialog/modal-message.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,71 @@ + + + + + jQuery UI Dialog - Modal message + + + + + + + + + + + + + + + + +
+ +
+

+ + Your files have downloaded successfully into the My Downloads folder. +

+

+ Currently using 36% of your storage space. +

+
+ + +
+

Sed vel diam id libero rutrum convallis. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.

+
+
+ checkbox
+ radio
+

+
+
+
+ +
+ + + +
+

Use a modal dialog to explicitly acknowledge information or an action before continuing their work. Set the modal option to true, and specify a primary action (Ok) with the buttons option.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/dialog/modal.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/dialog/modal.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,60 @@ + + + + + jQuery UI Dialog - Basic modal + + + + + + + + + + + + + + + +
+ +
+

Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.

+
+ + +
+

Sed vel diam id libero rutrum convallis. Donec aliquet leo vel magna. Phasellus rhoncus faucibus ante. Etiam bibendum, enim faucibus aliquet rhoncus, arcu felis ultricies neque, sit amet auctor elit eros a lectus.

+
+
+ checkbox
+ radio
+

+
+
+
+ +
+ + + +
+

A modal dialog prevents the user from interacting with the rest of the page until it is closed.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/draggable/constrain-movement.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/draggable/constrain-movement.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,69 @@ + + + + + jQuery UI Draggable - Constrain movement + + + + + + + + + + + + +
+ +

Constrain movement along an axis:

+ +
+

I can be dragged only vertically

+
+ +
+

I can be dragged only horizontally

+
+ +

Or to within another DOM element:

+
+
+

I'm contained within the box

+
+ +
+

I'm contained within the box's parent

+
+ +
+

I'm contained within my parent

+
+
+ +
+ + + +
+

Constrain the movement of each draggable by defining the boundaries of the draggable area. Set the axis option to limit the draggable's path to the x- or y-axis, or use the containment option to specify a parent DOM element or a jQuery selector, like 'document.'

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/draggable/cursor-style.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/draggable/cursor-style.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,49 @@ + + + + + jQuery UI Draggable - Cursor style + + + + + + + + + + + + +
+ +
+

I will always stick to the center (relative to the mouse)

+
+ +
+

My cursor is at left -5 and top -5

+
+ +
+

My cursor position is only controlled for the 'bottom' value

+
+ +
+ + + +
+

Position the cursor while dragging the object. By default the cursor appears in the center of the dragged object; use the cursorAt option to specify another location relative to the draggable (specify a pixel value from the top, right, bottom, and/or left). Customize the cursor's appearance by supplying the cursor option with a valid CSS cursor value: default, move, pointer, crosshair, etc.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/draggable/default.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/draggable/default.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,39 @@ + + + + + jQuery UI Draggable - Default functionality + + + + + + + + + + + + +
+ +
+

Drag me around

+
+ +
+ + + +
+

Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/draggable/delay-start.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/draggable/delay-start.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,45 @@ + + + + + jQuery UI Draggable - Delay start + + + + + + + + + + + + +
+ +
+

Only if you drag me by 20 pixels, the dragging will start

+
+ +
+

Regardless of the distance, you have to drag and wait for 1000ms before dragging starts

+
+ +
+ + + +
+

Delay the start of dragging for a number of milliseconds with the delay option; prevent dragging until the cursor is held down and dragged a specifed number of pixels with the distance option.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/draggable/events.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/draggable/events.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,77 @@ + + + + + jQuery UI Draggable - Events + + + + + + + + + + + + +
+ +
+ +

Drag me to trigger the chain of events.

+ +
    +
  • "start" invoked 0x
  • +
  • "drag" invoked 0x
  • +
  • "stop" invoked 0x
  • +
+
+ +
+ + + +
+

Layer functionality onto the draggable using the start, drag, and stop events. Start is fired at the start of the drag; drag during the drag; and stop when dragging stops.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/draggable/handle.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/draggable/handle.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,50 @@ + + + + + jQuery UI Draggable - Handles + + + + + + + + + + + + +
+ +
+

I can be dragged only by this handle

+
+ +
+

You can drag me around…

+

…but you can't drag me by this handle.

+
+ + + +
+ + + +
+

Allow dragging only when the cursor is over a specific part of the draggable. Use the handle option to specify the jQuery selector of an element (or group of elements) used to drag the object.

+

Or prevent dragging when the cursor is over a specific element (or group of elements) within the draggable. Use the cancel option to specify a jQuery selector over which to "cancel" draggable functionality.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/draggable/index.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/draggable/index.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,28 @@ + + + + + jQuery UI Draggable Demos + + + + + + + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/draggable/revert.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/draggable/revert.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,44 @@ + + + + + jQuery UI Draggable - Revert position + + + + + + + + + + + + +
+ +
+

Revert the original

+
+ +
+

Revert the helper

+
+ +
+ + + +
+

Return the draggable (or it's helper) to its original location when dragging stops with the boolean revert option.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/draggable/scroll.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/draggable/scroll.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,51 @@ + + + + + jQuery UI Draggable - Auto-scroll + + + + + + + + + + + + +
+ +
+

Scroll set to true, default settings

+
+ +
+

scrollSensitivity set to 100

+
+ +
+

scrollSpeed set to 100

+
+ +
+ +
+ + + +
+

Automatically scroll the document when the draggable is moved beyond the viewport. Set the scroll option to true to enable auto-scrolling, and fine-tune when scrolling is triggered and its speed with the scrollSensitivity and scrollSpeed options.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/draggable/snap-to.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/draggable/snap-to.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,68 @@ + + + + + jQuery UI Draggable - Snap to element or grid + + + + + + + + + + + + +
+ +
+

I'm a snap target

+
+ +
+ +
+

Default (snap: true), snaps to all other draggable elements

+
+ +
+

I only snap to the big box

+
+ +
+

I only snap to the outer edges of the big box

+
+ +
+

I snap to a 20 x 20 grid

+
+ +
+

I snap to a 80 x 80 grid

+
+ +
+ + + +
+

Snap the draggable to the inner or outer boundaries of a DOM element. Use the snap, snapMode (inner, outer, both), and snapTolerance (distance in pixels the draggable must be from the element when snapping is invoked) options.

+

Or snap the draggable to a grid. Set the dimensions of grid cells (height and width in pixels) with the grid option.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/draggable/sortable.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/draggable/sortable.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,57 @@ + + + + + jQuery UI Draggable + Sortable + + + + + + + + + + + + + +
+ +
    +
  • Drag me down
  • +
+ +
    +
  • Item 1
  • +
  • Item 2
  • +
  • Item 3
  • +
  • Item 4
  • +
  • Item 5
  • +
+ +
+ + + +
+

Draggables are built to interact seamlessly with sortables.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/draggable/visual-feedback.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/draggable/visual-feedback.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,77 @@ + + + + + jQuery UI Draggable - Visual feedback + + + + + + + + + + + + +
+ +

With helpers:

+ +
+

Original

+
+ +
+

Semi-transparent clone

+
+ +
+

Custom helper (in combination with cursorAt)

+
+ +

Stacked:

+
+
+

We are draggables..

+
+ +
+

..whose z-indexes are controlled automatically..

+
+ +
+

..with the stack option.

+
+
+ +
+ + + +
+

Provide feedback to users as they drag an object in the form of a helper. The helper option accepts the values 'original' (the draggable object moves with the cursor), 'clone' (a duplicate of the draggable moves with the cursor), or a function that returns a DOM element (that element is shown near the cursor during drag). Control the helper's transparency with the opacity option.

+

To clarify which draggable is in play, bring the draggable in motion to front. Use the zIndex option to set a higher z-index for the helper, if in play, or use the stack option to ensure that the last item dragged will appear on top of others in the same group on drag stop.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/droppable/accepted-elements.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/droppable/accepted-elements.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,60 @@ + + + + + jQuery UI Droppable - Accept + + + + + + + + + + + + + +
+ +
+

I'm draggable but can't be dropped

+
+ +
+

Drag me to my target

+
+ +
+

accept: '#draggable'

+
+ +
+ + + +
+

Specify using the accept option which element (or group of elements) is accepted by the target droppable.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/droppable/default.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/droppable/default.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,53 @@ + + + + + jQuery UI Droppable - Default functionality + + + + + + + + + + + + + +
+ +
+

Drag me to my target

+
+ +
+

Drop here

+
+ +
+ + + +
+

Enable any DOM element to be droppable, a target for draggable elements.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/droppable/images/high_tatras.jpg Binary file jquery-ui/development-bundle/demos/droppable/images/high_tatras.jpg has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/droppable/images/high_tatras2.jpg Binary file jquery-ui/development-bundle/demos/droppable/images/high_tatras2.jpg has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/droppable/images/high_tatras2_min.jpg Binary file jquery-ui/development-bundle/demos/droppable/images/high_tatras2_min.jpg has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/droppable/images/high_tatras3.jpg Binary file jquery-ui/development-bundle/demos/droppable/images/high_tatras3.jpg has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/droppable/images/high_tatras3_min.jpg Binary file jquery-ui/development-bundle/demos/droppable/images/high_tatras3_min.jpg has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/droppable/images/high_tatras4.jpg Binary file jquery-ui/development-bundle/demos/droppable/images/high_tatras4.jpg has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/droppable/images/high_tatras4_min.jpg Binary file jquery-ui/development-bundle/demos/droppable/images/high_tatras4_min.jpg has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/droppable/images/high_tatras_min.jpg Binary file jquery-ui/development-bundle/demos/droppable/images/high_tatras_min.jpg has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/droppable/index.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/droppable/index.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,24 @@ + + + + + jQuery UI Droppable Demos + + + + + + + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/droppable/photo-manager.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/droppable/photo-manager.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,184 @@ + + + + + jQuery UI Droppable - Simple photo manager + + + + + + + + + + + + + + + + +
+ + + +
+

Trash Trash

+
+ +
+ + +
+

You can delete an image either by dragging it to the Trash or by clicking the trash icon.

+

You can "recycle" an image by dragging it back to the gallery or by clicking the recycle icon.

+

You can view larger image by clicking the zoom icon. jQuery UI dialog widget is used for the modal window.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/droppable/propagation.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/droppable/propagation.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,80 @@ + + + + + jQuery UI Droppable - Prevent propagation + + + + + + + + + + + + + +
+ +
+

Drag me to my target

+
+ +
+

Outer droppable

+
+

Inner droppable (not greedy)

+
+
+ +
+

Outer droppable

+
+

Inner droppable (greedy)

+
+
+ +
+ + + +
+

When working with nested droppables — for example, you may have an editable directory structure displayed as a tree, with folder and document nodes — the greedy option set to true prevents event propagation when a draggable is dropped on a child node (droppable).

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/droppable/revert.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/droppable/revert.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,61 @@ + + + + + jQuery UI Droppable - Revert draggable position + + + + + + + + + + + + + +
+ +
+

I revert when I'm dropped

+
+ +
+

I revert when I'm not dropped

+
+ +
+

Drop me here

+
+ +
+ + + +
+

Return the draggable (or it's helper) to its original location when dragging stops with the boolean revert option set on the draggable.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/droppable/shopping-cart.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/droppable/shopping-cart.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,101 @@ + + + + + jQuery UI Droppable - Shopping Cart Demo + + + + + + + + + + + + + + + +
+ +
+

Products

+
+

T-Shirts

+
+
    +
  • Lolcat Shirt
  • +
  • Cheezeburger Shirt
  • +
  • Buckit Shirt
  • +
+
+

Bags

+
+
    +
  • Zebra Striped
  • +
  • Black Leather
  • +
  • Alligator Leather
  • +
+
+

Gadgets

+
+
    +
  • iPhone
  • +
  • iPod
  • +
  • iPad
  • +
+
+
+
+ +
+

Shopping Cart

+
+
    +
  1. Add your items here
  2. +
+
+
+ +
+ + + +
+

Demonstrate how to use an accordion to structure products into a catalog and make use drag and drop for adding them to a shopping cart, where they are sortable.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/droppable/visual-feedback.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/droppable/visual-feedback.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,78 @@ + + + + + jQuery UI Droppable - Visual feedback + + + + + + + + + + + + + +
+ +

Feedback on hover:

+ +
+

Drag me to my target

+
+ +
+

Drop here

+
+ +

Feedback on activating draggable:

+ +
+

Drag me to my target

+
+ +
+

Drop here

+
+ +
+ + + +
+

Change the droppable's appearance on hover, or when the droppable is active (an acceptable draggable is dropped on it). Use the hoverClass or activeClass options to specify respective classes.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/images/calendar.gif Binary file jquery-ui/development-bundle/demos/images/calendar.gif has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/images/demo-config-on-tile.gif Binary file jquery-ui/development-bundle/demos/images/demo-config-on-tile.gif has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/images/demo-config-on.gif Binary file jquery-ui/development-bundle/demos/images/demo-config-on.gif has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/images/demo-spindown-closed.gif Binary file jquery-ui/development-bundle/demos/images/demo-spindown-closed.gif has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/images/demo-spindown-open.gif Binary file jquery-ui/development-bundle/demos/images/demo-spindown-open.gif has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/images/icon-docs-info.gif Binary file jquery-ui/development-bundle/demos/images/icon-docs-info.gif has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/images/pbar-ani.gif Binary file jquery-ui/development-bundle/demos/images/pbar-ani.gif has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/index.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/index.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,321 @@ + + + + + jQuery UI Demos + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
Interactions
+
Draggable
+
Droppable
+
Resizable
+
Selectable
+
Sortable
+
Widgets
+
Accordion
+
Autocomplete
+
Button
+ +
Dialog
+ + + +
Effects
+
Color Animation
+
Toggle Class
+
Add Class
+
Remove Class
+
Switch Class
+
Effect
+
Toggle
+
Hide
+
Show
+
Utilities
+
Position
+
About jQuery UI
+
Getting Started
+
Upgrade Guide
+
Changelog
+
Roadmap
+
Subversion Access
+
UI Developer Guidelines
+
Theming
+
Theming jQuery UI
+
jQuery UI CSS Framework
+
ThemeRoller application
+
Theme Switcher Widget
+ +
+
+ +
+ +

Instructions

+

+ These demos showcase some common uses of each jQuery UI plugin. Simply copy and paste code from the demos to get started. Have fun playing with them. +

+ +
+ +
+ + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/position/cycler.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/position/cycler.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,122 @@ + + + + + jQuery UI Position - Default functionality + + + + + + + + + + + +
+ + + + + + + + +
+ + + +
+

A prototype for the Photoviewer using Position to place images at the center, left and right and cycle them. +
Use the links at the top to cycle, or click on the images on the left and right. +
Note how the images are repositioned when resizing the window. +
Warning: Doesn't currently work inside the demo viewer; open in a new window instead!

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/position/default.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/position/default.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,153 @@ + + + + + jQuery UI Position - Default functionality + + + + + + + + + + + + + +
+ +
+

+ This is the position parent element. +

+
+ +
+

+ to position +

+
+ +
+

+ to position 2 +

+
+ +
+ position... +
+ my: + + +
+
+ at: + + +
+
+ offset: + +
+
+ collision: + + +
+
+ +
+ + + +
+

Use the form controls to configure the positioning, or drag the positioned element to modify its offset. +
Drag around the parent element to see collision detection in action.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/position/images/earth.jpg Binary file jquery-ui/development-bundle/demos/position/images/earth.jpg has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/position/images/flight.jpg Binary file jquery-ui/development-bundle/demos/position/images/flight.jpg has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/position/images/rocket.jpg Binary file jquery-ui/development-bundle/demos/position/images/rocket.jpg has changed diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/position/index.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/position/index.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,19 @@ + + + + + jQuery UI Position Demo + + + + + + + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/resizable/animate.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/resizable/animate.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,43 @@ + + + + + jQuery UI Resizable - Animate + + + + + + + + + + + + +
+ +
+

Animate

+
+ +
+ + + +
+

Animate the resize action using the animate option (boolean). When this option is set to true, drag the outline to the desired location; the element animates to that size on drag stop.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/resizable/aspect-ratio.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/resizable/aspect-ratio.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,42 @@ + + + + + jQuery UI Resizable - Preserve aspect ratio + + + + + + + + + + + + +
+ +
+

Preserve aspect ratio

+
+ +
+ + + +
+

Maintain the existing aspect ratio or set a new one to constrain the proportions on resize. Set the aspectRatio option to true, and optionally pass in a new ratio (i.e., 4/3)

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/resizable/constrain-area.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/resizable/constrain-area.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,47 @@ + + + + + jQuery UI Resizable - Constrain resize area + + + + + + + + + #container { width: 300px; height: 300px; } + #container h3 { text-align: center; margin: 0; margin-bottom: 10px; } + #resizable { background-position: top left; width: 150px; height: 150px; } + #resizable, #container { padding: 0.5em; } + + + + + +
+ +
+

Containment

+
+

Resizable

+
+
+ +
+ + + +
+

Define the boundaries of the resizable area. Use the containment option to specify a parent DOM element or a jQuery selector, like 'document.'

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/resizable/default.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/resizable/default.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,40 @@ + + + + + jQuery UI Resizable - Default functionality + + + + + + + + + + + + +
+ +
+

Resizable

+
+ +
+ + + +
+

Enable any DOM element to be resizable. With the cursor grab the right or bottom border and drag to the desired width or height.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/resizable/delay-start.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/resizable/delay-start.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,52 @@ + + + + + jQuery UI Resizable - Delay start + + + + + + + + + + + + +
+ +

Time delay (ms):

+
+

Time

+
+ +

Distance delay (px):

+
+

Distance

+
+ +
+ + + +
+

Delay the start of resizng for a number of milliseconds with the delay option; prevent resizing until the cursor is held down and dragged a specifed number of pixels with the distance option.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/resizable/helper.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/resizable/helper.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,43 @@ + + + + + jQuery UI Resizable - Helper + + + + + + + + + + + + +
+ +
+

Helper

+
+ +
+ + + +
+

Display only an outline of the element while resizing by setting the helper option to a CSS class.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/resizable/index.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/resizable/index.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,28 @@ + + + + + jQuery UI Resizable Demos + + + + + + + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/resizable/max-min.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/resizable/max-min.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,45 @@ + + + + + jQuery UI Resizable - Maximum / minimum size + + + + + + + + + + + + +
+ +
+

Resize larger / smaller

+
+ +
+ + + +
+

Limit the resizable element to a maximum or minimum height or width using the maxHeight, maxWidth, minHeight, and minWidth options.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/resizable/snap-to-grid.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/resizable/snap-to-grid.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,42 @@ + + + + + jQuery UI Resizable - Snap to grid + + + + + + + + + + + + +
+ +
+

Grid

+
+ +
+ + + +
+

Snap the resizable element to a grid. Set the dimensions of grid cells (height and width in pixels) with the grid option.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/resizable/synchronous-resize.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/resizable/synchronous-resize.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,49 @@ + + + + + jQuery UI Resizable - Synchronous resize + + + + + + + + + + + + +
+ +
+

Resize

+
+ +
+

will also resize

+
+ +
+ + + +
+

Resize multiple elements simultaneously by clicking and dragging the sides of one. Pass a shared selector into the alsoResize option.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/resizable/textarea.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/resizable/textarea.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,41 @@ + + + + + jQuery UI Resizable - Textarea + + + + + + + + + + + + +
+ + + +
+ + + +
+

Display only an outline of the element while resizing by setting the helper option to a CSS class.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/resizable/visual-feedback.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/resizable/visual-feedback.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,43 @@ + + + + + jQuery UI Resizable - Visual feedback + + + + + + + + + + + + +
+ +
+

Ghost

+
+ +
+ + + +
+

Instead of showing the actual element during resize, set the ghost option to true to show a semi-transparent part of the element.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/selectable/default.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/selectable/default.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,50 @@ + + + + + jQuery UI Selectable - Default functionality + + + + + + + + + + + + + +
+ +
    +
  1. Item 1
  2. +
  3. Item 2
  4. +
  5. Item 3
  6. +
  7. Item 4
  8. +
  9. Item 5
  10. +
  11. Item 6
  12. +
  13. Item 7
  14. +
+ +
+ + + +
+

Enable a DOM element (or group of elements) to be selectable. Draw a box with your cursor to select items. Hold down the Ctrl key to make multiple non-adjacent selections.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/selectable/display-grid.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/selectable/display-grid.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,55 @@ + + + + + jQuery UI Selectable - Display as grid + + + + + + + + + + + + + +
+ +
    +
  1. 1
  2. +
  3. 2
  4. +
  5. 3
  6. +
  7. 4
  8. +
  9. 5
  10. +
  11. 6
  12. +
  13. 7
  14. +
  15. 8
  16. +
  17. 9
  18. +
  19. 10
  20. +
  21. 11
  22. +
  23. 12
  24. +
+ +
+ + + +
+

To arrange selectable items as a grid, give them identical dimensions and float them using CSS.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/selectable/index.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/selectable/index.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,20 @@ + + + + + jQuery UI Selectable Demos + + + + + + + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/selectable/serialize.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/selectable/serialize.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,61 @@ + + + + + jQuery UI Selectable - Serialize + + + + + + + + + + + + + +
+ +

+You've selected: none. +

+ +
    +
  1. Item 1
  2. +
  3. Item 2
  4. +
  5. Item 3
  6. +
  7. Item 4
  8. +
  9. Item 5
  10. +
  11. Item 6
  12. +
+ +
+ + + +
+

Write a function that fires on the stop event to collect the index values of selected items. Present values as feedback, or pass as a data string.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/sortable/connect-lists-through-tabs.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/sortable/connect-lists-through-tabs.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,78 @@ + + + + + jQuery UI Sortable - Connect lists with Tabs + + + + + + + + + + + + + +
+ +
+ +
+
    +
  • Item 1
  • +
  • Item 2
  • +
  • Item 3
  • +
  • Item 4
  • +
  • Item 5
  • +
+
+
+
    +
  • Item 1
  • +
  • Item 2
  • +
  • Item 3
  • +
  • Item 4
  • +
  • Item 5
  • +
+
+
+ +
+ + + +
+

Sort items from one list into another and vice versa, by dropping the list item on the appropriate tab above.

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/sortable/connect-lists.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/sortable/connect-lists.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,58 @@ + + + + + jQuery UI Sortable - Connect lists + + + + + + + + + + + +
+ +
    +
  • Item 1
  • +
  • Item 2
  • +
  • Item 3
  • +
  • Item 4
  • +
  • Item 5
  • +
+ +
    +
  • Item 1
  • +
  • Item 2
  • +
  • Item 3
  • +
  • Item 4
  • +
  • Item 5
  • +
+ +
+ + + +
+

+ Sort items from one list into another and vice versa, by passing a selector into + the connectWith option. The simplest way to do this is to + group all related lists with a CSS class, and then pass that class into the + sortable function (i.e., connectWith: '.myclass'). +

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/sortable/default.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/sortable/default.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,51 @@ + + + + + jQuery UI Sortable - Default functionality + + + + + + + + + + + +
+ +
    +
  • Item 1
  • +
  • Item 2
  • +
  • Item 3
  • +
  • Item 4
  • +
  • Item 5
  • +
  • Item 6
  • +
  • Item 7
  • +
+ +
+ + + +
+

+ Enable a group of DOM elements to be sortable. Click on and drag an + element to a new spot within the list, and the other items will adjust to + fit. By default, sortable items share draggable properties. +

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/sortable/delay-start.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/sortable/delay-start.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,67 @@ + + + + + jQuery UI Sortable - Delay start + + + + + + + + + + + +
+ +

Time delay of 300ms:

+ +
    +
  • Item 1
  • +
  • Item 2
  • +
  • Item 3
  • +
  • Item 4
  • +
+ +

Distance delay of 15px:

+ +
    +
  • Item 1
  • +
  • Item 2
  • +
  • Item 3
  • +
  • Item 4
  • +
+ +
+ + + +
+

+ Prevent accidental sorting either by delay (time) or distance. Set a number of + milliseconds the element needs to be dragged before sorting starts + with the delay option. Set a distance in pixels the element + needs to be dragged before sorting starts with the distance + option. +

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/sortable/display-grid.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/sortable/display-grid.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,54 @@ + + + + + jQuery UI Sortable - Display as grid + + + + + + + + + + + +
+ +
    +
  • 1
  • +
  • 2
  • +
  • 3
  • +
  • 4
  • +
  • 5
  • +
  • 6
  • +
  • 7
  • +
  • 8
  • +
  • 9
  • +
  • 10
  • +
  • 11
  • +
  • 12
  • +
+ +
+ + + +
+

+ To arrange sortable items as a grid, give them identical dimensions and + float them using CSS. +

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/sortable/empty-lists.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/sortable/empty-lists.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,69 @@ + + + + + jQuery UI Sortable - Handle empty lists + + + + + + + + + + + +
+ +
    +
  • Can be dropped..
  • +
  • ..on an empty list
  • +
  • Item 3
  • +
  • Item 4
  • +
  • Item 5
  • +
+ +
    +
  • Cannot be dropped..
  • +
  • ..on an empty list
  • +
  • Item 3
  • +
  • Item 4
  • +
  • Item 5
  • +
+ +
    +
+ +
+ +
+ + + +
+

+ Prevent all items in a list from being dropped into a separate, empty list + using the dropOnEmpty option set to false. By default, + sortable items can be dropped on empty lists. +

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/sortable/index.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/sortable/index.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,26 @@ + + + + + jQuery UI Sortable Demos + + + + + + + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/sortable/items.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/sortable/items.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,70 @@ + + + + + jQuery UI Sortable - Include / exclude items + + + + + + + + + + + +
+ +

Specify which items are sortable:

+ +
    +
  • Item 1
  • +
  • (I'm not sortable or a drop target)
  • +
  • (I'm not sortable or a drop target)
  • +
  • Item 4
  • +
+ +

Cancel sorting (but keep as drop targets):

+ +
    +
  • Item 1
  • +
  • (I'm not sortable)
  • +
  • (I'm not sortable)
  • +
  • Item 4
  • +
+ +
+ + + +
+

+ Specify which items are eligible to sort by passing a jQuery selector into + the items option. Items excluded from this option are not + sortable, nor are they valid targets for sortable items. +

+

+ To only prevent sorting on certain items, pass a jQuery selector into the + cancel option. Cancelled items remain valid sort targets for + others. +

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/sortable/placeholder.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/sortable/placeholder.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,56 @@ + + + + + jQuery UI Sortable - Drop placeholder + + + + + + + + + + + +
+ +
    +
  • Item 1
  • +
  • Item 2
  • +
  • Item 3
  • +
  • Item 4
  • +
  • Item 5
  • +
  • Item 6
  • +
  • Item 7
  • +
+ +
+ + + +
+

+ When dragging a sortable item to a new location, other items will make room + for the that item by shifting to allow white space between them. Pass a + class into the placeholder option to style that space to + be visible. Use the boolean forcePlaceholderSize option + to set dimensions on the placeholder. +

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/demos/sortable/portlets.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/demos/sortable/portlets.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,96 @@ + + + + + jQuery UI Sortable - Portlets + + + + + + + + + + + +
+ +
+ +
+
Feeds
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
+
+ +
+
News
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
+
+ +
+ +
+ +
+
Shopping
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
+
+ +
+ +
+ +
+
Links
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
+
+ +
+
Images
+
Lorem ipsum dolor sit amet, consectetuer adipiscing elit
+
+ +
+ +
+ + + +
+

+ Enable portlets (styled divs) as sortables and use the connectWith + option to allow sorting between columns. +

+
+ + + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/docs/accordion.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/docs/accordion.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,1017 @@ + + +
+

jQuery UI Accordion

+
+

Overview

+
+

Make the selected elements Accordion widgets. Semantic requirements:

+

The markup of your accordion container needs pairs of headers and content panels:

+
<div id="accordion">
+    <h3><a href="#">First header</a></h3>
+    <div>First content</div>
+    <h3><a href="#">Second header</a></h3>
+    <div>Second content</div>
+</div>
+

If you use a different element for the header, specify the header-option with an appropriate selector, eg. header: 'a.header'. The content element must be always next to its header.

+

If you have links inside the accordion content and use a-elements as headers, add a class to them and use that as the header, eg. header: 'a.header'.

+

Use activate(Number) to change the active content programmatically.

+

NOTE: If you want multiple sections open at once, don't use an accordion

+

An accordion doesn't allow more than one content panel to be open at the same time, and it takes a lot of effort to do that. If you are looking for a widget that allows more than one content panel to be open, don't use this. Usually it can be written with a few lines of jQuery instead, something like this:

+
jQuery(document).ready(function(){
+	$('.accordion .head').click(function() {
+		$(this).next().toggle();
+		return false;
+	}).next().hide();
+});
+

Or animated:

+
jQuery(document).ready(function(){
+	$('.accordion .head').click(function() {
+		$(this).next().toggle('slow');
+		return false;
+	}).next().hide();
+});
+
+
+

Dependencies

+
    +
  • UI Core
  • +
  • UI Widget
  • +
  • UI Effects Core (Optional - only for non-default animations)
  • +
+
+
+

Example

+
+ +

+A simple jQuery UI Accordion.
+

+
$("#accordion").accordion();
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  
+  <script>
+  $(document).ready(function() {
+    $("#accordion").accordion();
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<div id="accordion">
+	<h3><a href="#">Section 1</a></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><a href="#">Section 2</a></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><a href="#">Section 3</a></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><a href="#">Section 4</a></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>
+
+</body>
+</html>
+
+

+

+
+
+
+

Options

+
    + +
  • +
    +

    disabled

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Disables (true) or enables (false) the accordion. Can be set when initialising (first creating) the accordion.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a accordion with the disabled option specified. +
    +
    +
    $( ".selector" ).accordion({ disabled: true });
    +
    + + +
    + Get or set the disabled option, after init. +
    +
    +
    //getter
    +var disabled = $( ".selector" ).accordion( "option", "disabled" );
    +//setter
    +$( ".selector" ).accordion( "option", "disabled", true );
    +
    + +
    +
    +
  • + + +
  • +
    +

    active

    +
    +
    Type:
    +
    Selector, Element, jQuery, Boolean, Number
    + +
    Default:
    +
    first child
    + +
    +
    +
    +

    Selector for the active element. Set to false to display none at start. Needs collapsible: true.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a accordion with the active option specified. +
    +
    +
    $( ".selector" ).accordion({ active: 2 });
    +
    + + +
    + Get or set the active option, after init. +
    +
    +
    //getter
    +var active = $( ".selector" ).accordion( "option", "active" );
    +//setter
    +$( ".selector" ).accordion( "option", "active", 2 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    animated

    +
    +
    Type:
    +
    Boolean, String
    + +
    Default:
    +
    'slide'
    + +
    +
    +
    +

    Choose your favorite animation, or disable them (set to false). In addition to the default, 'bounceslide' and all defined easing methods are supported ('bounceslide' requires UI Effects Core).

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a accordion with the animated option specified. +
    +
    +
    $( ".selector" ).accordion({ animated: 'bounceslide' });
    +
    + + +
    + Get or set the animated option, after init. +
    +
    +
    //getter
    +var animated = $( ".selector" ).accordion( "option", "animated" );
    +//setter
    +$( ".selector" ).accordion( "option", "animated", 'bounceslide' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    autoHeight

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    true
    + +
    +
    +
    +

    If set, the highest content part is used as height reference for all other parts. Provides more consistent animations.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a accordion with the autoHeight option specified. +
    +
    +
    $( ".selector" ).accordion({ autoHeight: false });
    +
    + + +
    + Get or set the autoHeight option, after init. +
    +
    +
    //getter
    +var autoHeight = $( ".selector" ).accordion( "option", "autoHeight" );
    +//setter
    +$( ".selector" ).accordion( "option", "autoHeight", false );
    +
    + +
    +
    +
  • + + +
  • +
    +

    clearStyle

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If set, clears height and overflow styles after finishing animations. This enables accordions to work with dynamic content. Won't work together with autoHeight.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a accordion with the clearStyle option specified. +
    +
    +
    $( ".selector" ).accordion({ clearStyle: true });
    +
    + + +
    + Get or set the clearStyle option, after init. +
    +
    +
    //getter
    +var clearStyle = $( ".selector" ).accordion( "option", "clearStyle" );
    +//setter
    +$( ".selector" ).accordion( "option", "clearStyle", true );
    +
    + +
    +
    +
  • + + +
  • +
    +

    collapsible

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Whether all the sections can be closed at once. Allows collapsing the active section by the triggering event (click is the default).

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a accordion with the collapsible option specified. +
    +
    +
    $( ".selector" ).accordion({ collapsible: true });
    +
    + + +
    + Get or set the collapsible option, after init. +
    +
    +
    //getter
    +var collapsible = $( ".selector" ).accordion( "option", "collapsible" );
    +//setter
    +$( ".selector" ).accordion( "option", "collapsible", true );
    +
    + +
    +
    +
  • + + +
  • +
    +

    event

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'click'
    + +
    +
    +
    +

    The event on which to trigger the accordion.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a accordion with the event option specified. +
    +
    +
    $( ".selector" ).accordion({ event: 'mouseover' });
    +
    + + +
    + Get or set the event option, after init. +
    +
    +
    //getter
    +var event = $( ".selector" ).accordion( "option", "event" );
    +//setter
    +$( ".selector" ).accordion( "option", "event", 'mouseover' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    fillSpace

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If set, the accordion completely fills the height of the parent element. Overrides autoheight.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a accordion with the fillSpace option specified. +
    +
    +
    $( ".selector" ).accordion({ fillSpace: true });
    +
    + + +
    + Get or set the fillSpace option, after init. +
    +
    +
    //getter
    +var fillSpace = $( ".selector" ).accordion( "option", "fillSpace" );
    +//setter
    +$( ".selector" ).accordion( "option", "fillSpace", true );
    +
    + +
    +
    +
  • + + +
  • +
    +

    header

    +
    +
    Type:
    +
    Selector, jQuery
    + +
    Default:
    +
    '> li > :first-child,> :not(li):even'
    + +
    +
    +
    +

    Selector for the header element.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a accordion with the header option specified. +
    +
    +
    $( ".selector" ).accordion({ header: 'h3' });
    +
    + + +
    + Get or set the header option, after init. +
    +
    +
    //getter
    +var header = $( ".selector" ).accordion( "option", "header" );
    +//setter
    +$( ".selector" ).accordion( "option", "header", 'h3' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    icons

    +
    +
    Type:
    +
    Object
    + +
    Default:
    +
    { 'header': 'ui-icon-triangle-1-e', 'headerSelected': 'ui-icon-triangle-1-s' }
    + +
    +
    +
    +

    Icons to use for headers. Icons may be specified for 'header' and 'headerSelected', and we recommend using the icons native to the jQuery UI CSS Framework manipulated by jQuery UI ThemeRoller

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a accordion with the icons option specified. +
    +
    +
    $( ".selector" ).accordion({ icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' } });
    +
    + + +
    + Get or set the icons option, after init. +
    +
    +
    //getter
    +var icons = $( ".selector" ).accordion( "option", "icons" );
    +//setter
    +$( ".selector" ).accordion( "option", "icons", { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' } );
    +
    + +
    +
    +
  • + + +
  • +
    +

    navigation

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If set, looks for the anchor that matches location.href and activates it. Great for href-based state-saving. Use navigationFilter to implement your own matcher.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a accordion with the navigation option specified. +
    +
    +
    $( ".selector" ).accordion({ navigation: true });
    +
    + + +
    + Get or set the navigation option, after init. +
    +
    +
    //getter
    +var navigation = $( ".selector" ).accordion( "option", "navigation" );
    +//setter
    +$( ".selector" ).accordion( "option", "navigation", true );
    +
    + +
    +
    +
  • + + +
  • +
    +

    navigationFilter

    +
    +
    Type:
    +
    Function
    + +
    Default:
    +
    + +
    +
    +
    +

    Overwrite the default location.href-matching with your own matcher.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a accordion with the navigationFilter option specified. +
    +
    +
    $( ".selector" ).accordion({ navigationFilter: function(){ ... } });
    +
    + + +
    + Get or set the navigationFilter option, after init. +
    +
    +
    //getter
    +var navigationFilter = $( ".selector" ).accordion( "option", "navigationFilter" );
    +//setter
    +$( ".selector" ).accordion( "option", "navigationFilter", function(){ ... } );
    +
    + +
    +
    +
  • + +
+
+
+

Events

+
    + +
  • +
    +

    create

    +
    +
    Type:
    +
    accordioncreate
    +
    +
    +
    +

    This event is triggered when accordion is created.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the create event as an init option. +
    +
    +
    $( ".selector" ).accordion({
    +   create: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the create event by type: accordioncreate. +
    +
    +
    $( ".selector" ).bind( "accordioncreate", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    change

    +
    +
    Type:
    +
    accordionchange
    +
    +
    +
    +

    This event is triggered every time the accordion changes. If the accordion is animated, the event will be triggered upon completion of the animation; otherwise, it is triggered immediately. +

    +
    $('.ui-accordion').bind('accordionchange', function(event, ui) {
    +  ui.newHeader // jQuery object, activated header
    +  ui.oldHeader // jQuery object, previous header
    +  ui.newContent // jQuery object, activated content
    +  ui.oldContent // jQuery object, previous content
    +});

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the change event as an init option. +
    +
    +
    $( ".selector" ).accordion({
    +   change: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the change event by type: accordionchange. +
    +
    +
    $( ".selector" ).bind( "accordionchange", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + +

    +

  • +
    +

    changestart

    +
    +
    Type:
    +
    accordionchangestart
    +
    +
    +
    +

    This event is triggered every time the accordion starts to change. +

    +
    $('.ui-accordion').bind('accordionchangestart', function(event, ui) {
    +  ui.newHeader // jQuery object, activated header
    +  ui.oldHeader // jQuery object, previous header
    +  ui.newContent // jQuery object, activated content
    +  ui.oldContent // jQuery object, previous content
    +});

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the changestart event as an init option. +
    +
    +
    $( ".selector" ).accordion({
    +   changestart: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the changestart event by type: accordionchangestart. +
    +
    +
    $( ".selector" ).bind( "accordionchangestart", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + +
+
+
+

Methods

+
    + +
  • +
    +

    destroy

    +
    +
    Signature:
    +
    .accordion( "destroy" + + + + + + + +)
    +
    +
    +
    +

    Remove the accordion functionality completely. This will return the element back to its pre-init state.

    +
    +
  • + +

    +

  • +
    +

    disable

    +
    +
    Signature:
    +
    .accordion( "disable" + + + + + + + +)
    +
    +
    +
    +

    Disable the accordion.

    +
    +
  • + + +
  • +
    +

    enable

    +
    +
    Signature:
    +
    .accordion( "enable" + + + + + + + +)
    +
    +
    +
    +

    Enable the accordion.

    +
    +
  • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .accordion( "option" + +, optionName + +, [value] + + + +)
    +
    +
    +
    +

    Get or set any accordion option. If no value is specified, will act as a getter.

    +
    +
  • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .accordion( "option" + +, options + + + + + +)
    +
    +
    +
    +

    Set multiple accordion options at once by providing an options object.

    +
    +
  • + + +
  • +
    +

    widget

    +
    +
    Signature:
    +
    .accordion( "widget" + + + + + + + +)
    +
    +
    +
    +

    Returns the .ui-accordion element.

    +
    +
  • + + +
  • +
    +

    activate

    +
    +
    Signature:
    +
    .accordion( "activate" + +, index + + + + + +)
    +
    +
    +
    +

    Activate a content part of the Accordion programmatically. The index can be a zero-indexed number to match the position of the header to close or a Selector matching an element. Pass false to close all (only possible with collapsible:true).

    +
    +
  • + + +
  • +
    +

    resize

    +
    +
    Signature:
    +
    .accordion( "resize" + + + + + + + +)
    +
    +
    +
    +

    Recompute heights of the accordion contents when using the fillSpace option and the container height changed. For example, when the container is a resizable, this method should be called by its resize-event.

    +
    +
  • + +
+
+
+

Theming

+

The jQuery UI Accordion plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain. +

+

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.accordion.css stylesheet that can be modified. These classes are highlighed in bold below. +

+ +

Sample markup with jQuery UI CSS Framework classes

+ <div class="ui-accordion ui-widget ui-helper-reset">
+  <h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top">
+    <span class="ui-icon ui-icon-triangle-1-s"/>
+    <a href="#">Section 1</a>
+  </h3>
+  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active">
+    Section 1 content
+  </div>
+  <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all">
+    <span class="ui-icon ui-icon-triangle-1-e"/>
+    <a href="#">Section 2</a>
+  </h3>
+  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
+    Section 2 content
+  </div>
+  <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all">
+    <span class="ui-icon ui-icon-triangle-1-e"/>
+    <a href="#">Section 3</a>
+  </h3>
+  <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom">
+    Section 3 content
+  </div>
+</div>
+

+ + Note: This is a sample of markup generated by the accordion plugin, not markup you should use to create a accordion. The only markup needed for that is
<div>
+   <h3><a href="#">Section 1</a></h3>
+   <div>
+      Section 1 content
+   </div>
+   <h3><a href="#">Section 2</a></h3>
+   <div>
+      Section 2 content
+   </div>
+   <h3><a href="#">Section 3</a></h3>
+   <div>
+      Section 3 content
+   </div>
+</div>. +
+

+ +
+
+ +

+ + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/docs/autocomplete.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/docs/autocomplete.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,833 @@ + + +
+

jQuery UI Autocomplete

+
+

Overview

+
+

Autocomplete, when added to an input field, enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.

+

By giving an Autocomplete field focus or entering something into it, the plugin starts searching for entries that match and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.

+

This can be used to enter previous selected values, for example you could use Autocomplete for entering tags, to complete an address, you could enter a city name and get the zip code, or maybe enter email addresses from an address book.

+

You can pull data in from a local and/or a remote source: Local is good for small data sets (like an address book with 50 entries), remote is necessary for big data sets, like a database with hundreds or millions of entries to select from.

+

Autocomplete can be customized to work with various data sources, by just specifying the source option. A data source can be:

+
    +
  • an Array with local data
  • +
  • a String, specifying a URL
  • +
  • a Callback
  • +
+

The local data can be a simple Array of Strings, or it contains Objects for each item in the array, with either a label or value property or both. The label property is displayed in the suggestion menu. The value will be inserted into the input element after the user selected something from the menu. If just one property is specified, it will be used for both, eg. if you provide only value-properties, the value will also be used as the label.

+

When a String is used, the Autocomplete plugin expects that string to point to a URL resource that will return JSON data. It can be on the same host or on a different one (must provide JSONP). The request parameter "term" gets added to that URL. The data itself can be in the same format as the local data described above.

+

The third variation, the callback, provides the most flexibility, and can be used to connect any data source to Autocomplete. The callback gets two arguments:

+
    +
  • A request object, with a single property called "term", which refers to the value currently in the text input. For example, when the user entered "new yo" in a city field, the Autocomplete term will equal "new yo".
  • +
  • A response callback, which expects a single argument to contain the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data (String-Array or Object-Array with label/value/both properties). It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.
  • +
+

The label is always treated as text, if you want the label to be treated as html you can use Scott González' html extension. The demos all focus on different variations of the source-option - look for the one that matches your use case, and take a look at the code.

+
+
+

Dependencies

+
    +
  • UI Core
  • +
  • UI Widget
  • +
  • UI Position
  • +
+
+
+

Example

+
+ +

+A simple jQuery UI Autocomplete.
+

+
$("input#autocomplete").autocomplete({
+    source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]
+});
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  
+  <script>
+  $(document).ready(function() {
+    $("input#autocomplete").autocomplete({
+    source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]
+});
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<input id="autocomplete" />
+
+</body>
+</html>
+
+

+

+
+
+
+

Options

+
    + +
  • +
    +

    disabled

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Disables (true) or enables (false) the autocomplete. Can be set when initialising (first creating) the autocomplete.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a autocomplete with the disabled option specified. +
    +
    +
    $( ".selector" ).autocomplete({ disabled: true });
    +
    + + +
    + Get or set the disabled option, after init. +
    +
    +
    //getter
    +var disabled = $( ".selector" ).autocomplete( "option", "disabled" );
    +//setter
    +$( ".selector" ).autocomplete( "option", "disabled", true );
    +
    + +
    +
    +
  • + + +
  • +
    +

    appendTo

    +
    +
    Type:
    +
    Selector
    + +
    Default:
    +
    "body"
    + +
    +
    +
    +

    Which element the menu should be appended to.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a autocomplete with the appendTo option specified. +
    +
    +
    $( ".selector" ).autocomplete({ appendTo: "#someElem" });
    +
    + + +
    + Get or set the appendTo option, after init. +
    +
    +
    //getter
    +var appendTo = $( ".selector" ).autocomplete( "option", "appendTo" );
    +//setter
    +$( ".selector" ).autocomplete( "option", "appendTo", "#someElem" );
    +
    + +
    +
    +
  • + + +
  • +
    +

    delay

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    300
    + +
    +
    +
    +

    The delay in milliseconds the Autocomplete waits after a keystroke to activate itself. A zero-delay makes sense for local data (more responsive), but can produce a lot of load for remote data, while being less responsive.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a autocomplete with the delay option specified. +
    +
    +
    $( ".selector" ).autocomplete({ delay: 0 });
    +
    + + +
    + Get or set the delay option, after init. +
    +
    +
    //getter
    +var delay = $( ".selector" ).autocomplete( "option", "delay" );
    +//setter
    +$( ".selector" ).autocomplete( "option", "delay", 0 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    minLength

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    1
    + +
    +
    +
    +

    The minimum number of characters a user has to type before the Autocomplete activates. Zero is useful for local data with just a few items. Should be increased when there are a lot of items, where a single character would match a few thousand items.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a autocomplete with the minLength option specified. +
    +
    +
    $( ".selector" ).autocomplete({ minLength: 0 });
    +
    + + +
    + Get or set the minLength option, after init. +
    +
    +
    //getter
    +var minLength = $( ".selector" ).autocomplete( "option", "minLength" );
    +//setter
    +$( ".selector" ).autocomplete( "option", "minLength", 0 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    position

    +
    +
    Type:
    +
    Object
    + +
    Default:
    +
    { my: "left top", at: "left bottom", collision: "none" }
    + +
    +
    +
    +

    Identifies the position of the Autocomplete widget in relation to the associated input element. The "of" option defaults to the input element, but you can specify another element to position against. You can refer to the jQuery UI Position utility for more details about the various options.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a autocomplete with the position option specified. +
    +
    +
    $( ".selector" ).autocomplete({ position: { my : "right top", at: "right bottom" } });
    +
    + + +
    + Get or set the position option, after init. +
    +
    +
    //getter
    +var position = $( ".selector" ).autocomplete( "option", "position" );
    +//setter
    +$( ".selector" ).autocomplete( "option", "position", { my : "right top", at: "right bottom" } );
    +
    + +
    +
    +
  • + + +
  • +
    +

    source

    +
    +
    Type:
    +
    String, Array, Callback
    + +
    Default:
    +
    none, must be specified
    + +
    +
    +
    +

    Defines the data to use, must be specified. See Overview section for more details, and look at the various demos. +

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a autocomplete with the source option specified. +
    +
    +
    $( ".selector" ).autocomplete({ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] });
    +
    + + +
    + Get or set the source option, after init. +
    +
    +
    //getter
    +var source = $( ".selector" ).autocomplete( "option", "source" );
    +//setter
    +$( ".selector" ).autocomplete( "option", "source", ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] );
    +
    + +
    +
    +
  • + +
+
+
+

Events

+
    + +
  • +
    +

    create

    +
    +
    Type:
    +
    autocompletecreate
    +
    +
    +
    +

    This event is triggered when autocomplete is created.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the create event as an init option. +
    +
    +
    $( ".selector" ).autocomplete({
    +   create: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the create event by type: autocompletecreate. +
    +
    +
    $( ".selector" ).bind( "autocompletecreate", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + + + + +
  • +
    +

    open

    +
    +
    Type:
    +
    autocompleteopen
    +
    +
    +
    +

    Triggered when the suggestion menu is opened.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the open event as an init option. +
    +
    +
    $( ".selector" ).autocomplete({
    +   open: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the open event by type: autocompleteopen. +
    +
    +
    $( ".selector" ).bind( "autocompleteopen", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    focus

    +
    +
    Type:
    +
    autocompletefocus
    +
    +
    +
    +

    Before focus is moved to an item (not selecting), ui.item refers to the focused item. The default action of focus is to replace the text field's value with the value of the focused item, though only if the focus event was triggered by a keyboard interaction. Canceling this event prevents the value from being updated, but does not prevent the menu item from being focused.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the focus event as an init option. +
    +
    +
    $( ".selector" ).autocomplete({
    +   focus: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the focus event by type: autocompletefocus. +
    +
    +
    $( ".selector" ).bind( "autocompletefocus", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    select

    +
    +
    Type:
    +
    autocompleteselect
    +
    +
    +
    +

    Triggered when an item is selected from the menu; ui.item refers to the selected item. The default action of select is to replace the text field's value with the value of the selected item. Canceling this event prevents the value from being updated, but does not prevent the menu from closing.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the select event as an init option. +
    +
    +
    $( ".selector" ).autocomplete({
    +   select: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the select event by type: autocompleteselect. +
    +
    +
    $( ".selector" ).bind( "autocompleteselect", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    close

    +
    +
    Type:
    +
    autocompleteclose
    +
    +
    +
    +

    When the list is hidden - doesn't have to occur together with a change.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the close event as an init option. +
    +
    +
    $( ".selector" ).autocomplete({
    +   close: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the close event by type: autocompleteclose. +
    +
    +
    $( ".selector" ).bind( "autocompleteclose", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    change

    +
    +
    Type:
    +
    autocompletechange
    +
    +
    +
    +

    After an item was selected; ui.item refers to the selected item. Always triggered after the close event.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the change event as an init option. +
    +
    +
    $( ".selector" ).autocomplete({
    +   change: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the change event by type: autocompletechange. +
    +
    +
    $( ".selector" ).bind( "autocompletechange", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + +
+
+
+

Methods

+
    + +
  • +
    +

    destroy

    +
    +
    Signature:
    +
    .autocomplete( "destroy" + + + + + + + +)
    +
    +
    +
    +

    Remove the autocomplete functionality completely. This will return the element back to its pre-init state.

    +
    +
  • + + +
  • +
    +

    disable

    +
    +
    Signature:
    +
    .autocomplete( "disable" + + + + + + + +)
    +
    +
    +
    +

    Disable the autocomplete.

    +
    +
  • + + +
  • +
    +

    enable

    +
    +
    Signature:
    +
    .autocomplete( "enable" + + + + + + + +)
    +
    +
    +
    +

    Enable the autocomplete.

    +
    +
  • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .autocomplete( "option" + +, optionName + +, [value] + + + +)
    +
    +
    +
    +

    Get or set any autocomplete option. If no value is specified, will act as a getter.

    +
    +
  • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .autocomplete( "option" + +, options + + + + + +)
    +
    +
    +
    +

    Set multiple autocomplete options at once by providing an options object.

    +
    +
  • + + +
  • +
    +

    widget

    +
    +
    Signature:
    +
    .autocomplete( "widget" + + + + + + + +)
    +
    +
    +
    +

    Returns the .ui-autocomplete element.

    +
    +
  • + + + + + +
  • +
    +

    close

    +
    +
    Signature:
    +
    .autocomplete( "close" + + + + + + + +)
    +
    +
    +
    +

    Close the Autocomplete menu. Useful in combination with the search method, to close the open menu.

    +
    +
  • + +
+
+
+

Theming

+

The jQuery UI Autocomplete plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain. +

+

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.autocomplete.css stylesheet that can be modified. These classes are highlighed in bold below. +

+ +

Sample markup with jQuery UI CSS Framework classes

+ <input class="ui-autocomplete-input"/>
+<ul class="ui-autocomplete ui-menu ui-widget ui-widget-content ui-corner-all">
+  <li class="ui-menu-item">
+    <a class="ui-corner-all">item 1</a>
+  </li>
+  <li class="ui-menu-item">
+    <a class="ui-corner-all">item 2</a>
+  </li>
+  <li class="ui-menu-item">
+    <a class="ui-corner-all">item 3</a>
+  </li>
+</ul> +

+ + Note: This is a sample of markup generated by the autocomplete plugin, not markup you should use to create a autocomplete. The only markup needed for that is <input/>. + +

+ +
+
+ +

+ + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/docs/button.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/docs/button.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,500 @@ + + +
+

jQuery UI Button

+
+

Overview

+
+

Button enhances standard form elements like button, input of type submit or reset or anchors to themable buttons with appropiate mouseover and active styles.

+

In addition to basic push buttons, radio buttons and checkboxes (inputs of type radio and checkbox) can be converted to buttons: Their associated label is styled to appear as the button, while the underlying input is updated on click.

+

In order to group radio buttons, Button also provides an additional widget-method, called Buttonset. Its used by selecting a container element (which contains the radio buttons) and calling buttonset(). Buttonset will also provide visual grouping, and therefore should be used whenever you have a group of buttons. It works by selecting all descendents and applying button() to them. You can enable and disable a buttonset, which will enable and disable all contained buttons. Destroying a buttonset also calls the button's destroy method.

+

When using an input of type button, submit or reset, support is limited to plain text labels with no icons.

+
+
+

Dependencies

+
    +
  • UI Core
  • +
  • UI Widget
  • +
+
+
+

Example

+
+ +

+A simple jQuery UI Button.
+

+
$("button").button();
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  
+  <script>
+  $(document).ready(function() {
+    $("button").button();
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<button>Button label</button>
+
+</body>
+</html>
+
+

+

+
+ +
+A simple jQuery UI Button.
+

+
$("#radio").buttonset();
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  
+  <script>
+  $(document).ready(function() {
+    $("#radio").buttonset();
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<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>
+
+</body>
+</html>
+
+

+

+
+
+
+

Options

+
    + +
  • +
    +

    disabled

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Disables (true) or enables (false) the button. Can be set when initialising (first creating) the button.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a button with the disabled option specified. +
    +
    +
    $( ".selector" ).button({ disabled: true });
    +
    + + +
    + Get or set the disabled option, after init. +
    +
    +
    //getter
    +var disabled = $( ".selector" ).button( "option", "disabled" );
    +//setter
    +$( ".selector" ).button( "option", "disabled", true );
    +
    + +
    +
    +
  • + + +
  • +
    +

    text

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    true
    + +
    +
    +
    +

    Whether to show any text - when set to false (display no text), icons (see icons option) must be enabled, otherwise it'll be ignored.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a button with the text option specified. +
    +
    +
    $( ".selector" ).button({ text: false });
    +
    + + +
    + Get or set the text option, after init. +
    +
    +
    //getter
    +var text = $( ".selector" ).button( "option", "text" );
    +//setter
    +$( ".selector" ).button( "option", "text", false );
    +
    + +
    +
    +
  • + + +
  • +
    +

    icons

    +
    +
    Type:
    +
    Options
    + +
    Default:
    +
    { primary: null, secondary: null }
    + +
    +
    +
    +

    Icons to display, with or without text (see text option). The primary icon is displayed by default on the left of the label text, the secondary by default is on the right. Value for the primary and secondary properties must be a classname (String), eg. "ui-icon-gear". For using only one icon: icons: {primary:'ui-icon-locked'}. For using two icons: icons: {primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'}

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a button with the icons option specified. +
    +
    +
    $( ".selector" ).button({ icons: {primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'} });
    +
    + + +
    + Get or set the icons option, after init. +
    +
    +
    //getter
    +var icons = $( ".selector" ).button( "option", "icons" );
    +//setter
    +$( ".selector" ).button( "option", "icons", {primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'} );
    +
    + +
    +
    +
  • + + +
  • +
    +

    label

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    HTML content of the button, or value attribute
    + +
    +
    +
    +

    Text to show on the button. When not specified (null), the element's html content is used, or its value attribute when it's an input element of type submit or reset; or the html content of the associated label element if its an input of type radio or checkbox

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a button with the label option specified. +
    +
    +
    $( ".selector" ).button({ label: "custom label" });
    +
    + + +
    + Get or set the label option, after init. +
    +
    +
    //getter
    +var label = $( ".selector" ).button( "option", "label" );
    +//setter
    +$( ".selector" ).button( "option", "label", "custom label" );
    +
    + +
    +
    +
  • + +
+
+
+

Events

+
    + +
  • +
    +

    create

    +
    +
    Type:
    +
    buttoncreate
    +
    +
    +
    +

    This event is triggered when button is created.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the create event as an init option. +
    +
    +
    $( ".selector" ).button({
    +   create: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the create event by type: buttoncreate. +
    +
    +
    $( ".selector" ).bind( "buttoncreate", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + +

    +

    There are no events for this plugin.

    +
+
+
+

Methods

+
    + +
  • +
    +

    destroy

    +
    +
    Signature:
    +
    .button( "destroy" + + + + + + + +)
    +
    +
    +
    +

    Remove the button functionality completely. This will return the element back to its pre-init state.

    +
    +
  • + +

    +

  • +
    +

    disable

    +
    +
    Signature:
    +
    .button( "disable" + + + + + + + +)
    +
    +
    +
    +

    Disable the button.

    +
    +
  • + + +
  • +
    +

    enable

    +
    +
    Signature:
    +
    .button( "enable" + + + + + + + +)
    +
    +
    +
    +

    Enable the button.

    +
    +
  • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .button( "option" + +, optionName + +, [value] + + + +)
    +
    +
    +
    +

    Get or set any button option. If no value is specified, will act as a getter.

    +
    +
  • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .button( "option" + +, options + + + + + +)
    +
    +
    +
    +

    Set multiple button options at once by providing an options object.

    +
    +
  • + + +
  • +
    +

    widget

    +
    +
    Signature:
    +
    .button( "widget" + + + + + + + +)
    +
    +
    +
    +

    Returns the .ui-button element.

    +
    +
  • + + +
  • +
    +

    refresh

    +
    +
    Signature:
    +
    .button( "refresh" + + + + + + + +)
    +
    +
    +
    +

    Refreshes the visual state of the button. Useful for updating button state after the native element's checked or disabled state is changed programatically.

    +
    +
  • + +
+
+
+

Theming

+

The jQuery UI Button plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain. +

+

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.button.css stylesheet that can be modified. These classes are highlighed in bold below. +

+ +

Sample markup with jQuery UI CSS Framework classes

+ <button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
+   <span class="ui-button-text">Button Label</span>
</button> +

+ + Note: This is a sample of markup generated by the button plugin, not markup you should use to create a button. The only markup needed for that is <button>Button Label</button>. + +

+ +
+
+ +

+ + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/docs/dialog.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/docs/dialog.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,1698 @@ + + +
+

jQuery UI Dialog

+
+

Overview

+
+

A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the 'x' icon by default.

+

If the content length exceeds the maximum height, a scrollbar will automatically appear.

+

A bottom button bar and semi-transparent modal overlay layer are common options that can be added.

+

A call to $(foo).dialog() will initialize a dialog instance and will auto-open the dialog by default. If you want to reuse a dialog, the easiest way is to disable the "auto-open" option with: $(foo).dialog({ autoOpen: false }) and open it with $(foo).dialog('open'). To close it, use $(foo).dialog('close'). A more in-depth explanation with a full demo is available on the Nemikor blog.

+
+
+

Dependencies

+
    +
  • UI Core
  • +
  • UI Position
  • +
  • UI Widget
  • +
  • UI Mouse (Optional; only needed if using UI Draggable or UI Resizable)
  • +
  • UI Draggable (Optional)
  • +
  • UI Resizable (Optional)
  • +
+
+
+

Example

+
+ +

+A simple jQuery UI Dialog.
+

+
$("#dialog").dialog();
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  
+  <script>
+  $(document).ready(function() {
+    $("#dialog").dialog();
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<div id="dialog" title="Dialog Title">I'm in a dialog</div>
+
+</body>
+</html>
+
+

+

+
+
+
+

Options

+
    + +
  • +
    +

    disabled

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Disables (true) or enables (false) the dialog. Can be set when initialising (first creating) the dialog.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the disabled option specified. +
    +
    +
    $( ".selector" ).dialog({ disabled: true });
    +
    + + +
    + Get or set the disabled option, after init. +
    +
    +
    //getter
    +var disabled = $( ".selector" ).dialog( "option", "disabled" );
    +//setter
    +$( ".selector" ).dialog( "option", "disabled", true );
    +
    + +
    +
    +
  • + + +
  • +
    +

    autoOpen

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    true
    + +
    +
    +
    +

    When autoOpen is true the dialog will open automatically when dialog is called. If false it will stay hidden until .dialog("open") is called on it.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the autoOpen option specified. +
    +
    +
    $( ".selector" ).dialog({ autoOpen: false });
    +
    + + +
    + Get or set the autoOpen option, after init. +
    +
    +
    //getter
    +var autoOpen = $( ".selector" ).dialog( "option", "autoOpen" );
    +//setter
    +$( ".selector" ).dialog( "option", "autoOpen", false );
    +
    + +
    +
    +
  • + + +
  • +
    +

    buttons

    +
    +
    Type:
    +
    Object
    + +
    Default:
    +
    { }
    + +
    +
    +
    +

    Specifies which buttons should be displayed on the dialog. The property key is the text of the button. The value is the callback function for when the button is clicked. The context of the callback is the dialog element; if you need access to the button, it is available as the target of the event object. +

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the buttons option specified. +
    +
    +
    $( ".selector" ).dialog({ buttons: { "Ok": function() { $(this).dialog("close"); } } });
    +
    + + +
    + Get or set the buttons option, after init. +
    +
    +
    //getter
    +var buttons = $( ".selector" ).dialog( "option", "buttons" );
    +//setter
    +$( ".selector" ).dialog( "option", "buttons", { "Ok": function() { $(this).dialog("close"); } } );
    +
    + +
    +
    +
  • + + +
  • +
    +

    buttons

    +
    +
    Type:
    +
    Array
    + +
    Default:
    +
    [ ]
    + +
    +
    +
    +

    Specifies which buttons should be displayed on the dialog. Each element of the array must be an Object defining the properties to set on the button. +

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the buttons option specified. +
    +
    +
    $( ".selector" ).dialog({ buttons: [
    +    {
    +        text: "Ok",
    +        click: function() { $(this).dialog("close"); }
    +    }
    +] });
    +
    + + +
    + Get or set the buttons option, after init. +
    +
    +
    //getter
    +var buttons = $( ".selector" ).dialog( "option", "buttons" );
    +//setter
    +$( ".selector" ).dialog( "option", "buttons", [
    +    {
    +        text: "Ok",
    +        click: function() { $(this).dialog("close"); }
    +    }
    +] );
    +
    + +
    +
    +
  • + + +
  • +
    +

    closeOnEscape

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    true
    + +
    +
    +
    +

    Specifies whether the dialog should close when it has focus and the user presses the esacpe (ESC) key.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the closeOnEscape option specified. +
    +
    +
    $( ".selector" ).dialog({ closeOnEscape: false });
    +
    + + +
    + Get or set the closeOnEscape option, after init. +
    +
    +
    //getter
    +var closeOnEscape = $( ".selector" ).dialog( "option", "closeOnEscape" );
    +//setter
    +$( ".selector" ).dialog( "option", "closeOnEscape", false );
    +
    + +
    +
    +
  • + + +
  • +
    +

    closeText

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'close'
    + +
    +
    +
    +

    Specifies the text for the close button. Note that the close text is visibly hidden when using a standard theme.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the closeText option specified. +
    +
    +
    $( ".selector" ).dialog({ closeText: 'hide' });
    +
    + + +
    + Get or set the closeText option, after init. +
    +
    +
    //getter
    +var closeText = $( ".selector" ).dialog( "option", "closeText" );
    +//setter
    +$( ".selector" ).dialog( "option", "closeText", 'hide' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    dialogClass

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    ''
    + +
    +
    +
    +

    The specified class name(s) will be added to the dialog, for additional theming.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the dialogClass option specified. +
    +
    +
    $( ".selector" ).dialog({ dialogClass: 'alert' });
    +
    + + +
    + Get or set the dialogClass option, after init. +
    +
    +
    //getter
    +var dialogClass = $( ".selector" ).dialog( "option", "dialogClass" );
    +//setter
    +$( ".selector" ).dialog( "option", "dialogClass", 'alert' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    draggable

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    true
    + +
    +
    +
    +

    If set to true, the dialog will be draggable will be draggable by the titlebar.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the draggable option specified. +
    +
    +
    $( ".selector" ).dialog({ draggable: false });
    +
    + + +
    + Get or set the draggable option, after init. +
    +
    +
    //getter
    +var draggable = $( ".selector" ).dialog( "option", "draggable" );
    +//setter
    +$( ".selector" ).dialog( "option", "draggable", false );
    +
    + +
    +
    +
  • + + +
  • +
    +

    height

    +
    +
    Type:
    +
    Number
    + +
    Default:
    +
    'auto'
    + +
    +
    +
    +

    The height of the dialog, in pixels. Specifying 'auto' is also supported to make the dialog adjust based on its content.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the height option specified. +
    +
    +
    $( ".selector" ).dialog({ height: 530 });
    +
    + + +
    + Get or set the height option, after init. +
    +
    +
    //getter
    +var height = $( ".selector" ).dialog( "option", "height" );
    +//setter
    +$( ".selector" ).dialog( "option", "height", 530 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    hide

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    null
    + +
    +
    +
    +

    The effect to be used when the dialog is closed.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the hide option specified. +
    +
    +
    $( ".selector" ).dialog({ hide: 'slide' });
    +
    + + +
    + Get or set the hide option, after init. +
    +
    +
    //getter
    +var hide = $( ".selector" ).dialog( "option", "hide" );
    +//setter
    +$( ".selector" ).dialog( "option", "hide", 'slide' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    maxHeight

    +
    +
    Type:
    +
    Number
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    The maximum height to which the dialog can be resized, in pixels.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the maxHeight option specified. +
    +
    +
    $( ".selector" ).dialog({ maxHeight: 400 });
    +
    + + +
    + Get or set the maxHeight option, after init. +
    +
    +
    //getter
    +var maxHeight = $( ".selector" ).dialog( "option", "maxHeight" );
    +//setter
    +$( ".selector" ).dialog( "option", "maxHeight", 400 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    maxWidth

    +
    +
    Type:
    +
    Number
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    The maximum width to which the dialog can be resized, in pixels.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the maxWidth option specified. +
    +
    +
    $( ".selector" ).dialog({ maxWidth: 600 });
    +
    + + +
    + Get or set the maxWidth option, after init. +
    +
    +
    //getter
    +var maxWidth = $( ".selector" ).dialog( "option", "maxWidth" );
    +//setter
    +$( ".selector" ).dialog( "option", "maxWidth", 600 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    minHeight

    +
    +
    Type:
    +
    Number
    + +
    Default:
    +
    150
    + +
    +
    +
    +

    The minimum height to which the dialog can be resized, in pixels.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the minHeight option specified. +
    +
    +
    $( ".selector" ).dialog({ minHeight: 300 });
    +
    + + +
    + Get or set the minHeight option, after init. +
    +
    +
    //getter
    +var minHeight = $( ".selector" ).dialog( "option", "minHeight" );
    +//setter
    +$( ".selector" ).dialog( "option", "minHeight", 300 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    minWidth

    +
    +
    Type:
    +
    Number
    + +
    Default:
    +
    150
    + +
    +
    +
    +

    The minimum width to which the dialog can be resized, in pixels.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the minWidth option specified. +
    +
    +
    $( ".selector" ).dialog({ minWidth: 400 });
    +
    + + +
    + Get or set the minWidth option, after init. +
    +
    +
    //getter
    +var minWidth = $( ".selector" ).dialog( "option", "minWidth" );
    +//setter
    +$( ".selector" ).dialog( "option", "minWidth", 400 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    modal

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If set to true, the dialog will have modal behavior; other items on the page will be disabled (i.e. cannot be interacted with). Modal dialogs create an overlay below the dialog but above other page elements.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the modal option specified. +
    +
    +
    $( ".selector" ).dialog({ modal: true });
    +
    + + +
    + Get or set the modal option, after init. +
    +
    +
    //getter
    +var modal = $( ".selector" ).dialog( "option", "modal" );
    +//setter
    +$( ".selector" ).dialog( "option", "modal", true );
    +
    + +
    +
    +
  • + + +
  • +
    +

    position

    +
    +
    Type:
    +
    String, Array
    + +
    Default:
    +
    'center'
    + +
    +
    +
    +

    Specifies where the dialog should be displayed. Possible values:
    1) a single string representing position within viewport: 'center', 'left', 'right', 'top', 'bottom'.
    2) an array containing an x,y coordinate pair in pixel offset from left, top corner of viewport (e.g. [350,100])
    3) an array containing x,y position string values (e.g. ['right','top'] for top right corner).

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the position option specified. +
    +
    +
    $( ".selector" ).dialog({ position: 'top' });
    +
    + + +
    + Get or set the position option, after init. +
    +
    +
    //getter
    +var position = $( ".selector" ).dialog( "option", "position" );
    +//setter
    +$( ".selector" ).dialog( "option", "position", 'top' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    resizable

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    true
    + +
    +
    +
    +

    If set to true, the dialog will be resizeable.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the resizable option specified. +
    +
    +
    $( ".selector" ).dialog({ resizable: false });
    +
    + + +
    + Get or set the resizable option, after init. +
    +
    +
    //getter
    +var resizable = $( ".selector" ).dialog( "option", "resizable" );
    +//setter
    +$( ".selector" ).dialog( "option", "resizable", false );
    +
    + +
    +
    +
  • + + +
  • +
    +

    show

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    null
    + +
    +
    +
    +

    The effect to be used when the dialog is opened.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the show option specified. +
    +
    +
    $( ".selector" ).dialog({ show: 'slide' });
    +
    + + +
    + Get or set the show option, after init. +
    +
    +
    //getter
    +var show = $( ".selector" ).dialog( "option", "show" );
    +//setter
    +$( ".selector" ).dialog( "option", "show", 'slide' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    stack

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    true
    + +
    +
    +
    +

    Specifies whether the dialog will stack on top of other dialogs. This will cause the dialog to move to the front of other dialogs when it gains focus.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the stack option specified. +
    +
    +
    $( ".selector" ).dialog({ stack: false });
    +
    + + +
    + Get or set the stack option, after init. +
    +
    +
    //getter
    +var stack = $( ".selector" ).dialog( "option", "stack" );
    +//setter
    +$( ".selector" ).dialog( "option", "stack", false );
    +
    + +
    +
    +
  • + + +
  • +
    +

    title

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    ''
    + +
    +
    +
    +

    Specifies the title of the dialog. Any valid HTML may be set as the title. The title can also be specified by the title attribute on the dialog source element.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the title option specified. +
    +
    +
    $( ".selector" ).dialog({ title: 'Dialog Title' });
    +
    + + +
    + Get or set the title option, after init. +
    +
    +
    //getter
    +var title = $( ".selector" ).dialog( "option", "title" );
    +//setter
    +$( ".selector" ).dialog( "option", "title", 'Dialog Title' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    width

    +
    +
    Type:
    +
    Number
    + +
    Default:
    +
    300
    + +
    +
    +
    +

    The width of the dialog, in pixels.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the width option specified. +
    +
    +
    $( ".selector" ).dialog({ width: 460 });
    +
    + + +
    + Get or set the width option, after init. +
    +
    +
    //getter
    +var width = $( ".selector" ).dialog( "option", "width" );
    +//setter
    +$( ".selector" ).dialog( "option", "width", 460 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    zIndex

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    1000
    + +
    +
    +
    +

    The starting z-index for the dialog.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a dialog with the zIndex option specified. +
    +
    +
    $( ".selector" ).dialog({ zIndex: 3999 });
    +
    + + +
    + Get or set the zIndex option, after init. +
    +
    +
    //getter
    +var zIndex = $( ".selector" ).dialog( "option", "zIndex" );
    +//setter
    +$( ".selector" ).dialog( "option", "zIndex", 3999 );
    +
    + +
    +
    +
  • + +
+
+
+

Events

+
    + +
  • +
    +

    create

    +
    +
    Type:
    +
    dialogcreate
    +
    +
    +
    +

    This event is triggered when dialog is created.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the create event as an init option. +
    +
    +
    $( ".selector" ).dialog({
    +   create: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the create event by type: dialogcreate. +
    +
    +
    $( ".selector" ).bind( "dialogcreate", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    beforeClose

    +
    +
    Type:
    +
    dialogbeforeclose
    +
    +
    +
    +

    This event is triggered when a dialog attempts to close. If the beforeClose event handler (callback function) returns false, the close will be prevented.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the beforeClose event as an init option. +
    +
    +
    $( ".selector" ).dialog({
    +   beforeClose: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the beforeClose event by type: dialogbeforeclose. +
    +
    +
    $( ".selector" ).bind( "dialogbeforeclose", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    open

    +
    +
    Type:
    +
    dialogopen
    +
    +
    +
    +

    This event is triggered when dialog is opened.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the open event as an init option. +
    +
    +
    $( ".selector" ).dialog({
    +   open: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the open event by type: dialogopen. +
    +
    +
    $( ".selector" ).bind( "dialogopen", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    focus

    +
    +
    Type:
    +
    dialogfocus
    +
    +
    +
    +

    This event is triggered when the dialog gains focus.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the focus event as an init option. +
    +
    +
    $( ".selector" ).dialog({
    +   focus: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the focus event by type: dialogfocus. +
    +
    +
    $( ".selector" ).bind( "dialogfocus", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    dragStart

    +
    +
    Type:
    +
    dialogdragstart
    +
    +
    +
    +

    This event is triggered at the beginning of the dialog being dragged.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the dragStart event as an init option. +
    +
    +
    $( ".selector" ).dialog({
    +   dragStart: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the dragStart event by type: dialogdragstart. +
    +
    +
    $( ".selector" ).bind( "dialogdragstart", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    drag

    +
    +
    Type:
    +
    dialogdrag
    +
    +
    +
    +

    This event is triggered when the dialog is dragged.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the drag event as an init option. +
    +
    +
    $( ".selector" ).dialog({
    +   drag: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the drag event by type: dialogdrag. +
    +
    +
    $( ".selector" ).bind( "dialogdrag", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    dragStop

    +
    +
    Type:
    +
    dialogdragstop
    +
    +
    +
    +

    This event is triggered after the dialog has been dragged.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the dragStop event as an init option. +
    +
    +
    $( ".selector" ).dialog({
    +   dragStop: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the dragStop event by type: dialogdragstop. +
    +
    +
    $( ".selector" ).bind( "dialogdragstop", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    resizeStart

    +
    +
    Type:
    +
    dialogresizestart
    +
    +
    +
    +

    This event is triggered at the beginning of the dialog being resized.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the resizeStart event as an init option. +
    +
    +
    $( ".selector" ).dialog({
    +   resizeStart: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the resizeStart event by type: dialogresizestart. +
    +
    +
    $( ".selector" ).bind( "dialogresizestart", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    resize

    +
    +
    Type:
    +
    dialogresize
    +
    +
    +
    +

    This event is triggered when the dialog is resized. demo

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the resize event as an init option. +
    +
    +
    $( ".selector" ).dialog({
    +   resize: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the resize event by type: dialogresize. +
    +
    +
    $( ".selector" ).bind( "dialogresize", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    resizeStop

    +
    +
    Type:
    +
    dialogresizestop
    +
    +
    +
    +

    This event is triggered after the dialog has been resized.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the resizeStop event as an init option. +
    +
    +
    $( ".selector" ).dialog({
    +   resizeStop: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the resizeStop event by type: dialogresizestop. +
    +
    +
    $( ".selector" ).bind( "dialogresizestop", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    close

    +
    +
    Type:
    +
    dialogclose
    +
    +
    +
    +

    This event is triggered when the dialog is closed.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the close event as an init option. +
    +
    +
    $( ".selector" ).dialog({
    +   close: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the close event by type: dialogclose. +
    +
    +
    $( ".selector" ).bind( "dialogclose", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + +
+
+
+

Methods

+
    + +
  • +
    +

    destroy

    +
    +
    Signature:
    +
    .dialog( "destroy" + + + + + + + +)
    +
    +
    +
    +

    Remove the dialog functionality completely. This will return the element back to its pre-init state.

    +
    +
  • + + +
  • +
    +

    disable

    +
    +
    Signature:
    +
    .dialog( "disable" + + + + + + + +)
    +
    +
    +
    +

    Disable the dialog.

    +
    +
  • + + +
  • +
    +

    enable

    +
    +
    Signature:
    +
    .dialog( "enable" + + + + + + + +)
    +
    +
    +
    +

    Enable the dialog.

    +
    +
  • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .dialog( "option" + +, optionName + +, [value] + + + +)
    +
    +
    +
    +

    Get or set any dialog option. If no value is specified, will act as a getter.

    +
    +
  • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .dialog( "option" + +, options + + + + + +)
    +
    +
    +
    +

    Set multiple dialog options at once by providing an options object.

    +
    +
  • + + +
  • +
    +

    widget

    +
    +
    Signature:
    +
    .dialog( "widget" + + + + + + + +)
    +
    +
    +
    +

    Returns the .ui-dialog element.

    +
    +
  • + + +
  • +
    +

    close

    +
    +
    Signature:
    +
    .dialog( "close" + + + + + + + +)
    +
    +
    +
    +

    Close the dialog.

    +
    +
  • + + +
  • +
    +

    isOpen

    +
    +
    Signature:
    +
    .dialog( "isOpen" + + + + + + + +)
    +
    +
    +
    +

    Returns true if the dialog is currently open.

    +
    +
  • + + +
  • +
    +

    moveToTop

    +
    +
    Signature:
    +
    .dialog( "moveToTop" + + + + + + + +)
    +
    +
    +
    +

    Move the dialog to the top of the dialogs stack.

    +
    +
  • + + +
  • +
    +

    open

    +
    +
    Signature:
    +
    .dialog( "open" + + + + + + + +)
    +
    +
    +
    +

    Open the dialog.

    +
    +
  • + +
+
+
+

Theming

+

The jQuery UI Dialog plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain. +

+

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.dialog.css stylesheet that can be modified. These classes are highlighed in bold below. +

+ +

Sample markup with jQuery UI CSS Framework classes

+ <div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
+   <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
+      <span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span>
+      <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
+   </div>
+   <div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog">
+      <p>Dialog content goes here.</p>
+   </div>
+</div>
+

+ + Note: This is a sample of markup generated by the dialog plugin, not markup you should use to create a dialog. The only markup needed for that is <div></div>. + +

+ +
+
+ +

+ + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/docs/draggable.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/docs/draggable.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,1577 @@ + + +
+

jQuery UI Draggable

+
+

Overview

+
+

The jQuery UI Draggable plugin makes selected elements draggable by mouse.

+

Draggable elements gets a class of ui-draggable. During drag the element also gets a class of ui-draggable-dragging. If you want not just drag, but drag-and-drop, see the jQuery UI Droppable plugin, which provides a drop target for draggables.

+

All callbacks (start, stop, drag) receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'):

+
    +
  • ui.helper - the jQuery object representing the helper that's being dragged
  • +
  • ui.position - current position of the helper as { top, left } object, relative to the offset element
  • +
  • ui.offset - current absolute position of the helper as { top, left } object, relative to page
  • +
+


+

+

To manipulate the position of a draggable during drag, you can either use a wrapper as the draggable helper and position the wrapped element with absolute positioning, or you can correct internal values like so: $(this).data('draggable').offset.click.top -= x.

+
+
+

Dependencies

+
    +
  • UI Core
  • +
  • UI Widget
  • +
  • UI Mouse
  • +
+
+
+

Example

+
+ +

+Initialize a draggable with default options.
+

+
$("#draggable").draggable();
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  <style type="text/css">
+    #draggable { width: 100px; height: 70px; background: silver; }
+  </style>
+  <script>
+  $(document).ready(function() {
+    $("#draggable").draggable();
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<div id="draggable">Drag me</div>
+
+</body>
+</html>
+
+

+

+
+
+
+

Options

+
    + +
  • +
    +

    disabled

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Disables (true) or enables (false) the draggable. Can be set when initialising (first creating) the draggable.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the disabled option specified. +
    +
    +
    $( ".selector" ).draggable({ disabled: true });
    +
    + + +
    + Get or set the disabled option, after init. +
    +
    +
    //getter
    +var disabled = $( ".selector" ).draggable( "option", "disabled" );
    +//setter
    +$( ".selector" ).draggable( "option", "disabled", true );
    +
    + +
    +
    +
  • + + +
  • +
    +

    addClasses

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    true
    + +
    +
    +
    +

    If set to false, will prevent the ui-draggable class from being added. This may be desired as a performance optimization when calling .draggable() init on many hundreds of elements.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the addClasses option specified. +
    +
    +
    $( ".selector" ).draggable({ addClasses: false });
    +
    + + +
    + Get or set the addClasses option, after init. +
    +
    +
    //getter
    +var addClasses = $( ".selector" ).draggable( "option", "addClasses" );
    +//setter
    +$( ".selector" ).draggable( "option", "addClasses", false );
    +
    + +
    +
    +
  • + + +
  • +
    +

    appendTo

    +
    +
    Type:
    +
    Element, Selector
    + +
    Default:
    +
    'parent'
    + +
    +
    +
    +

    The element passed to or selected by the appendTo option will be used as the draggable helper's container during dragging. By default, the helper is appended to the same container as the draggable.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the appendTo option specified. +
    +
    +
    $( ".selector" ).draggable({ appendTo: 'body' });
    +
    + + +
    + Get or set the appendTo option, after init. +
    +
    +
    //getter
    +var appendTo = $( ".selector" ).draggable( "option", "appendTo" );
    +//setter
    +$( ".selector" ).draggable( "option", "appendTo", 'body' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    axis

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Constrains dragging to either the horizontal (x) or vertical (y) axis. Possible values: 'x', 'y'.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the axis option specified. +
    +
    +
    $( ".selector" ).draggable({ axis: 'x' });
    +
    + + +
    + Get or set the axis option, after init. +
    +
    +
    //getter
    +var axis = $( ".selector" ).draggable( "option", "axis" );
    +//setter
    +$( ".selector" ).draggable( "option", "axis", 'x' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    cancel

    +
    +
    Type:
    +
    Selector
    + +
    Default:
    +
    ':input,option'
    + +
    +
    +
    +

    Prevents dragging from starting on specified elements.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the cancel option specified. +
    +
    +
    $( ".selector" ).draggable({ cancel: 'button' });
    +
    + + +
    + Get or set the cancel option, after init. +
    +
    +
    //getter
    +var cancel = $( ".selector" ).draggable( "option", "cancel" );
    +//setter
    +$( ".selector" ).draggable( "option", "cancel", 'button' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    connectToSortable

    +
    +
    Type:
    +
    Selector
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Allows the draggable to be dropped onto the specified sortables. If this option is used (helper must be set to 'clone' in order to work flawlessly), a draggable can be dropped onto a sortable list and then becomes part of it. +

    Note: Specifying this option as an array of selectors has been removed.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the connectToSortable option specified. +
    +
    +
    $( ".selector" ).draggable({ connectToSortable: 'ul#myList' });
    +
    + + +
    + Get or set the connectToSortable option, after init. +
    +
    +
    //getter
    +var connectToSortable = $( ".selector" ).draggable( "option", "connectToSortable" );
    +//setter
    +$( ".selector" ).draggable( "option", "connectToSortable", 'ul#myList' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    containment

    +
    +
    Type:
    +
    Selector, Element, String, Array
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Constrains dragging to within the bounds of the specified element or region. Possible string values: 'parent', 'document', 'window', [x1, y1, x2, y2].

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the containment option specified. +
    +
    +
    $( ".selector" ).draggable({ containment: 'parent' });
    +
    + + +
    + Get or set the containment option, after init. +
    +
    +
    //getter
    +var containment = $( ".selector" ).draggable( "option", "containment" );
    +//setter
    +$( ".selector" ).draggable( "option", "containment", 'parent' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    cursor

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'auto'
    + +
    +
    +
    +

    The css cursor during the drag operation.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the cursor option specified. +
    +
    +
    $( ".selector" ).draggable({ cursor: 'crosshair' });
    +
    + + +
    + Get or set the cursor option, after init. +
    +
    +
    //getter
    +var cursor = $( ".selector" ).draggable( "option", "cursor" );
    +//setter
    +$( ".selector" ).draggable( "option", "cursor", 'crosshair' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    cursorAt

    +
    +
    Type:
    +
    Object
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Sets the offset of the dragging helper relative to the mouse cursor. Coordinates can be given as a hash using a combination of one or two keys: { top, left, right, bottom }.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the cursorAt option specified. +
    +
    +
    $( ".selector" ).draggable({ cursorAt: { left: 5 } });
    +
    + + +
    + Get or set the cursorAt option, after init. +
    +
    +
    //getter
    +var cursorAt = $( ".selector" ).draggable( "option", "cursorAt" );
    +//setter
    +$( ".selector" ).draggable( "option", "cursorAt", { left: 5 } );
    +
    + +
    +
    +
  • + + +
  • +
    +

    delay

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    0
    + +
    +
    +
    +

    Time in milliseconds after mousedown until dragging should start. This option can be used to prevent unwanted drags when clicking on an element.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the delay option specified. +
    +
    +
    $( ".selector" ).draggable({ delay: 500 });
    +
    + + +
    + Get or set the delay option, after init. +
    +
    +
    //getter
    +var delay = $( ".selector" ).draggable( "option", "delay" );
    +//setter
    +$( ".selector" ).draggable( "option", "delay", 500 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    distance

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    1
    + +
    +
    +
    +

    Distance in pixels after mousedown the mouse must move before dragging should start. This option can be used to prevent unwanted drags when clicking on an element.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the distance option specified. +
    +
    +
    $( ".selector" ).draggable({ distance: 30 });
    +
    + + +
    + Get or set the distance option, after init. +
    +
    +
    //getter
    +var distance = $( ".selector" ).draggable( "option", "distance" );
    +//setter
    +$( ".selector" ).draggable( "option", "distance", 30 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    grid

    +
    +
    Type:
    +
    Array
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Snaps the dragging helper to a grid, every x and y pixels. Array values: [x, y]

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the grid option specified. +
    +
    +
    $( ".selector" ).draggable({ grid: [50, 20] });
    +
    + + +
    + Get or set the grid option, after init. +
    +
    +
    //getter
    +var grid = $( ".selector" ).draggable( "option", "grid" );
    +//setter
    +$( ".selector" ).draggable( "option", "grid", [50, 20] );
    +
    + +
    +
    +
  • + + +
  • +
    +

    handle

    +
    +
    Type:
    +
    Element, Selector
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If specified, restricts drag start click to the specified element(s).

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the handle option specified. +
    +
    +
    $( ".selector" ).draggable({ handle: 'h2' });
    +
    + + +
    + Get or set the handle option, after init. +
    +
    +
    //getter
    +var handle = $( ".selector" ).draggable( "option", "handle" );
    +//setter
    +$( ".selector" ).draggable( "option", "handle", 'h2' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    helper

    +
    +
    Type:
    +
    String, Function
    + +
    Default:
    +
    'original'
    + +
    +
    +
    +

    Allows for a helper element to be used for dragging display. Possible values: 'original', 'clone', Function. If a function is specified, it must return a DOMElement.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the helper option specified. +
    +
    +
    $( ".selector" ).draggable({ helper: 'clone' });
    +
    + + +
    + Get or set the helper option, after init. +
    +
    +
    //getter
    +var helper = $( ".selector" ).draggable( "option", "helper" );
    +//setter
    +$( ".selector" ).draggable( "option", "helper", 'clone' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    iframeFix

    +
    +
    Type:
    +
    Boolean, Selector
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Prevent iframes from capturing the mousemove events during a drag. Useful in combination with cursorAt, or in any case, if the mouse cursor is not over the helper. If set to true, transparent overlays will be placed over all iframes on the page. If a selector is supplied, the matched iframes will have an overlay placed over them.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the iframeFix option specified. +
    +
    +
    $( ".selector" ).draggable({ iframeFix: true });
    +
    + + +
    + Get or set the iframeFix option, after init. +
    +
    +
    //getter
    +var iframeFix = $( ".selector" ).draggable( "option", "iframeFix" );
    +//setter
    +$( ".selector" ).draggable( "option", "iframeFix", true );
    +
    + +
    +
    +
  • + + +
  • +
    +

    opacity

    +
    +
    Type:
    +
    Float
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Opacity for the helper while being dragged.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the opacity option specified. +
    +
    +
    $( ".selector" ).draggable({ opacity: 0.35 });
    +
    + + +
    + Get or set the opacity option, after init. +
    +
    +
    //getter
    +var opacity = $( ".selector" ).draggable( "option", "opacity" );
    +//setter
    +$( ".selector" ).draggable( "option", "opacity", 0.35 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    refreshPositions

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If set to true, all droppable positions are calculated on every mousemove. Caution: This solves issues on highly dynamic pages, but dramatically decreases performance.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the refreshPositions option specified. +
    +
    +
    $( ".selector" ).draggable({ refreshPositions: true });
    +
    + + +
    + Get or set the refreshPositions option, after init. +
    +
    +
    //getter
    +var refreshPositions = $( ".selector" ).draggable( "option", "refreshPositions" );
    +//setter
    +$( ".selector" ).draggable( "option", "refreshPositions", true );
    +
    + +
    +
    +
  • + + +
  • +
    +

    revert

    +
    +
    Type:
    +
    Boolean, String
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If set to true, the element will return to its start position when dragging stops. Possible string values: 'valid', 'invalid'. If set to invalid, revert will only occur if the draggable has not been dropped on a droppable. For valid, it's the other way around.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the revert option specified. +
    +
    +
    $( ".selector" ).draggable({ revert: true });
    +
    + + +
    + Get or set the revert option, after init. +
    +
    +
    //getter
    +var revert = $( ".selector" ).draggable( "option", "revert" );
    +//setter
    +$( ".selector" ).draggable( "option", "revert", true );
    +
    + +
    +
    +
  • + + +
  • +
    +

    revertDuration

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    500
    + +
    +
    +
    +

    The duration of the revert animation, in milliseconds. Ignored if revert is false.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the revertDuration option specified. +
    +
    +
    $( ".selector" ).draggable({ revertDuration: 1000 });
    +
    + + +
    + Get or set the revertDuration option, after init. +
    +
    +
    //getter
    +var revertDuration = $( ".selector" ).draggable( "option", "revertDuration" );
    +//setter
    +$( ".selector" ).draggable( "option", "revertDuration", 1000 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    scope

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'default'
    + +
    +
    +
    +

    Used to group sets of draggable and droppable items, in addition to droppable's accept option. A draggable with the same scope value as a droppable will be accepted by the droppable.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the scope option specified. +
    +
    +
    $( ".selector" ).draggable({ scope: 'tasks' });
    +
    + + +
    + Get or set the scope option, after init. +
    +
    +
    //getter
    +var scope = $( ".selector" ).draggable( "option", "scope" );
    +//setter
    +$( ".selector" ).draggable( "option", "scope", 'tasks' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    scroll

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    true
    + +
    +
    +
    +

    If set to true, container auto-scrolls while dragging.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the scroll option specified. +
    +
    +
    $( ".selector" ).draggable({ scroll: false });
    +
    + + +
    + Get or set the scroll option, after init. +
    +
    +
    //getter
    +var scroll = $( ".selector" ).draggable( "option", "scroll" );
    +//setter
    +$( ".selector" ).draggable( "option", "scroll", false );
    +
    + +
    +
    +
  • + + +
  • +
    +

    scrollSensitivity

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    20
    + +
    +
    +
    +

    Distance in pixels from the edge of the viewport after which the viewport should scroll. Distance is relative to pointer, not the draggable.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the scrollSensitivity option specified. +
    +
    +
    $( ".selector" ).draggable({ scrollSensitivity: 40 });
    +
    + + +
    + Get or set the scrollSensitivity option, after init. +
    +
    +
    //getter
    +var scrollSensitivity = $( ".selector" ).draggable( "option", "scrollSensitivity" );
    +//setter
    +$( ".selector" ).draggable( "option", "scrollSensitivity", 40 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    scrollSpeed

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    20
    + +
    +
    +
    +

    The speed at which the window should scroll once the mouse pointer gets within the scrollSensitivity distance.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the scrollSpeed option specified. +
    +
    +
    $( ".selector" ).draggable({ scrollSpeed: 40 });
    +
    + + +
    + Get or set the scrollSpeed option, after init. +
    +
    +
    //getter
    +var scrollSpeed = $( ".selector" ).draggable( "option", "scrollSpeed" );
    +//setter
    +$( ".selector" ).draggable( "option", "scrollSpeed", 40 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    snap

    +
    +
    Type:
    +
    Boolean, Selector
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If set to a selector or to true (equivalent to '.ui-draggable'), the draggable will snap to the edges of the selected elements when near an edge of the element.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the snap option specified. +
    +
    +
    $( ".selector" ).draggable({ snap: true });
    +
    + + +
    + Get or set the snap option, after init. +
    +
    +
    //getter
    +var snap = $( ".selector" ).draggable( "option", "snap" );
    +//setter
    +$( ".selector" ).draggable( "option", "snap", true );
    +
    + +
    +
    +
  • + + +
  • +
    +

    snapMode

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'both'
    + +
    +
    +
    +

    Determines which edges of snap elements the draggable will snap to. Ignored if snap is false. Possible values: 'inner', 'outer', 'both'

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the snapMode option specified. +
    +
    +
    $( ".selector" ).draggable({ snapMode: 'outer' });
    +
    + + +
    + Get or set the snapMode option, after init. +
    +
    +
    //getter
    +var snapMode = $( ".selector" ).draggable( "option", "snapMode" );
    +//setter
    +$( ".selector" ).draggable( "option", "snapMode", 'outer' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    snapTolerance

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    20
    + +
    +
    +
    +

    The distance in pixels from the snap element edges at which snapping should occur. Ignored if snap is false.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the snapTolerance option specified. +
    +
    +
    $( ".selector" ).draggable({ snapTolerance: 40 });
    +
    + + +
    + Get or set the snapTolerance option, after init. +
    +
    +
    //getter
    +var snapTolerance = $( ".selector" ).draggable( "option", "snapTolerance" );
    +//setter
    +$( ".selector" ).draggable( "option", "snapTolerance", 40 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    stack

    +
    +
    Type:
    +
    Selector
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Controls the z-Index of the set of elements that match the selector, always brings to front the dragged item. Very useful in things like window managers.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the stack option specified. +
    +
    +
    $( ".selector" ).draggable({ stack: ".products" });
    +
    + + +
    + Get or set the stack option, after init. +
    +
    +
    //getter
    +var stack = $( ".selector" ).draggable( "option", "stack" );
    +//setter
    +$( ".selector" ).draggable( "option", "stack", ".products" );
    +
    + +
    +
    +
  • + + +
  • +
    +

    zIndex

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    z-index for the helper while being dragged.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a draggable with the zIndex option specified. +
    +
    +
    $( ".selector" ).draggable({ zIndex: 2700 });
    +
    + + +
    + Get or set the zIndex option, after init. +
    +
    +
    //getter
    +var zIndex = $( ".selector" ).draggable( "option", "zIndex" );
    +//setter
    +$( ".selector" ).draggable( "option", "zIndex", 2700 );
    +
    + +
    +
    +
  • + +
+
+
+

Events

+
    + +
  • +
    +

    create

    +
    +
    Type:
    +
    dragcreate
    +
    +
    +
    +

    This event is triggered when draggable is created.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the create event as an init option. +
    +
    +
    $( ".selector" ).draggable({
    +   create: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the create event by type: dragcreate. +
    +
    +
    $( ".selector" ).bind( "dragcreate", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    start

    +
    +
    Type:
    +
    dragstart
    +
    +
    +
    +

    This event is triggered when dragging starts.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the start event as an init option. +
    +
    +
    $( ".selector" ).draggable({
    +   start: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the start event by type: dragstart. +
    +
    +
    $( ".selector" ).bind( "dragstart", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    drag

    +
    +
    Type:
    +
    drag
    +
    +
    +
    +

    This event is triggered when the mouse is moved during the dragging.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the drag event as an init option. +
    +
    +
    $( ".selector" ).draggable({
    +   drag: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the drag event by type: drag. +
    +
    +
    $( ".selector" ).bind( "drag", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    stop

    +
    +
    Type:
    +
    dragstop
    +
    +
    +
    +

    This event is triggered when dragging stops.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the stop event as an init option. +
    +
    +
    $( ".selector" ).draggable({
    +   stop: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the stop event by type: dragstop. +
    +
    +
    $( ".selector" ).bind( "dragstop", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + +
+
+
+

Methods

+
    + +
  • +
    +

    destroy

    +
    +
    Signature:
    +
    .draggable( "destroy" + + + + + + + +)
    +
    +
    +
    +

    Remove the draggable functionality completely. This will return the element back to its pre-init state.

    +
    +
  • + + +
  • +
    +

    disable

    +
    +
    Signature:
    +
    .draggable( "disable" + + + + + + + +)
    +
    +
    +
    +

    Disable the draggable.

    +
    +
  • + + +
  • +
    +

    enable

    +
    +
    Signature:
    +
    .draggable( "enable" + + + + + + + +)
    +
    +
    +
    +

    Enable the draggable.

    +
    +
  • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .draggable( "option" + +, optionName + +, [value] + + + +)
    +
    +
    +
    +

    Get or set any draggable option. If no value is specified, will act as a getter.

    +
    +
  • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .draggable( "option" + +, options + + + + + +)
    +
    +
    +
    +

    Set multiple draggable options at once by providing an options object.

    +
    +
  • + + +
  • +
    +

    widget

    +
    +
    Signature:
    +
    .draggable( "widget" + + + + + + + +)
    +
    +
    +
    +

    Returns the .ui-draggable element.

    +
    +
  • + + +
+
+
+

Theming

+

The jQuery UI Draggable plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain. +

+

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.draggable.css stylesheet that can be modified. These classes are highlighed in bold below. +

+ +

Sample markup with jQuery UI CSS Framework classes

+ <div class="ui-draggable"></div> +

+ + Note: This is a sample of markup generated by the draggable plugin, not markup you should use to create a draggable. The only markup needed for that is <div></div>. + +

+ +
+
+ +

+ + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/docs/droppable.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/docs/droppable.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,829 @@ + + +
+

jQuery UI Droppable

+
+

Overview

+
+

The jQuery UI Droppable plugin makes selected elements droppable (meaning they accept being dropped on by draggables). You can specify which (individually) or which kind of draggables each will accept.

+

All callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'):

+
    +
  • ui.draggable - current draggable element, a jQuery object.
  • +
  • ui.helper - current draggable helper, a jQuery object
  • +
  • ui.position - current position of the draggable helper { top: , left: }
  • +
  • ui.offset - current absolute position of the draggable helper { top: , left: }
  • +
+
+
+

Dependencies

+ +
+
+

Example

+
+ +

+Makes the div droppable (a drop target for a draggable).
+

+
$("#draggable").draggable();
+    $("#droppable").droppable({
+      drop: function() { alert('dropped'); }
+    });
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  <style type="text/css">
+    #draggable { width: 75px; height: 25px; background: silver; padding: 10px; }
+    #droppable { position: absolute; left: 250px; top: 0; width: 125px; height: 75px; background: gray; color: white; padding: 10px; }
+  </style>
+  <script>
+  $(document).ready(function() {
+    $("#draggable").draggable();
+    $("#droppable").droppable({
+      drop: function() { alert('dropped'); }
+    });
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<div id="droppable">Drop here</div>
+<div id="draggable">Drag me</div>
+
+</body>
+</html>
+
+

+

+
+
+
+

Options

+
    + +
  • +
    +

    disabled

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Disables (true) or enables (false) the droppable. Can be set when initialising (first creating) the droppable.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a droppable with the disabled option specified. +
    +
    +
    $( ".selector" ).droppable({ disabled: true });
    +
    + + +
    + Get or set the disabled option, after init. +
    +
    +
    //getter
    +var disabled = $( ".selector" ).droppable( "option", "disabled" );
    +//setter
    +$( ".selector" ).droppable( "option", "disabled", true );
    +
    + +
    +
    +
  • + + +
  • +
    +

    accept

    +
    +
    Type:
    +
    Selector, Function
    + +
    Default:
    +
    '*'
    + +
    +
    +
    +

    All draggables that match the selector will be accepted. If a function is specified, the function will be called for each draggable on the page (passed as the first argument to the function), to provide a custom filter. The function should return true if the draggable should be accepted.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a droppable with the accept option specified. +
    +
    +
    $( ".selector" ).droppable({ accept: '.special' });
    +
    + + +
    + Get or set the accept option, after init. +
    +
    +
    //getter
    +var accept = $( ".selector" ).droppable( "option", "accept" );
    +//setter
    +$( ".selector" ).droppable( "option", "accept", '.special' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    activeClass

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If specified, the class will be added to the droppable while an acceptable draggable is being dragged.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a droppable with the activeClass option specified. +
    +
    +
    $( ".selector" ).droppable({ activeClass: 'ui-state-highlight' });
    +
    + + +
    + Get or set the activeClass option, after init. +
    +
    +
    //getter
    +var activeClass = $( ".selector" ).droppable( "option", "activeClass" );
    +//setter
    +$( ".selector" ).droppable( "option", "activeClass", 'ui-state-highlight' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    addClasses

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    true
    + +
    +
    +
    +

    If set to false, will prevent the ui-droppable class from being added. This may be desired as a performance optimization when calling .droppable() init on many hundreds of elements.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a droppable with the addClasses option specified. +
    +
    +
    $( ".selector" ).droppable({ addClasses: false });
    +
    + + +
    + Get or set the addClasses option, after init. +
    +
    +
    //getter
    +var addClasses = $( ".selector" ).droppable( "option", "addClasses" );
    +//setter
    +$( ".selector" ).droppable( "option", "addClasses", false );
    +
    + +
    +
    +
  • + + +
  • +
    +

    greedy

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If true, will prevent event propagation on nested droppables.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a droppable with the greedy option specified. +
    +
    +
    $( ".selector" ).droppable({ greedy: true });
    +
    + + +
    + Get or set the greedy option, after init. +
    +
    +
    //getter
    +var greedy = $( ".selector" ).droppable( "option", "greedy" );
    +//setter
    +$( ".selector" ).droppable( "option", "greedy", true );
    +
    + +
    +
    +
  • + + +
  • +
    +

    hoverClass

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If specified, the class will be added to the droppable while an acceptable draggable is being hovered.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a droppable with the hoverClass option specified. +
    +
    +
    $( ".selector" ).droppable({ hoverClass: 'drophover' });
    +
    + + +
    + Get or set the hoverClass option, after init. +
    +
    +
    //getter
    +var hoverClass = $( ".selector" ).droppable( "option", "hoverClass" );
    +//setter
    +$( ".selector" ).droppable( "option", "hoverClass", 'drophover' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    scope

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'default'
    + +
    +
    +
    +

    Used to group sets of draggable and droppable items, in addition to droppable's accept option. A draggable with the same scope value as a droppable will be accepted.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a droppable with the scope option specified. +
    +
    +
    $( ".selector" ).droppable({ scope: 'tasks' });
    +
    + + +
    + Get or set the scope option, after init. +
    +
    +
    //getter
    +var scope = $( ".selector" ).droppable( "option", "scope" );
    +//setter
    +$( ".selector" ).droppable( "option", "scope", 'tasks' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    tolerance

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'intersect'
    + +
    +
    +
    +

    Specifies which mode to use for testing whether a draggable is 'over' a droppable. Possible values: 'fit', 'intersect', 'pointer', 'touch'. +

    +
      +
    • fit: draggable overlaps the droppable entirely
    • +
    • intersect: draggable overlaps the droppable at least 50%
    • +
    • pointer: mouse pointer overlaps the droppable
    • +
    • touch: draggable overlaps the droppable any amount
    • +
    +

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a droppable with the tolerance option specified. +
    +
    +
    $( ".selector" ).droppable({ tolerance: 'fit' });
    +
    + + +
    + Get or set the tolerance option, after init. +
    +
    +
    //getter
    +var tolerance = $( ".selector" ).droppable( "option", "tolerance" );
    +//setter
    +$( ".selector" ).droppable( "option", "tolerance", 'fit' );
    +
    + +
    +
    +
  • + +
+
+
+

Events

+
    + +
  • +
    +

    create

    +
    +
    Type:
    +
    dropcreate
    +
    +
    +
    +

    This event is triggered when droppable is created.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the create event as an init option. +
    +
    +
    $( ".selector" ).droppable({
    +   create: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the create event by type: dropcreate. +
    +
    +
    $( ".selector" ).bind( "dropcreate", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    activate

    +
    +
    Type:
    +
    dropactivate
    +
    +
    +
    +

    This event is triggered any time an accepted draggable starts dragging. This can be useful if you want to make the droppable 'light up' when it can be dropped on.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the activate event as an init option. +
    +
    +
    $( ".selector" ).droppable({
    +   activate: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the activate event by type: dropactivate. +
    +
    +
    $( ".selector" ).bind( "dropactivate", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    deactivate

    +
    +
    Type:
    +
    dropdeactivate
    +
    +
    +
    +

    This event is triggered any time an accepted draggable stops dragging.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the deactivate event as an init option. +
    +
    +
    $( ".selector" ).droppable({
    +   deactivate: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the deactivate event by type: dropdeactivate. +
    +
    +
    $( ".selector" ).bind( "dropdeactivate", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    over

    +
    +
    Type:
    +
    dropover
    +
    +
    +
    +

    This event is triggered as an accepted draggable is dragged 'over' (within the tolerance of) this droppable.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the over event as an init option. +
    +
    +
    $( ".selector" ).droppable({
    +   over: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the over event by type: dropover. +
    +
    +
    $( ".selector" ).bind( "dropover", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    out

    +
    +
    Type:
    +
    dropout
    +
    +
    +
    +

    This event is triggered when an accepted draggable is dragged out (within the tolerance of) this droppable.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the out event as an init option. +
    +
    +
    $( ".selector" ).droppable({
    +   out: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the out event by type: dropout. +
    +
    +
    $( ".selector" ).bind( "dropout", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    drop

    +
    +
    Type:
    +
    drop
    +
    +
    +
    +

    This event is triggered when an accepted draggable is dropped 'over' (within the tolerance of) this droppable. In the callback, $(this) represents the droppable the draggable is dropped on. +ui.draggable represents the draggable.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the drop event as an init option. +
    +
    +
    $( ".selector" ).droppable({
    +   drop: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the drop event by type: drop. +
    +
    +
    $( ".selector" ).bind( "drop", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + +
+
+
+

Methods

+
    + +
  • +
    +

    destroy

    +
    +
    Signature:
    +
    .droppable( "destroy" + + + + + + + +)
    +
    +
    +
    +

    Remove the droppable functionality completely. This will return the element back to its pre-init state.

    +
    +
  • + + +
  • +
    +

    disable

    +
    +
    Signature:
    +
    .droppable( "disable" + + + + + + + +)
    +
    +
    +
    +

    Disable the droppable.

    +
    +
  • + + +
  • +
    +

    enable

    +
    +
    Signature:
    +
    .droppable( "enable" + + + + + + + +)
    +
    +
    +
    +

    Enable the droppable.

    +
    +
  • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .droppable( "option" + +, optionName + +, [value] + + + +)
    +
    +
    +
    +

    Get or set any droppable option. If no value is specified, will act as a getter.

    +
    +
  • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .droppable( "option" + +, options + + + + + +)
    +
    +
    +
    +

    Set multiple droppable options at once by providing an options object.

    +
    +
  • + + +
  • +
    +

    widget

    +
    +
    Signature:
    +
    .droppable( "widget" + + + + + + + +)
    +
    +
    +
    +

    Returns the .ui-droppable element.

    +
    +
  • + + +
+
+
+

Theming

+

The jQuery UI Droppable plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain. +

+

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.droppable.css stylesheet that can be modified. These classes are highlighed in bold below. +

+ +

Sample markup with jQuery UI CSS Framework classes

+ <div class="ui-droppable"></div> +

+ + Note: This is a sample of markup generated by the droppable plugin, not markup you should use to create a droppable. The only markup needed for that is <div></div>. + +

+ +
+
+ +

+ + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/docs/position.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/docs/position.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,227 @@ + + +
+

jQuery UI Position Utility

+
+

Overview

+
+

Utility script for positioning any widget relative to the window, document, a particular element, or the cursor/mouse.

+

Note: jQuery UI does not support positioning hidden elements.

+

Does not need ui.core.js or effects.core.js.

+
+
+

Dependencies

+
    +
  • none (only jQuery core)
  • +
+
+
+

Example

+
+ +

+Clicking on the green element transfers to the other.
+

+
+$("#position1").position({
+  my: "center",
+  at: "center",
+  of: "#targetElement"
+});
+$("#position2").position({
+  my: "left top",
+  at: "left top",
+  of: "#targetElement"
+});
+$("#position3").position({
+  my: "right center",
+  at: "right bottom",
+  of: "#targetElement"
+});
+$(document).mousemove(function(ev){
+  $("#position4").position({
+    my: "left bottom",
+    of: ev,
+    offset: "3 -3",
+    collision: "fit"
+  });
+});
+
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  <style type="text/css">
+#targetElement { width:240px;height:200px;background-color:#999;margin:30px auto; }
+.positionDiv { width:50px;height:50px;opacity:0.6; }
+#position1 {background-color:#F00;}
+#position2 {background-color:#0F0;}
+#position3 {background-color:#00F;}
+#position4 {background-color:#FF0;}
+</style>
+
+  <script>
+  $(document).ready(function() {
+    
+$("#position1").position({
+  my: "center",
+  at: "center",
+  of: "#targetElement"
+});
+$("#position2").position({
+  my: "left top",
+  at: "left top",
+  of: "#targetElement"
+});
+$("#position3").position({
+  my: "right center",
+  at: "right bottom",
+  of: "#targetElement"
+});
+$(document).mousemove(function(ev){
+  $("#position4").position({
+    my: "left bottom",
+    of: ev,
+    offset: "3 -3",
+    collision: "fit"
+  });
+});
+
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<div id="targetElement">
+  <div class="positionDiv" id="position1"></div>
+  <div class="positionDiv" id="position2"></div>
+  <div class="positionDiv" id="position3"></div>
+  <div class="positionDiv" id="position4"></div>
+</div>
+
+</body>
+</html>
+
+

+

+
+
+
+

Arguments

+
    + +
  • +
    +

    my

    +
    +
    Type:
    +
    String
    + +
    +
    +
    +

    Defines which position on the element being positioned to align with the target element: "horizontal vertical" alignment. A single value such as "right" will default to "right center", "top" will default to "center top" (following CSS convention). Acceptable values: "top", "center", "bottom", "left", "right". Example: "left top" or "center center"

    +
    +
  • + + +
  • +
    +

    at

    +
    +
    Type:
    +
    String
    + +
    +
    +
    +

    Defines which position on the target element to align the positioned element against: "horizontal vertical" alignment. A single value such as "right" will default to "right center", "top" will default to "center top" (following CSS convention). Acceptable values: "top", "center", "bottom", "left", "right". Example: "left top" or "center center"

    +
    +
  • + + +
  • +
    +

    of

    +
    +
    Type:
    +
    Selector, Element, jQuery, Event
    + +
    +
    +
    +

    Element to position against. If you provide a selector, the first matching element will be used. If you provide a jQuery object, the first element will be used. If you provide an event object, the pageX and pageY properties will be used. Example: "#top-menu"

    +
    +
  • + + +
  • +
    +

    offset

    +
    +
    Type:
    +
    String
    + +
    +
    +
    +

    Add these left-top values to the calculated position, eg. "50 50" (left top) A single value such as "50" will apply to both.

    +
    +
  • + + +
  • +
    +

    collision

    +
    +
    Type:
    +
    String
    + +
    +
    +
    +

    When the positioned element overflows the window in some direction, move it to an alternative position. Similar to my and at, this accepts a single value or a pair for horizontal/vertical, eg. "flip", "fit", "fit flip", "fit none". +

    +
    • flip: to the opposite side and the collision detection is run again to see if it will fit. If it won't fit in either position, the center option should be used as a fall back. +
    • fit: so the element keeps in the desired direction, but is re-positioned so it fits. +
    • none: not do collision detection. +
    +

    +
    +
  • + + +
  • +
    +

    using

    +
    +
    Type:
    +
    Function
    + +
    +
    +
    +

    When specified the actual property setting is delegated to this callback. Receives a single parameter which is a hash of top and left values for the position that should be set.

    +
    +
  • + +
+
+
+ +

+ + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/docs/resizable.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/docs/resizable.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,1201 @@ + + +
+

jQuery UI Resizable

+
+

Overview

+
+

The jQuery UI Resizable plugin makes selected elements resizable (meaning they have draggable resize handles). You can specify one or more handles as well as min and max width and height.

+

All callbacks (start,stop,resize) receive two arguments: The original browser event and a prepared ui object. The ui object has the following fields:

+
    +
  • ui.helper - a jQuery object containing the helper element
  • +
  • ui.originalPosition - {top, left} before resizing started
  • +
  • ui.originalSize - {width, height} before resizing started
  • +
  • ui.position - {top, left} current position
  • +
  • ui.size - {width, height} current size
  • +
+
+
+

Dependencies

+
    +
  • UI Core
  • +
  • UI Widget
  • +
  • UI Mouse
  • +
+
+
+

Example

+
+ +

+A simple jQuery UI Resizable.
+

+
$("#resizable").resizable();
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  <style type="text/css">
+    #resizable { width: 100px; height: 100px; background: silver; }
+  </style>
+  <script>
+  $(document).ready(function() {
+    $("#resizable").resizable();
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<div id="resizable"></div>
+
+</body>
+</html>
+
+

+

+
+
+
+

Options

+
    + +
  • +
    +

    disabled

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Disables (true) or enables (false) the resizable. Can be set when initialising (first creating) the resizable.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the disabled option specified. +
    +
    +
    $( ".selector" ).resizable({ disabled: true });
    +
    + + +
    + Get or set the disabled option, after init. +
    +
    +
    //getter
    +var disabled = $( ".selector" ).resizable( "option", "disabled" );
    +//setter
    +$( ".selector" ).resizable( "option", "disabled", true );
    +
    + +
    +
    +
  • + + +
  • +
    +

    alsoResize

    +
    +
    Type:
    +
    Selector, jQuery, Element
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Resize these elements synchronous when resizing.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the alsoResize option specified. +
    +
    +
    $( ".selector" ).resizable({ alsoResize: '.other' });
    +
    + + +
    + Get or set the alsoResize option, after init. +
    +
    +
    //getter
    +var alsoResize = $( ".selector" ).resizable( "option", "alsoResize" );
    +//setter
    +$( ".selector" ).resizable( "option", "alsoResize", '.other' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    animate

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Animates to the final size after resizing.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the animate option specified. +
    +
    +
    $( ".selector" ).resizable({ animate: true });
    +
    + + +
    + Get or set the animate option, after init. +
    +
    +
    //getter
    +var animate = $( ".selector" ).resizable( "option", "animate" );
    +//setter
    +$( ".selector" ).resizable( "option", "animate", true );
    +
    + +
    +
    +
  • + + +
  • +
    +

    animateDuration

    +
    +
    Type:
    +
    Integer, String
    + +
    Default:
    +
    'slow'
    + +
    +
    +
    +

    Duration time for animating, in milliseconds. Other possible values: 'slow', 'normal', 'fast'.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the animateDuration option specified. +
    +
    +
    $( ".selector" ).resizable({ animateDuration: 500 });
    +
    + + +
    + Get or set the animateDuration option, after init. +
    +
    +
    //getter
    +var animateDuration = $( ".selector" ).resizable( "option", "animateDuration" );
    +//setter
    +$( ".selector" ).resizable( "option", "animateDuration", 500 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    animateEasing

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'swing'
    + +
    +
    +
    +

    Easing effect for animating.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the animateEasing option specified. +
    +
    +
    $( ".selector" ).resizable({ animateEasing: 'swing' });
    +
    + + +
    + Get or set the animateEasing option, after init. +
    +
    +
    //getter
    +var animateEasing = $( ".selector" ).resizable( "option", "animateEasing" );
    +//setter
    +$( ".selector" ).resizable( "option", "animateEasing", 'swing' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    aspectRatio

    +
    +
    Type:
    +
    Boolean, Float
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If set to true, resizing is constrained by the original aspect ratio. Otherwise a custom aspect ratio can be specified, such as 9 / 16, or 0.5.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the aspectRatio option specified. +
    +
    +
    $( ".selector" ).resizable({ aspectRatio: .75 });
    +
    + + +
    + Get or set the aspectRatio option, after init. +
    +
    +
    //getter
    +var aspectRatio = $( ".selector" ).resizable( "option", "aspectRatio" );
    +//setter
    +$( ".selector" ).resizable( "option", "aspectRatio", .75 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    autoHide

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If set to true, automatically hides the handles except when the mouse hovers over the element.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the autoHide option specified. +
    +
    +
    $( ".selector" ).resizable({ autoHide: true });
    +
    + + +
    + Get or set the autoHide option, after init. +
    +
    +
    //getter
    +var autoHide = $( ".selector" ).resizable( "option", "autoHide" );
    +//setter
    +$( ".selector" ).resizable( "option", "autoHide", true );
    +
    + +
    +
    +
  • + + +
  • +
    +

    cancel

    +
    +
    Type:
    +
    Selector
    + +
    Default:
    +
    ':input,option'
    + +
    +
    +
    +

    Prevents resizing if you start on elements matching the selector.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the cancel option specified. +
    +
    +
    $( ".selector" ).resizable({ cancel: ':input,option' });
    +
    + + +
    + Get or set the cancel option, after init. +
    +
    +
    //getter
    +var cancel = $( ".selector" ).resizable( "option", "cancel" );
    +//setter
    +$( ".selector" ).resizable( "option", "cancel", ':input,option' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    containment

    +
    +
    Type:
    +
    String, Element, Selector
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Constrains resizing to within the bounds of the specified element. Possible values: 'parent', 'document', a DOMElement, or a Selector.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the containment option specified. +
    +
    +
    $( ".selector" ).resizable({ containment: 'parent' });
    +
    + + +
    + Get or set the containment option, after init. +
    +
    +
    //getter
    +var containment = $( ".selector" ).resizable( "option", "containment" );
    +//setter
    +$( ".selector" ).resizable( "option", "containment", 'parent' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    delay

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    0
    + +
    +
    +
    +

    Tolerance, in milliseconds, for when resizing should start. If specified, resizing will not start until after mouse is moved beyond duration. This can help prevent unintended resizing when clicking on an element.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the delay option specified. +
    +
    +
    $( ".selector" ).resizable({ delay: 20 });
    +
    + + +
    + Get or set the delay option, after init. +
    +
    +
    //getter
    +var delay = $( ".selector" ).resizable( "option", "delay" );
    +//setter
    +$( ".selector" ).resizable( "option", "delay", 20 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    distance

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    1
    + +
    +
    +
    +

    Tolerance, in pixels, for when resizing should start. If specified, resizing will not start until after mouse is moved beyond distance. This can help prevent unintended resizing when clicking on an element.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the distance option specified. +
    +
    +
    $( ".selector" ).resizable({ distance: 20 });
    +
    + + +
    + Get or set the distance option, after init. +
    +
    +
    //getter
    +var distance = $( ".selector" ).resizable( "option", "distance" );
    +//setter
    +$( ".selector" ).resizable( "option", "distance", 20 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    ghost

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If set to true, a semi-transparent helper element is shown for resizing.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the ghost option specified. +
    +
    +
    $( ".selector" ).resizable({ ghost: true });
    +
    + + +
    + Get or set the ghost option, after init. +
    +
    +
    //getter
    +var ghost = $( ".selector" ).resizable( "option", "ghost" );
    +//setter
    +$( ".selector" ).resizable( "option", "ghost", true );
    +
    + +
    +
    +
  • + + +
  • +
    +

    grid

    +
    +
    Type:
    +
    Array
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Snaps the resizing element to a grid, every x and y pixels. Array values: [x, y]

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the grid option specified. +
    +
    +
    $( ".selector" ).resizable({ grid: [50, 50] });
    +
    + + +
    + Get or set the grid option, after init. +
    +
    +
    //getter
    +var grid = $( ".selector" ).resizable( "option", "grid" );
    +//setter
    +$( ".selector" ).resizable( "option", "grid", [50, 50] );
    +
    + +
    +
    +
  • + + +
  • +
    +

    handles

    +
    +
    Type:
    +
    String, Object
    + +
    Default:
    +
    'e, s, se'
    + +
    +
    +
    +

    If specified as a string, should be a comma-split list of any of the following: 'n, e, s, w, ne, se, sw, nw, all'. The necessary handles will be auto-generated by the plugin. +

    If specified as an object, the following keys are supported: { n, e, s, w, ne, se, sw, nw }. The value of any specified should be a jQuery selector matching the child element of the resizable to use as that handle. If the handle is not a child of the resizable, you can pass in the DOMElement or a valid jQuery object directly.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the handles option specified. +
    +
    +
    $( ".selector" ).resizable({ handles: 'n, e, s, w' });
    +
    + + +
    + Get or set the handles option, after init. +
    +
    +
    //getter
    +var handles = $( ".selector" ).resizable( "option", "handles" );
    +//setter
    +$( ".selector" ).resizable( "option", "handles", 'n, e, s, w' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    helper

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    This is the css class that will be added to a proxy element to outline the resize during the drag of the resize handle. Once the resize is complete, the original element is sized.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the helper option specified. +
    +
    +
    $( ".selector" ).resizable({ helper: 'ui-state-highlight' });
    +
    + + +
    + Get or set the helper option, after init. +
    +
    +
    //getter
    +var helper = $( ".selector" ).resizable( "option", "helper" );
    +//setter
    +$( ".selector" ).resizable( "option", "helper", 'ui-state-highlight' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    maxHeight

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    null
    + +
    +
    +
    +

    This is the maximum height the resizable should be allowed to resize to.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the maxHeight option specified. +
    +
    +
    $( ".selector" ).resizable({ maxHeight: 300 });
    +
    + + +
    + Get or set the maxHeight option, after init. +
    +
    +
    //getter
    +var maxHeight = $( ".selector" ).resizable( "option", "maxHeight" );
    +//setter
    +$( ".selector" ).resizable( "option", "maxHeight", 300 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    maxWidth

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    null
    + +
    +
    +
    +

    This is the maximum width the resizable should be allowed to resize to.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the maxWidth option specified. +
    +
    +
    $( ".selector" ).resizable({ maxWidth: 250 });
    +
    + + +
    + Get or set the maxWidth option, after init. +
    +
    +
    //getter
    +var maxWidth = $( ".selector" ).resizable( "option", "maxWidth" );
    +//setter
    +$( ".selector" ).resizable( "option", "maxWidth", 250 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    minHeight

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    10
    + +
    +
    +
    +

    This is the minimum height the resizable should be allowed to resize to.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the minHeight option specified. +
    +
    +
    $( ".selector" ).resizable({ minHeight: 150 });
    +
    + + +
    + Get or set the minHeight option, after init. +
    +
    +
    //getter
    +var minHeight = $( ".selector" ).resizable( "option", "minHeight" );
    +//setter
    +$( ".selector" ).resizable( "option", "minHeight", 150 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    minWidth

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    10
    + +
    +
    +
    +

    This is the minimum width the resizable should be allowed to resize to.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a resizable with the minWidth option specified. +
    +
    +
    $( ".selector" ).resizable({ minWidth: 75 });
    +
    + + +
    + Get or set the minWidth option, after init. +
    +
    +
    //getter
    +var minWidth = $( ".selector" ).resizable( "option", "minWidth" );
    +//setter
    +$( ".selector" ).resizable( "option", "minWidth", 75 );
    +
    + +
    +
    +
  • + +
+
+
+

Events

+
    + +
  • +
    +

    create

    +
    +
    Type:
    +
    resizecreate
    +
    +
    +
    +

    This event is triggered when resizable is created.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the create event as an init option. +
    +
    +
    $( ".selector" ).resizable({
    +   create: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the create event by type: resizecreate. +
    +
    +
    $( ".selector" ).bind( "resizecreate", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    start

    +
    +
    Type:
    +
    resizestart
    +
    +
    +
    +

    This event is triggered at the start of a resize operation.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the start event as an init option. +
    +
    +
    $( ".selector" ).resizable({
    +   start: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the start event by type: resizestart. +
    +
    +
    $( ".selector" ).bind( "resizestart", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    resize

    +
    +
    Type:
    +
    resize
    +
    +
    +
    +

    This event is triggered during the resize, on the drag of the resize handler.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the resize event as an init option. +
    +
    +
    $( ".selector" ).resizable({
    +   resize: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the resize event by type: resize. +
    +
    +
    $( ".selector" ).bind( "resize", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    stop

    +
    +
    Type:
    +
    resizestop
    +
    +
    +
    +

    This event is triggered at the end of a resize operation.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the stop event as an init option. +
    +
    +
    $( ".selector" ).resizable({
    +   stop: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the stop event by type: resizestop. +
    +
    +
    $( ".selector" ).bind( "resizestop", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + +
+
+
+

Methods

+
    + +
  • +
    +

    destroy

    +
    +
    Signature:
    +
    .resizable( "destroy" + + + + + + + +)
    +
    +
    +
    +

    Remove the resizable functionality completely. This will return the element back to its pre-init state.

    +
    +
  • + + +
  • +
    +

    disable

    +
    +
    Signature:
    +
    .resizable( "disable" + + + + + + + +)
    +
    +
    +
    +

    Disable the resizable.

    +
    +
  • + + +
  • +
    +

    enable

    +
    +
    Signature:
    +
    .resizable( "enable" + + + + + + + +)
    +
    +
    +
    +

    Enable the resizable.

    +
    +
  • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .resizable( "option" + +, optionName + +, [value] + + + +)
    +
    +
    +
    +

    Get or set any resizable option. If no value is specified, will act as a getter.

    +
    +
  • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .resizable( "option" + +, options + + + + + +)
    +
    +
    +
    +

    Set multiple resizable options at once by providing an options object.

    +
    +
  • + + +
  • +
    +

    widget

    +
    +
    Signature:
    +
    .resizable( "widget" + + + + + + + +)
    +
    +
    +
    +

    Returns the .ui-resizable element.

    +
    +
  • + + +
+
+
+

Theming

+

The jQuery UI Resizable plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain. +

+

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.resizable.css stylesheet that can be modified. These classes are highlighed in bold below. +

+ +

Sample markup with jQuery UI CSS Framework classes

+ <div class="ui-resizable">
+   <div style="-moz-user-select: none;" unselectable="on" class="ui-resizable-handle ui-resizable-e"></div>
+   <div style="-moz-user-select: none;" unselectable="on" class="ui-resizable-handle ui-resizable-s"></div>
+   <div unselectable="on" style="z-index: 1001; -moz-user-select: none;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se"></div>
+</div> +

+ + Note: This is a sample of markup generated by the resizable plugin, not markup you should use to create a resizable. The only markup needed for that is <div></div>. + +

+ +
+
+ +

+ + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/docs/selectable.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/docs/selectable.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,848 @@ + + +
+

jQuery UI Selectable

+
+

Overview

+
+

The jQuery UI Selectable plugin allows for elements to be selected by dragging a box (sometimes called a lasso) with the mouse over the elements. Also, elements can be selected by click or drag while holding the Ctrl/Meta key, allowing for multiple (non-contiguous) selections.

+
+
+

Dependencies

+
    +
  • UI Core
  • +
  • UI Widget
  • +
  • UI Mouse
  • +
+
+
+

Example

+
+ +

+A simple jQuery UI Selectable.
+

+
$("#selectable").selectable();
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  <style type="text/css">
+#selectable .ui-selecting {
+	background: silver;
+}
+#selectable .ui-selected {
+	background: gray;
+}
+</style>
+
+  <script>
+  $(document).ready(function() {
+    $("#selectable").selectable();
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<ul id="selectable">
+<li>Item 1</li>
+<li>Item 2</li>
+<li>Item 3</li>
+<li>Item 4</li>
+<li>Item 5</li>
+</ul>
+
+</body>
+</html>
+
+

+

+
+
+
+

Options

+
    + +
  • +
    +

    disabled

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Disables (true) or enables (false) the selectable. Can be set when initialising (first creating) the selectable.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a selectable with the disabled option specified. +
    +
    +
    $( ".selector" ).selectable({ disabled: true });
    +
    + + +
    + Get or set the disabled option, after init. +
    +
    +
    //getter
    +var disabled = $( ".selector" ).selectable( "option", "disabled" );
    +//setter
    +$( ".selector" ).selectable( "option", "disabled", true );
    +
    + +
    +
    +
  • + + +
  • +
    +

    autoRefresh

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    true
    + +
    +
    +
    +

    This determines whether to refresh (recalculate) the position and size of each selectee at the beginning of each select operation. If you have many many items, you may want to set this to false and call the refresh method manually.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a selectable with the autoRefresh option specified. +
    +
    +
    $( ".selector" ).selectable({ autoRefresh: false });
    +
    + + +
    + Get or set the autoRefresh option, after init. +
    +
    +
    //getter
    +var autoRefresh = $( ".selector" ).selectable( "option", "autoRefresh" );
    +//setter
    +$( ".selector" ).selectable( "option", "autoRefresh", false );
    +
    + +
    +
    +
  • + + +
  • +
    +

    cancel

    +
    +
    Type:
    +
    Selector
    + +
    Default:
    +
    ':input,option'
    + +
    +
    +
    +

    Prevents selecting if you start on elements matching the selector.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a selectable with the cancel option specified. +
    +
    +
    $( ".selector" ).selectable({ cancel: ':input,option' });
    +
    + + +
    + Get or set the cancel option, after init. +
    +
    +
    //getter
    +var cancel = $( ".selector" ).selectable( "option", "cancel" );
    +//setter
    +$( ".selector" ).selectable( "option", "cancel", ':input,option' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    delay

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    0
    + +
    +
    +
    +

    Time in milliseconds to define when the selecting should start. It helps preventing unwanted selections when clicking on an element.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a selectable with the delay option specified. +
    +
    +
    $( ".selector" ).selectable({ delay: 20 });
    +
    + + +
    + Get or set the delay option, after init. +
    +
    +
    //getter
    +var delay = $( ".selector" ).selectable( "option", "delay" );
    +//setter
    +$( ".selector" ).selectable( "option", "delay", 20 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    distance

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    0
    + +
    +
    +
    +

    Tolerance, in pixels, for when selecting should start. If specified, selecting will not start until after mouse is dragged beyond distance.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a selectable with the distance option specified. +
    +
    +
    $( ".selector" ).selectable({ distance: 20 });
    +
    + + +
    + Get or set the distance option, after init. +
    +
    +
    //getter
    +var distance = $( ".selector" ).selectable( "option", "distance" );
    +//setter
    +$( ".selector" ).selectable( "option", "distance", 20 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    filter

    +
    +
    Type:
    +
    Selector
    + +
    Default:
    +
    '*'
    + +
    +
    +
    +

    The matching child elements will be made selectees (able to be selected).

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a selectable with the filter option specified. +
    +
    +
    $( ".selector" ).selectable({ filter: 'li' });
    +
    + + +
    + Get or set the filter option, after init. +
    +
    +
    //getter
    +var filter = $( ".selector" ).selectable( "option", "filter" );
    +//setter
    +$( ".selector" ).selectable( "option", "filter", 'li' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    tolerance

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'touch'
    + +
    +
    +
    +

    Possible values: 'touch', 'fit'. +

    +
      +
    • fit: draggable overlaps the droppable entirely
    • +
    • touch: draggable overlaps the droppable any amount
    • +
    +

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a selectable with the tolerance option specified. +
    +
    +
    $( ".selector" ).selectable({ tolerance: 'fit' });
    +
    + + +
    + Get or set the tolerance option, after init. +
    +
    +
    //getter
    +var tolerance = $( ".selector" ).selectable( "option", "tolerance" );
    +//setter
    +$( ".selector" ).selectable( "option", "tolerance", 'fit' );
    +
    + +
    +
    +
  • + +
+
+
+

Events

+
    + +
  • +
    +

    create

    +
    +
    Type:
    +
    selectablecreate
    +
    +
    +
    +

    This event is triggered when selectable is created.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the create event as an init option. +
    +
    +
    $( ".selector" ).selectable({
    +   create: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the create event by type: selectablecreate. +
    +
    +
    $( ".selector" ).bind( "selectablecreate", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    selected

    +
    +
    Type:
    +
    selectableselected
    +
    +
    +
    +

    This event is triggered at the end of the select operation, on each element added to the selection.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the selected event as an init option. +
    +
    +
    $( ".selector" ).selectable({
    +   selected: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the selected event by type: selectableselected. +
    +
    +
    $( ".selector" ).bind( "selectableselected", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    selecting

    +
    +
    Type:
    +
    selectableselecting
    +
    +
    +
    +

    This event is triggered during the select operation, on each element added to the selection.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the selecting event as an init option. +
    +
    +
    $( ".selector" ).selectable({
    +   selecting: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the selecting event by type: selectableselecting. +
    +
    +
    $( ".selector" ).bind( "selectableselecting", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    start

    +
    +
    Type:
    +
    selectablestart
    +
    +
    +
    +

    This event is triggered at the beginning of the select operation.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the start event as an init option. +
    +
    +
    $( ".selector" ).selectable({
    +   start: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the start event by type: selectablestart. +
    +
    +
    $( ".selector" ).bind( "selectablestart", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    stop

    +
    +
    Type:
    +
    selectablestop
    +
    +
    +
    +

    This event is triggered at the end of the select operation.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the stop event as an init option. +
    +
    +
    $( ".selector" ).selectable({
    +   stop: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the stop event by type: selectablestop. +
    +
    +
    $( ".selector" ).bind( "selectablestop", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    unselected

    +
    +
    Type:
    +
    selectableunselected
    +
    +
    +
    +

    This event is triggered at the end of the select operation, on each element removed from the selection.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the unselected event as an init option. +
    +
    +
    $( ".selector" ).selectable({
    +   unselected: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the unselected event by type: selectableunselected. +
    +
    +
    $( ".selector" ).bind( "selectableunselected", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    unselecting

    +
    +
    Type:
    +
    selectableunselecting
    +
    +
    +
    +

    This event is triggered during the select operation, on each element removed from the selection.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the unselecting event as an init option. +
    +
    +
    $( ".selector" ).selectable({
    +   unselecting: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the unselecting event by type: selectableunselecting. +
    +
    +
    $( ".selector" ).bind( "selectableunselecting", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + +
+
+
+

Methods

+
    + +
  • +
    +

    destroy

    +
    +
    Signature:
    +
    .selectable( "destroy" + + + + + + + +)
    +
    +
    +
    +

    Remove the selectable functionality completely. This will return the element back to its pre-init state.

    +
    +
  • + + +
  • +
    +

    disable

    +
    +
    Signature:
    +
    .selectable( "disable" + + + + + + + +)
    +
    +
    +
    +

    Disable the selectable.

    +
    +
  • + + +
  • +
    +

    enable

    +
    +
    Signature:
    +
    .selectable( "enable" + + + + + + + +)
    +
    +
    +
    +

    Enable the selectable.

    +
    +
  • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .selectable( "option" + +, optionName + +, [value] + + + +)
    +
    +
    +
    +

    Get or set any selectable option. If no value is specified, will act as a getter.

    +
    +
  • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .selectable( "option" + +, options + + + + + +)
    +
    +
    +
    +

    Set multiple selectable options at once by providing an options object.

    +
    +
  • + + +
  • +
    +

    widget

    +
    +
    Signature:
    +
    .selectable( "widget" + + + + + + + +)
    +
    +
    +
    +

    Returns the .ui-selectable element.

    +
    +
  • + + +
  • +
    +

    refresh

    +
    +
    Signature:
    +
    .selectable( "refresh" + + + + + + + +)
    +
    +
    +
    +

    Refresh the position and size of each selectee element. This method can be used to manually recalculate the position and size of each selectee element. Very useful if autoRefresh is set to false.

    +
    +
  • + +
+
+
+

Theming

+

The jQuery UI Selectable plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain. +

+

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.selectable.css stylesheet that can be modified. These classes are highlighed in bold below. +

+ +

Sample markup with jQuery UI CSS Framework classes

+ <ul class="ui-selectable">
+   <li class="ui-selectee"></li>
+   <li class="ui-selectee"></li>
+   <li class="ui-selectee"></li>
+</ul> +

+ + Note: This is a sample of markup generated by the selectable plugin, not markup you should use to create a selectable. The only markup needed for that is
<ul>
+   <li></li>
+   <li></li>
+   <li></li>
+</ul>. +
+

+ +
+
+ +

+ + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/docs/sortable.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/docs/sortable.html Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,1952 @@ + + +
+

jQuery UI Sortable

+
+

Overview

+
+

The jQuery UI Sortable plugin makes selected elements sortable by dragging with the mouse.

+

All callbacks receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'):

+
    +
  • ui.helper - the current helper element (most often a clone of the item)
  • +
  • ui.position - current position of the helper
  • +
  • ui.offset - current absolute position of the helper
  • +
  • ui.item - the current dragged element
  • +
  • ui.placeholder - the placeholder (if you defined one)
  • +
  • ui.sender - the sortable where the item comes from (only exists if you move from one connected list to another)
  • +
+
+
+

Dependencies

+
    +
  • UI Core
  • +
  • UI Widget
  • +
  • UI Mouse
  • +
+
+
+

Example

+
+ +

+A simple jQuery UI Sortable.
+

+
$("#sortable").sortable();
+
+

+

+
<!DOCTYPE html>
+<html>
+<head>
+  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
+  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
+  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
+  
+  <script>
+  $(document).ready(function() {
+    $("#sortable").sortable();
+  });
+  </script>
+</head>
+<body style="font-size:62.5%;">
+  
+<ul id="sortable">
+<li>Item 1</li>
+<li>Item 2</li>
+<li>Item 3</li>
+<li>Item 4</li>
+<li>Item 5</li>
+</ul>
+
+</body>
+</html>
+
+

+

+
+
+
+

Options

+
    + +
  • +
    +

    disabled

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Disables (true) or enables (false) the sortable. Can be set when initialising (first creating) the sortable.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the disabled option specified. +
    +
    +
    $( ".selector" ).sortable({ disabled: true });
    +
    + + +
    + Get or set the disabled option, after init. +
    +
    +
    //getter
    +var disabled = $( ".selector" ).sortable( "option", "disabled" );
    +//setter
    +$( ".selector" ).sortable( "option", "disabled", true );
    +
    + +
    +
    +
  • + + +
  • +
    +

    appendTo

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'parent'
    + +
    +
    +
    +

    Defines where the helper that moves with the mouse is being appended to during the drag (for example, to resolve overlap/zIndex issues).

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the appendTo option specified. +
    +
    +
    $( ".selector" ).sortable({ appendTo: 'body' });
    +
    + + +
    + Get or set the appendTo option, after init. +
    +
    +
    //getter
    +var appendTo = $( ".selector" ).sortable( "option", "appendTo" );
    +//setter
    +$( ".selector" ).sortable( "option", "appendTo", 'body' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    axis

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If defined, the items can be dragged only horizontally or vertically. Possible values:'x', 'y'.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the axis option specified. +
    +
    +
    $( ".selector" ).sortable({ axis: 'x' });
    +
    + + +
    + Get or set the axis option, after init. +
    +
    +
    //getter
    +var axis = $( ".selector" ).sortable( "option", "axis" );
    +//setter
    +$( ".selector" ).sortable( "option", "axis", 'x' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    cancel

    +
    +
    Type:
    +
    Selector
    + +
    Default:
    +
    ':input,button'
    + +
    +
    +
    +

    Prevents sorting if you start on elements matching the selector.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the cancel option specified. +
    +
    +
    $( ".selector" ).sortable({ cancel: 'button' });
    +
    + + +
    + Get or set the cancel option, after init. +
    +
    +
    //getter
    +var cancel = $( ".selector" ).sortable( "option", "cancel" );
    +//setter
    +$( ".selector" ).sortable( "option", "cancel", 'button' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    connectWith

    +
    +
    Type:
    +
    Selector
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Takes a jQuery selector with items that also have sortables applied. If used, the sortable is now connected to the other one-way, so you can drag from this sortable to the other.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the connectWith option specified. +
    +
    +
    $( ".selector" ).sortable({ connectWith: '.otherlist' });
    +
    + + +
    + Get or set the connectWith option, after init. +
    +
    +
    //getter
    +var connectWith = $( ".selector" ).sortable( "option", "connectWith" );
    +//setter
    +$( ".selector" ).sortable( "option", "connectWith", '.otherlist' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    containment

    +
    +
    Type:
    +
    Element, String, Selector
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Constrains dragging to within the bounds of the specified element - can be a DOM element, 'parent', 'document', 'window', or a jQuery selector.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the containment option specified. +
    +
    +
    $( ".selector" ).sortable({ containment: 'parent' });
    +
    + + +
    + Get or set the containment option, after init. +
    +
    +
    //getter
    +var containment = $( ".selector" ).sortable( "option", "containment" );
    +//setter
    +$( ".selector" ).sortable( "option", "containment", 'parent' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    cursor

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'auto'
    + +
    +
    +
    +

    Defines the cursor that is being shown while sorting.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the cursor option specified. +
    +
    +
    $( ".selector" ).sortable({ cursor: 'crosshair' });
    +
    + + +
    + Get or set the cursor option, after init. +
    +
    +
    //getter
    +var cursor = $( ".selector" ).sortable( "option", "cursor" );
    +//setter
    +$( ".selector" ).sortable( "option", "cursor", 'crosshair' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    cursorAt

    +
    +
    Type:
    +
    Object
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Moves the sorting element or helper so the cursor always appears to drag from the same position. Coordinates can be given as a hash using a combination of one or two keys: { top, left, right, bottom }.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the cursorAt option specified. +
    +
    +
    $( ".selector" ).sortable({ cursorAt: 'top' });
    +
    + + +
    + Get or set the cursorAt option, after init. +
    +
    +
    //getter
    +var cursorAt = $( ".selector" ).sortable( "option", "cursorAt" );
    +//setter
    +$( ".selector" ).sortable( "option", "cursorAt", 'top' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    delay

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    0
    + +
    +
    +
    +

    Time in milliseconds to define when the sorting should start. It helps preventing unwanted drags when clicking on an element.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the delay option specified. +
    +
    +
    $( ".selector" ).sortable({ delay: 500 });
    +
    + + +
    + Get or set the delay option, after init. +
    +
    +
    //getter
    +var delay = $( ".selector" ).sortable( "option", "delay" );
    +//setter
    +$( ".selector" ).sortable( "option", "delay", 500 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    distance

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    1
    + +
    +
    +
    +

    Tolerance, in pixels, for when sorting should start. If specified, sorting will not start until after mouse is dragged beyond distance. Can be used to allow for clicks on elements within a handle.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the distance option specified. +
    +
    +
    $( ".selector" ).sortable({ distance: 30 });
    +
    + + +
    + Get or set the distance option, after init. +
    +
    +
    //getter
    +var distance = $( ".selector" ).sortable( "option", "distance" );
    +//setter
    +$( ".selector" ).sortable( "option", "distance", 30 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    dropOnEmpty

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    true
    + +
    +
    +
    +

    If false items from this sortable can't be dropped to an empty linked sortable.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the dropOnEmpty option specified. +
    +
    +
    $( ".selector" ).sortable({ dropOnEmpty: false });
    +
    + + +
    + Get or set the dropOnEmpty option, after init. +
    +
    +
    //getter
    +var dropOnEmpty = $( ".selector" ).sortable( "option", "dropOnEmpty" );
    +//setter
    +$( ".selector" ).sortable( "option", "dropOnEmpty", false );
    +
    + +
    +
    +
  • + + +
  • +
    +

    forceHelperSize

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If true, forces the helper to have a size.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the forceHelperSize option specified. +
    +
    +
    $( ".selector" ).sortable({ forceHelperSize: true });
    +
    + + +
    + Get or set the forceHelperSize option, after init. +
    +
    +
    //getter
    +var forceHelperSize = $( ".selector" ).sortable( "option", "forceHelperSize" );
    +//setter
    +$( ".selector" ).sortable( "option", "forceHelperSize", true );
    +
    + +
    +
    +
  • + + +
  • +
    +

    forcePlaceholderSize

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If true, forces the placeholder to have a size.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the forcePlaceholderSize option specified. +
    +
    +
    $( ".selector" ).sortable({ forcePlaceholderSize: true });
    +
    + + +
    + Get or set the forcePlaceholderSize option, after init. +
    +
    +
    //getter
    +var forcePlaceholderSize = $( ".selector" ).sortable( "option", "forcePlaceholderSize" );
    +//setter
    +$( ".selector" ).sortable( "option", "forcePlaceholderSize", true );
    +
    + +
    +
    +
  • + + +
  • +
    +

    grid

    +
    +
    Type:
    +
    Array
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Snaps the sorting element or helper to a grid, every x and y pixels. Array values: [x, y]

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the grid option specified. +
    +
    +
    $( ".selector" ).sortable({ grid: [50, 20] });
    +
    + + +
    + Get or set the grid option, after init. +
    +
    +
    //getter
    +var grid = $( ".selector" ).sortable( "option", "grid" );
    +//setter
    +$( ".selector" ).sortable( "option", "grid", [50, 20] );
    +
    + +
    +
    +
  • + + +
  • +
    +

    handle

    +
    +
    Type:
    +
    Selector, Element
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Restricts sort start click to the specified element.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the handle option specified. +
    +
    +
    $( ".selector" ).sortable({ handle: 'h2' });
    +
    + + +
    + Get or set the handle option, after init. +
    +
    +
    //getter
    +var handle = $( ".selector" ).sortable( "option", "handle" );
    +//setter
    +$( ".selector" ).sortable( "option", "handle", 'h2' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    helper

    +
    +
    Type:
    +
    String, Function
    + +
    Default:
    +
    'original'
    + +
    +
    +
    +

    Allows for a helper element to be used for dragging display. The supplied function receives the event and the element being sorted, and should return a DOMElement to be used as a custom proxy helper. Possible values: 'original', 'clone'

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the helper option specified. +
    +
    +
    $( ".selector" ).sortable({ helper: 'clone' });
    +
    + + +
    + Get or set the helper option, after init. +
    +
    +
    //getter
    +var helper = $( ".selector" ).sortable( "option", "helper" );
    +//setter
    +$( ".selector" ).sortable( "option", "helper", 'clone' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    items

    +
    +
    Type:
    +
    Selector
    + +
    Default:
    +
    '> *'
    + +
    +
    +
    +

    Specifies which items inside the element should be sortable.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the items option specified. +
    +
    +
    $( ".selector" ).sortable({ items: 'li' });
    +
    + + +
    + Get or set the items option, after init. +
    +
    +
    //getter
    +var items = $( ".selector" ).sortable( "option", "items" );
    +//setter
    +$( ".selector" ).sortable( "option", "items", 'li' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    opacity

    +
    +
    Type:
    +
    Float
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Defines the opacity of the helper while sorting. From 0.01 to 1

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the opacity option specified. +
    +
    +
    $( ".selector" ).sortable({ opacity: 0.6 });
    +
    + + +
    + Get or set the opacity option, after init. +
    +
    +
    //getter
    +var opacity = $( ".selector" ).sortable( "option", "opacity" );
    +//setter
    +$( ".selector" ).sortable( "option", "opacity", 0.6 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    placeholder

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    Class that gets applied to the otherwise white space.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the placeholder option specified. +
    +
    +
    $( ".selector" ).sortable({ placeholder: 'ui-state-highlight' });
    +
    + + +
    + Get or set the placeholder option, after init. +
    +
    +
    //getter
    +var placeholder = $( ".selector" ).sortable( "option", "placeholder" );
    +//setter
    +$( ".selector" ).sortable( "option", "placeholder", 'ui-state-highlight' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    revert

    +
    +
    Type:
    +
    Boolean/Integer
    + +
    Default:
    +
    false
    + +
    +
    +
    +

    If set to true, the item will be reverted to its new DOM position with a smooth animation. Optionally, it can also be set to a number that controls the duration of the animation in ms.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the revert option specified. +
    +
    +
    $( ".selector" ).sortable({ revert: true });
    +
    + + +
    + Get or set the revert option, after init. +
    +
    +
    //getter
    +var revert = $( ".selector" ).sortable( "option", "revert" );
    +//setter
    +$( ".selector" ).sortable( "option", "revert", true );
    +
    + +
    +
    +
  • + + +
  • +
    +

    scroll

    +
    +
    Type:
    +
    Boolean
    + +
    Default:
    +
    true
    + +
    +
    +
    +

    If set to true, the page scrolls when coming to an edge.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the scroll option specified. +
    +
    +
    $( ".selector" ).sortable({ scroll: false });
    +
    + + +
    + Get or set the scroll option, after init. +
    +
    +
    //getter
    +var scroll = $( ".selector" ).sortable( "option", "scroll" );
    +//setter
    +$( ".selector" ).sortable( "option", "scroll", false );
    +
    + +
    +
    +
  • + + +
  • +
    +

    scrollSensitivity

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    20
    + +
    +
    +
    +

    Defines how near the mouse must be to an edge to start scrolling.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the scrollSensitivity option specified. +
    +
    +
    $( ".selector" ).sortable({ scrollSensitivity: 40 });
    +
    + + +
    + Get or set the scrollSensitivity option, after init. +
    +
    +
    //getter
    +var scrollSensitivity = $( ".selector" ).sortable( "option", "scrollSensitivity" );
    +//setter
    +$( ".selector" ).sortable( "option", "scrollSensitivity", 40 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    scrollSpeed

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    20
    + +
    +
    +
    +

    The speed at which the window should scroll once the mouse pointer gets within the scrollSensitivity distance.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the scrollSpeed option specified. +
    +
    +
    $( ".selector" ).sortable({ scrollSpeed: 40 });
    +
    + + +
    + Get or set the scrollSpeed option, after init. +
    +
    +
    //getter
    +var scrollSpeed = $( ".selector" ).sortable( "option", "scrollSpeed" );
    +//setter
    +$( ".selector" ).sortable( "option", "scrollSpeed", 40 );
    +
    + +
    +
    +
  • + + +
  • +
    +

    tolerance

    +
    +
    Type:
    +
    String
    + +
    Default:
    +
    'intersect'
    + +
    +
    +
    +

    This is the way the reordering behaves during drag. Possible values: 'intersect', 'pointer'. In some setups, 'pointer' is more natural. +

    +
      +
    • intersect: draggable overlaps the droppable at least 50%
    • +
    • pointer: mouse pointer overlaps the droppable
    • +
    +

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the tolerance option specified. +
    +
    +
    $( ".selector" ).sortable({ tolerance: 'pointer' });
    +
    + + +
    + Get or set the tolerance option, after init. +
    +
    +
    //getter
    +var tolerance = $( ".selector" ).sortable( "option", "tolerance" );
    +//setter
    +$( ".selector" ).sortable( "option", "tolerance", 'pointer' );
    +
    + +
    +
    +
  • + + +
  • +
    +

    zIndex

    +
    +
    Type:
    +
    Integer
    + +
    Default:
    +
    1000
    + +
    +
    +
    +

    Z-index for element/helper while being sorted.

    +
    +
    +

    Code examples

    +
    + +
    + Initialize a sortable with the zIndex option specified. +
    +
    +
    $( ".selector" ).sortable({ zIndex: 5 });
    +
    + + +
    + Get or set the zIndex option, after init. +
    +
    +
    //getter
    +var zIndex = $( ".selector" ).sortable( "option", "zIndex" );
    +//setter
    +$( ".selector" ).sortable( "option", "zIndex", 5 );
    +
    + +
    +
    +
  • + +
+
+
+

Events

+
    + +
  • +
    +

    create

    +
    +
    Type:
    +
    sortcreate
    +
    +
    +
    +

    This event is triggered when sortable is created.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the create event as an init option. +
    +
    +
    $( ".selector" ).sortable({
    +   create: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the create event by type: sortcreate. +
    +
    +
    $( ".selector" ).bind( "sortcreate", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    start

    +
    +
    Type:
    +
    sortstart
    +
    +
    +
    +

    This event is triggered when sorting starts.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the start event as an init option. +
    +
    +
    $( ".selector" ).sortable({
    +   start: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the start event by type: sortstart. +
    +
    +
    $( ".selector" ).bind( "sortstart", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    sort

    +
    +
    Type:
    +
    sort
    +
    +
    +
    +

    This event is triggered during sorting.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the sort event as an init option. +
    +
    +
    $( ".selector" ).sortable({
    +   sort: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the sort event by type: sort. +
    +
    +
    $( ".selector" ).bind( "sort", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    change

    +
    +
    Type:
    +
    sortchange
    +
    +
    +
    +

    This event is triggered during sorting, but only when the DOM position has changed.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the change event as an init option. +
    +
    +
    $( ".selector" ).sortable({
    +   change: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the change event by type: sortchange. +
    +
    +
    $( ".selector" ).bind( "sortchange", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    beforeStop

    +
    +
    Type:
    +
    sortbeforestop
    +
    +
    +
    +

    This event is triggered when sorting stops, but when the placeholder/helper is still available.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the beforeStop event as an init option. +
    +
    +
    $( ".selector" ).sortable({
    +   beforeStop: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the beforeStop event by type: sortbeforestop. +
    +
    +
    $( ".selector" ).bind( "sortbeforestop", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    stop

    +
    +
    Type:
    +
    sortstop
    +
    +
    +
    +

    This event is triggered when sorting has stopped.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the stop event as an init option. +
    +
    +
    $( ".selector" ).sortable({
    +   stop: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the stop event by type: sortstop. +
    +
    +
    $( ".selector" ).bind( "sortstop", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    update

    +
    +
    Type:
    +
    sortupdate
    +
    +
    +
    +

    This event is triggered when the user stopped sorting and the DOM position has changed.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the update event as an init option. +
    +
    +
    $( ".selector" ).sortable({
    +   update: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the update event by type: sortupdate. +
    +
    +
    $( ".selector" ).bind( "sortupdate", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    receive

    +
    +
    Type:
    +
    sortreceive
    +
    +
    +
    +

    This event is triggered when a connected sortable list has received an item from another list.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the receive event as an init option. +
    +
    +
    $( ".selector" ).sortable({
    +   receive: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the receive event by type: sortreceive. +
    +
    +
    $( ".selector" ).bind( "sortreceive", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    remove

    +
    +
    Type:
    +
    sortremove
    +
    +
    +
    +

    This event is triggered when a sortable item has been dragged out from the list and into another.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the remove event as an init option. +
    +
    +
    $( ".selector" ).sortable({
    +   remove: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the remove event by type: sortremove. +
    +
    +
    $( ".selector" ).bind( "sortremove", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    over

    +
    +
    Type:
    +
    sortover
    +
    +
    +
    +

    This event is triggered when a sortable item is moved into a connected list.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the over event as an init option. +
    +
    +
    $( ".selector" ).sortable({
    +   over: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the over event by type: sortover. +
    +
    +
    $( ".selector" ).bind( "sortover", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    out

    +
    +
    Type:
    +
    sortout
    +
    +
    +
    +

    This event is triggered when a sortable item is moved away from a connected list.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the out event as an init option. +
    +
    +
    $( ".selector" ).sortable({
    +   out: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the out event by type: sortout. +
    +
    +
    $( ".selector" ).bind( "sortout", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    activate

    +
    +
    Type:
    +
    sortactivate
    +
    +
    +
    +

    This event is triggered when using connected lists, every connected list on drag start receives it.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the activate event as an init option. +
    +
    +
    $( ".selector" ).sortable({
    +   activate: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the activate event by type: sortactivate. +
    +
    +
    $( ".selector" ).bind( "sortactivate", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + + +
  • +
    +

    deactivate

    +
    +
    Type:
    +
    sortdeactivate
    +
    +
    +
    +

    This event is triggered when sorting was stopped, is propagated to all possible connected lists.

    +
    +
    +

    Code examples

    +
    + +
    + Supply a callback function to handle the deactivate event as an init option. +
    +
    +
    $( ".selector" ).sortable({
    +   deactivate: function(event, ui) { ... }
    +});
    +
    + + +
    + Bind to the deactivate event by type: sortdeactivate. +
    +
    +
    $( ".selector" ).bind( "sortdeactivate", function(event, ui) {
    +  ...
    +});
    +
    + +
    +
    +
  • + +
+
+
+

Methods

+
    + +
  • +
    +

    destroy

    +
    +
    Signature:
    +
    .sortable( "destroy" + + + + + + + +)
    +
    +
    +
    +

    Remove the sortable functionality completely. This will return the element back to its pre-init state.

    +
    +
  • + + +
  • +
    +

    disable

    +
    +
    Signature:
    +
    .sortable( "disable" + + + + + + + +)
    +
    +
    +
    +

    Disable the sortable.

    +
    +
  • + + +
  • +
    +

    enable

    +
    +
    Signature:
    +
    .sortable( "enable" + + + + + + + +)
    +
    +
    +
    +

    Enable the sortable.

    +
    +
  • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .sortable( "option" + +, optionName + +, [value] + + + +)
    +
    +
    +
    +

    Get or set any sortable option. If no value is specified, will act as a getter.

    +
    +
  • + + +
  • +
    +

    option

    +
    +
    Signature:
    +
    .sortable( "option" + +, options + + + + + +)
    +
    +
    +
    +

    Set multiple sortable options at once by providing an options object.

    +
    +
  • + + +
  • +
    +

    widget

    +
    +
    Signature:
    +
    .sortable( "widget" + + + + + + + +)
    +
    +
    +
    +

    Returns the .ui-sortable element.

    +
    +
  • + + +
  • +
    +

    serialize

    +
    +
    Signature:
    +
    .sortable( "serialize" + +, [options] + + + + + +)
    +
    +
    +
    +

    Serializes the sortable's item id's into a form/ajax submittable string. Calling this method produces a hash that can be appended to any url to easily submit a new item order back to the server. +

    It works by default by looking at the id of each item in the format 'setname_number', and it spits out a hash like "setname[]=number&setname[]=number". +

    You can also give in a option hash as second argument to custom define how the function works. The possible options are: 'key' (replaces part1[] with whatever you want), 'attribute' (test another attribute than 'id') and 'expression' (use your own regexp). +

    If serialize returns an empty string, make sure the id attributes include an underscore. They must be in the form: "set_number" For example, a 3 element list with id attributes foo_1, foo_5, foo_2 will serialize to foo[]=1&foo[]=5&foo[]=2. You can use an underscore, equal sign or hyphen to separate the set and number. For example foo=1 or foo-1 or foo_1 all serialize to foo[]=1.

    +
    +
  • + + +
  • +
    +

    toArray

    +
    +
    Signature:
    +
    .sortable( "toArray" + + + + + + + +)
    +
    +
    +
    +

    Serializes the sortable's item id's into an array of string. If you have +

    +
    +<ul id="a_sortable"><br>
    +<li id="hello">Hello</li><br>
    +<li id="goodbye">Good bye</li><br>
    +</ul>
    +
    +

    and do +

    +
    var result = $('#a_sortable').sortable('toArray');
    +

    then +

    +
    result[0] will contain "hello" and result[1] will contain "goodbye".

    +
    +
  • + +

    +

  • +
    +

    refresh

    +
    +
    Signature:
    +
    .sortable( "refresh" + + + + + + + +)
    +
    +
    +
    +

    Refresh the sortable items. Custom trigger the reloading of all sortable items, causing new items to be recognized.

    +
    +
  • + + +
  • +
    +

    refreshPositions

    +
    +
    Signature:
    +
    .sortable( "refreshPositions" + + + + + + + +)
    +
    +
    +
    +

    Refresh the cached positions of the sortables' items. Calling this method refreshes the cached item positions of all sortables. This is usually done automatically by the script and slows down performance. Use wisely.

    +
    +
  • + + +
  • +
    +

    cancel

    +
    +
    Signature:
    +
    .sortable( "cancel" + + + + + + + +)
    +
    +
    +
    +

    Cancels a change in the current sortable and reverts it back to how it was before the current sort started. Useful in the stop and receive callback functions. +

    If the sortable item is not being moved from one connected sortable to another: +

    +
    $(this).sortable('cancel');
    +

    will cancel the change. +

    If the sortable item is being moved from one connected sortable to another: +

    +
    $(ui.sender).sortable('cancel');
    +

    will cancel the change. Useful in the 'receive' callback.

    +
    +
  • + +
+
+
+

Theming

+

The jQuery UI Sortable plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain. +

+

If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.sortable.css stylesheet that can be modified. These classes are highlighed in bold below. +

+ +

Sample markup with jQuery UI CSS Framework classes

+ <ul class="ui-sortable">
+   <li></li>
+   <li class="ui-sortable-helper"></li>
+   <li class="ui-sortable-placeholder"></li>
+   <li></li>
+</ul> +

+ + Note: This is a sample of markup generated by the sortable plugin, not markup you should use to create a sortable. The only markup needed for that is
<ul>
+   <li></li>
+   <li></li>
+   <li></li>
+</ul>. +
+

+ +
+
+ +

+ + diff -r 000000000000 -r b2e4605f20b2 jquery-ui/development-bundle/external/jquery.bgiframe-2.1.2.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/jquery-ui/development-bundle/external/jquery.bgiframe-2.1.2.js Thu Jun 30 09:07:49 2011 +0200 @@ -0,0 +1,39 @@ +/*! Copyright (c) 2010 Brandon Aaron (http://brandonaaron.net) + * Licensed under the MIT License (LICENSE.txt). + * + * Version 2.1.2 + */ + +(function($){ + +$.fn.bgiframe = ($.browser.msie && /msie 6\.0/i.test(navigator.userAgent) ? function(s) { + s = $.extend({ + top : 'auto', // auto == .currentStyle.borderTopWidth + left : 'auto', // auto == .currentStyle.borderLeftWidth + width : 'auto', // auto == offsetWidth + height : 'auto', // auto == offsetHeight + opacity : true, + src : 'javascript:false;' + }, s); + var html = '