copy dari repo om Irfan
This commit is contained in:
@@ -0,0 +1,260 @@
|
||||
Authors ordered by first contribution
|
||||
A list of current team members is available at http://jqueryui.com/about
|
||||
|
||||
Paul Bakaus <paul.bakaus@gmail.com>
|
||||
Richard Worth <rdworth@gmail.com>
|
||||
Yehuda Katz <wycats@gmail.com>
|
||||
Sean Catchpole <sean@sunsean.com>
|
||||
John Resig <jeresig@gmail.com>
|
||||
Tane Piper <piper.tane@gmail.com>
|
||||
Dmitri Gaskin <dmitrig01@gmail.com>
|
||||
Klaus Hartl <klaus.hartl@gmail.com>
|
||||
Stefan Petre <stefan.petre@gmail.com>
|
||||
Gilles van den Hoven <gilles@webunity.nl>
|
||||
Micheil Bryan Smith <micheil@brandedcode.com>
|
||||
Jörn Zaefferer <joern.zaefferer@gmail.com>
|
||||
Marc Grabanski <m@marcgrabanski.com>
|
||||
Keith Wood <kbwood@iinet.com.au>
|
||||
Brandon Aaron <brandon.aaron@gmail.com>
|
||||
Scott González <scott.gonzalez@gmail.com>
|
||||
Eduardo Lundgren <eduardolundgren@gmail.com>
|
||||
Aaron Eisenberger <aaronchi@gmail.com>
|
||||
Joan Piedra <theneojp@gmail.com>
|
||||
Bruno Basto <b.basto@gmail.com>
|
||||
Remy Sharp <remy@leftlogic.com>
|
||||
Bohdan Ganicky <bohdan.ganicky@gmail.com>
|
||||
David Bolter <david.bolter@gmail.com>
|
||||
Chi Cheng <cloudream@gmail.com>
|
||||
Ca-Phun Ung <pazu2k@gmail.com>
|
||||
Ariel Flesler <aflesler@gmail.com>
|
||||
Maggie Wachs <maggie@filamentgroup.com>
|
||||
Scott Jehl <scott@scottjehl.com>
|
||||
Todd Parker <todd@filamentgroup.com>
|
||||
Andrew Powell <andrew@shellscape.org>
|
||||
Brant Burnett <btburnett3@gmail.com>
|
||||
Douglas Neiner <doug@dougneiner.com>
|
||||
Paul Irish <paul.irish@gmail.com>
|
||||
Ralph Whitbeck <ralph.whitbeck@gmail.com>
|
||||
Thibault Duplessis <thibault.duplessis@gmail.com>
|
||||
Dominique Vincent <dominique.vincent@toitl.com>
|
||||
Jack Hsu <jack.hsu@gmail.com>
|
||||
Adam Sontag <ajpiano@ajpiano.com>
|
||||
Carl Fürstenberg <carl@excito.com>
|
||||
Kevin Dalman <development@allpro.net>
|
||||
Alberto Fernández Capel <afcapel@gmail.com>
|
||||
Jacek Jędrzejewski (http://jacek.jedrzejewski.name)
|
||||
Ting Kuei <ting@kuei.com>
|
||||
Samuel Cormier-Iijima <sam@chide.it>
|
||||
Jon Palmer <jonspalmer@gmail.com>
|
||||
Ben Hollis <bhollis@amazon.com>
|
||||
Justin MacCarthy <Justin@Rubystars.biz>
|
||||
Eyal Kobrigo <kobrigo@hotmail.com>
|
||||
Tiago Freire <tiago.freire@gmail.com>
|
||||
Diego Tres <diegotres@gmail.com>
|
||||
Holger Rüprich <holger@rueprich.de>
|
||||
Ziling Zhao <zizhao@cisco.com>
|
||||
Mike Alsup <malsup@gmail.com>
|
||||
Robson Braga Araujo <robsonbraga@gmail.com>
|
||||
Pierre-Henri Ausseil <ph.ausseil@gmail.com>
|
||||
Christopher McCulloh <cmcculloh@gmail.com>
|
||||
Andrew Newcomb <ext.github@preceptsoftware.co.uk>
|
||||
Lim Chee Aun <cheeaun@gmail.com>
|
||||
Jorge Barreiro <yortx.barry@gmail.com>
|
||||
Daniel Steigerwald <daniel@steigerwald.cz>
|
||||
John Firebaugh <john_firebaugh@bigfix.com>
|
||||
John Enters <github@darkdark.net>
|
||||
Andrey Kapitcyn <ru.m157y@gmail.com>
|
||||
Dmitry Petrov <dpetroff@gmail.com>
|
||||
Eric Hynds <eric@hynds.net>
|
||||
Chairat Sunthornwiphat <pipo@sixhead.com>
|
||||
Josh Varner <josh.varner@gmail.com>
|
||||
Stéphane Raimbault <stephane.raimbault@gmail.com>
|
||||
Jay Merrifield <fracmak@gmail.com>
|
||||
J. Ryan Stinnett <jryans@gmail.com>
|
||||
Peter Heiberg <peter@heiberg.se>
|
||||
Alex Dovenmuehle <adovenmuehle@gmail.com>
|
||||
Jamie Gegerson <git@jamiegegerson.com>
|
||||
Raymond Schwartz <skeetergraphics@gmail.com>
|
||||
Phillip Barnes <philbar@gmail.com>
|
||||
Kyle Wilkinson <kai@wikyd.org>
|
||||
Khaled AlHourani <me@khaledalhourani.com>
|
||||
Marian Rudzynski <mr@impaled.org>
|
||||
Jean-Francois Remy <jeff@melix.org>
|
||||
Doug Blood
|
||||
Filippo Cavallarin <filippo.cavallarin@codseq.it>
|
||||
Heiko Henning <heiko@thehennings.ch>
|
||||
Aliaksandr Rahalevich <saksmlz@gmail.com>
|
||||
Mario Visic <mario@mariovisic.com>
|
||||
Xavi Ramirez <xavi.rmz@gmail.com>
|
||||
Max Schnur <max.schnur@gmail.com>
|
||||
Saji Nediyanchath <saji89@gmail.com>
|
||||
Corey Frang <gnarf@gnarf.net>
|
||||
Aaron Peterson <aaronp123@yahoo.com>
|
||||
Ivan Peters <ivan@ivanpeters.com>
|
||||
Mohamed Cherif Bouchelaghem <cherifbouchelaghem@yahoo.fr>
|
||||
Marcos Sousa <falecomigo@marcossousa.com>
|
||||
Michael DellaNoce <mdellanoce@mailtrust.com>
|
||||
George Marshall <echosx@gmail.com>
|
||||
Tobias Brunner <tobias@strongswan.org>
|
||||
Martin Solli <msolli@gmail.com>
|
||||
David Petersen <public@petersendidit.com>
|
||||
Dan Heberden <danheberden@gmail.com>
|
||||
William Kevin Manire <williamkmanire@gmail.com>
|
||||
Gilmore Davidson <gilmoreorless@gmail.com>
|
||||
Michael Wu <michaelmwu@gmail.com>
|
||||
Adam Parod <mystic414@gmail.com>
|
||||
Guillaume Gautreau <guillaume+github@ghusse.com>
|
||||
Marcel Toele <EleotleCram@gmail.com>
|
||||
Dan Streetman <ddstreet@ieee.org>
|
||||
Matt Hoskins <matt@nipltd.com>
|
||||
Giovanni Giacobbi <giovanni@giacobbi.net>
|
||||
Kyle Florence <kyle.florence@gmail.com>
|
||||
Pavol Hluchý <lopo@losys.sk>
|
||||
Hans Hillen <hans.hillen@gmail.com>
|
||||
Mark Johnson <virgofx@live.com>
|
||||
Trey Hunner <treyhunner@gmail.com>
|
||||
Shane Whittet <whittet@gmail.com>
|
||||
Edward A Faulkner <ef@alum.mit.edu>
|
||||
Adam Baratz <adam@adambaratz.com>
|
||||
Kato Kazuyoshi <kato.kazuyoshi@gmail.com>
|
||||
Eike Send <eike.send@gmail.com>
|
||||
Kris Borchers <kris.borchers@gmail.com>
|
||||
Eddie Monge <eddie@eddiemonge.com>
|
||||
Israel Tsadok <itsadok@gmail.com>
|
||||
Carson McDonald <carson@ioncannon.net>
|
||||
Jason Davies <jason@jasondavies.com>
|
||||
Garrison Locke <gplocke@gmail.com>
|
||||
David Murdoch <david@davidmurdoch.com>
|
||||
Benjamin Scott Boyle <benjamins.boyle@gmail.com>
|
||||
Jesse Baird <jebaird@gmail.com>
|
||||
Jonathan Vingiano <jvingiano@gmail.com>
|
||||
Dylan Just <dev@ephox.com>
|
||||
Hiroshi Tomita <tomykaira@gmail.com>
|
||||
Glenn Goodrich <glenn.goodrich@gmail.com>
|
||||
Tarafder Ashek-E-Elahi <mail.ashek@gmail.com>
|
||||
Ryan Neufeld <ryan@neufeldmail.com>
|
||||
Marc Neuwirth <marc.neuwirth@gmail.com>
|
||||
Philip Graham <philip.robert.graham@gmail.com>
|
||||
Benjamin Sterling <benjamin.sterling@kenzomedia.com>
|
||||
Wesley Walser <waw325@gmail.com>
|
||||
Kouhei Sutou <kou@clear-code.com>
|
||||
Karl Kirch <karlkrch@gmail.com>
|
||||
Chris Kelly <ckdake@ckdake.com>
|
||||
Jay Oster <jay@loyalize.com>
|
||||
Alexander Polomoshnov <alex.polomoshnov@gmail.com>
|
||||
David Leal <dgleal@gmail.com>
|
||||
Igor Milla <igor.fsp.milla@gmail.com>
|
||||
Dave Methvin <dave.methvin@gmail.com>
|
||||
Florian Gutmann <f.gutmann@chronimo.com>
|
||||
Marwan Al Jubeh <marwan.aljubeh@gmail.com>
|
||||
Milan Broum <midlis@googlemail.com>
|
||||
Sebastian Sauer <info@dynpages.de>
|
||||
Gaëtan Muller <m.gaetan89@gmail.com>
|
||||
William Griffiths <william@ycymro.com>
|
||||
Stojce Slavkovski <stojce@gmail.com>
|
||||
David Soms <david.soms@gmail.com>
|
||||
David De Sloovere <david.desloovere@outlook.com>
|
||||
Michael P. Jung <michael.jung@terreon.de>
|
||||
Shannon Pekary <spekary@gmail.com>
|
||||
Matthew Edward Hutton <meh@corefiling.co.uk>
|
||||
James Khoury <james@jameskhoury.com>
|
||||
Rob Loach <robloach@gmail.com>
|
||||
Alberto Monteiro <betimbrasil@gmail.com>
|
||||
Alex Rhea <alex.rhea@gmail.com>
|
||||
Krzysztof Rosiński <rozwell69@gmail.com>
|
||||
Ryan Olton <oltonr@gmail.com>
|
||||
Genie <386@mail.com>
|
||||
Rick Waldron <waldron.rick@gmail.com>
|
||||
Ian Simpson <spoonlikesham@gmail.com>
|
||||
Lev Kitsis <spam4lev@gmail.com>
|
||||
TJ VanToll <tj.vantoll@gmail.com>
|
||||
Justin Domnitz <jdomnitz@gmail.com>
|
||||
Douglas Cerna <douglascerna@yahoo.com>
|
||||
Bert ter Heide <bertjh@hotmail.com>
|
||||
Jasvir Nagra <jasvir@gmail.com>
|
||||
Petr Hromadko <yuriy@tokyoscale.com>
|
||||
Harri Kilpiö <harri.kilpio@gmail.com>
|
||||
Lado Lomidze <lado.lomidze@gmail.com>
|
||||
Amir E. Aharoni <amir.aharoni@mail.huji.ac.il>
|
||||
Simon Sattes <simon.sattes@gmail.com>
|
||||
Jo Liss <joliss42@gmail.com>
|
||||
Guntupalli Karunakar <karunakarg@yahoo.com>
|
||||
Shahyar Ghobadpour <shahyar@gmail.com>
|
||||
Lukasz Lipinski <uzza17@gmail.com>
|
||||
Timo Tijhof <krinklemail@gmail.com>
|
||||
Jason Moon <jmoon@socialcast.com>
|
||||
Martin Frost <martinf55@hotmail.com>
|
||||
Eneko Illarramendi <eneko@illarra.com>
|
||||
EungJun Yi <semtlenori@gmail.com>
|
||||
Courtland Allen <courtlandallen@gmail.com>
|
||||
Viktar Varvanovich <non4eg@gmail.com>
|
||||
Danny Trunk <dtrunk90@gmail.com>
|
||||
Pavel Stetina <pavel.stetina@nangu.tv>
|
||||
Michael Stay <metaweta@gmail.com>
|
||||
Steven Roussey <sroussey@gmail.com>
|
||||
Michael Hollis <hollis21@gmail.com>
|
||||
Lee Rowlands <lee.rowlands@previousnext.com.au>
|
||||
Timmy Willison <timmywillisn@gmail.com>
|
||||
Karl Swedberg <kswedberg@gmail.com>
|
||||
Baoju Yuan <the_guy_1987@hotmail.com>
|
||||
Maciej Mroziński <maciej.k.mrozinski@gmail.com>
|
||||
Luis Dalmolin <luis.nh@gmail.com>
|
||||
Mark Aaron Shirley <maspwr@gmail.com>
|
||||
Martin Hoch <martin@fidion.de>
|
||||
Jiayi Yang <tr870829@gmail.com>
|
||||
Philipp Benjamin Köppchen <xgxtpbk@gws.ms>
|
||||
Sindre Sorhus <sindresorhus@gmail.com>
|
||||
Bernhard Sirlinger <bernhard.sirlinger@tele2.de>
|
||||
Jared A. Scheel <jared@jaredscheel.com>
|
||||
Rafael Xavier de Souza <rxaviers@gmail.com>
|
||||
John Chen <zhang.z.chen@intel.com>
|
||||
Dale Kocian <dale.kocian@gmail.com>
|
||||
Mike Sherov <mike.sherov@gmail.com>
|
||||
Andrew Couch <andy@couchand.com>
|
||||
Marc-Andre Lafortune <github@marc-andre.ca>
|
||||
Nate Eagle <nate.eagle@teamaol.com>
|
||||
David Souther <davidsouther@gmail.com>
|
||||
Mathias Stenbom <mathias@stenbom.com>
|
||||
Sergey Kartashov <ebishkek@yandex.ru>
|
||||
Avinash R <nashpapa@gmail.com>
|
||||
Ethan Romba <ethanromba@gmail.com>
|
||||
Cory Gackenheimer <cory.gack@gmail.com>
|
||||
Juan Pablo Kaniefsky <jpkaniefsky@gmail.com>
|
||||
Roman Salnikov <bardt.dz@gmail.com>
|
||||
Anika Henke <anika@selfthinker.org>
|
||||
Samuel Bovée <samycookie2000@yahoo.fr>
|
||||
Fabrício Matté <ult_combo@hotmail.com>
|
||||
Viktor Kojouharov <vkojouharov@gmail.com>
|
||||
Pawel Maruszczyk (http://hrabstwo.net)
|
||||
Pavel Selitskas <p.selitskas@gmail.com>
|
||||
Bjørn Johansen <bjorn.johansen@metronet.no>
|
||||
Matthieu Penant <thieum22@hotmail.com>
|
||||
Dominic Barnes <dominic@dbarnes.info>
|
||||
David Sullivan <david.sullivan@gmail.com>
|
||||
Thomas Jaggi <thomas.jaggi@gmail.com>
|
||||
Vahid Sohrabloo <vahid4134@gmail.com>
|
||||
Travis Carden <travis.carden@gmail.com>
|
||||
Bruno M. Custódio <bruno@brunomcustodio.com>
|
||||
Nathanael Silverman <nathanael.silverman@gmail.com>
|
||||
Christian Wenz <christian@wenz.org>
|
||||
Steve Urmston <steve@urm.st>
|
||||
Zaven Muradyan <megalivoithos@gmail.com>
|
||||
Woody Gilk <shadowhand@deviantart.com>
|
||||
Zbigniew Motyka <zbigniew.motyka@gmail.com>
|
||||
Suhail Alkowaileet <xsoh.k7@gmail.com>
|
||||
Toshi MARUYAMA <marutosijp2@yahoo.co.jp>
|
||||
Christian Klammer <christian314159@gmail.com>
|
||||
Steven Luscher <jquerycla@steveluscher.com>
|
||||
Gan Eng Chin <engchin.gan@gmail.com>
|
||||
Vilhjálmur Skúlason <vis@dmm.is>
|
||||
Siebrand Mazeland <s.mazeland@xs4all.nl>
|
||||
Mohsen Ekhtiari <mohsenekhtiari@yahoo.com>
|
||||
Jasper de Groot <mail@ugomobi.com>
|
||||
Jyoti Deka <dekajp@gmail.com>
|
||||
Andrei Picus <office.nightcrawler@gmail.com>
|
||||
Ondrej Novy <novy@ondrej.org>
|
||||
Jacob McCutcheon <jacob.mccutcheon@gmail.com>
|
||||
Monika Piotrowicz <monika@shopify.com>
|
||||
Imants Horsts <imants.horsts@inbox.lv>
|
||||
Eric Dahl <eric.c.dahl@gmail.com>
|
||||
Thomas Meyer <meyertee@gmail.com>
|
||||
@@ -0,0 +1,240 @@
|
||||
module.exports = function( grunt ) {
|
||||
|
||||
"use strict";
|
||||
|
||||
var
|
||||
// files
|
||||
coreFiles = [
|
||||
"jquery.ui.core.js",
|
||||
"jquery.ui.widget.js",
|
||||
"jquery.ui.mouse.js",
|
||||
"jquery.ui.draggable.js",
|
||||
"jquery.ui.droppable.js",
|
||||
"jquery.ui.resizable.js",
|
||||
"jquery.ui.selectable.js",
|
||||
"jquery.ui.sortable.js",
|
||||
"jquery.ui.effect.js"
|
||||
],
|
||||
|
||||
uiFiles = coreFiles.map(function( file ) {
|
||||
return "ui/" + file;
|
||||
}).concat( expandFiles( "ui/*.js" ).filter(function( file ) {
|
||||
return coreFiles.indexOf( file.substring(3) ) === -1;
|
||||
})),
|
||||
|
||||
allI18nFiles = expandFiles( "ui/i18n/*.js" ),
|
||||
|
||||
cssFiles = [
|
||||
"core",
|
||||
"accordion",
|
||||
"autocomplete",
|
||||
"button",
|
||||
"datepicker",
|
||||
"dialog",
|
||||
"menu",
|
||||
"progressbar",
|
||||
"resizable",
|
||||
"selectable",
|
||||
"slider",
|
||||
"spinner",
|
||||
"tabs",
|
||||
"tooltip",
|
||||
"theme"
|
||||
].map(function( component ) {
|
||||
return "themes/base/jquery.ui." + component + ".css";
|
||||
}),
|
||||
|
||||
// minified files
|
||||
minify = {
|
||||
options: {
|
||||
preserveComments: false
|
||||
},
|
||||
main: {
|
||||
options: {
|
||||
banner: createBanner( uiFiles )
|
||||
},
|
||||
files: {
|
||||
"dist/jquery-ui.min.js": "dist/jquery-ui.js"
|
||||
}
|
||||
},
|
||||
i18n: {
|
||||
options: {
|
||||
banner: createBanner( allI18nFiles )
|
||||
},
|
||||
files: {
|
||||
"dist/i18n/jquery-ui-i18n.min.js": "dist/i18n/jquery-ui-i18n.js"
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
minifyCSS = {
|
||||
options: {
|
||||
keepSpecialComments: 0
|
||||
},
|
||||
main: {
|
||||
options: {
|
||||
keepSpecialComments: "*"
|
||||
},
|
||||
src: "dist/jquery-ui.css",
|
||||
dest: "dist/jquery-ui.min.css"
|
||||
}
|
||||
},
|
||||
|
||||
compareFiles = {
|
||||
all: [
|
||||
"dist/jquery-ui.js",
|
||||
"dist/jquery-ui.min.js"
|
||||
]
|
||||
};
|
||||
|
||||
function mapMinFile( file ) {
|
||||
return "dist/" + file.replace( /\.js$/, ".min.js" ).replace( /ui\//, "minified/" );
|
||||
}
|
||||
|
||||
function expandFiles( files ) {
|
||||
return grunt.util._.pluck( grunt.file.expandMapping( files ), "src" ).map(function( values ) {
|
||||
return values[ 0 ];
|
||||
});
|
||||
}
|
||||
|
||||
uiFiles.concat( allI18nFiles ).forEach(function( file ) {
|
||||
minify[ file ] = {
|
||||
options: {
|
||||
banner: createBanner()
|
||||
},
|
||||
files: {}
|
||||
};
|
||||
minify[ file ].files[ mapMinFile( file ) ] = file;
|
||||
});
|
||||
|
||||
cssFiles.forEach(function( file ) {
|
||||
minifyCSS[ file ] = {
|
||||
options: {
|
||||
banner: createBanner()
|
||||
},
|
||||
src: file,
|
||||
dest: "dist/" + file.replace( /\.css$/, ".min.css" ).replace( /themes\/base\//, "themes/base/minified/" )
|
||||
};
|
||||
});
|
||||
|
||||
uiFiles.forEach(function( file ) {
|
||||
// TODO this doesn't do anything until https://github.com/rwldrn/grunt-compare-size/issues/13
|
||||
compareFiles[ file ] = [ file, mapMinFile( file ) ];
|
||||
});
|
||||
|
||||
// grunt plugins
|
||||
grunt.loadNpmTasks( "grunt-contrib-jshint" );
|
||||
grunt.loadNpmTasks( "grunt-contrib-uglify" );
|
||||
grunt.loadNpmTasks( "grunt-contrib-concat" );
|
||||
grunt.loadNpmTasks( "grunt-contrib-qunit" );
|
||||
grunt.loadNpmTasks( "grunt-contrib-csslint" );
|
||||
grunt.loadNpmTasks( "grunt-contrib-cssmin" );
|
||||
grunt.loadNpmTasks( "grunt-html" );
|
||||
grunt.loadNpmTasks( "grunt-compare-size" );
|
||||
grunt.loadNpmTasks( "grunt-git-authors" );
|
||||
// local testswarm and build tasks
|
||||
grunt.loadTasks( "build/tasks" );
|
||||
|
||||
function stripDirectory( file ) {
|
||||
return file.replace( /.+\/(.+?)>?$/, "$1" );
|
||||
}
|
||||
|
||||
function createBanner( files ) {
|
||||
// strip folders
|
||||
var fileNames = files && files.map( stripDirectory );
|
||||
return "/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - " +
|
||||
"<%= grunt.template.today('isoDate') %>\n" +
|
||||
"<%= pkg.homepage ? '* ' + pkg.homepage + '\\n' : '' %>" +
|
||||
(files ? "* Includes: " + fileNames.join(", ") + "\n" : "")+
|
||||
"* Copyright <%= grunt.template.today('yyyy') %> <%= pkg.author.name %>;" +
|
||||
" Licensed <%= _.pluck(pkg.licenses, 'type').join(', ') %> */\n";
|
||||
}
|
||||
|
||||
grunt.initConfig({
|
||||
pkg: grunt.file.readJSON("package.json"),
|
||||
files: {
|
||||
dist: "<%= pkg.name %>-<%= pkg.version %>"
|
||||
},
|
||||
compare_size: compareFiles,
|
||||
concat: {
|
||||
ui: {
|
||||
options: {
|
||||
banner: createBanner( uiFiles ),
|
||||
stripBanners: {
|
||||
block: true
|
||||
}
|
||||
},
|
||||
src: uiFiles,
|
||||
dest: "dist/jquery-ui.js"
|
||||
},
|
||||
i18n: {
|
||||
options: {
|
||||
banner: createBanner( allI18nFiles )
|
||||
},
|
||||
src: allI18nFiles,
|
||||
dest: "dist/i18n/jquery-ui-i18n.js"
|
||||
},
|
||||
css: {
|
||||
options: {
|
||||
banner: createBanner( cssFiles ),
|
||||
stripBanners: {
|
||||
block: true
|
||||
}
|
||||
},
|
||||
src: cssFiles,
|
||||
dest: "dist/jquery-ui.css"
|
||||
}
|
||||
},
|
||||
uglify: minify,
|
||||
cssmin: minifyCSS,
|
||||
htmllint: {
|
||||
// ignore files that contain invalid html, used only for ajax content testing
|
||||
all: grunt.file.expand( [ "demos/**/*.html", "tests/**/*.html" ] ).filter(function( file ) {
|
||||
return !/(?:ajax\/content\d\.html|tabs\/data\/test\.html|tests\/unit\/core\/core\.html)/.test( file );
|
||||
})
|
||||
},
|
||||
copy: {
|
||||
dist_units_images: {
|
||||
src: "themes/base/images/*",
|
||||
strip: /^themes\/base\//,
|
||||
dest: "dist/"
|
||||
}
|
||||
},
|
||||
qunit: {
|
||||
files: expandFiles( "tests/unit/**/*.html" ).filter(function( file ) {
|
||||
// disabling everything that doesn't (quite) work with PhantomJS for now
|
||||
// TODO except for all|index|test, try to include more as we go
|
||||
return !( /(all|index|test|dialog|dialog_deprecated|tooltip)\.html$/ ).test( file );
|
||||
})
|
||||
},
|
||||
jshint: {
|
||||
options: {
|
||||
jshintrc: true
|
||||
},
|
||||
all: [
|
||||
"ui/*.js",
|
||||
"Gruntfile.js",
|
||||
"build/**/*.js",
|
||||
"tests/unit/**/*.js"
|
||||
]
|
||||
},
|
||||
csslint: {
|
||||
base_theme: {
|
||||
src: "themes/base/*.css",
|
||||
options: {
|
||||
csslintrc: ".csslintrc"
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
grunt.registerTask( "default", [ "lint", "test" ] );
|
||||
grunt.registerTask( "lint", [ "asciilint", "jshint", "csslint", "htmllint" ] );
|
||||
grunt.registerTask( "test", [ "qunit" ] );
|
||||
grunt.registerTask( "sizer", [ "concat:ui", "uglify:main", "compare_size:all" ] );
|
||||
grunt.registerTask( "sizer_all", [ "concat:ui", "uglify", "compare_size" ] );
|
||||
|
||||
// "copy:dist_units_images" is used by unit tests
|
||||
grunt.registerTask( "build", [ "concat", "uglify", "cssmin", "copy:dist_units_images" ] );
|
||||
|
||||
};
|
||||
@@ -0,0 +1,26 @@
|
||||
Copyright 2014 jQuery Foundation and other contributors,
|
||||
http://jqueryui.com/
|
||||
|
||||
This software consists of voluntary contributions made by many
|
||||
individuals (AUTHORS.txt, http://jqueryui.com/about) For exact
|
||||
contribution history, see the revision history and logs, available
|
||||
at http://jquery-ui.googlecode.com/svn/
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of this software and associated documentation files (the
|
||||
"Software"), to deal in the Software without restriction, including
|
||||
without limitation the rights to use, copy, modify, merge, publish,
|
||||
distribute, sublicense, and/or sell copies of the Software, and to
|
||||
permit persons to whom the Software is furnished to do so, subject to
|
||||
the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||||
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
||||
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||||
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
@@ -0,0 +1,96 @@
|
||||
# [jQuery UI](http://jqueryui.com/) - Interactions and Widgets for the web
|
||||
|
||||
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of jQuery. Whether you're building highly interactive web applications, or you just need to add a date picker to a form control, jQuery UI is the perfect choice.
|
||||
|
||||
If you want to use jQuery UI, go to [jqueryui.com](http://jqueryui.com) to get started, [jqueryui.com/demos/](http://jqueryui.com/demos/) for demos, [api.jqueryui.com](http://api.jqueryui.com/) for API documentation, or the [Using jQuery UI Forum](http://forum.jquery.com/using-jquery-ui) for discussions and questions.
|
||||
|
||||
If you want to report a bug/issue, please visit [bugs.jqueryui.com](http://bugs.jqueryui.com).
|
||||
|
||||
If you are interested in helping develop jQuery UI, you are in the right place.
|
||||
To discuss development with team members and the community, visit the [Developing jQuery UI Forum](http://forum.jquery.com/developing-jquery-ui) or [#jqueryui-dev on irc.freenode.net](http://irc.jquery.org/).
|
||||
|
||||
|
||||
## For contributors
|
||||
|
||||
If you want to help and provide a patch for a bugfix or new feature, please take
|
||||
a few minutes and look at [our Getting Involved guide](http://wiki.jqueryui.com/w/page/35263114/Getting-Involved).
|
||||
In particular check out the [Coding standards](http://wiki.jqueryui.com/w/page/12137737/Coding-standards)
|
||||
and [Commit Message Style Guide](http://wiki.jqueryui.com/w/page/25941597/Commit-Message-Style-Guide).
|
||||
|
||||
In general, fork the project, create a branch for a specific change and send a
|
||||
pull request for that branch. Don't mix unrelated changes. You can use the commit
|
||||
message as the description for the pull request.
|
||||
|
||||
|
||||
## Running the Unit Tests
|
||||
|
||||
Run the unit tests with a local server that supports PHP. No database is required. Pre-configured php local servers are available for Windows and Mac. Here are some options:
|
||||
|
||||
- Windows: [WAMP download](http://www.wampserver.com/en/)
|
||||
- Mac: [MAMP download](http://www.mamp.info/en/index.html)
|
||||
- Linux: [Setting up LAMP](https://www.linux.com/learn/tutorials/288158-easy-lamp-server-installation)
|
||||
- [Mongoose (most platforms)](http://code.google.com/p/mongoose/)
|
||||
|
||||
|
||||
## Building jQuery UI
|
||||
|
||||
jQuery UI uses the [Grunt](http://github.com/gruntjs/grunt) build system.
|
||||
|
||||
To build jQuery UI, you must have [node.js](http://nodejs.org/) installed and then run the following commands:
|
||||
|
||||
```sh
|
||||
|
||||
# Install the Grunt CLI
|
||||
npm install -g grunt-cli
|
||||
|
||||
# Clone the jQuery UI git repo
|
||||
git clone git://github.com/jquery/jquery-ui.git
|
||||
cd jquery-ui
|
||||
|
||||
# Install the node module dependencies
|
||||
npm install
|
||||
|
||||
# Run the build task
|
||||
grunt build
|
||||
|
||||
# There are many other tasks that can be run through Grunt.
|
||||
# For a list of all tasks:
|
||||
grunt --help
|
||||
```
|
||||
|
||||
|
||||
## For committers
|
||||
|
||||
When looking at pull requests, first check for [proper commit messages](http://wiki.jqueryui.com/w/page/12137724/Bug-Fixing-Guide).
|
||||
|
||||
Do not merge pull requests directly through GitHub's interface.
|
||||
Most pull requests are a single commit; cherry-picking will avoid creating a merge commit.
|
||||
It's also common for contributors to make minor fixes in an additional one or two commits.
|
||||
These should be squashed before landing in master.
|
||||
|
||||
**Make sure the author has a valid name and email address associated with the commit.**
|
||||
|
||||
Fetch the remote first:
|
||||
|
||||
git fetch [their-fork.git] [their-branch]
|
||||
|
||||
Then cherry-pick the commit(s):
|
||||
|
||||
git cherry-pick [sha-of-commit]
|
||||
|
||||
If you need to edit the commit message:
|
||||
|
||||
git cherry-pick -e [sha-of-commit]
|
||||
|
||||
If you need to edit the changes:
|
||||
|
||||
git cherry-pick -n [sha-of-commit]
|
||||
# make changes
|
||||
git commit --author="[author-name-and-email]"
|
||||
|
||||
If it should go to the stable branch, cherry-pick it to stable:
|
||||
|
||||
git checkout 1-8-stable
|
||||
git cherry-pick -x [sha-of-commit-from-master]
|
||||
|
||||
*NOTE: Do not cherry-pick into 1-8-stable until you have pushed the commit from master upstream.*
|
||||
@@ -0,0 +1,37 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Button - Checkboxes</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#check" ).button();
|
||||
$( "#format" ).buttonset();
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
#format { margin-top: 2em; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<input type="checkbox" id="check" /><label for="check">Toggle</label>
|
||||
|
||||
<div id="format">
|
||||
<input type="checkbox" id="check1" /><label for="check1">B</label>
|
||||
<input type="checkbox" id="check2" /><label for="check2">I</label>
|
||||
<input type="checkbox" id="check3" /><label for="check3">U</label>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>A checkbox is styled as a toggle button with the button widget. The label element associated with the checkbox is used for the button text.</p>
|
||||
<p>This demo also demonstrates three checkboxes styled as a button set by calling <code>.buttonset()</code> on a common container.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,34 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Button - Default functionality</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "input[type=submit], a, button" )
|
||||
.button()
|
||||
.click(function( event ) {
|
||||
event.preventDefault();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<button>A button element</button>
|
||||
|
||||
<input type="submit" value="A submit button">
|
||||
|
||||
<a href="#">An anchor</a>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Examples of the markup that can be used for buttons: A button element, an input of type submit and an anchor.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,49 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Button - Icons</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "button:first" ).button({
|
||||
icons: {
|
||||
primary: "ui-icon-locked"
|
||||
},
|
||||
text: false
|
||||
}).next().button({
|
||||
icons: {
|
||||
primary: "ui-icon-locked"
|
||||
}
|
||||
}).next().button({
|
||||
icons: {
|
||||
primary: "ui-icon-gear",
|
||||
secondary: "ui-icon-triangle-1-s"
|
||||
}
|
||||
}).next().button({
|
||||
icons: {
|
||||
primary: "ui-icon-gear",
|
||||
secondary: "ui-icon-triangle-1-s"
|
||||
},
|
||||
text: false
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<button>Button with icon only</button>
|
||||
<button>Button with icon on the left</button>
|
||||
<button>Button with two icons</button>
|
||||
<button>Button with two icons and no text</button>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Some buttons with various combinations of text and icons.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,19 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Button Demos</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="radio.html">Radios</a></li>
|
||||
<li><a href="checkbox.html">Checkboxes</a></li>
|
||||
<li><a href="icons.html">Icons</a></li>
|
||||
<li><a href="toolbar.html">Toolbar</a></li>
|
||||
<li><a href="splitbutton.html">Split Button</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,32 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Button - Radios</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#radio" ).buttonset();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form>
|
||||
<div id="radio">
|
||||
<input type="radio" id="radio1" name="radio" /><label for="radio1">Choice 1</label>
|
||||
<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Choice 2</label>
|
||||
<input type="radio" id="radio3" name="radio" /><label for="radio3">Choice 3</label>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>A set of three radio buttons transformed into a button set.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,69 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Button - Split button</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.menu.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
.ui-menu { position: absolute; width: 100px; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#rerun" )
|
||||
.button()
|
||||
.click(function() {
|
||||
alert( "Running the last action" );
|
||||
})
|
||||
.next()
|
||||
.button({
|
||||
text: false,
|
||||
icons: {
|
||||
primary: "ui-icon-triangle-1-s"
|
||||
}
|
||||
})
|
||||
.click(function() {
|
||||
var menu = $( this ).parent().next().show().position({
|
||||
my: "left top",
|
||||
at: "left bottom",
|
||||
of: this
|
||||
});
|
||||
$( document ).one( "click", function() {
|
||||
menu.hide();
|
||||
});
|
||||
return false;
|
||||
})
|
||||
.parent()
|
||||
.buttonset()
|
||||
.next()
|
||||
.hide()
|
||||
.menu();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<button id="rerun">Run last action</button>
|
||||
<button id="select">Select an action</button>
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="#">Open...</a></li>
|
||||
<li><a href="#">Save</a></li>
|
||||
<li><a href="#">Delete</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>An example of a split button built with two buttons: A plain button with just text, one with only a primary icon
|
||||
and no text. Both are grouped together in a set.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,118 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Button - Toolbar</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#toolbar {
|
||||
padding: 4px;
|
||||
display: inline-block;
|
||||
}
|
||||
/* support: IE7 */
|
||||
*+html #toolbar {
|
||||
display: inline;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#beginning" ).button({
|
||||
text: false,
|
||||
icons: {
|
||||
primary: "ui-icon-seek-start"
|
||||
}
|
||||
});
|
||||
$( "#rewind" ).button({
|
||||
text: false,
|
||||
icons: {
|
||||
primary: "ui-icon-seek-prev"
|
||||
}
|
||||
});
|
||||
$( "#play" ).button({
|
||||
text: false,
|
||||
icons: {
|
||||
primary: "ui-icon-play"
|
||||
}
|
||||
})
|
||||
.click(function() {
|
||||
var options;
|
||||
if ( $( this ).text() === "play" ) {
|
||||
options = {
|
||||
label: "pause",
|
||||
icons: {
|
||||
primary: "ui-icon-pause"
|
||||
}
|
||||
};
|
||||
} else {
|
||||
options = {
|
||||
label: "play",
|
||||
icons: {
|
||||
primary: "ui-icon-play"
|
||||
}
|
||||
};
|
||||
}
|
||||
$( this ).button( "option", options );
|
||||
});
|
||||
$( "#stop" ).button({
|
||||
text: false,
|
||||
icons: {
|
||||
primary: "ui-icon-stop"
|
||||
}
|
||||
})
|
||||
.click(function() {
|
||||
$( "#play" ).button( "option", {
|
||||
label: "play",
|
||||
icons: {
|
||||
primary: "ui-icon-play"
|
||||
}
|
||||
});
|
||||
});
|
||||
$( "#forward" ).button({
|
||||
text: false,
|
||||
icons: {
|
||||
primary: "ui-icon-seek-next"
|
||||
}
|
||||
});
|
||||
$( "#end" ).button({
|
||||
text: false,
|
||||
icons: {
|
||||
primary: "ui-icon-seek-end"
|
||||
}
|
||||
});
|
||||
$( "#shuffle" ).button();
|
||||
$( "#repeat" ).buttonset();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="toolbar" class="ui-widget-header ui-corner-all">
|
||||
<button id="beginning">go to beginning</button>
|
||||
<button id="rewind">rewind</button>
|
||||
<button id="play">play</button>
|
||||
<button id="stop">stop</button>
|
||||
<button id="forward">fast forward</button>
|
||||
<button id="end">go to end</button>
|
||||
|
||||
<input type="checkbox" id="shuffle" /><label for="shuffle">Shuffle</label>
|
||||
|
||||
<span id="repeat">
|
||||
<input type="radio" id="repeat0" name="repeat" checked="checked" /><label for="repeat0">No Repeat</label>
|
||||
<input type="radio" id="repeat1" name="repeat" /><label for="repeat1">Once</label>
|
||||
<input type="radio" id="repeatall" name="repeat" /><label for="repeatall">All</label>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>
|
||||
A mediaplayer toolbar. Take a look at the underlying markup: A few button elements,
|
||||
an input of type checkbox for the Shuffle button, and three inputs of type radio for the Repeat options.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,19 @@
|
||||
body {
|
||||
font-size: 62.5%;
|
||||
font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
|
||||
}
|
||||
|
||||
table {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.demo-description {
|
||||
clear: both;
|
||||
padding: 12px;
|
||||
font-size: 1.3em;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
.ui-draggable, .ui-droppable {
|
||||
background-position: top;
|
||||
}
|
||||
+58
@@ -0,0 +1,58 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable - Constrain movement</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
.draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
|
||||
#draggable, #draggable2 { margin-bottom:20px; }
|
||||
#draggable { cursor: n-resize; }
|
||||
#draggable2 { cursor: e-resize; }
|
||||
#containment-wrapper { width: 95%; height:150px; border:2px solid #ccc; padding: 10px; }
|
||||
h3 { clear: left; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#draggable" ).draggable({ axis: "y" });
|
||||
$( "#draggable2" ).draggable({ axis: "x" });
|
||||
|
||||
$( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });
|
||||
$( "#draggable5" ).draggable({ containment: "parent" });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h3>Constrain movement along an axis:</h3>
|
||||
|
||||
<div id="draggable" class="draggable ui-widget-content">
|
||||
<p>I can be dragged only vertically</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable2" class="draggable ui-widget-content">
|
||||
<p>I can be dragged only horizontally</p>
|
||||
</div>
|
||||
|
||||
<h3>Or to within another DOM element:</h3>
|
||||
<div id="containment-wrapper">
|
||||
<div id="draggable3" class="draggable ui-widget-content">
|
||||
<p>I'm contained within the box</p>
|
||||
</div>
|
||||
|
||||
<div class="draggable ui-widget-content">
|
||||
<p id="draggable5" class="ui-widget-header">I'm contained within my parent</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Constrain the movement of each draggable by defining the boundaries of the draggable area. Set the <code>axis</code> option to limit the draggable's path to the x- or y-axis, or use the <code>containment</code> option to specify a parent DOM element or a jQuery selector, like 'document.'</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,42 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable - Cursor style</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#draggable" ).draggable({ cursor: "move", cursorAt: { top: 56, left: 56 } });
|
||||
$( "#draggable2" ).draggable({ cursor: "crosshair", cursorAt: { top: -5, left: -5 } });
|
||||
$( "#draggable3" ).draggable({ cursorAt: { bottom: 0 } });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>I will always stick to the center (relative to the mouse)</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable2" class="ui-widget-content">
|
||||
<p>My cursor is at left -5 and top -5</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable3" class="ui-widget-content">
|
||||
<p>My cursor position is only controlled for the 'bottom' value</p>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Position the cursor while dragging the object. By default the cursor appears in the center of the dragged object; use the <code>cursorAt</code> 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 <code>cursor</code> option with a valid CSS cursor value: default, move, pointer, crosshair, etc.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,32 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable - Default functionality</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#draggable { width: 150px; height: 150px; padding: 0.5em; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#draggable" ).draggable();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Drag me around</p>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,38 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable - Delay start</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#draggable, #draggable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#draggable" ).draggable({ distance: 20 });
|
||||
$( "#draggable2" ).draggable({ delay: 1000 });
|
||||
$( ".ui-draggable" ).disableSelection();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Only if you drag me by 20 pixels, the dragging will start</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable2" class="ui-widget-content">
|
||||
<p>Regardless of the distance, you have to drag and wait for 1000ms before dragging starts</p>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Delay the start of dragging for a number of milliseconds with the <code>delay</code> option; prevent dragging until the cursor is held down and dragged a specifed number of pixels with the <code>distance</code> option. </p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,70 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable - Events</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#draggable { width: 16em; padding: 0 1em; }
|
||||
#draggable ul li { margin: 1em 0; padding: 0.5em 0; } * html #draggable ul li { height: 1%; }
|
||||
#draggable ul li span.ui-icon { float: left; }
|
||||
#draggable ul li span.count { font-weight: bold; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
var $start_counter = $( "#event-start" ),
|
||||
$drag_counter = $( "#event-drag" ),
|
||||
$stop_counter = $( "#event-stop" ),
|
||||
counts = [ 0, 0, 0 ];
|
||||
|
||||
$( "#draggable" ).draggable({
|
||||
start: function() {
|
||||
counts[ 0 ]++;
|
||||
updateCounterStatus( $start_counter, counts[ 0 ] );
|
||||
},
|
||||
drag: function() {
|
||||
counts[ 1 ]++;
|
||||
updateCounterStatus( $drag_counter, counts[ 1 ] );
|
||||
},
|
||||
stop: function() {
|
||||
counts[ 2 ]++;
|
||||
updateCounterStatus( $stop_counter, counts[ 2 ] );
|
||||
}
|
||||
});
|
||||
|
||||
function updateCounterStatus( $event_counter, new_count ) {
|
||||
// first update the status visually...
|
||||
if ( !$event_counter.hasClass( "ui-state-hover" ) ) {
|
||||
$event_counter.addClass( "ui-state-hover" )
|
||||
.siblings().removeClass( "ui-state-hover" );
|
||||
}
|
||||
// ...then update the numbers
|
||||
$( "span.count", $event_counter ).text( new_count );
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable" class="ui-widget ui-widget-content">
|
||||
|
||||
<p>Drag me to trigger the chain of events.</p>
|
||||
|
||||
<ul class="ui-helper-reset">
|
||||
<li id="event-start" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-play"></span>"start" invoked <span class="count">0</span>x</li>
|
||||
<li id="event-drag" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-arrow-4"></span>"drag" invoked <span class="count">0</span>x</li>
|
||||
<li id="event-stop" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-stop"></span>"stop" invoked <span class="count">0</span>x</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Layer functionality onto the draggable using the <code>start</code>, <code>drag</code>, and <code>stop</code> events. Start is fired at the start of the drag; drag during the drag; and stop when dragging stops.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,41 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable - Handles</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
|
||||
#draggable p { cursor: move; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#draggable" ).draggable({ handle: "p" });
|
||||
$( "#draggable2" ).draggable({ cancel: "p.ui-widget-header" });
|
||||
$( "div, p" ).disableSelection();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p class="ui-widget-header">I can be dragged only by this handle</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable2" class="ui-widget-content">
|
||||
<p>You can drag me around…</p>
|
||||
<p class="ui-widget-header">…but you can't drag me by this handle.</p>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Allow dragging only when the cursor is over a specific part of the draggable. Use the <code>handle</code> option to specify the jQuery selector of an element (or group of elements) used to drag the object.</p>
|
||||
<p>Or prevent dragging when the cursor is over a specific element (or group of elements) within the draggable. Use the <code>cancel</code> option to specify a jQuery selector over which to "cancel" draggable functionality.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,24 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable Demos</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="events.html">Events</a></li>
|
||||
<li><a href="constrain-movement.html">Constrain movement</a></li>
|
||||
<li><a href="delay-start.html">Delay start</a></li>
|
||||
<li><a href="snap-to.html">Snap to element or grid</a></li>
|
||||
<li><a href="scroll.html">Auto-scroll</a></li>
|
||||
<li><a href="revert.html">Revert position</a></li>
|
||||
<li><a href="visual-feedback.html">Visual feedback</a></li>
|
||||
<li><a href="handle.html">Drag handle</a></li>
|
||||
<li><a href="cursor-style.html">Cursor style</a></li>
|
||||
<li><a href="sortable.html">Draggable + Sortable</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,37 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable - Revert position</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#draggable" ).draggable({ revert: true });
|
||||
$( "#draggable2" ).draggable({ revert: true, helper: "clone" });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Revert the original</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable2" class="ui-widget-content">
|
||||
<p>Revert the helper</p>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Return the draggable (or it's helper) to its original location when dragging stops with the boolean <code>revert</code> option.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,44 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable - Auto-scroll</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#draggable" ).draggable({ scroll: true });
|
||||
$( "#draggable2" ).draggable({ scroll: true, scrollSensitivity: 100 });
|
||||
$( "#draggable3" ).draggable({ scroll: true, scrollSpeed: 100 });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Scroll set to true, default settings</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable2" class="ui-widget-content">
|
||||
<p>scrollSensitivity set to 100</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable3" class="ui-widget-content">
|
||||
<p>scrollSpeed set to 100</p>
|
||||
</div>
|
||||
|
||||
<div style='height: 5000px; width: 1px;'></div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Automatically scroll the document when the draggable is moved beyond the viewport. Set the <code>scroll</code> option to true to enable auto-scrolling, and fine-tune when scrolling is triggered and its speed with the <code>scrollSensitivity</code> and <code>scrollSpeed</code> options.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,61 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable - Snap to element or grid</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
.draggable { width: 90px; height: 80px; padding: 5px; float: left; margin: 0 10px 10px 0; font-size: .9em; }
|
||||
.ui-widget-header p, .ui-widget-content p { margin: 0; }
|
||||
#snaptarget { height: 140px; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#draggable" ).draggable({ snap: true });
|
||||
$( "#draggable2" ).draggable({ snap: ".ui-widget-header" });
|
||||
$( "#draggable3" ).draggable({ snap: ".ui-widget-header", snapMode: "outer" });
|
||||
$( "#draggable4" ).draggable({ grid: [ 20, 20 ] });
|
||||
$( "#draggable5" ).draggable({ grid: [ 80, 80 ] });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="snaptarget" class="ui-widget-header">
|
||||
<p>I'm a snap target</p>
|
||||
</div>
|
||||
|
||||
<br style="clear:both" />
|
||||
|
||||
<div id="draggable" class="draggable ui-widget-content">
|
||||
<p>Default (snap: true), snaps to all other draggable elements</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable2" class="draggable ui-widget-content">
|
||||
<p>I only snap to the big box</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable3" class="draggable ui-widget-content">
|
||||
<p>I only snap to the outer edges of the big box</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable4" class="draggable ui-widget-content">
|
||||
<p>I snap to a 20 x 20 grid</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable5" class="draggable ui-widget-content">
|
||||
<p>I snap to a 80 x 80 grid</p>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Snap the draggable to the inner or outer boundaries of a DOM element. Use the <code>snap</code>, <code>snapMode</code> (inner, outer, both), and <code>snapTolerance</code> (distance in pixels the draggable must be from the element when snapping is invoked) options. </p>
|
||||
<p>Or snap the draggable to a grid. Set the dimensions of grid cells (height and width in pixels) with the <code>grid</code> option.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,50 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable + Sortable</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script src="../../ui/jquery.ui.sortable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
ul { list-style-type: none; margin: 0; padding: 0; margin-bottom: 10px; }
|
||||
li { margin: 5px; padding: 5px; width: 150px; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#sortable" ).sortable({
|
||||
revert: true
|
||||
});
|
||||
$( "#draggable" ).draggable({
|
||||
connectToSortable: "#sortable",
|
||||
helper: "clone",
|
||||
revert: "invalid"
|
||||
});
|
||||
$( "ul, li" ).disableSelection();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<li id="draggable" class="ui-state-highlight">Drag me down</li>
|
||||
</ul>
|
||||
|
||||
<ul id="sortable">
|
||||
<li class="ui-state-default">Item 1</li>
|
||||
<li class="ui-state-default">Item 2</li>
|
||||
<li class="ui-state-default">Item 3</li>
|
||||
<li class="ui-state-default">Item 4</li>
|
||||
<li class="ui-state-default">Item 5</li>
|
||||
</ul>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Draggables are built to interact seamlessly with <a href="http://jqueryui.com/sortable">sortables</a>.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
+70
@@ -0,0 +1,70 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Draggable - Visual feedback</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#draggable, #draggable2, #draggable3, #set div { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
|
||||
#draggable, #draggable2, #draggable3 { margin-bottom:20px; }
|
||||
#set { clear:both; float:left; width: 368px; height: 120px; }
|
||||
p { clear:both; margin:0; padding:1em 0; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#draggable" ).draggable({ helper: "original" });
|
||||
$( "#draggable2" ).draggable({ opacity: 0.7, helper: "clone" });
|
||||
$( "#draggable3" ).draggable({
|
||||
cursor: "move",
|
||||
cursorAt: { top: -12, left: -20 },
|
||||
helper: function( event ) {
|
||||
return $( "<div class='ui-widget-header'>I'm a custom helper</div>" );
|
||||
}
|
||||
});
|
||||
$( "#set div" ).draggable({ stack: "#set div" });
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h3 class="docs">With helpers:</h3>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Original</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable2" class="ui-widget-content">
|
||||
<p>Semi-transparent clone</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable3" class="ui-widget-content">
|
||||
<p>Custom helper (in combination with cursorAt)</p>
|
||||
</div>
|
||||
|
||||
<h3 class="docs">Stacked:</h3>
|
||||
<div id="set">
|
||||
<div class="ui-widget-content">
|
||||
<p>We are draggables..</p>
|
||||
</div>
|
||||
|
||||
<div class="ui-widget-content">
|
||||
<p>..whose z-indexes are controlled automatically..</p>
|
||||
</div>
|
||||
|
||||
<div class="ui-widget-content">
|
||||
<p>..with the stack option.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Provide feedback to users as they drag an object in the form of a helper. The <code>helper</code> 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 <code>opacity</code> option.</p>
|
||||
<p>To clarify which draggable is in play, bring the draggable in motion to front. Use the <code>zIndex</code> option to set a higher z-index for the helper, if in play, or use the <code>stack</code> option to ensure that the last item dragged will appear on top of others in the same group on drag stop.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
+53
@@ -0,0 +1,53 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Droppable - Accept</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script src="../../ui/jquery.ui.droppable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
|
||||
#draggable, #draggable-nonvalid { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#draggable, #draggable-nonvalid" ).draggable();
|
||||
$( "#droppable" ).droppable({
|
||||
accept: "#draggable",
|
||||
activeClass: "ui-state-hover",
|
||||
hoverClass: "ui-state-active",
|
||||
drop: function( event, ui ) {
|
||||
$( this )
|
||||
.addClass( "ui-state-highlight" )
|
||||
.find( "p" )
|
||||
.html( "Dropped!" );
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable-nonvalid" class="ui-widget-content">
|
||||
<p>I'm draggable but can't be dropped</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Drag me to my target</p>
|
||||
</div>
|
||||
|
||||
<div id="droppable" class="ui-widget-header">
|
||||
<p>accept: '#draggable'</p>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Specify using the <code>accept</code> option which element (or group of elements) is accepted by the target droppable.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,46 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Droppable - Default functionality</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script src="../../ui/jquery.ui.droppable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
|
||||
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#draggable" ).draggable();
|
||||
$( "#droppable" ).droppable({
|
||||
drop: function( event, ui ) {
|
||||
$( this )
|
||||
.addClass( "ui-state-highlight" )
|
||||
.find( "p" )
|
||||
.html( "Dropped!" );
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Drag me to my target</p>
|
||||
</div>
|
||||
|
||||
<div id="droppable" class="ui-widget-header">
|
||||
<p>Drop here</p>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Enable any DOM element to be droppable, a target for draggable elements.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
@@ -0,0 +1,20 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Droppable Demos</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="accepted-elements.html">Accepted elements</a></li>
|
||||
<li><a href="propagation.html">Prevent propagation</a></li>
|
||||
<li><a href="visual-feedback.html">Visual feedback</a></li>
|
||||
<li><a href="revert.html">Revert draggable position</a></li>
|
||||
<li><a href="shopping-cart.html">Shopping Cart</a></li>
|
||||
<li><a href="photo-manager.html">Simple photo manager</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+182
@@ -0,0 +1,182 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Droppable - Simple photo manager</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script src="../../ui/jquery.ui.droppable.js"></script>
|
||||
<script src="../../ui/jquery.ui.resizable.js"></script>
|
||||
<script src="../../ui/jquery.ui.dialog.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#gallery { float: left; width: 65%; min-height: 12em; }
|
||||
.gallery.custom-state-active { background: #eee; }
|
||||
.gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
|
||||
.gallery li h5 { margin: 0 0 0.4em; cursor: move; }
|
||||
.gallery li a { float: right; }
|
||||
.gallery li a.ui-icon-zoomin { float: left; }
|
||||
.gallery li img { width: 100%; cursor: move; }
|
||||
|
||||
#trash { float: right; width: 32%; min-height: 18em; padding: 1%; }
|
||||
#trash h4 { line-height: 16px; margin: 0 0 0.4em; }
|
||||
#trash h4 .ui-icon { float: left; }
|
||||
#trash .gallery h5 { display: none; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
// there's the gallery and the trash
|
||||
var $gallery = $( "#gallery" ),
|
||||
$trash = $( "#trash" );
|
||||
|
||||
// let the gallery items be draggable
|
||||
$( "li", $gallery ).draggable({
|
||||
cancel: "a.ui-icon", // clicking an icon won't initiate dragging
|
||||
revert: "invalid", // when not dropped, the item will revert back to its initial position
|
||||
containment: "document",
|
||||
helper: "clone",
|
||||
cursor: "move"
|
||||
});
|
||||
|
||||
// let the trash be droppable, accepting the gallery items
|
||||
$trash.droppable({
|
||||
accept: "#gallery > li",
|
||||
activeClass: "ui-state-highlight",
|
||||
drop: function( event, ui ) {
|
||||
deleteImage( ui.draggable );
|
||||
}
|
||||
});
|
||||
|
||||
// let the gallery be droppable as well, accepting items from the trash
|
||||
$gallery.droppable({
|
||||
accept: "#trash li",
|
||||
activeClass: "custom-state-active",
|
||||
drop: function( event, ui ) {
|
||||
recycleImage( ui.draggable );
|
||||
}
|
||||
});
|
||||
|
||||
// image deletion function
|
||||
var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Recycle this image' class='ui-icon ui-icon-refresh'>Recycle image</a>";
|
||||
function deleteImage( $item ) {
|
||||
$item.fadeOut(function() {
|
||||
var $list = $( "ul", $trash ).length ?
|
||||
$( "ul", $trash ) :
|
||||
$( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash );
|
||||
|
||||
$item.find( "a.ui-icon-trash" ).remove();
|
||||
$item.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
|
||||
$item
|
||||
.animate({ width: "48px" })
|
||||
.find( "img" )
|
||||
.animate({ height: "36px" });
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// image recycle function
|
||||
var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='Delete this image' class='ui-icon ui-icon-trash'>Delete image</a>";
|
||||
function recycleImage( $item ) {
|
||||
$item.fadeOut(function() {
|
||||
$item
|
||||
.find( "a.ui-icon-refresh" )
|
||||
.remove()
|
||||
.end()
|
||||
.css( "width", "96px")
|
||||
.append( trash_icon )
|
||||
.find( "img" )
|
||||
.css( "height", "72px" )
|
||||
.end()
|
||||
.appendTo( $gallery )
|
||||
.fadeIn();
|
||||
});
|
||||
}
|
||||
|
||||
// image preview function, demonstrating the ui.dialog used as a modal window
|
||||
function viewLargerImage( $link ) {
|
||||
var src = $link.attr( "href" ),
|
||||
title = $link.siblings( "img" ).attr( "alt" ),
|
||||
$modal = $( "img[src$='" + src + "']" );
|
||||
|
||||
if ( $modal.length ) {
|
||||
$modal.dialog( "open" );
|
||||
} else {
|
||||
var img = $( "<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />" )
|
||||
.attr( "src", src ).appendTo( "body" );
|
||||
setTimeout(function() {
|
||||
img.dialog({
|
||||
title: title,
|
||||
width: 400,
|
||||
modal: true
|
||||
});
|
||||
}, 1 );
|
||||
}
|
||||
}
|
||||
|
||||
// resolve the icons behavior with event delegation
|
||||
$( "ul.gallery > li" ).click(function( event ) {
|
||||
var $item = $( this ),
|
||||
$target = $( event.target );
|
||||
|
||||
if ( $target.is( "a.ui-icon-trash" ) ) {
|
||||
deleteImage( $item );
|
||||
} else if ( $target.is( "a.ui-icon-zoomin" ) ) {
|
||||
viewLargerImage( $target );
|
||||
} else if ( $target.is( "a.ui-icon-refresh" ) ) {
|
||||
recycleImage( $item );
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="ui-widget ui-helper-clearfix">
|
||||
|
||||
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
|
||||
<li class="ui-widget-content ui-corner-tr">
|
||||
<h5 class="ui-widget-header">High Tatras</h5>
|
||||
<img src="images/high_tatras_min.jpg" alt="The peaks of High Tatras" width="96" height="72" />
|
||||
<a href="images/high_tatras.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
|
||||
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
|
||||
</li>
|
||||
<li class="ui-widget-content ui-corner-tr">
|
||||
<h5 class="ui-widget-header">High Tatras 2</h5>
|
||||
<img src="images/high_tatras2_min.jpg" alt="The chalet at the Green mountain lake" width="96" height="72" />
|
||||
<a href="images/high_tatras2.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
|
||||
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
|
||||
</li>
|
||||
<li class="ui-widget-content ui-corner-tr">
|
||||
<h5 class="ui-widget-header">High Tatras 3</h5>
|
||||
<img src="images/high_tatras3_min.jpg" alt="Planning the ascent" width="96" height="72" />
|
||||
<a href="images/high_tatras3.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
|
||||
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
|
||||
</li>
|
||||
<li class="ui-widget-content ui-corner-tr">
|
||||
<h5 class="ui-widget-header">High Tatras 4</h5>
|
||||
<img src="images/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72" />
|
||||
<a href="images/high_tatras4.jpg" title="View larger image" class="ui-icon ui-icon-zoomin">View larger</a>
|
||||
<a href="link/to/trash/script/when/we/have/js/off" title="Delete this image" class="ui-icon ui-icon-trash">Delete image</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div id="trash" class="ui-widget-content ui-state-default">
|
||||
<h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>You can delete an image either by dragging it to the Trash or by clicking the trash icon.</p>
|
||||
<p>You can "recycle" an image by dragging it back to the gallery or by clicking the recycle icon.</p>
|
||||
<p>You can view larger image by clicking the zoom icon. jQuery UI dialog widget is used for the modal window.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,73 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Droppable - Prevent propagation</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script src="../../ui/jquery.ui.droppable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#draggable { width: 100px; height: 40px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
|
||||
#droppable, #droppable2 { width: 230px; height: 120px; padding: 0.5em; float: left; margin: 10px; }
|
||||
#droppable-inner, #droppable2-inner { width: 170px; height: 60px; padding: 0.5em; float: left; margin: 10px; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#draggable" ).draggable();
|
||||
|
||||
$( "#droppable, #droppable-inner" ).droppable({
|
||||
activeClass: "ui-state-hover",
|
||||
hoverClass: "ui-state-active",
|
||||
drop: function( event, ui ) {
|
||||
$( this )
|
||||
.addClass( "ui-state-highlight" )
|
||||
.find( "> p" )
|
||||
.html( "Dropped!" );
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
$( "#droppable2, #droppable2-inner" ).droppable({
|
||||
greedy: true,
|
||||
activeClass: "ui-state-hover",
|
||||
hoverClass: "ui-state-active",
|
||||
drop: function( event, ui ) {
|
||||
$( this )
|
||||
.addClass( "ui-state-highlight" )
|
||||
.find( "> p" )
|
||||
.html( "Dropped!" );
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Drag me to my target</p>
|
||||
</div>
|
||||
|
||||
<div id="droppable" class="ui-widget-header">
|
||||
<p>Outer droppable</p>
|
||||
<div id="droppable-inner" class="ui-widget-header">
|
||||
<p>Inner droppable (not greedy)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="droppable2" class="ui-widget-header">
|
||||
<p>Outer droppable</p>
|
||||
<div id="droppable2-inner" class="ui-widget-header">
|
||||
<p>Inner droppable (greedy)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>When working with nested droppables — for example, you may have an editable directory structure displayed as a tree, with folder and document nodes — the <code>greedy</code> option set to true prevents event propagation when a draggable is dropped on a child node (droppable).</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,54 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Droppable - Revert draggable position</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script src="../../ui/jquery.ui.droppable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
|
||||
#droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#draggable" ).draggable({ revert: "valid" });
|
||||
$( "#draggable2" ).draggable({ revert: "invalid" });
|
||||
|
||||
$( "#droppable" ).droppable({
|
||||
activeClass: "ui-state-default",
|
||||
hoverClass: "ui-state-hover",
|
||||
drop: function( event, ui ) {
|
||||
$( this )
|
||||
.addClass( "ui-state-highlight" )
|
||||
.find( "p" )
|
||||
.html( "Dropped!" );
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>I revert when I'm dropped</p>
|
||||
</div>
|
||||
|
||||
<div id="draggable2" class="ui-widget-content">
|
||||
<p>I revert when I'm not dropped</p>
|
||||
</div>
|
||||
|
||||
<div id="droppable" class="ui-widget-header">
|
||||
<p>Drop me here</p>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Return the draggable (or it's helper) to its original location when dragging stops with the boolean <code>revert</code> option set on the draggable.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
+94
@@ -0,0 +1,94 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Droppable - Shopping Cart Demo</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script src="../../ui/jquery.ui.droppable.js"></script>
|
||||
<script src="../../ui/jquery.ui.sortable.js"></script>
|
||||
<script src="../../ui/jquery.ui.accordion.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
h1 { padding: .2em; margin: 0; }
|
||||
#products { float:left; width: 500px; margin-right: 2em; }
|
||||
#cart { width: 200px; float: left; margin-top: 1em; }
|
||||
/* style the list to maximize the droppable hitarea */
|
||||
#cart ol { margin: 0; padding: 1em 0 1em 3em; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#catalog" ).accordion();
|
||||
$( "#catalog li" ).draggable({
|
||||
appendTo: "body",
|
||||
helper: "clone"
|
||||
});
|
||||
$( "#cart ol" ).droppable({
|
||||
activeClass: "ui-state-default",
|
||||
hoverClass: "ui-state-hover",
|
||||
accept: ":not(.ui-sortable-helper)",
|
||||
drop: function( event, ui ) {
|
||||
$( this ).find( ".placeholder" ).remove();
|
||||
$( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
|
||||
}
|
||||
}).sortable({
|
||||
items: "li:not(.placeholder)",
|
||||
sort: function() {
|
||||
// gets added unintentionally by droppable interacting with sortable
|
||||
// using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
|
||||
$( this ).removeClass( "ui-state-default" );
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="products">
|
||||
<h1 class="ui-widget-header">Products</h1>
|
||||
<div id="catalog">
|
||||
<h2><a href="#">T-Shirts</a></h2>
|
||||
<div>
|
||||
<ul>
|
||||
<li>Lolcat Shirt</li>
|
||||
<li>Cheezeburger Shirt</li>
|
||||
<li>Buckit Shirt</li>
|
||||
</ul>
|
||||
</div>
|
||||
<h2><a href="#">Bags</a></h2>
|
||||
<div>
|
||||
<ul>
|
||||
<li>Zebra Striped</li>
|
||||
<li>Black Leather</li>
|
||||
<li>Alligator Leather</li>
|
||||
</ul>
|
||||
</div>
|
||||
<h2><a href="#">Gadgets</a></h2>
|
||||
<div>
|
||||
<ul>
|
||||
<li>iPhone</li>
|
||||
<li>iPod</li>
|
||||
<li>iPad</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="cart">
|
||||
<h1 class="ui-widget-header">Shopping Cart</h1>
|
||||
<div class="ui-widget-content">
|
||||
<ol>
|
||||
<li class="placeholder">Add your items here</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Demonstrate how to use an accordion to structure products into a catalog and make use of drag and drop for adding them to a shopping cart, where they are sortable.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
+72
@@ -0,0 +1,72 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Droppable - Visual feedback</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.draggable.js"></script>
|
||||
<script src="../../ui/jquery.ui.droppable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#draggable, #draggable2 { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
|
||||
#droppable, #droppable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 10px; }
|
||||
h3 { clear: left; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#draggable" ).draggable();
|
||||
$( "#droppable" ).droppable({
|
||||
hoverClass: "ui-state-hover",
|
||||
drop: function( event, ui ) {
|
||||
$( this )
|
||||
.addClass( "ui-state-highlight" )
|
||||
.find( "p" )
|
||||
.html( "Dropped!" );
|
||||
}
|
||||
});
|
||||
|
||||
$( "#draggable2" ).draggable();
|
||||
$( "#droppable2" ).droppable({
|
||||
accept: "#draggable2",
|
||||
activeClass: "ui-state-default",
|
||||
drop: function( event, ui ) {
|
||||
$( this )
|
||||
.addClass( "ui-state-highlight" )
|
||||
.find( "p" )
|
||||
.html( "Dropped!" );
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h3>Feedback on hover:</h3>
|
||||
|
||||
<div id="draggable" class="ui-widget-content">
|
||||
<p>Drag me to my target</p>
|
||||
</div>
|
||||
|
||||
<div id="droppable" class="ui-widget-header">
|
||||
<p>Drop here</p>
|
||||
</div>
|
||||
|
||||
<h3>Feedback on activating draggable:</h3>
|
||||
|
||||
<div id="draggable2" class="ui-widget-content">
|
||||
<p>Drag me to my target</p>
|
||||
</div>
|
||||
|
||||
<div id="droppable2" class="ui-widget-header">
|
||||
<p>Drop here</p>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Change the droppable's appearance on hover, or when the droppable is active (an acceptable draggable is dropped on it). Use the <code>hoverClass</code> or <code>activeClass</code> options to specify respective classes.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 269 B |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 172 B |
Binary file not shown.
|
After Width: | Height: | Size: 335 B |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 103 B |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 105 B |
Binary file not shown.
|
After Width: | Height: | Size: 206 B |
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
@@ -0,0 +1,20 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Demos</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<li><a href="button/">button</a></li>
|
||||
<li><a href="draggable/">draggable</a></li>
|
||||
<li><a href="droppable/">droppable</a></li>
|
||||
<li><a href="resizable/">resizable</a></li>
|
||||
<li><a href="slider/">slider</a></li>
|
||||
<li><a href="spinner/">spinner</a></li>
|
||||
<li><a href="widget/">widget</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,36 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Resizable - Animate</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.resizable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#resizable { width: 150px; height: 150px; padding: 0.5em; }
|
||||
#resizable h3 { text-align: center; margin: 0; }
|
||||
.ui-resizable-helper { border: 1px dotted gray; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#resizable" ).resizable({
|
||||
animate: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="resizable" class="ui-widget-content">
|
||||
<h3 class="ui-widget-header">Animate</h3>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Animate the resize action using the <code>animate</code> 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.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,35 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Resizable - Preserve aspect ratio</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.resizable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#resizable { width: 160px; height: 90px; padding: 0.5em; }
|
||||
#resizable h3 { text-align: center; margin: 0; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#resizable" ).resizable({
|
||||
aspectRatio: 16 / 9
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="resizable" class="ui-widget-content">
|
||||
<h3 class="ui-widget-header">Preserve aspect ratio</h3>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Maintain the existing aspect ratio or set a new one to constrain the proportions on resize. Set the <code>aspectRatio</code> option to true, and optionally pass in a new ratio (i.e., 4/3)</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
+40
@@ -0,0 +1,40 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Resizable - Constrain resize area</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.resizable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#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; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#resizable" ).resizable({
|
||||
containment: "#container"
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="container" class="ui-widget-content">
|
||||
<h3 class="ui-widget-header">Containment</h3>
|
||||
<div id="resizable" class="ui-state-active">
|
||||
<h3 class="ui-widget-header">Resizable</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Define the boundaries of the resizable area. Use the <code>containment</code> option to specify a parent DOM element or a jQuery selector, like 'document.'</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,33 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Resizable - Default functionality</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.resizable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#resizable { width: 150px; height: 150px; padding: 0.5em; }
|
||||
#resizable h3 { text-align: center; margin: 0; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#resizable" ).resizable();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="resizable" class="ui-widget-content">
|
||||
<h3 class="ui-widget-header">Resizable</h3>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Enable any DOM element to be resizable. With the cursor grab the right or bottom border and drag to the desired width or height.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,45 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Resizable - Delay start</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.resizable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#resizable, #resizable2 { width: 150px; height: 150px; padding: 0.5em; }
|
||||
#resizable h3, #resizable2 h3 { text-align: center; margin: 0; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#resizable" ).resizable({
|
||||
delay: 1000
|
||||
});
|
||||
|
||||
$( "#resizable2" ).resizable({
|
||||
distance: 40
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h3 class="docs">Time delay (ms):</h3>
|
||||
<div id="resizable" class="ui-widget-content">
|
||||
<h3 class="ui-widget-header">Time</h3>
|
||||
</div>
|
||||
|
||||
<h3 class="docs">Distance delay (px):</h3>
|
||||
<div id="resizable2" class="ui-widget-content">
|
||||
<h3 class="ui-widget-header">Distance</h3>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Delay the start of resizing for a number of milliseconds with the <code>delay</code> option; prevent resizing until the cursor is held down and dragged a specifed number of pixels with the <code>distance</code> option.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,36 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Resizable - Helper</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.resizable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#resizable { width: 150px; height: 150px; padding: 0.5em; }
|
||||
#resizable h3 { text-align: center; margin: 0; }
|
||||
.ui-resizable-helper { border: 2px dotted #00F; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#resizable" ).resizable({
|
||||
helper: "ui-resizable-helper"
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="resizable" class="ui-widget-content">
|
||||
<h3 class="ui-widget-header">Helper</h3>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Display only an outline of the element while resizing by setting the <code>helper</code> option to a CSS class.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,24 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Resizable Demos</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="aspect-ratio.html">Preserve aspect ratio</a></li>
|
||||
<li><a href="max-min.html">Maximum / minimum size</a></li>
|
||||
<li><a href="constrain-area.html">Constrain resize area</a></li>
|
||||
<li><a href="delay-start.html">Delay start</a></li>
|
||||
<li><a href="snap-to-grid.html">Snap to grid</a></li>
|
||||
<li><a href="visual-feedback.html">Visual feedback</a></li>
|
||||
<li><a href="synchronous-resize.html">Synchronous resize</a></li>
|
||||
<li><a href="animate.html">Animate</a></li>
|
||||
<li><a href="helper.html">Resize Helper</a></li>
|
||||
<li><a href="textarea.html">Textarea</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,38 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Resizable - Maximum / minimum size</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.resizable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#resizable { width: 200px; height: 150px; padding: 5px; }
|
||||
#resizable h3 { text-align: center; margin: 0; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#resizable" ).resizable({
|
||||
maxHeight: 250,
|
||||
maxWidth: 350,
|
||||
minHeight: 150,
|
||||
minWidth: 200
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="resizable" class="ui-widget-content">
|
||||
<h3 class="ui-widget-header">Resize larger / smaller</h3>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Limit the resizable element to a maximum or minimum height or width using the <code>maxHeight</code>, <code>maxWidth</code>, <code>minHeight</code>, and <code>minWidth</code> options.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,35 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Resizable - Snap to grid</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.resizable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#resizable { width: 150px; height: 150px; padding: 0.5em; }
|
||||
#resizable h3 { text-align: center; margin: 0; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#resizable" ).resizable({
|
||||
grid: 50
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="resizable" class="ui-widget-content">
|
||||
<h3 class="ui-widget-header">Grid</h3>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Snap the resizable element to a grid. Set the dimensions of grid cells (height and width in pixels) with the <code>grid</code> option.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
+42
@@ -0,0 +1,42 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Resizable - Synchronous resize</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.resizable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#resizable { background-position: top left; }
|
||||
#resizable, #also { width: 150px; height: 120px; padding: 0.5em; }
|
||||
#resizable h3, #also h3 { text-align: center; margin: 0; }
|
||||
#also { margin-top: 1em; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#resizable" ).resizable({
|
||||
alsoResize: "#also"
|
||||
});
|
||||
$( "#also" ).resizable();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="resizable" class="ui-widget-header">
|
||||
<h3 class="ui-state-active">Resize</h3>
|
||||
</div>
|
||||
|
||||
<div id="also" class="ui-widget-content">
|
||||
<h3 class="ui-widget-header">will also resize</h3>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Resize multiple elements simultaneously by clicking and dragging the sides of one. Pass a shared selector into the <code>alsoResize</code> option.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,34 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Resizable - Textarea</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.resizable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
.ui-resizable-se {
|
||||
bottom: 17px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#resizable" ).resizable({
|
||||
handles: "se"
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<textarea id="resizable" rows="5" cols="20"></textarea>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Display only an outline of the element while resizing by setting the <code>helper</code> option to a CSS class.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
+36
@@ -0,0 +1,36 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Resizable - Visual feedback</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.resizable.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#resizable { width: 150px; height: 150px; padding: 0.5em; }
|
||||
#resizable h3 { text-align: center; margin: 0; }
|
||||
.ui-resizable-ghost { border: 1px dotted gray; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#resizable" ).resizable({
|
||||
ghost: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="resizable" class="ui-widget-content">
|
||||
<h3 class="ui-widget-header">Ghost</h3>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Instead of showing the actual element during resize, set the <code>ghost</code> option to true to show a semi-transparent part of the element.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,87 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Slider - Colorpicker</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.slider.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#red, #green, #blue {
|
||||
float: left;
|
||||
clear: left;
|
||||
width: 300px;
|
||||
margin: 15px;
|
||||
}
|
||||
#swatch {
|
||||
width: 120px;
|
||||
height: 100px;
|
||||
margin-top: 18px;
|
||||
margin-left: 350px;
|
||||
background-image: none;
|
||||
}
|
||||
#red .ui-slider-range { background: #ef2929; }
|
||||
#red .ui-slider-handle { border-color: #ef2929; }
|
||||
#green .ui-slider-range { background: #8ae234; }
|
||||
#green .ui-slider-handle { border-color: #8ae234; }
|
||||
#blue .ui-slider-range { background: #729fcf; }
|
||||
#blue .ui-slider-handle { border-color: #729fcf; }
|
||||
</style>
|
||||
<script>
|
||||
function hexFromRGB(r, g, b) {
|
||||
var hex = [
|
||||
r.toString( 16 ),
|
||||
g.toString( 16 ),
|
||||
b.toString( 16 )
|
||||
];
|
||||
$.each( hex, function( nr, val ) {
|
||||
if ( val.length === 1 ) {
|
||||
hex[ nr ] = "0" + val;
|
||||
}
|
||||
});
|
||||
return hex.join( "" ).toUpperCase();
|
||||
}
|
||||
function refreshSwatch() {
|
||||
var red = $( "#red" ).slider( "value" ),
|
||||
green = $( "#green" ).slider( "value" ),
|
||||
blue = $( "#blue" ).slider( "value" ),
|
||||
hex = hexFromRGB( red, green, blue );
|
||||
$( "#swatch" ).css( "background-color", "#" + hex );
|
||||
}
|
||||
$(function() {
|
||||
$( "#red, #green, #blue" ).slider({
|
||||
orientation: "horizontal",
|
||||
range: "min",
|
||||
max: 255,
|
||||
value: 127,
|
||||
slide: refreshSwatch,
|
||||
change: refreshSwatch
|
||||
});
|
||||
$( "#red" ).slider( "value", 255 );
|
||||
$( "#green" ).slider( "value", 140 );
|
||||
$( "#blue" ).slider( "value", 60 );
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body class="ui-widget-content" style="border:0;">
|
||||
|
||||
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
|
||||
<span class="ui-icon ui-icon-pencil" style="float:left; margin:-2px 5px 0 0;"></span>
|
||||
Simple Colorpicker
|
||||
</p>
|
||||
|
||||
<div id="red"></div>
|
||||
<div id="green"></div>
|
||||
<div id="blue"></div>
|
||||
|
||||
<div id="swatch" class="ui-widget-content ui-corner-all"></div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Combine three sliders to create a simple RGB colorpicker.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,27 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" >
|
||||
<title>jQuery UI Slider - Default functionality</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.slider.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#slider" ).slider();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="slider"></div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>The basic slider is horizontal and has a single handle that can be moved with the mouse or by using the arrow keys.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,49 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Slider - Slider bound to select</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.slider.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
var select = $( "#minbeds" );
|
||||
var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
|
||||
min: 1,
|
||||
max: 6,
|
||||
range: "min",
|
||||
value: select[ 0 ].selectedIndex + 1,
|
||||
slide: function( event, ui ) {
|
||||
select[ 0 ].selectedIndex = ui.value - 1;
|
||||
}
|
||||
});
|
||||
$( "#minbeds" ).change(function() {
|
||||
slider.slider( "value", this.selectedIndex + 1 );
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<form id="reservation">
|
||||
<label for="minbeds">Minimum number of beds</label>
|
||||
<select name="minbeds" id="minbeds">
|
||||
<option>1</option>
|
||||
<option>2</option>
|
||||
<option>3</option>
|
||||
<option>4</option>
|
||||
<option>5</option>
|
||||
<option>6</option>
|
||||
</select>
|
||||
</form>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>How to bind a slider to an existing select element. The select stays visible to display the change. When the select is changed, the slider is updated, too.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,24 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Slider Demos</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="steps.html">Snap to increments</a></li>
|
||||
<li><a href="range.html">Range slider</a></li>
|
||||
<li><a href="rangemin.html">Range with fixed minimum</a></li>
|
||||
<li><a href="hotelrooms.html">Room reservation</a></li>
|
||||
<li><a href="rangemax.html">Range with fixed maximum</a></li>
|
||||
<li><a href="slider-vertical.html">Vertical slider</a></li>
|
||||
<li><a href="range-vertical.html">Vertical range slider</a></li>
|
||||
<li><a href="multiple-vertical.html">Multiple sliders</a></li>
|
||||
<li><a href="colorpicker.html">Simple colorpicker</a></li>
|
||||
<li><a href="side-scroll.html">Simple scrollbar</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+69
@@ -0,0 +1,69 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Slider - Multiple sliders</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.slider.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
#eq span {
|
||||
height:120px; float:left; margin:15px
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
// setup master volume
|
||||
$( "#master" ).slider({
|
||||
value: 60,
|
||||
orientation: "horizontal",
|
||||
range: "min",
|
||||
animate: true
|
||||
});
|
||||
// setup graphic EQ
|
||||
$( "#eq > span" ).each(function() {
|
||||
// read initial values from markup and remove that
|
||||
var value = parseInt( $( this ).text(), 10 );
|
||||
$( this ).empty().slider({
|
||||
value: value,
|
||||
range: "min",
|
||||
animate: true,
|
||||
orientation: "vertical"
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p class="ui-state-default ui-corner-all ui-helper-clearfix" style="padding:4px;">
|
||||
<span class="ui-icon ui-icon-volume-on" style="float:left; margin:-2px 5px 0 0;"></span>
|
||||
Master volume
|
||||
</p>
|
||||
|
||||
<div id="master" style="width:260px; margin:15px;"></div>
|
||||
|
||||
<p class="ui-state-default ui-corner-all" style="padding:4px;margin-top:4em;">
|
||||
<span class="ui-icon ui-icon-signal" style="float:left; margin:-2px 5px 0 0;"></span>
|
||||
Graphic EQ
|
||||
</p>
|
||||
|
||||
<div id="eq">
|
||||
<span>88</span>
|
||||
<span>77</span>
|
||||
<span>55</span>
|
||||
<span>33</span>
|
||||
<span>40</span>
|
||||
<span>45</span>
|
||||
<span>70</span>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Combine horizontal and vertical sliders, each with their own options, to create the UI for a music player.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,41 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Slider - Vertical range slider</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.slider.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#slider-range" ).slider({
|
||||
orientation: "vertical",
|
||||
range: true,
|
||||
values: [ 17, 67 ],
|
||||
slide: function( event, ui ) {
|
||||
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
|
||||
}
|
||||
});
|
||||
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
|
||||
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
<label for="amount">Target sales goal (Millions):</label>
|
||||
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
|
||||
</p>
|
||||
|
||||
<div id="slider-range" style="height:250px;"></div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Change the orientation of the range slider to vertical. Assign a height value via <code>.height()</code> or by setting the height through CSS, and set the <code>orientation</code> option to "vertical."</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,42 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Slider - Range slider</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.slider.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#slider-range" ).slider({
|
||||
range: true,
|
||||
min: 0,
|
||||
max: 500,
|
||||
values: [ 75, 300 ],
|
||||
slide: function( event, ui ) {
|
||||
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
|
||||
}
|
||||
});
|
||||
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
|
||||
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
<label for="amount">Price range:</label>
|
||||
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
|
||||
</p>
|
||||
|
||||
<div id="slider-range"></div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Set the <code>range</code> option to true to capture a range of values with two drag handles. The space between the handles is filled with a different background color to indicate those values are selected.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,40 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Slider - Range with fixed maximum</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.slider.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#slider-range-max" ).slider({
|
||||
range: "max",
|
||||
min: 1,
|
||||
max: 10,
|
||||
value: 2,
|
||||
slide: function( event, ui ) {
|
||||
$( "#amount" ).val( ui.value );
|
||||
}
|
||||
});
|
||||
$( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
<label for="amount">Minimum number of bedrooms:</label>
|
||||
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
|
||||
</p>
|
||||
<div id="slider-range-max"></div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Fix the maximum value of the range slider so that the user can only select a minimum. Set the <code>range</code> option to "max."</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,41 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Slider - Range with fixed minimum</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.slider.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#slider-range-min" ).slider({
|
||||
range: "min",
|
||||
value: 37,
|
||||
min: 1,
|
||||
max: 700,
|
||||
slide: function( event, ui ) {
|
||||
$( "#amount" ).val( "$" + ui.value );
|
||||
}
|
||||
});
|
||||
$( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) );
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
<label for="amount">Maximum price:</label>
|
||||
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
|
||||
</p>
|
||||
|
||||
<div id="slider-range-min"></div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Fix the minimum value of the range slider so that the user can only select a maximum. Set the <code>range</code> option to "min."</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,131 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Slider - Slider scrollbar</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.slider.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
.scroll-pane { overflow: auto; width: 99%; float:left; }
|
||||
.scroll-content { width: 2440px; float: left; }
|
||||
.scroll-content-item { width: 100px; height: 100px; float: left; margin: 10px; font-size: 3em; line-height: 96px; text-align: center; }
|
||||
.scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; }
|
||||
.scroll-bar-wrap .ui-slider { background: none; border:0; height: 2em; margin: 0 auto; }
|
||||
.scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; }
|
||||
.scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5em; }
|
||||
.scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; }
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
//scrollpane parts
|
||||
var scrollPane = $( ".scroll-pane" ),
|
||||
scrollContent = $( ".scroll-content" );
|
||||
|
||||
//build slider
|
||||
var scrollbar = $( ".scroll-bar" ).slider({
|
||||
slide: function( event, ui ) {
|
||||
if ( scrollContent.width() > scrollPane.width() ) {
|
||||
scrollContent.css( "margin-left", Math.round(
|
||||
ui.value / 100 * ( scrollPane.width() - scrollContent.width() )
|
||||
) + "px" );
|
||||
} else {
|
||||
scrollContent.css( "margin-left", 0 );
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
//append icon to handle
|
||||
var handleHelper = scrollbar.find( ".ui-slider-handle" )
|
||||
.mousedown(function() {
|
||||
scrollbar.width( handleHelper.width() );
|
||||
})
|
||||
.mouseup(function() {
|
||||
scrollbar.width( "100%" );
|
||||
})
|
||||
.append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" )
|
||||
.wrap( "<div class='ui-handle-helper-parent'></div>" ).parent();
|
||||
|
||||
//change overflow to hidden now that slider handles the scrolling
|
||||
scrollPane.css( "overflow", "hidden" );
|
||||
|
||||
//size scrollbar and handle proportionally to scroll distance
|
||||
function sizeScrollbar() {
|
||||
var remainder = scrollContent.width() - scrollPane.width();
|
||||
var proportion = remainder / scrollContent.width();
|
||||
var handleSize = scrollPane.width() - ( proportion * scrollPane.width() );
|
||||
scrollbar.find( ".ui-slider-handle" ).css({
|
||||
width: handleSize,
|
||||
"margin-left": -handleSize / 2
|
||||
});
|
||||
handleHelper.width( "" ).width( scrollbar.width() - handleSize );
|
||||
}
|
||||
|
||||
//reset slider value based on scroll content position
|
||||
function resetValue() {
|
||||
var remainder = scrollPane.width() - scrollContent.width();
|
||||
var leftVal = scrollContent.css( "margin-left" ) === "auto" ? 0 :
|
||||
parseInt( scrollContent.css( "margin-left" ) );
|
||||
var percentage = Math.round( leftVal / remainder * 100 );
|
||||
scrollbar.slider( "value", percentage );
|
||||
}
|
||||
|
||||
//if the slider is 100% and window gets larger, reveal content
|
||||
function reflowContent() {
|
||||
var showing = scrollContent.width() + parseInt( scrollContent.css( "margin-left" ), 10 );
|
||||
var gap = scrollPane.width() - showing;
|
||||
if ( gap > 0 ) {
|
||||
scrollContent.css( "margin-left", parseInt( scrollContent.css( "margin-left" ), 10 ) + gap );
|
||||
}
|
||||
}
|
||||
|
||||
//change handle position on window resize
|
||||
$( window ).resize(function() {
|
||||
resetValue();
|
||||
sizeScrollbar();
|
||||
reflowContent();
|
||||
});
|
||||
//init scrollbar size
|
||||
setTimeout( sizeScrollbar, 10 );//safari wants a timeout
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="scroll-pane ui-widget ui-widget-header ui-corner-all">
|
||||
<div class="scroll-content">
|
||||
<div class="scroll-content-item ui-widget-header">1</div>
|
||||
<div class="scroll-content-item ui-widget-header">2</div>
|
||||
<div class="scroll-content-item ui-widget-header">3</div>
|
||||
<div class="scroll-content-item ui-widget-header">4</div>
|
||||
<div class="scroll-content-item ui-widget-header">5</div>
|
||||
<div class="scroll-content-item ui-widget-header">6</div>
|
||||
<div class="scroll-content-item ui-widget-header">7</div>
|
||||
<div class="scroll-content-item ui-widget-header">8</div>
|
||||
<div class="scroll-content-item ui-widget-header">9</div>
|
||||
<div class="scroll-content-item ui-widget-header">10</div>
|
||||
<div class="scroll-content-item ui-widget-header">11</div>
|
||||
<div class="scroll-content-item ui-widget-header">12</div>
|
||||
<div class="scroll-content-item ui-widget-header">13</div>
|
||||
<div class="scroll-content-item ui-widget-header">14</div>
|
||||
<div class="scroll-content-item ui-widget-header">15</div>
|
||||
<div class="scroll-content-item ui-widget-header">16</div>
|
||||
<div class="scroll-content-item ui-widget-header">17</div>
|
||||
<div class="scroll-content-item ui-widget-header">18</div>
|
||||
<div class="scroll-content-item ui-widget-header">19</div>
|
||||
<div class="scroll-content-item ui-widget-header">20</div>
|
||||
</div>
|
||||
<div class="scroll-bar-wrap ui-widget-content ui-corner-bottom">
|
||||
<div class="scroll-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Use a slider to manipulate the positioning of content on the page. In this case, it acts as a scrollbar with the potential to capture values if needed.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,42 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Slider - Vertical slider</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.slider.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#slider-vertical" ).slider({
|
||||
orientation: "vertical",
|
||||
range: "min",
|
||||
min: 0,
|
||||
max: 100,
|
||||
value: 60,
|
||||
slide: function( event, ui ) {
|
||||
$( "#amount" ).val( ui.value );
|
||||
}
|
||||
});
|
||||
$( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
<label for="amount">Volume:</label>
|
||||
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
|
||||
</p>
|
||||
|
||||
<div id="slider-vertical" style="height:200px;"></div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Change the orientation of the slider to vertical. Assign a height value via <code>.height()</code> or by setting the height through CSS, and set the <code>orientation</code> option to "vertical."</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,41 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Slider - Snap to increments</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.mouse.js"></script>
|
||||
<script src="../../ui/jquery.ui.slider.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#slider" ).slider({
|
||||
value:100,
|
||||
min: 0,
|
||||
max: 500,
|
||||
step: 50,
|
||||
slide: function( event, ui ) {
|
||||
$( "#amount" ).val( "$" + ui.value );
|
||||
}
|
||||
});
|
||||
$( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
<label for="amount">Donation amount ($50 increments):</label>
|
||||
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
|
||||
</p>
|
||||
|
||||
<div id="slider"></div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Increment slider values with the <code>step</code> option set to an integer, commonly a dividend of the slider's maximum value. The default increment is 1.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,52 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Spinner - Currency</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../external/jquery.mousewheel.js"></script>
|
||||
<script src="../../external/globalize.js"></script>
|
||||
<script src="../../external/globalize.culture.de-DE.js"></script>
|
||||
<script src="../../external/globalize.culture.ja-JP.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
<script src="../../ui/jquery.ui.spinner.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#currency" ).change(function() {
|
||||
$( "#spinner" ).spinner( "option", "culture", $( this ).val() );
|
||||
});
|
||||
|
||||
$( "#spinner" ).spinner({
|
||||
min: 5,
|
||||
max: 2500,
|
||||
step: 25,
|
||||
start: 1000,
|
||||
numberFormat: "C"
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
<label for="currency">Currency to donate</label>
|
||||
<select id="currency" name="currency">
|
||||
<option value="en-US">US $</option>
|
||||
<option value="de-DE">EUR €</option>
|
||||
<option value="ja-JP">YEN ¥</option>
|
||||
</select>
|
||||
</p>
|
||||
<p>
|
||||
<label for="spinner">Amount to donate:</label>
|
||||
<input id="spinner" name="spinner" value="5">
|
||||
</p>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Example of a donation form, with currency selection and amount spinner.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,56 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Spinner - Decimal</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../external/jquery.mousewheel.js"></script>
|
||||
<script src="../../external/globalize.js"></script>
|
||||
<script src="../../external/globalize.culture.de-DE.js"></script>
|
||||
<script src="../../external/globalize.culture.ja-JP.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
<script src="../../ui/jquery.ui.spinner.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#spinner" ).spinner({
|
||||
step: 0.01,
|
||||
numberFormat: "n"
|
||||
});
|
||||
|
||||
$( "#culture" ).change(function() {
|
||||
var current = $( "#spinner" ).spinner( "value" );
|
||||
Globalize.culture( $(this).val() );
|
||||
$( "#spinner" ).spinner( "value", current );
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
<label for="spinner">Decimal spinner:</label>
|
||||
<input id="spinner" name="spinner" value="5.06">
|
||||
</p>
|
||||
<p>
|
||||
<label for="culture">Select a culture to use for formatting:</label>
|
||||
<select id="culture">
|
||||
<option value="en-EN" selected="selected">English</option>
|
||||
<option value="de-DE">German</option>
|
||||
<option value="ja-JP">Japanese</option>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>
|
||||
Example of a decimal spinner. Step is set to 0.01.
|
||||
<br>The code handling the culture change reads the current spinner value,
|
||||
then changes the culture, then sets the value again, resulting in an updated
|
||||
formatting, based on the new culture.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,64 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Spinner - Default functionality</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../external/jquery.mousewheel.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
<script src="../../ui/jquery.ui.spinner.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
var spinner = $( "#spinner" ).spinner();
|
||||
|
||||
$( "#disable" ).click(function() {
|
||||
if ( spinner.spinner( "option", "disabled" ) ) {
|
||||
spinner.spinner( "enable" );
|
||||
} else {
|
||||
spinner.spinner( "disable" );
|
||||
}
|
||||
});
|
||||
$( "#destroy" ).click(function() {
|
||||
if ( spinner.data( "ui-spinner" ) ) {
|
||||
spinner.spinner( "destroy" );
|
||||
} else {
|
||||
spinner.spinner();
|
||||
}
|
||||
});
|
||||
$( "#getvalue" ).click(function() {
|
||||
alert( spinner.spinner( "value" ) );
|
||||
});
|
||||
$( "#setvalue" ).click(function() {
|
||||
spinner.spinner( "value", 5 );
|
||||
});
|
||||
|
||||
$( "button" ).button();
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
<label for="spinner">Select a value:</label>
|
||||
<input id="spinner" name="value">
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button id="disable">Toggle disable/enable</button>
|
||||
<button id="destroy">Toggle widget</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button id="getvalue">Get value</button>
|
||||
<button id="setvalue">Set value to 5</button>
|
||||
</p>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Default spinner.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,19 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Spinner Demos</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
<li><a href="decimal.html">Decimal</a></li>
|
||||
<li><a href="currency.html">Currency</a></li>
|
||||
<li><a href="latlong.html">Map</a></li>
|
||||
<li><a href="time.html">Time</a></li>
|
||||
<li><a href="overflow.html">Overflow</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,57 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Spinner - Map</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../external/jquery.mousewheel.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
<script src="../../ui/jquery.ui.spinner.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
function latlong() {
|
||||
return new google.maps.LatLng( $("#lat").val(), $("#lng").val() );
|
||||
}
|
||||
function position() {
|
||||
map.setCenter( latlong() );
|
||||
}
|
||||
$( "#lat, #lng" ).spinner({
|
||||
step: .001,
|
||||
change: position,
|
||||
stop: position
|
||||
});
|
||||
|
||||
var map = new google.maps.Map( $("#map")[0], {
|
||||
zoom: 8,
|
||||
center: latlong(),
|
||||
mapTypeId: google.maps.MapTypeId.ROADMAP
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
#map {
|
||||
width:500px;
|
||||
height:500px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<label for="lat">Latitude</label>
|
||||
<input id="lat" name="lat" value="44.797">
|
||||
<br>
|
||||
<label for="lng">Longitude</label>
|
||||
<input id="lng" name="lng" value="-93.278">
|
||||
|
||||
<div id="map"></div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>Google Maps integration, using spinners to change latitude and longitude.</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,44 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Spinner - Overflow</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../external/jquery.mousewheel.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
<script src="../../ui/jquery.ui.spinner.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$(function() {
|
||||
$( "#spinner" ).spinner({
|
||||
spin: function( event, ui ) {
|
||||
if ( ui.value > 10 ) {
|
||||
$( this ).spinner( "value", -10 );
|
||||
return false;
|
||||
} else if ( ui.value < -10 ) {
|
||||
$( this ).spinner( "value", 10 );
|
||||
return false;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
<label for="spinner">Select a value:</label>
|
||||
<input id="spinner" name="value" />
|
||||
</p>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>
|
||||
Overflowing spinner restricted to a range of -10 to 10.
|
||||
For anything above 10, it'll overflow to -10, and the other way round.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,74 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Spinner - Time</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../external/jquery.mousewheel.js"></script>
|
||||
<script src="../../external/globalize.js"></script>
|
||||
<script src="../../external/globalize.culture.de-DE.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
<script src="../../ui/jquery.ui.spinner.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<script>
|
||||
$.widget( "ui.timespinner", $.ui.spinner, {
|
||||
options: {
|
||||
// seconds
|
||||
step: 60 * 1000,
|
||||
// hours
|
||||
page: 60
|
||||
},
|
||||
|
||||
_parse: function( value ) {
|
||||
if ( typeof value === "string" ) {
|
||||
// already a timestamp
|
||||
if ( Number( value ) == value ) {
|
||||
return Number( value );
|
||||
}
|
||||
return +Globalize.parseDate( value );
|
||||
}
|
||||
return value;
|
||||
},
|
||||
|
||||
_format: function( value ) {
|
||||
return Globalize.format( new Date(value), "t" );
|
||||
}
|
||||
});
|
||||
|
||||
$(function() {
|
||||
$( "#spinner" ).timespinner();
|
||||
|
||||
$( "#culture" ).change(function() {
|
||||
var current = $( "#spinner" ).timespinner( "value" );
|
||||
Globalize.culture( $(this).val() );
|
||||
$( "#spinner" ).timespinner( "value", current );
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>
|
||||
<label for="spinner">Time spinner:</label>
|
||||
<input id="spinner" name="spinner" value="08:30 PM">
|
||||
</p>
|
||||
<p>
|
||||
<label for="culture">Select a culture to use for formatting:</label>
|
||||
<select id="culture">
|
||||
<option value="en-EN" selected="selected">English</option>
|
||||
<option value="de-DE">German</option>
|
||||
</select>
|
||||
</p>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>
|
||||
A custom widget extending spinner. Use the Globalization plugin to parse and output
|
||||
a timestamp, with custom step and page options. Cursor up/down spins minutes, page up/down
|
||||
spins hours.
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,178 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Widget - Default functionality</title>
|
||||
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
|
||||
<script src="../../jquery-1.10.2.js"></script>
|
||||
<script src="../../ui/jquery.ui.core.js"></script>
|
||||
<script src="../../ui/jquery.ui.position.js"></script>
|
||||
<script src="../../ui/jquery.ui.widget.js"></script>
|
||||
<script src="../../ui/jquery.ui.button.js"></script>
|
||||
<link rel="stylesheet" href="../demos.css">
|
||||
<style>
|
||||
.custom-colorize {
|
||||
font-size: 20px;
|
||||
position: relative;
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
}
|
||||
.custom-colorize-changer {
|
||||
font-size: 10px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$(function() {
|
||||
// the widget definition, where "custom" is the namespace,
|
||||
// "colorize" the widget name
|
||||
$.widget( "custom.colorize", {
|
||||
// default options
|
||||
options: {
|
||||
red: 255,
|
||||
green: 0,
|
||||
blue: 0,
|
||||
|
||||
// callbacks
|
||||
change: null,
|
||||
random: null
|
||||
},
|
||||
|
||||
// the constructor
|
||||
_create: function() {
|
||||
this.element
|
||||
// add a class for theming
|
||||
.addClass( "custom-colorize" )
|
||||
// prevent double click to select text
|
||||
.disableSelection();
|
||||
|
||||
this.changer = $( "<button>", {
|
||||
text: "change",
|
||||
"class": "custom-colorize-changer"
|
||||
})
|
||||
.appendTo( this.element )
|
||||
.button();
|
||||
|
||||
// bind click events on the changer button to the random method
|
||||
this._on( this.changer, {
|
||||
// _on won't call random when widget is disabled
|
||||
click: "random"
|
||||
});
|
||||
this._refresh();
|
||||
},
|
||||
|
||||
// called when created, and later when changing options
|
||||
_refresh: function() {
|
||||
this.element.css( "background-color", "rgb(" +
|
||||
this.options.red +"," +
|
||||
this.options.green + "," +
|
||||
this.options.blue + ")"
|
||||
);
|
||||
|
||||
// trigger a callback/event
|
||||
this._trigger( "change" );
|
||||
},
|
||||
|
||||
// a public method to change the color to a random value
|
||||
// can be called directly via .colorize( "random" )
|
||||
random: function( event ) {
|
||||
var colors = {
|
||||
red: Math.floor( Math.random() * 256 ),
|
||||
green: Math.floor( Math.random() * 256 ),
|
||||
blue: Math.floor( Math.random() * 256 )
|
||||
};
|
||||
|
||||
// trigger an event, check if it's canceled
|
||||
if ( this._trigger( "random", event, colors ) !== false ) {
|
||||
this.option( colors );
|
||||
}
|
||||
},
|
||||
|
||||
// events bound via _on are removed automatically
|
||||
// revert other modifications here
|
||||
_destroy: function() {
|
||||
// remove generated elements
|
||||
this.changer.remove();
|
||||
|
||||
this.element
|
||||
.removeClass( "custom-colorize" )
|
||||
.enableSelection()
|
||||
.css( "background-color", "transparent" );
|
||||
},
|
||||
|
||||
// _setOptions is called with a hash of all options that are changing
|
||||
// always refresh when changing options
|
||||
_setOptions: function() {
|
||||
// _super and _superApply handle keeping the right this-context
|
||||
this._superApply( arguments );
|
||||
this._refresh();
|
||||
},
|
||||
|
||||
// _setOption is called for each individual option that is changing
|
||||
_setOption: function( key, value ) {
|
||||
// prevent invalid color values
|
||||
if ( /red|green|blue/.test(key) && (value < 0 || value > 255) ) {
|
||||
return;
|
||||
}
|
||||
this._super( key, value );
|
||||
}
|
||||
});
|
||||
|
||||
// initialize with default options
|
||||
$( "#my-widget1" ).colorize();
|
||||
|
||||
// initialize with two customized options
|
||||
$( "#my-widget2" ).colorize({
|
||||
red: 60,
|
||||
blue: 60
|
||||
});
|
||||
|
||||
// initialize with custom green value
|
||||
// and a random callback to allow only colors with enough green
|
||||
$( "#my-widget3" ).colorize( {
|
||||
green: 128,
|
||||
random: function( event, ui ) {
|
||||
return ui.green > 128;
|
||||
}
|
||||
});
|
||||
|
||||
// click to toggle enabled/disabled
|
||||
$( "#disable" ).click(function() {
|
||||
// use the custom selector created for each widget to find all instances
|
||||
// all instances are toggled together, so we can check the state from the first
|
||||
if ( $( ":custom-colorize" ).colorize( "option", "disabled" ) ) {
|
||||
$( ":custom-colorize" ).colorize( "enable" );
|
||||
} else {
|
||||
$( ":custom-colorize" ).colorize( "disable" );
|
||||
}
|
||||
});
|
||||
|
||||
// click to set options after initialization
|
||||
$( "#black" ).click( function() {
|
||||
$( ":custom-colorize" ).colorize( "option", {
|
||||
red: 0,
|
||||
green: 0,
|
||||
blue: 0
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<div id="my-widget1">color me</div>
|
||||
<div id="my-widget2">color me</div>
|
||||
<div id="my-widget3">color me</div>
|
||||
<button id="disable">Toggle disabled option</button>
|
||||
<button id="black">Go black</button>
|
||||
</div>
|
||||
|
||||
<div class="demo-description">
|
||||
<p>This demo shows a simple custom widget built using the widget factory (jquery.ui.widget.js).</p>
|
||||
<p>The three boxes are initialized in different ways. Clicking them changes their background color. View source to see how it works, its heavily commented</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,14 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI Widget Demo</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<li><a href="default.html">Default functionality</a></li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -0,0 +1,145 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI jQuery documentation</title>
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"
|
||||
}
|
||||
.gutter {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>{
|
||||
"title":
|
||||
"Widget Plugin Bridge",
|
||||
"excerpt":
|
||||
"Part of the jQuery Widget Factory is the jQuery.widget.bridge() method. This acts as the middleman between the object created by $.widget() and the jQuery API.",
|
||||
"termSlugs": {
|
||||
"category": [
|
||||
"utilities","widgets"
|
||||
]
|
||||
}
|
||||
}</script><article id="jQuery-widget-bridge1" class="entry method"><h2 class="section-title"><span class="name">jQuery.widget.bridge( name, constructor )</span></h2>
|
||||
<div class="entry-wrapper">
|
||||
<p class="desc"><strong>Description: </strong>Part of the <a href="/jQuery.widget/">jQuery Widget Factory</a> is the <code>jQuery.widget.bridge()</code> method. This acts as the middleman between the object created by <code>$.widget()</code> and the jQuery API.</p>
|
||||
<ul class="signatures"><li class="signature">
|
||||
<h4 class="name"><a id="jQuery-widget-bridge-name-constructor" href="#jQuery-widget-bridge-name-constructor"><span class="icon-link"></span>jQuery.widget.bridge( name, constructor )</a></h4>
|
||||
<ul>
|
||||
<li>
|
||||
<div><strong>name</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types/#String">String</a>
|
||||
</div>
|
||||
<div>The name of the plugin to create.</div>
|
||||
</li>
|
||||
<li>
|
||||
<div><strong>constructor</strong></div>
|
||||
<div>Type: <a href="http://api.jquery.com/Types/#Function">Function</a>()</div>
|
||||
<div>The object to instantiate when the plugin is invoked.</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li></ul>
|
||||
<div class="longdesc" id="entry-longdesc">
|
||||
<p><code>$.widget.bridge()</code> does a few things:</p>
|
||||
<ul>
|
||||
<li>Connects a regular JavaScript constructor to the jQuery API.</li>
|
||||
<li>Automatically creates instances of said object and stores it within the element's <code>$.data</code> cache.</li>
|
||||
<li>Allows calls to public methods.</li>
|
||||
<li>Prevents calls to private methods.</li>
|
||||
<li>Prevents method calls on uninitialized objects.</li>
|
||||
<li>Protects against multiple initializations.</li>
|
||||
</ul>
|
||||
<p>jQuery UI widgets are created using <code>$.widget( "foo.bar", {} );</code> syntax to define an object from which instances will be created. Given a DOM structure with five <code>.foo</code>'s, <code>$( ".foo" ).bar();</code> will create five instances of your "bar" object. <code>$.widget.bridge()</code> works inside the factory by taking your base "bar" object and giving it a public API. Therefore, you can create instances by writing <code>$( ".foo" ).bar()</code>, and call methods by writing <code>$( ".foo" ).bar( "baz" )</code>.</p>
|
||||
<p>If all you want is one-time initialization and calling methods, your object passed to <code>jQuery.widget.bridge()</code> can be very minimal:</p>
|
||||
<div class="syntaxhighlighter javascript nogutter">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="gutter">
|
||||
|
||||
<div class="line n1">1</div>
|
||||
|
||||
<div class="line n2">2</div>
|
||||
|
||||
<div class="line n3">3</div>
|
||||
|
||||
<div class="line n4">4</div>
|
||||
|
||||
<div class="line n5">5</div>
|
||||
|
||||
<div class="line n6">6</div>
|
||||
|
||||
<div class="line n7">7</div>
|
||||
|
||||
<div class="line n8">8</div>
|
||||
|
||||
<div class="line n9">9</div>
|
||||
|
||||
<div class="line n10">10</div>
|
||||
|
||||
<div class="line n11">11</div>
|
||||
|
||||
<div class="line n12">12</div>
|
||||
|
||||
<div class="line n13">13</div>
|
||||
|
||||
</td>
|
||||
<td class="code">
|
||||
<pre><div class="container"><div class="line"><code><span class="keyword">var</span> Highlighter = <span class="keyword">function</span>( options, element ) {</code></div></div><div class="container"><div class="line"><code> <span class="keyword">this</span>.options = options;</code></div></div><div class="container"><div class="line"><code> <span class="keyword">this</span>.element = $( element );</code></div></div><div class="container"><div class="line"><code> <span class="keyword">this</span>._set( <span class="number">800</span> );</code></div></div><div class="container"><div class="line"><code>};</code></div></div><div class="container"><div class="line"><code>Highlighter.prototype = {</code></div></div><div class="container"><div class="line"><code> toggle: <span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> <span class="keyword">this</span>._set( <span class="keyword">this</span>.element.css( <span class="string">"font-weight"</span>) === <span class="number">400</span> ? <span class="number">800</span> : <span class="number">400</span> );</code></div></div><div class="container"><div class="line"><code> },</code></div></div><div class="container"><div class="line"><code> _set: <span class="keyword">function</span>(value) {</code></div></div><div class="container"><div class="line"><code> <span class="keyword">this</span>.element.css( <span class="string">"font-weight"</span>, value );</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code>};</code></div></div></pre>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p>All you need here is a function that acts as the constructor, accepting two arguments:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>options</code>: an object of configuration options</li>
|
||||
<li>
|
||||
<code>element</code>: the DOM element this instance was created on</li>
|
||||
</ul>
|
||||
<p>You can then hook this object up as a jQuery plugin using the bridge and use it on any jQuery object:</p>
|
||||
<div class="syntaxhighlighter javascript nogutter">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="gutter">
|
||||
|
||||
<div class="line n1">1</div>
|
||||
|
||||
<div class="line n2">2</div>
|
||||
|
||||
<div class="line n3">3</div>
|
||||
|
||||
<div class="line n4">4</div>
|
||||
|
||||
<div class="line n5">5</div>
|
||||
|
||||
<div class="line n6">6</div>
|
||||
|
||||
<div class="line n7">7</div>
|
||||
|
||||
<div class="line n8">8</div>
|
||||
|
||||
</td>
|
||||
<td class="code">
|
||||
<pre><div class="container"><div class="line"><code><span class="comment">// Hook up the plugin</span></code></div></div><div class="container"><div class="line"><code>$.widget.bridge( <span class="string">"colorToggle"</span>, Highlighter );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// Initialize it on divs</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">"div"</span> ).colorToggle().click(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code> <span class="comment">// Call the public method on click</span></code></div></div><div class="container"><div class="line"><code> $( <span class="keyword">this</span> ).colorToggle( <span class="string">"toggle"</span> );</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p>To use all the features of the bridge, your object also needs to have an <code>_init()</code> method on the prototype. This will get called whenever the plugin is invoked while an instance already exists. In that case you also need to have an <code>option()</code> method. This will be invoked with the options as the first argument. If there were none, the argument will be an empty object. For a proper implementation of the <code>option</code> method, check out the implementation of <a href="/jQuery.widget/#jQuery-Widget2"><code>$.Widget</code></a>.</p>
|
||||
<p>There is one optional property the bridge will use, if present: If your object's prototype has a <code>widgetFullName</code> property, this will be used as the key for storing and retrieving the instance. Otherwise, the name argument will be used.</p>
|
||||
</div>
|
||||
</div></article>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,525 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery UI mouse documentation</title>
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"
|
||||
}
|
||||
.gutter {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script>{
|
||||
"title":
|
||||
"Mouse Interaction",
|
||||
"excerpt":
|
||||
"The base interaction layer.",
|
||||
"termSlugs": {
|
||||
"category": [
|
||||
"utilities","interactions"
|
||||
]
|
||||
}
|
||||
}</script><article id="mouse1" class="entry widget"><h2 class="section-title"><span>Mouse Interaction</span></h2>
|
||||
<div class="entry-wrapper">
|
||||
<p class="desc"><strong>Description: </strong>The base interaction layer.</p>
|
||||
<section id="quick-nav"><header><h2>QuickNav</h2></header><div class="quick-nav-section">
|
||||
<h3>Options</h3>
|
||||
<div><a href="#option-cancel">cancel</a></div>
|
||||
<div><a href="#option-delay">delay</a></div>
|
||||
<div><a href="#option-distance">distance</a></div>
|
||||
</div>
|
||||
<div class="quick-nav-section">
|
||||
<h3>Methods</h3>
|
||||
<div><a href="#method-_mouseCapture">_mouseCapture</a></div>
|
||||
<div><a href="#method-_mouseDelayMet">_mouseDelayMet</a></div>
|
||||
<div><a href="#method-_mouseDestroy">_mouseDestroy</a></div>
|
||||
<div><a href="#method-_mouseDistanceMet">_mouseDistanceMet</a></div>
|
||||
<div><a href="#method-_mouseDown">_mouseDown</a></div>
|
||||
<div><a href="#method-_mouseDrag">_mouseDrag</a></div>
|
||||
<div><a href="#method-_mouseInit">_mouseInit</a></div>
|
||||
<div><a href="#method-_mouseMove">_mouseMove</a></div>
|
||||
<div><a href="#method-_mouseStart">_mouseStart</a></div>
|
||||
<div><a href="#method-_mouseStop">_mouseStop</a></div>
|
||||
<div><a href="#method-_mouseUp">_mouseUp</a></div>
|
||||
</div>
|
||||
<div class="quick-nav-section"><h3>Events</h3></div></section><div class="longdesc" id="entry-longdesc">
|
||||
<p>Similar to <a href="/jQuery.Widget#jQuery-Widget2"><code>jQuery.Widget</code></a>, the mouse interaction is not intended to be used directly. It is purely a base layer for other widgets to inherit from. This page only documents what is added to <code>jQuery.Widget</code>, but it does include internal methods that are not intended to be overwritten. The intended public API is <a href="#method-_mouseStart"><code>_mouseStart()</code></a>, <a href="#method-_mouseDrag"><code>_mouseDrag()</code></a>, <a href="#method-_mouseStop"><code>_mouseStop()</code></a>, and <a href="#method-_mouseCapture"><code>_mouseCapture()</code></a>.</p>
|
||||
|
||||
<h3>Dependencies</h3>
|
||||
<ul>
|
||||
<li><a href="/jQuery.widget/">Widget Factory</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<section id="options"><header><h2>Options</h2></header><div id="option-cancel" class="api-item first-item">
|
||||
<h3>cancel<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Selector">Selector</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>"input,textarea,button,select,option"</code>
|
||||
</div>
|
||||
<div>Prevents interactions from starting on specified elements.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the mouse with the <code>cancel</code> option specified:</p>
|
||||
<div class="syntaxhighlighter javascript nogutter">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="gutter">
|
||||
|
||||
<div class="line n1">1</div>
|
||||
|
||||
</td>
|
||||
<td class="code">
|
||||
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).mouse({ cancel: <span class="string">".title"</span> });</code></div></div></pre>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p>Get or set the <code>cancel</code> option, after initialization:</p>
|
||||
<div class="syntaxhighlighter javascript nogutter">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="gutter">
|
||||
|
||||
<div class="line n1">1</div>
|
||||
|
||||
<div class="line n2">2</div>
|
||||
|
||||
<div class="line n3">3</div>
|
||||
|
||||
<div class="line n4">4</div>
|
||||
|
||||
<div class="line n5">5</div>
|
||||
|
||||
</td>
|
||||
<td class="code">
|
||||
<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> cancel = $( <span class="string">".selector"</span> ).mouse( <span class="string">"option"</span>, <span class="string">"cancel"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).mouse( <span class="string">"option"</span>, <span class="string">"cancel"</span>, <span class="string">".title"</span> );</code></div></div></pre>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="option-delay" class="api-item">
|
||||
<h3>delay<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>0</code>
|
||||
</div>
|
||||
<div>Time in milliseconds after mousedown until the interaction should start. This option can be used to prevent unwanted interactions when clicking on an element.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the mouse with the <code>delay</code> option specified:</p>
|
||||
<div class="syntaxhighlighter javascript nogutter">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="gutter">
|
||||
|
||||
<div class="line n1">1</div>
|
||||
|
||||
</td>
|
||||
<td class="code">
|
||||
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).mouse({ delay: <span class="number">300</span> });</code></div></div></pre>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p>Get or set the <code>delay</code> option, after initialization:</p>
|
||||
<div class="syntaxhighlighter javascript nogutter">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="gutter">
|
||||
|
||||
<div class="line n1">1</div>
|
||||
|
||||
<div class="line n2">2</div>
|
||||
|
||||
<div class="line n3">3</div>
|
||||
|
||||
<div class="line n4">4</div>
|
||||
|
||||
<div class="line n5">5</div>
|
||||
|
||||
</td>
|
||||
<td class="code">
|
||||
<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> delay = $( <span class="string">".selector"</span> ).mouse( <span class="string">"option"</span>, <span class="string">"delay"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).mouse( <span class="string">"option"</span>, <span class="string">"delay"</span>, <span class="number">300</span> );</code></div></div></pre>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="option-distance" class="api-item">
|
||||
<h3>distance<span class="option-type"><strong>Type: </strong><a href="http://api.jquery.com/Types/#Number">Number</a></span>
|
||||
</h3>
|
||||
<div class="default">
|
||||
<strong>Default: </strong><code>1</code>
|
||||
</div>
|
||||
<div>Distance in pixels after mousedown the mouse must move before the interaction should start. This option can be used to prevent unwanted interactions when clicking on an element.</div>
|
||||
<strong>Code examples:</strong><p>Initialize the mouse with the <code>distance</code> option specified:</p>
|
||||
<div class="syntaxhighlighter javascript nogutter">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="gutter">
|
||||
|
||||
<div class="line n1">1</div>
|
||||
|
||||
</td>
|
||||
<td class="code">
|
||||
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).mouse({ distance: <span class="number">10</span> });</code></div></div></pre>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p>Get or set the <code>distance</code> option, after initialization:</p>
|
||||
<div class="syntaxhighlighter javascript nogutter">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="gutter">
|
||||
|
||||
<div class="line n1">1</div>
|
||||
|
||||
<div class="line n2">2</div>
|
||||
|
||||
<div class="line n3">3</div>
|
||||
|
||||
<div class="line n4">4</div>
|
||||
|
||||
<div class="line n5">5</div>
|
||||
|
||||
</td>
|
||||
<td class="code">
|
||||
<pre><div class="container"><div class="line"><code><span class="comment">// getter</span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> distance = $( <span class="string">".selector"</span> ).mouse( <span class="string">"option"</span>, <span class="string">"distance"</span> );</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">// setter</span></code></div></div><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).mouse( <span class="string">"option"</span>, <span class="string">"distance"</span>, <span class="number">10</span> );</code></div></div></pre>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div></section><section id="methods"><header><h2>Methods</h2></header><div id="method-_mouseCapture"><div class="api-item first-item">
|
||||
<h3>_mouseCapture()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#Boolean">Boolean</a></span>
|
||||
</h3>
|
||||
<div>
|
||||
Determines whether an interaction should start based on event target of the interaction. The default implementation always returns <code>true</code>.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the _mouseCapture method:</p>
|
||||
<div class="syntaxhighlighter javascript nogutter">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="gutter">
|
||||
|
||||
<div class="line n1">1</div>
|
||||
|
||||
</td>
|
||||
<td class="code">
|
||||
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).mouse( <span class="string">"_mouseCapture"</span> );</code></div></div></pre>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="method-_mouseDelayMet"><div class="api-item">
|
||||
<h3>_mouseDelayMet()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#Boolean">Boolean</a></span>
|
||||
</h3>
|
||||
<div>
|
||||
Determines whether the <a href="#option-delay"><code>delay</code></a> option has been met for the current interaction.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the _mouseDelayMet method:</p>
|
||||
<div class="syntaxhighlighter javascript nogutter">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="gutter">
|
||||
|
||||
<div class="line n1">1</div>
|
||||
|
||||
</td>
|
||||
<td class="code">
|
||||
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).mouse( <span class="string">"_mouseDelayMet"</span> );</code></div></div></pre>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="method-_mouseDestroy"><div class="api-item">
|
||||
<h3>_mouseDestroy()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
|
||||
</h3>
|
||||
<div>
|
||||
Destroys the interaction event handlers. This must be called from the extending widget's <code>_destroy()</code> method.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the _mouseDestroy method:</p>
|
||||
<div class="syntaxhighlighter javascript nogutter">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="gutter">
|
||||
|
||||
<div class="line n1">1</div>
|
||||
|
||||
</td>
|
||||
<td class="code">
|
||||
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).mouse( <span class="string">"_mouseDestroy"</span> );</code></div></div></pre>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="method-_mouseDistanceMet"><div class="api-item">
|
||||
<h3>_mouseDistanceMet()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#Boolean">Boolean</a></span>
|
||||
</h3>
|
||||
<div>
|
||||
Determines whether the <a href="#option-distance"><code>distance</code></a> option has been met for the current interaction.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the _mouseDistanceMet method:</p>
|
||||
<div class="syntaxhighlighter javascript nogutter">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="gutter">
|
||||
|
||||
<div class="line n1">1</div>
|
||||
|
||||
</td>
|
||||
<td class="code">
|
||||
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).mouse( <span class="string">"_mouseDistanceMet"</span> );</code></div></div></pre>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="method-_mouseDown"><div class="api-item">
|
||||
<h3>_mouseDown()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
|
||||
</h3>
|
||||
<div>
|
||||
Handles the beginning of an interaction. Verifies that the event is associated with the primary mouse button and ensures that the <a href="#option-delay"><code>delay</code></a> and <a href="#option-distance"><code>distance</code></a> options are met prior to starting the interaction. When the interaction is ready to start, invokes the <a href="#method-_mouseStart"><code>_mouseStart()</code></a> method for the extending widget to handle.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the _mouseDown method:</p>
|
||||
<div class="syntaxhighlighter javascript nogutter">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="gutter">
|
||||
|
||||
<div class="line n1">1</div>
|
||||
|
||||
</td>
|
||||
<td class="code">
|
||||
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).mouse( <span class="string">"_mouseDown"</span> );</code></div></div></pre>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="method-_mouseDrag"><div class="api-item">
|
||||
<h3>_mouseDrag()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
|
||||
</h3>
|
||||
<div>
|
||||
The extending widget should implement a <code>_mouseDrag()</code> method to handle each movement of an interaction. This method will receive the mouse event associated with the movement.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the _mouseDrag method:</p>
|
||||
<div class="syntaxhighlighter javascript nogutter">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="gutter">
|
||||
|
||||
<div class="line n1">1</div>
|
||||
|
||||
</td>
|
||||
<td class="code">
|
||||
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).mouse( <span class="string">"_mouseDrag"</span> );</code></div></div></pre>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="method-_mouseInit"><div class="api-item">
|
||||
<h3>_mouseInit()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
|
||||
</h3>
|
||||
<div>
|
||||
Initializes the interaction event handlers. This must be called from the extending widget's <code>_create()</code> method.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the _mouseInit method:</p>
|
||||
<div class="syntaxhighlighter javascript nogutter">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="gutter">
|
||||
|
||||
<div class="line n1">1</div>
|
||||
|
||||
</td>
|
||||
<td class="code">
|
||||
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).mouse( <span class="string">"_mouseInit"</span> );</code></div></div></pre>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="method-_mouseMove"><div class="api-item">
|
||||
<h3>_mouseMove()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
|
||||
</h3>
|
||||
<div>
|
||||
Handles each movement of the interaction. Invokes the <a href="#method-_mouseDrag"><code>mouseDrag()</code></a> method for the extending widget to handle.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the _mouseMove method:</p>
|
||||
<div class="syntaxhighlighter javascript nogutter">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="gutter">
|
||||
|
||||
<div class="line n1">1</div>
|
||||
|
||||
</td>
|
||||
<td class="code">
|
||||
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).mouse( <span class="string">"_mouseMove"</span> );</code></div></div></pre>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="method-_mouseStart"><div class="api-item">
|
||||
<h3>_mouseStart()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
|
||||
</h3>
|
||||
<div>
|
||||
The extending widget should implement a <code>_mouseStart()</code> method to handle the beginning of an interaction. This method will receive the mouse event associated with the start of the interaction.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the _mouseStart method:</p>
|
||||
<div class="syntaxhighlighter javascript nogutter">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="gutter">
|
||||
|
||||
<div class="line n1">1</div>
|
||||
|
||||
</td>
|
||||
<td class="code">
|
||||
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).mouse( <span class="string">"_mouseStart"</span> );</code></div></div></pre>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="method-_mouseStop"><div class="api-item">
|
||||
<h3>_mouseStop()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
|
||||
</h3>
|
||||
<div>
|
||||
The extending widget should implement a <code>_mouseStop()</code> method to handle the end of an interaction. This method will receive the mouse event associated with the end of the interaction.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the _mouseStop method:</p>
|
||||
<div class="syntaxhighlighter javascript nogutter">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="gutter">
|
||||
|
||||
<div class="line n1">1</div>
|
||||
|
||||
</td>
|
||||
<td class="code">
|
||||
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).mouse( <span class="string">"_mouseStop"</span> );</code></div></div></pre>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div></div>
|
||||
<div id="method-_mouseUp"><div class="api-item">
|
||||
<h3>_mouseUp()<span class="returns">Returns: <a href="http://api.jquery.com/Types/#jQuery">jQuery</a> (<a href="http://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/">plugin only</a>)</span>
|
||||
</h3>
|
||||
<div>
|
||||
Handles the end of the interaction. Invokes the <a href="#method-_mouseStop"><code>mouseStop()</code></a> method for the extending widget to handle.
|
||||
</div>
|
||||
<ul><li><div class="null-signature">This method does not accept any arguments.</div></li></ul>
|
||||
<div>
|
||||
<strong>Code examples:</strong><p>Invoke the _mouseUp method:</p>
|
||||
<div class="syntaxhighlighter javascript nogutter">
|
||||
<table>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="gutter">
|
||||
|
||||
<div class="line n1">1</div>
|
||||
|
||||
</td>
|
||||
<td class="code">
|
||||
<pre><div class="container"><div class="line"><code>$( <span class="string">".selector"</span> ).mouse( <span class="string">"_mouseUp"</span> );</code></div></div></pre>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div></div></section>
|
||||
</div></article>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
+81
@@ -0,0 +1,81 @@
|
||||
/*
|
||||
* Globalize Culture de-DE
|
||||
*
|
||||
* http://github.com/jquery/globalize
|
||||
*
|
||||
* Copyright Software Freedom Conservancy, Inc.
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* This file was generated by the Globalize Culture Generator
|
||||
* Translation: bugs found in this file need to be fixed in the generator
|
||||
*/
|
||||
|
||||
(function( window, undefined ) {
|
||||
|
||||
var Globalize;
|
||||
|
||||
if ( typeof require !== "undefined"
|
||||
&& typeof exports !== "undefined"
|
||||
&& typeof module !== "undefined" ) {
|
||||
// Assume CommonJS
|
||||
Globalize = require( "globalize" );
|
||||
} else {
|
||||
// Global variable
|
||||
Globalize = window.Globalize;
|
||||
}
|
||||
|
||||
Globalize.addCultureInfo( "de-DE", "default", {
|
||||
name: "de-DE",
|
||||
englishName: "German (Germany)",
|
||||
nativeName: "Deutsch (Deutschland)",
|
||||
language: "de",
|
||||
numberFormat: {
|
||||
",": ".",
|
||||
".": ",",
|
||||
NaN: "n. def.",
|
||||
negativeInfinity: "-unendlich",
|
||||
positiveInfinity: "+unendlich",
|
||||
percent: {
|
||||
pattern: ["-n%","n%"],
|
||||
",": ".",
|
||||
".": ","
|
||||
},
|
||||
currency: {
|
||||
pattern: ["-n $","n $"],
|
||||
",": ".",
|
||||
".": ",",
|
||||
symbol: "€"
|
||||
}
|
||||
},
|
||||
calendars: {
|
||||
standard: {
|
||||
"/": ".",
|
||||
firstDay: 1,
|
||||
days: {
|
||||
names: ["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"],
|
||||
namesAbbr: ["So","Mo","Di","Mi","Do","Fr","Sa"],
|
||||
namesShort: ["So","Mo","Di","Mi","Do","Fr","Sa"]
|
||||
},
|
||||
months: {
|
||||
names: ["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember",""],
|
||||
namesAbbr: ["Jan","Feb","Mrz","Apr","Mai","Jun","Jul","Aug","Sep","Okt","Nov","Dez",""]
|
||||
},
|
||||
AM: null,
|
||||
PM: null,
|
||||
eras: [{"name":"n. Chr.","start":null,"offset":0}],
|
||||
patterns: {
|
||||
d: "dd.MM.yyyy",
|
||||
D: "dddd, d. MMMM yyyy",
|
||||
t: "HH:mm",
|
||||
T: "HH:mm:ss",
|
||||
f: "dddd, d. MMMM yyyy HH:mm",
|
||||
F: "dddd, d. MMMM yyyy HH:mm:ss",
|
||||
M: "dd MMMM",
|
||||
Y: "MMMM yyyy"
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}( this ));
|
||||
+100
@@ -0,0 +1,100 @@
|
||||
/*
|
||||
* Globalize Culture ja-JP
|
||||
*
|
||||
* http://github.com/jquery/globalize
|
||||
*
|
||||
* Copyright Software Freedom Conservancy, Inc.
|
||||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* This file was generated by the Globalize Culture Generator
|
||||
* Translation: bugs found in this file need to be fixed in the generator
|
||||
*/
|
||||
|
||||
(function( window, undefined ) {
|
||||
|
||||
var Globalize;
|
||||
|
||||
if ( typeof require !== "undefined"
|
||||
&& typeof exports !== "undefined"
|
||||
&& typeof module !== "undefined" ) {
|
||||
// Assume CommonJS
|
||||
Globalize = require( "globalize" );
|
||||
} else {
|
||||
// Global variable
|
||||
Globalize = window.Globalize;
|
||||
}
|
||||
|
||||
Globalize.addCultureInfo( "ja-JP", "default", {
|
||||
name: "ja-JP",
|
||||
englishName: "Japanese (Japan)",
|
||||
nativeName: "日本語 (日本)",
|
||||
language: "ja",
|
||||
numberFormat: {
|
||||
NaN: "NaN (非数値)",
|
||||
negativeInfinity: "-∞",
|
||||
positiveInfinity: "+∞",
|
||||
percent: {
|
||||
pattern: ["-n%","n%"]
|
||||
},
|
||||
currency: {
|
||||
pattern: ["-$n","$n"],
|
||||
decimals: 0,
|
||||
symbol: "¥"
|
||||
}
|
||||
},
|
||||
calendars: {
|
||||
standard: {
|
||||
days: {
|
||||
names: ["日曜日","月曜日","火曜日","水曜日","木曜日","金曜日","土曜日"],
|
||||
namesAbbr: ["日","月","火","水","木","金","土"],
|
||||
namesShort: ["日","月","火","水","木","金","土"]
|
||||
},
|
||||
months: {
|
||||
names: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月",""],
|
||||
namesAbbr: ["1","2","3","4","5","6","7","8","9","10","11","12",""]
|
||||
},
|
||||
AM: ["午前","午前","午前"],
|
||||
PM: ["午後","午後","午後"],
|
||||
eras: [{"name":"西暦","start":null,"offset":0}],
|
||||
patterns: {
|
||||
d: "yyyy/MM/dd",
|
||||
D: "yyyy'年'M'月'd'日'",
|
||||
t: "H:mm",
|
||||
T: "H:mm:ss",
|
||||
f: "yyyy'年'M'月'd'日' H:mm",
|
||||
F: "yyyy'年'M'月'd'日' H:mm:ss",
|
||||
M: "M'月'd'日'",
|
||||
Y: "yyyy'年'M'月'"
|
||||
}
|
||||
},
|
||||
Japanese: {
|
||||
name: "Japanese",
|
||||
days: {
|
||||
names: ["日曜日","月曜日","火曜日","水曜日","木曜日","金曜日","土曜日"],
|
||||
namesAbbr: ["日","月","火","水","木","金","土"],
|
||||
namesShort: ["日","月","火","水","木","金","土"]
|
||||
},
|
||||
months: {
|
||||
names: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月",""],
|
||||
namesAbbr: ["1","2","3","4","5","6","7","8","9","10","11","12",""]
|
||||
},
|
||||
AM: ["午前","午前","午前"],
|
||||
PM: ["午後","午後","午後"],
|
||||
eras: [{"name":"平成","start":null,"offset":1867},{"name":"昭和","start":-1812153600000,"offset":1911},{"name":"大正","start":-1357603200000,"offset":1925},{"name":"明治","start":60022080000,"offset":1988}],
|
||||
twoDigitYearMax: 99,
|
||||
patterns: {
|
||||
d: "gg y/M/d",
|
||||
D: "gg y'年'M'月'd'日'",
|
||||
t: "H:mm",
|
||||
T: "H:mm:ss",
|
||||
f: "gg y'年'M'月'd'日' H:mm",
|
||||
F: "gg y'年'M'月'd'日' H:mm:ss",
|
||||
M: "M'月'd'日'",
|
||||
Y: "gg y'年'M'月'"
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
}( this ));
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,101 @@
|
||||
/*! Copyright (c) 2013 Brandon Aaron (http://brandonaaron.net)
|
||||
* Licensed under the MIT License (LICENSE.txt).
|
||||
*
|
||||
* Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
|
||||
* Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
|
||||
* Thanks to: Seamus Leahy for adding deltaX and deltaY
|
||||
*
|
||||
* Version: 3.1.0
|
||||
*
|
||||
* Requires: 1.2.2+
|
||||
*/
|
||||
|
||||
(function (factory) {
|
||||
if (typeof define === 'function' && define.amd) {
|
||||
// AMD. Register as an anonymous module.
|
||||
define(['jquery'], factory);
|
||||
} else {
|
||||
// Browser globals
|
||||
factory(jQuery);
|
||||
}
|
||||
}(function ($) {
|
||||
|
||||
var toFix = ['wheel', 'mousewheel', 'DOMMouseScroll'];
|
||||
var toBind = 'onwheel' in document || document.documentMode >= 9 ? ['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'];
|
||||
var lowestDelta, lowestDeltaXY;
|
||||
|
||||
if ($.event.fixHooks) {
|
||||
for ( var i=toFix.length; i; ) {
|
||||
$.event.fixHooks[ toFix[--i] ] = $.event.mouseHooks;
|
||||
}
|
||||
}
|
||||
|
||||
$.event.special.mousewheel = {
|
||||
setup: function() {
|
||||
if ( this.addEventListener ) {
|
||||
for ( var i=toBind.length; i; ) {
|
||||
this.addEventListener( toBind[--i], handler, false );
|
||||
}
|
||||
} else {
|
||||
this.onmousewheel = handler;
|
||||
}
|
||||
},
|
||||
|
||||
teardown: function() {
|
||||
if ( this.removeEventListener ) {
|
||||
for ( var i=toBind.length; i; ) {
|
||||
this.removeEventListener( toBind[--i], handler, false );
|
||||
}
|
||||
} else {
|
||||
this.onmousewheel = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
$.fn.extend({
|
||||
mousewheel: function(fn) {
|
||||
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
|
||||
},
|
||||
|
||||
unmousewheel: function(fn) {
|
||||
return this.unbind("mousewheel", fn);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function handler(event) {
|
||||
var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, deltaX = 0, deltaY = 0, absDelta = 0, absDeltaXY = 0;
|
||||
event = $.event.fix(orgEvent);
|
||||
event.type = "mousewheel";
|
||||
|
||||
// Old school scrollwheel delta
|
||||
if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta; }
|
||||
if ( orgEvent.detail ) { delta = orgEvent.detail * -1; }
|
||||
|
||||
// New school wheel delta (wheel event)
|
||||
if ( orgEvent.deltaY ) {
|
||||
deltaY = orgEvent.deltaY * -1;
|
||||
delta = deltaY;
|
||||
}
|
||||
if ( orgEvent.deltaX ) {
|
||||
deltaX = orgEvent.deltaX;
|
||||
delta = deltaX * -1;
|
||||
}
|
||||
|
||||
// Webkit
|
||||
if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY; }
|
||||
if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = orgEvent.wheelDeltaX * -1; }
|
||||
|
||||
absDelta = Math.abs(delta);
|
||||
if ( !lowestDelta || absDelta < lowestDelta ) { lowestDelta = absDelta; }
|
||||
|
||||
absDeltaXY = Math.max( Math.abs(deltaY), Math.abs(deltaX) );
|
||||
if ( !lowestDeltaXY || absDeltaXY < lowestDeltaXY ) { lowestDeltaXY = absDeltaXY; }
|
||||
|
||||
// Add event and delta to the front of the arguments
|
||||
args.unshift(event, Math.floor(delta/lowestDelta), Math.floor(deltaX/lowestDeltaXY), Math.floor(deltaY/lowestDeltaXY));
|
||||
|
||||
return ($.event.dispatch || $.event.handle).apply(this, args);
|
||||
}
|
||||
|
||||
}));
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,244 @@
|
||||
/**
|
||||
* QUnit v1.11.0 - A JavaScript Unit Testing Framework
|
||||
*
|
||||
* http://qunitjs.com
|
||||
*
|
||||
* Copyright 2012 jQuery Foundation and other contributors
|
||||
* Released under the MIT license.
|
||||
* http://jquery.org/license
|
||||
*/
|
||||
|
||||
/** Font Family and Sizes */
|
||||
|
||||
#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult {
|
||||
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
|
||||
#qunit-tests { font-size: smaller; }
|
||||
|
||||
|
||||
/** Resets */
|
||||
|
||||
#qunit-tests, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult, #qunit-modulefilter {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
/** Header */
|
||||
|
||||
#qunit-header {
|
||||
padding: 0.5em 0 0.5em 1em;
|
||||
|
||||
color: #8699a4;
|
||||
background-color: #0d3349;
|
||||
|
||||
font-size: 1.5em;
|
||||
line-height: 1em;
|
||||
font-weight: normal;
|
||||
|
||||
border-radius: 5px 5px 0 0;
|
||||
-moz-border-radius: 5px 5px 0 0;
|
||||
-webkit-border-top-right-radius: 5px;
|
||||
-webkit-border-top-left-radius: 5px;
|
||||
}
|
||||
|
||||
#qunit-header a {
|
||||
text-decoration: none;
|
||||
color: #c2ccd1;
|
||||
}
|
||||
|
||||
#qunit-header a:hover,
|
||||
#qunit-header a:focus {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar label {
|
||||
display: inline-block;
|
||||
padding: 0 .5em 0 .1em;
|
||||
}
|
||||
|
||||
#qunit-banner {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar {
|
||||
padding: 0.5em 0 0.5em 2em;
|
||||
color: #5E740B;
|
||||
background-color: #eee;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#qunit-userAgent {
|
||||
padding: 0.5em 0 0.5em 2.5em;
|
||||
background-color: #2b81af;
|
||||
color: #fff;
|
||||
text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
|
||||
}
|
||||
|
||||
#qunit-modulefilter-container {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/** Tests: Pass/Fail */
|
||||
|
||||
#qunit-tests {
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
#qunit-tests li {
|
||||
padding: 0.4em 0.5em 0.4em 2.5em;
|
||||
border-bottom: 1px solid #fff;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
#qunit-tests.hidepass li.pass, #qunit-tests.hidepass li.running {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#qunit-tests li strong {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#qunit-tests li a {
|
||||
padding: 0.5em;
|
||||
color: #c2ccd1;
|
||||
text-decoration: none;
|
||||
}
|
||||
#qunit-tests li a:hover,
|
||||
#qunit-tests li a:focus {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#qunit-tests li .runtime {
|
||||
float: right;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.qunit-assert-list {
|
||||
margin-top: 0.5em;
|
||||
padding: 0.5em;
|
||||
|
||||
background-color: #fff;
|
||||
|
||||
border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
}
|
||||
|
||||
.qunit-collapsed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#qunit-tests table {
|
||||
border-collapse: collapse;
|
||||
margin-top: .2em;
|
||||
}
|
||||
|
||||
#qunit-tests th {
|
||||
text-align: right;
|
||||
vertical-align: top;
|
||||
padding: 0 .5em 0 0;
|
||||
}
|
||||
|
||||
#qunit-tests td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
#qunit-tests pre {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
#qunit-tests del {
|
||||
background-color: #e0f2be;
|
||||
color: #374e0c;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#qunit-tests ins {
|
||||
background-color: #ffcaca;
|
||||
color: #500;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*** Test Counts */
|
||||
|
||||
#qunit-tests b.counts { color: black; }
|
||||
#qunit-tests b.passed { color: #5E740B; }
|
||||
#qunit-tests b.failed { color: #710909; }
|
||||
|
||||
#qunit-tests li li {
|
||||
padding: 5px;
|
||||
background-color: #fff;
|
||||
border-bottom: none;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
/*** Passing Styles */
|
||||
|
||||
#qunit-tests li li.pass {
|
||||
color: #3c510c;
|
||||
background-color: #fff;
|
||||
border-left: 10px solid #C6E746;
|
||||
}
|
||||
|
||||
#qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; }
|
||||
#qunit-tests .pass .test-name { color: #366097; }
|
||||
|
||||
#qunit-tests .pass .test-actual,
|
||||
#qunit-tests .pass .test-expected { color: #999999; }
|
||||
|
||||
#qunit-banner.qunit-pass { background-color: #C6E746; }
|
||||
|
||||
/*** Failing Styles */
|
||||
|
||||
#qunit-tests li li.fail {
|
||||
color: #710909;
|
||||
background-color: #fff;
|
||||
border-left: 10px solid #EE5757;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
#qunit-tests > li:last-child {
|
||||
border-radius: 0 0 5px 5px;
|
||||
-moz-border-radius: 0 0 5px 5px;
|
||||
-webkit-border-bottom-right-radius: 5px;
|
||||
-webkit-border-bottom-left-radius: 5px;
|
||||
}
|
||||
|
||||
#qunit-tests .fail { color: #000000; background-color: #EE5757; }
|
||||
#qunit-tests .fail .test-name,
|
||||
#qunit-tests .fail .module-name { color: #000000; }
|
||||
|
||||
#qunit-tests .fail .test-actual { color: #EE5757; }
|
||||
#qunit-tests .fail .test-expected { color: green; }
|
||||
|
||||
#qunit-banner.qunit-fail { background-color: #EE5757; }
|
||||
|
||||
|
||||
/** Result */
|
||||
|
||||
#qunit-testresult {
|
||||
padding: 0.5em 0.5em 0.5em 2.5em;
|
||||
|
||||
color: #2b81af;
|
||||
background-color: #D2E0E6;
|
||||
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
#qunit-testresult .module-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/** Fixture */
|
||||
|
||||
#qunit-fixture {
|
||||
position: absolute;
|
||||
top: -10000px;
|
||||
left: -10000px;
|
||||
width: 1000px;
|
||||
height: 1000px;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,73 @@
|
||||
{
|
||||
"name": "jquery-ui",
|
||||
"title": "jQuery UI",
|
||||
"description": "A curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.",
|
||||
"version": "1.10.4",
|
||||
"homepage": "http://jqueryui.com",
|
||||
"author": {
|
||||
"name": "jQuery Foundation and other contributors",
|
||||
"url": "https://github.com/jquery/jquery-ui/blob/1.10.4/AUTHORS.txt"
|
||||
},
|
||||
"maintainers": [
|
||||
{
|
||||
"name": "Scott González",
|
||||
"email": "scott.gonzalez@gmail.com",
|
||||
"url": "http://scottgonzalez.com"
|
||||
},
|
||||
{
|
||||
"name": "Jörn Zaefferer",
|
||||
"email": "joern.zaefferer@gmail.com",
|
||||
"url": "http://bassistance.de"
|
||||
},
|
||||
{
|
||||
"name": "Kris Borchers",
|
||||
"email": "kris.borchers@gmail.com",
|
||||
"url": "http://krisborchers.com"
|
||||
},
|
||||
{
|
||||
"name": "Corey Frang",
|
||||
"email": "gnarf37@gmail.com",
|
||||
"url": "http://gnarf.net"
|
||||
},
|
||||
{
|
||||
"name": "Mike Sherov",
|
||||
"email": "mike.sherov@gmail.com",
|
||||
"url": "http://mike.sherov.com"
|
||||
},
|
||||
{
|
||||
"name": "TJ VanToll",
|
||||
"email": "tj.vantoll@gmail.com",
|
||||
"url": "http://tjvantoll.com"
|
||||
}
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git://github.com/jquery/jquery-ui.git"
|
||||
},
|
||||
"bugs": "http://bugs.jqueryui.com/",
|
||||
"licenses": [
|
||||
{
|
||||
"type": "MIT",
|
||||
"url": "https://github.com/jquery/jquery-ui/blob/1.10.4/MIT-LICENSE.txt"
|
||||
}
|
||||
],
|
||||
"scripts": {
|
||||
"test": "grunt"
|
||||
},
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"grunt": "0.4.1",
|
||||
"grunt-contrib-jshint": "0.7.1",
|
||||
"grunt-contrib-uglify": "0.1.1",
|
||||
"grunt-contrib-concat": "0.1.3",
|
||||
"grunt-contrib-qunit": "0.2.0",
|
||||
"grunt-contrib-csslint": "0.1.1",
|
||||
"grunt-contrib-cssmin": "0.4.2",
|
||||
"grunt-compare-size": "0.4.0-rc.3",
|
||||
"grunt-html": "0.3.3",
|
||||
"grunt-git-authors": "1.2.0",
|
||||
"rimraf": "2.1.4",
|
||||
"testswarm": "1.1.0"
|
||||
},
|
||||
"keywords": []
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user