copy dari repo om Irfan
This commit is contained in:
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 418 B |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 312 B |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 205 B |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 262 B |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 348 B |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 207 B |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 278 B |
BIN
Binary file not shown.
|
After Width: | Height: | Size: 328 B |
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
@@ -0,0 +1,775 @@
|
||||
/*! jQuery UI - v1.10.4 - 2014-04-08
|
||||
* http://jqueryui.com
|
||||
* Includes: jquery.ui.core.css, jquery.ui.resizable.css, jquery.ui.button.css, jquery.ui.slider.css, jquery.ui.spinner.css, jquery.ui.theme.css
|
||||
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Trebuchet%20MS%2CTahoma%2CVerdana%2CArial%2Csans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=f6a828&bgTextureHeader=gloss_wave&bgImgOpacityHeader=35&borderColorHeader=e78f08&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=eeeeee&bgTextureContent=highlight_soft&bgImgOpacityContent=100&borderColorContent=dddddd&fcContent=333333&iconColorContent=222222&bgColorDefault=f6f6f6&bgTextureDefault=glass&bgImgOpacityDefault=100&borderColorDefault=cccccc&fcDefault=1c94c4&iconColorDefault=ef8c08&bgColorHover=fdf5ce&bgTextureHover=glass&bgImgOpacityHover=100&borderColorHover=fbcb09&fcHover=c77405&iconColorHover=ef8c08&bgColorActive=ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=fbd850&fcActive=eb8f00&iconColorActive=ef8c08&bgColorHighlight=ffe45c&bgTextureHighlight=highlight_soft&bgImgOpacityHighlight=75&borderColorHighlight=fed22f&fcHighlight=363636&iconColorHighlight=228ef1&bgColorError=b81900&bgTextureError=diagonals_thick&bgImgOpacityError=18&borderColorError=cd0a0a&fcError=ffffff&iconColorError=ffd27a&bgColorOverlay=666666&bgTextureOverlay=diagonals_thick&bgImgOpacityOverlay=20&opacityOverlay=50&bgColorShadow=000000&bgTextureShadow=flat&bgImgOpacityShadow=10&opacityShadow=20&thicknessShadow=5px&offsetTopShadow=-5px&offsetLeftShadow=-5px&cornerRadiusShadow=5px
|
||||
* Copyright 2014 jQuery Foundation and other contributors; Licensed MIT */
|
||||
|
||||
/* Layout helpers
|
||||
----------------------------------*/
|
||||
.ui-helper-hidden {
|
||||
display: none;
|
||||
}
|
||||
.ui-helper-hidden-accessible {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
.ui-helper-reset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
line-height: 1.3;
|
||||
text-decoration: none;
|
||||
font-size: 100%;
|
||||
list-style: none;
|
||||
}
|
||||
.ui-helper-clearfix:before,
|
||||
.ui-helper-clearfix:after {
|
||||
content: "";
|
||||
display: table;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.ui-helper-clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
.ui-helper-clearfix {
|
||||
min-height: 0; /* support: IE7 */
|
||||
}
|
||||
.ui-helper-zfix {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
filter:Alpha(Opacity=0);
|
||||
}
|
||||
|
||||
.ui-front {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
|
||||
/* Interaction Cues
|
||||
----------------------------------*/
|
||||
.ui-state-disabled {
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
|
||||
/* Icons
|
||||
----------------------------------*/
|
||||
|
||||
/* states and images */
|
||||
.ui-icon {
|
||||
display: block;
|
||||
text-indent: -99999px;
|
||||
overflow: hidden;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
|
||||
/* Misc visuals
|
||||
----------------------------------*/
|
||||
|
||||
/* Overlays */
|
||||
.ui-widget-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.ui-resizable {
|
||||
position: relative;
|
||||
}
|
||||
.ui-resizable-handle {
|
||||
position: absolute;
|
||||
font-size: 0.1px;
|
||||
display: block;
|
||||
}
|
||||
.ui-resizable-disabled .ui-resizable-handle,
|
||||
.ui-resizable-autohide .ui-resizable-handle {
|
||||
display: none;
|
||||
}
|
||||
.ui-resizable-n {
|
||||
cursor: n-resize;
|
||||
height: 7px;
|
||||
width: 100%;
|
||||
top: -5px;
|
||||
left: 0;
|
||||
}
|
||||
.ui-resizable-s {
|
||||
cursor: s-resize;
|
||||
height: 7px;
|
||||
width: 100%;
|
||||
bottom: -5px;
|
||||
left: 0;
|
||||
}
|
||||
.ui-resizable-e {
|
||||
cursor: e-resize;
|
||||
width: 7px;
|
||||
right: -5px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.ui-resizable-w {
|
||||
cursor: w-resize;
|
||||
width: 7px;
|
||||
left: -5px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.ui-resizable-se {
|
||||
cursor: se-resize;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
right: 1px;
|
||||
bottom: 1px;
|
||||
}
|
||||
.ui-resizable-sw {
|
||||
cursor: sw-resize;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
left: -5px;
|
||||
bottom: -5px;
|
||||
}
|
||||
.ui-resizable-nw {
|
||||
cursor: nw-resize;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
left: -5px;
|
||||
top: -5px;
|
||||
}
|
||||
.ui-resizable-ne {
|
||||
cursor: ne-resize;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
right: -5px;
|
||||
top: -5px;
|
||||
}
|
||||
.ui-button {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
line-height: normal;
|
||||
margin-right: .1em;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
overflow: visible; /* removes extra width in IE */
|
||||
}
|
||||
.ui-button,
|
||||
.ui-button:link,
|
||||
.ui-button:visited,
|
||||
.ui-button:hover,
|
||||
.ui-button:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
/* to make room for the icon, a width needs to be set here */
|
||||
.ui-button-icon-only {
|
||||
width: 2.2em;
|
||||
}
|
||||
/* button elements seem to need a little more width */
|
||||
button.ui-button-icon-only {
|
||||
width: 2.4em;
|
||||
}
|
||||
.ui-button-icons-only {
|
||||
width: 3.4em;
|
||||
}
|
||||
button.ui-button-icons-only {
|
||||
width: 3.7em;
|
||||
}
|
||||
|
||||
/* button text element */
|
||||
.ui-button .ui-button-text {
|
||||
display: block;
|
||||
line-height: normal;
|
||||
}
|
||||
.ui-button-text-only .ui-button-text {
|
||||
padding: .4em 1em;
|
||||
}
|
||||
.ui-button-icon-only .ui-button-text,
|
||||
.ui-button-icons-only .ui-button-text {
|
||||
padding: .4em;
|
||||
text-indent: -9999999px;
|
||||
}
|
||||
.ui-button-text-icon-primary .ui-button-text,
|
||||
.ui-button-text-icons .ui-button-text {
|
||||
padding: .4em 1em .4em 2.1em;
|
||||
}
|
||||
.ui-button-text-icon-secondary .ui-button-text,
|
||||
.ui-button-text-icons .ui-button-text {
|
||||
padding: .4em 2.1em .4em 1em;
|
||||
}
|
||||
.ui-button-text-icons .ui-button-text {
|
||||
padding-left: 2.1em;
|
||||
padding-right: 2.1em;
|
||||
}
|
||||
/* no icon support for input elements, provide padding by default */
|
||||
input.ui-button {
|
||||
padding: .4em 1em;
|
||||
}
|
||||
|
||||
/* button icon element(s) */
|
||||
.ui-button-icon-only .ui-icon,
|
||||
.ui-button-text-icon-primary .ui-icon,
|
||||
.ui-button-text-icon-secondary .ui-icon,
|
||||
.ui-button-text-icons .ui-icon,
|
||||
.ui-button-icons-only .ui-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -8px;
|
||||
}
|
||||
.ui-button-icon-only .ui-icon {
|
||||
left: 50%;
|
||||
margin-left: -8px;
|
||||
}
|
||||
.ui-button-text-icon-primary .ui-button-icon-primary,
|
||||
.ui-button-text-icons .ui-button-icon-primary,
|
||||
.ui-button-icons-only .ui-button-icon-primary {
|
||||
left: .5em;
|
||||
}
|
||||
.ui-button-text-icon-secondary .ui-button-icon-secondary,
|
||||
.ui-button-text-icons .ui-button-icon-secondary,
|
||||
.ui-button-icons-only .ui-button-icon-secondary {
|
||||
right: .5em;
|
||||
}
|
||||
|
||||
/* button sets */
|
||||
.ui-buttonset {
|
||||
margin-right: 7px;
|
||||
}
|
||||
.ui-buttonset .ui-button {
|
||||
margin-left: 0;
|
||||
margin-right: -.3em;
|
||||
}
|
||||
|
||||
/* workarounds */
|
||||
/* reset extra padding in Firefox, see h5bp.com/l */
|
||||
input.ui-button::-moz-focus-inner,
|
||||
button.ui-button::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.ui-slider {
|
||||
position: relative;
|
||||
text-align: left;
|
||||
}
|
||||
.ui-slider .ui-slider-handle {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
cursor: default;
|
||||
}
|
||||
.ui-slider .ui-slider-range {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
font-size: .7em;
|
||||
display: block;
|
||||
border: 0;
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
/* For IE8 - See #6727 */
|
||||
.ui-slider.ui-state-disabled .ui-slider-handle,
|
||||
.ui-slider.ui-state-disabled .ui-slider-range {
|
||||
filter: inherit;
|
||||
}
|
||||
|
||||
.ui-slider-horizontal {
|
||||
height: .8em;
|
||||
}
|
||||
.ui-slider-horizontal .ui-slider-handle {
|
||||
top: -.3em;
|
||||
margin-left: -.6em;
|
||||
}
|
||||
.ui-slider-horizontal .ui-slider-range {
|
||||
top: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.ui-slider-horizontal .ui-slider-range-min {
|
||||
left: 0;
|
||||
}
|
||||
.ui-slider-horizontal .ui-slider-range-max {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.ui-slider-vertical {
|
||||
width: .8em;
|
||||
height: 100px;
|
||||
}
|
||||
.ui-slider-vertical .ui-slider-handle {
|
||||
left: -.3em;
|
||||
margin-left: 0;
|
||||
margin-bottom: -.6em;
|
||||
}
|
||||
.ui-slider-vertical .ui-slider-range {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.ui-slider-vertical .ui-slider-range-min {
|
||||
bottom: 0;
|
||||
}
|
||||
.ui-slider-vertical .ui-slider-range-max {
|
||||
top: 0;
|
||||
}
|
||||
.ui-spinner {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.ui-spinner-input {
|
||||
border: none;
|
||||
background: none;
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
margin: .2em 0;
|
||||
vertical-align: middle;
|
||||
margin-left: .4em;
|
||||
margin-right: 22px;
|
||||
}
|
||||
.ui-spinner-button {
|
||||
width: 16px;
|
||||
height: 50%;
|
||||
font-size: .5em;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
cursor: default;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
right: 0;
|
||||
}
|
||||
/* more specificity required here to override default borders */
|
||||
.ui-spinner a.ui-spinner-button {
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
border-right: none;
|
||||
}
|
||||
/* vertically center icon */
|
||||
.ui-spinner .ui-icon {
|
||||
position: absolute;
|
||||
margin-top: -8px;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
}
|
||||
.ui-spinner-up {
|
||||
top: 0;
|
||||
}
|
||||
.ui-spinner-down {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/* TR overrides */
|
||||
.ui-spinner .ui-icon-triangle-1-s {
|
||||
/* need to fix icons sprite */
|
||||
background-position: -65px -16px;
|
||||
}
|
||||
|
||||
/* Component containers
|
||||
----------------------------------*/
|
||||
.ui-widget {
|
||||
font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
.ui-widget .ui-widget {
|
||||
font-size: 1em;
|
||||
}
|
||||
.ui-widget input,
|
||||
.ui-widget select,
|
||||
.ui-widget textarea,
|
||||
.ui-widget button {
|
||||
font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
|
||||
font-size: 1em;
|
||||
}
|
||||
.ui-widget-content {
|
||||
border: 1px solid #dddddd;
|
||||
background: #eeeeee url("images/ui-bg_highlight-soft_100_eeeeee_1x100.png") 50% top repeat-x;
|
||||
color: #333333;
|
||||
}
|
||||
.ui-widget-content a {
|
||||
color: #333333;
|
||||
}
|
||||
.ui-widget-header {
|
||||
border: 1px solid #e78f08;
|
||||
background: #f6a828 url("images/ui-bg_gloss-wave_35_f6a828_500x100.png") 50% 50% repeat-x;
|
||||
color: #ffffff;
|
||||
font-weight: bold;
|
||||
}
|
||||
.ui-widget-header a {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Interaction states
|
||||
----------------------------------*/
|
||||
.ui-state-default,
|
||||
.ui-widget-content .ui-state-default,
|
||||
.ui-widget-header .ui-state-default {
|
||||
border: 1px solid #cccccc;
|
||||
background: #f6f6f6 url("images/ui-bg_glass_100_f6f6f6_1x400.png") 50% 50% repeat-x;
|
||||
font-weight: bold;
|
||||
color: #1c94c4;
|
||||
}
|
||||
.ui-state-default a,
|
||||
.ui-state-default a:link,
|
||||
.ui-state-default a:visited {
|
||||
color: #1c94c4;
|
||||
text-decoration: none;
|
||||
}
|
||||
.ui-state-hover,
|
||||
.ui-widget-content .ui-state-hover,
|
||||
.ui-widget-header .ui-state-hover,
|
||||
.ui-state-focus,
|
||||
.ui-widget-content .ui-state-focus,
|
||||
.ui-widget-header .ui-state-focus {
|
||||
border: 1px solid #fbcb09;
|
||||
background: #fdf5ce url("images/ui-bg_glass_100_fdf5ce_1x400.png") 50% 50% repeat-x;
|
||||
font-weight: bold;
|
||||
color: #c77405;
|
||||
}
|
||||
.ui-state-hover a,
|
||||
.ui-state-hover a:hover,
|
||||
.ui-state-hover a:link,
|
||||
.ui-state-hover a:visited,
|
||||
.ui-state-focus a,
|
||||
.ui-state-focus a:hover,
|
||||
.ui-state-focus a:link,
|
||||
.ui-state-focus a:visited {
|
||||
color: #c77405;
|
||||
text-decoration: none;
|
||||
}
|
||||
.ui-state-active,
|
||||
.ui-widget-content .ui-state-active,
|
||||
.ui-widget-header .ui-state-active {
|
||||
border: 1px solid #fbd850;
|
||||
background: #ffffff url("images/ui-bg_glass_65_ffffff_1x400.png") 50% 50% repeat-x;
|
||||
font-weight: bold;
|
||||
color: #eb8f00;
|
||||
}
|
||||
.ui-state-active a,
|
||||
.ui-state-active a:link,
|
||||
.ui-state-active a:visited {
|
||||
color: #eb8f00;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* Interaction Cues
|
||||
----------------------------------*/
|
||||
.ui-state-highlight,
|
||||
.ui-widget-content .ui-state-highlight,
|
||||
.ui-widget-header .ui-state-highlight {
|
||||
border: 1px solid #fed22f;
|
||||
background: #ffe45c url("images/ui-bg_highlight-soft_75_ffe45c_1x100.png") 50% top repeat-x;
|
||||
color: #363636;
|
||||
}
|
||||
.ui-state-highlight a,
|
||||
.ui-widget-content .ui-state-highlight a,
|
||||
.ui-widget-header .ui-state-highlight a {
|
||||
color: #363636;
|
||||
}
|
||||
.ui-state-error,
|
||||
.ui-widget-content .ui-state-error,
|
||||
.ui-widget-header .ui-state-error {
|
||||
border: 1px solid #cd0a0a;
|
||||
background: #b81900 url("images/ui-bg_diagonals-thick_18_b81900_40x40.png") 50% 50% repeat;
|
||||
color: #ffffff;
|
||||
}
|
||||
.ui-state-error a,
|
||||
.ui-widget-content .ui-state-error a,
|
||||
.ui-widget-header .ui-state-error a {
|
||||
color: #ffffff;
|
||||
}
|
||||
.ui-state-error-text,
|
||||
.ui-widget-content .ui-state-error-text,
|
||||
.ui-widget-header .ui-state-error-text {
|
||||
color: #ffffff;
|
||||
}
|
||||
.ui-priority-primary,
|
||||
.ui-widget-content .ui-priority-primary,
|
||||
.ui-widget-header .ui-priority-primary {
|
||||
font-weight: bold;
|
||||
}
|
||||
.ui-priority-secondary,
|
||||
.ui-widget-content .ui-priority-secondary,
|
||||
.ui-widget-header .ui-priority-secondary {
|
||||
opacity: .7;
|
||||
filter:Alpha(Opacity=70);
|
||||
font-weight: normal;
|
||||
}
|
||||
.ui-state-disabled,
|
||||
.ui-widget-content .ui-state-disabled,
|
||||
.ui-widget-header .ui-state-disabled {
|
||||
opacity: .35;
|
||||
filter:Alpha(Opacity=35);
|
||||
background-image: none;
|
||||
}
|
||||
.ui-state-disabled .ui-icon {
|
||||
filter:Alpha(Opacity=35); /* For IE8 - See #6059 */
|
||||
}
|
||||
|
||||
/* Icons
|
||||
----------------------------------*/
|
||||
|
||||
/* states and images */
|
||||
.ui-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
.ui-icon,
|
||||
.ui-widget-content .ui-icon {
|
||||
background-image: url("images/ui-icons_222222_256x240.png");
|
||||
}
|
||||
.ui-widget-header .ui-icon {
|
||||
background-image: url("images/ui-icons_ffffff_256x240.png");
|
||||
}
|
||||
.ui-state-default .ui-icon {
|
||||
background-image: url("images/ui-icons_ef8c08_256x240.png");
|
||||
}
|
||||
.ui-state-hover .ui-icon,
|
||||
.ui-state-focus .ui-icon {
|
||||
background-image: url("images/ui-icons_ef8c08_256x240.png");
|
||||
}
|
||||
.ui-state-active .ui-icon {
|
||||
background-image: url("images/ui-icons_ef8c08_256x240.png");
|
||||
}
|
||||
.ui-state-highlight .ui-icon {
|
||||
background-image: url("images/ui-icons_228ef1_256x240.png");
|
||||
}
|
||||
.ui-state-error .ui-icon,
|
||||
.ui-state-error-text .ui-icon {
|
||||
background-image: url("images/ui-icons_ffd27a_256x240.png");
|
||||
}
|
||||
|
||||
/* positioning */
|
||||
.ui-icon-blank { background-position: 16px 16px; }
|
||||
.ui-icon-carat-1-n { background-position: 0 0; }
|
||||
.ui-icon-carat-1-ne { background-position: -16px 0; }
|
||||
.ui-icon-carat-1-e { background-position: -32px 0; }
|
||||
.ui-icon-carat-1-se { background-position: -48px 0; }
|
||||
.ui-icon-carat-1-s { background-position: -64px 0; }
|
||||
.ui-icon-carat-1-sw { background-position: -80px 0; }
|
||||
.ui-icon-carat-1-w { background-position: -96px 0; }
|
||||
.ui-icon-carat-1-nw { background-position: -112px 0; }
|
||||
.ui-icon-carat-2-n-s { background-position: -128px 0; }
|
||||
.ui-icon-carat-2-e-w { background-position: -144px 0; }
|
||||
.ui-icon-triangle-1-n { background-position: 0 -16px; }
|
||||
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
|
||||
.ui-icon-triangle-1-e { background-position: -32px -16px; }
|
||||
.ui-icon-triangle-1-se { background-position: -48px -16px; }
|
||||
.ui-icon-triangle-1-s { background-position: -64px -16px; }
|
||||
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
|
||||
.ui-icon-triangle-1-w { background-position: -96px -16px; }
|
||||
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
|
||||
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
|
||||
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
|
||||
.ui-icon-arrow-1-n { background-position: 0 -32px; }
|
||||
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
|
||||
.ui-icon-arrow-1-e { background-position: -32px -32px; }
|
||||
.ui-icon-arrow-1-se { background-position: -48px -32px; }
|
||||
.ui-icon-arrow-1-s { background-position: -64px -32px; }
|
||||
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
|
||||
.ui-icon-arrow-1-w { background-position: -96px -32px; }
|
||||
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
|
||||
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
|
||||
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
|
||||
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
|
||||
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
|
||||
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
|
||||
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
|
||||
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
|
||||
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
|
||||
.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
|
||||
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
|
||||
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
|
||||
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
|
||||
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
|
||||
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
|
||||
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
|
||||
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
|
||||
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
|
||||
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
|
||||
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
|
||||
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
|
||||
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
|
||||
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
|
||||
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
|
||||
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
|
||||
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
|
||||
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
|
||||
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
|
||||
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
|
||||
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
|
||||
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
|
||||
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
|
||||
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
|
||||
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
|
||||
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
|
||||
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
|
||||
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
|
||||
.ui-icon-arrow-4 { background-position: 0 -80px; }
|
||||
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
|
||||
.ui-icon-extlink { background-position: -32px -80px; }
|
||||
.ui-icon-newwin { background-position: -48px -80px; }
|
||||
.ui-icon-refresh { background-position: -64px -80px; }
|
||||
.ui-icon-shuffle { background-position: -80px -80px; }
|
||||
.ui-icon-transfer-e-w { background-position: -96px -80px; }
|
||||
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
|
||||
.ui-icon-folder-collapsed { background-position: 0 -96px; }
|
||||
.ui-icon-folder-open { background-position: -16px -96px; }
|
||||
.ui-icon-document { background-position: -32px -96px; }
|
||||
.ui-icon-document-b { background-position: -48px -96px; }
|
||||
.ui-icon-note { background-position: -64px -96px; }
|
||||
.ui-icon-mail-closed { background-position: -80px -96px; }
|
||||
.ui-icon-mail-open { background-position: -96px -96px; }
|
||||
.ui-icon-suitcase { background-position: -112px -96px; }
|
||||
.ui-icon-comment { background-position: -128px -96px; }
|
||||
.ui-icon-person { background-position: -144px -96px; }
|
||||
.ui-icon-print { background-position: -160px -96px; }
|
||||
.ui-icon-trash { background-position: -176px -96px; }
|
||||
.ui-icon-locked { background-position: -192px -96px; }
|
||||
.ui-icon-unlocked { background-position: -208px -96px; }
|
||||
.ui-icon-bookmark { background-position: -224px -96px; }
|
||||
.ui-icon-tag { background-position: -240px -96px; }
|
||||
.ui-icon-home { background-position: 0 -112px; }
|
||||
.ui-icon-flag { background-position: -16px -112px; }
|
||||
.ui-icon-calendar { background-position: -32px -112px; }
|
||||
.ui-icon-cart { background-position: -48px -112px; }
|
||||
.ui-icon-pencil { background-position: -64px -112px; }
|
||||
.ui-icon-clock { background-position: -80px -112px; }
|
||||
.ui-icon-disk { background-position: -96px -112px; }
|
||||
.ui-icon-calculator { background-position: -112px -112px; }
|
||||
.ui-icon-zoomin { background-position: -128px -112px; }
|
||||
.ui-icon-zoomout { background-position: -144px -112px; }
|
||||
.ui-icon-search { background-position: -160px -112px; }
|
||||
.ui-icon-wrench { background-position: -176px -112px; }
|
||||
.ui-icon-gear { background-position: -192px -112px; }
|
||||
.ui-icon-heart { background-position: -208px -112px; }
|
||||
.ui-icon-star { background-position: -224px -112px; }
|
||||
.ui-icon-link { background-position: -240px -112px; }
|
||||
.ui-icon-cancel { background-position: 0 -128px; }
|
||||
.ui-icon-plus { background-position: -16px -128px; }
|
||||
.ui-icon-plusthick { background-position: -32px -128px; }
|
||||
.ui-icon-minus { background-position: -48px -128px; }
|
||||
.ui-icon-minusthick { background-position: -64px -128px; }
|
||||
.ui-icon-close { background-position: -80px -128px; }
|
||||
.ui-icon-closethick { background-position: -96px -128px; }
|
||||
.ui-icon-key { background-position: -112px -128px; }
|
||||
.ui-icon-lightbulb { background-position: -128px -128px; }
|
||||
.ui-icon-scissors { background-position: -144px -128px; }
|
||||
.ui-icon-clipboard { background-position: -160px -128px; }
|
||||
.ui-icon-copy { background-position: -176px -128px; }
|
||||
.ui-icon-contact { background-position: -192px -128px; }
|
||||
.ui-icon-image { background-position: -208px -128px; }
|
||||
.ui-icon-video { background-position: -224px -128px; }
|
||||
.ui-icon-script { background-position: -240px -128px; }
|
||||
.ui-icon-alert { background-position: 0 -144px; }
|
||||
.ui-icon-info { background-position: -16px -144px; }
|
||||
.ui-icon-notice { background-position: -32px -144px; }
|
||||
.ui-icon-help { background-position: -48px -144px; }
|
||||
.ui-icon-check { background-position: -64px -144px; }
|
||||
.ui-icon-bullet { background-position: -80px -144px; }
|
||||
.ui-icon-radio-on { background-position: -96px -144px; }
|
||||
.ui-icon-radio-off { background-position: -112px -144px; }
|
||||
.ui-icon-pin-w { background-position: -128px -144px; }
|
||||
.ui-icon-pin-s { background-position: -144px -144px; }
|
||||
.ui-icon-play { background-position: 0 -160px; }
|
||||
.ui-icon-pause { background-position: -16px -160px; }
|
||||
.ui-icon-seek-next { background-position: -32px -160px; }
|
||||
.ui-icon-seek-prev { background-position: -48px -160px; }
|
||||
.ui-icon-seek-end { background-position: -64px -160px; }
|
||||
.ui-icon-seek-start { background-position: -80px -160px; }
|
||||
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
|
||||
.ui-icon-seek-first { background-position: -80px -160px; }
|
||||
.ui-icon-stop { background-position: -96px -160px; }
|
||||
.ui-icon-eject { background-position: -112px -160px; }
|
||||
.ui-icon-volume-off { background-position: -128px -160px; }
|
||||
.ui-icon-volume-on { background-position: -144px -160px; }
|
||||
.ui-icon-power { background-position: 0 -176px; }
|
||||
.ui-icon-signal-diag { background-position: -16px -176px; }
|
||||
.ui-icon-signal { background-position: -32px -176px; }
|
||||
.ui-icon-battery-0 { background-position: -48px -176px; }
|
||||
.ui-icon-battery-1 { background-position: -64px -176px; }
|
||||
.ui-icon-battery-2 { background-position: -80px -176px; }
|
||||
.ui-icon-battery-3 { background-position: -96px -176px; }
|
||||
.ui-icon-circle-plus { background-position: 0 -192px; }
|
||||
.ui-icon-circle-minus { background-position: -16px -192px; }
|
||||
.ui-icon-circle-close { background-position: -32px -192px; }
|
||||
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
|
||||
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
|
||||
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
|
||||
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
|
||||
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
|
||||
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
|
||||
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
|
||||
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
|
||||
.ui-icon-circle-zoomin { background-position: -176px -192px; }
|
||||
.ui-icon-circle-zoomout { background-position: -192px -192px; }
|
||||
.ui-icon-circle-check { background-position: -208px -192px; }
|
||||
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
|
||||
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
|
||||
.ui-icon-circlesmall-close { background-position: -32px -208px; }
|
||||
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
|
||||
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
|
||||
.ui-icon-squaresmall-close { background-position: -80px -208px; }
|
||||
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
|
||||
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
|
||||
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
|
||||
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
|
||||
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
|
||||
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
|
||||
|
||||
|
||||
/* Misc visuals
|
||||
----------------------------------*/
|
||||
|
||||
/* Corner radius */
|
||||
.ui-corner-all,
|
||||
.ui-corner-top,
|
||||
.ui-corner-left,
|
||||
.ui-corner-tl {
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
.ui-corner-all,
|
||||
.ui-corner-top,
|
||||
.ui-corner-right,
|
||||
.ui-corner-tr {
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
.ui-corner-all,
|
||||
.ui-corner-bottom,
|
||||
.ui-corner-left,
|
||||
.ui-corner-bl {
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
.ui-corner-all,
|
||||
.ui-corner-bottom,
|
||||
.ui-corner-right,
|
||||
.ui-corner-br {
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
/* Overlays */
|
||||
.ui-widget-overlay {
|
||||
background: #666666 url("images/ui-bg_diagonals-thick_20_666666_40x40.png") 50% 50% repeat;
|
||||
opacity: .5;
|
||||
filter: Alpha(Opacity=50);
|
||||
}
|
||||
.ui-widget-shadow {
|
||||
margin: -5px 0 0 -5px;
|
||||
padding: 5px;
|
||||
background: #000000 url("images/ui-bg_flat_10_000000_40x100.png") 50% 50% repeat-x;
|
||||
opacity: .2;
|
||||
filter: Alpha(Opacity=20);
|
||||
border-radius: 5px;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
@@ -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>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user