position

position demo

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>position demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <style>
  #targetElement {
    height: 200px;
    margin: 50px;
    background: #9cf;
  }
  .positionDiv {
    position: absolute;
    width: 75px;
    height: 75px;
    background: #080;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
 
<div id="targetElement">
  <div class="positionDiv" id="position1"></div>
  <div class="positionDiv" id="position2"></div>
  <div class="positionDiv" id="position3"></div>
  <div class="positionDiv" id="position4"></div>
</div>
 
<script>
$( "#position1" ).position({
  my: "center",
  at: "center",
  of: "#targetElement"
});
 
$( "#position2" ).position({
  my: "left top",
  at: "left top",
  of: "#targetElement"
});
 
$( "#position3" ).position({
  my: "right center",
  at: "right bottom",
  of: "#targetElement"
});
 
$( document ).mousemove(function( event ) {
  $( "#position4" ).position({
    my: "left+3 bottom-3",
    of: event,
    collision: "fit"
  });
});
</script>
 
</body>
</html>

Selectmenu

jQuery UI Selectmenu - Default functionality

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Selectmenu - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#speed" ).selectmenu();
 
    $( "#files" ).selectmenu();
 
    $( "#number" )
      .selectmenu()
      .selectmenu( "menuWidget" )
        .addClass( "overflow" );
  });
  </script>
  <style>
    fieldset {
      border: 0;
    }
    label {
      display: block;
      margin: 30px 0 0 0;
    }
    select {
      width: 200px;
    }
    .overflow {
      height: 200px;
    }
  </style>
</head>
<body>
 
<div class="demo">
 
<form action="#">
 
  <fieldset>
    <label for="speed">Select a speed</label>
    <select name="speed" id="speed">
      <option>Slower</option>
      <option>Slow</option>
      <option selected="selected">Medium</option>
      <option>Fast</option>
      <option>Faster</option>
    </select>
 
    <label for="files">Select a file</label>
    <select name="files" id="files">
      <optgroup label="Scripts">
        <option value="jquery">jQuery.js</option>
        <option value="jqueryui">ui.jQuery.js</option>
      </optgroup>
      <optgroup label="Other files">
        <option value="somefile">Some unknown file</option>
        <option value="someotherfile">Some other file with a very long option text</option>
      </optgroup>
    </select>
 
    <label for="number">Select a number</label>
    <select name="number" id="number">
      <option>1</option>
      <option selected="selected">2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
      <option>11</option>
      <option>12</option>
      <option>13</option>
      <option>14</option>
      <option>15</option>
      <option>16</option>
      <option>17</option>
      <option>18</option>
      <option>19</option>
    </select>
  </fieldset>
 
</form>
 
</div>
 
 
</body>
</html>

A simple jQuery UI Indeterminate Progressbar

A simple jQuery UI Indeterminate Progressbar 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 progressbar demo

The jQuery UI Slider plugin

slider demo

jQuery
jQuery UI
jQuery Mobile
Sizzle
QUnit
Plugins
Contribute
Events
Support
jQuery Foundation
jQuery UI API Documentation
CSS Dev Conf 2015
Demos
Download
API Documentation
Themes
Development
Support
Blog
About
search Search jQuery UI API Documentation
Slider Widget
Categories: Widgets
Slider Widgetversion added: 1.5
Description: Drag a handle to select a numeric value.

QuickNavExamples
Options

animate
disabled
max
min
orientation
range
step
value
values
Methods

destroy
disable
enable
instance
option
value
values
widget
Events

change
create
slide
start
stop
The jQuery UI Slider plugin makes selected elements into sliders. There are various options such as multiple handles and ranges. The handle can be moved with the mouse or the arrow keys.

The slider widget will create handle elements with the class ui-slider-handle on initialization. You can specify custom handle elements by creating and appending the elements and adding the ui-slider-handle class before initialization. It will only create the number of handles needed to match the length of value/values. For example, if you specify values: [ 1, 5, 18 ] and create one custom handle, the plugin will create the other two.

Theming

The slider widget uses the jQuery UI CSS framework to style its look and feel. If slider specific styling is needed, the following CSS class names can be used:

ui-slider: The track of the slider control. This element will additionally have a class name of ui-slider-horizontal or ui-slider-vertical depending on the orientation of the slider.
ui-slider-handle: The slider handles.
ui-slider-range: The selected range used when the range option is set. This element can additionally have a class of ui-slider-range-min or ui-slider-range-max if the range option is set to "min" or "max" respectively.
Dependencies

UI Core
Widget Factory
Mouse Interaction
Additional Notes:

This widget requires some functional CSS, otherwise it won't work. If you build a custom theme, use the widget's specific CSS file as a starting point.
Options
animate

Type: Boolean or String or Number
Default: false
Whether to slide the handle smoothly when the user clicks on the slider track. Also accepts any valid animation duration.
Multiple types supported:
Boolean: When set to true, the handle will animate with the default duration.
String: The name of a speed, such as "fast" or "slow".
Number: The duration of the animation, in milliseconds.
Code examples:
Initialize the slider with the animate option specified:

1
2
3
$( ".selector" ).slider({
animate: "fast"
});
Get or set the animate option, after initialization:

1
2
3
4
5
// Getter
var animate = $( ".selector" ).slider( "option", "animate" );

// Setter
$( ".selector" ).slider( "option", "animate", "fast" );
disabled

Type: Boolean
Default: false
Disables the slider if set to true.
Code examples:
Initialize the slider with the disabled option specified:

1
2
3
$( ".selector" ).slider({
disabled: true
});
Get or set the disabled option, after initialization:

1
2
3
4
5
// Getter
var disabled = $( ".selector" ).slider( "option", "disabled" );

// Setter
$( ".selector" ).slider( "option", "disabled", true );
max

Type: Number
Default: 100
The maximum value of the slider.
Code examples:
Initialize the slider with the max option specified:

1
2
3
$( ".selector" ).slider({
max: 50
});
Get or set the max option, after initialization:

1
2
3
4
5
// Getter
var max = $( ".selector" ).slider( "option", "max" );

// Setter
$( ".selector" ).slider( "option", "max", 50 );
min

Type: Number
Default: 0
The minimum value of the slider.
Code examples:
Initialize the slider with the min option specified:

1
2
3
$( ".selector" ).slider({
min: 10
});
Get or set the min option, after initialization:

1
2
3
4
5
// Getter
var min = $( ".selector" ).slider( "option", "min" );

// Setter
$( ".selector" ).slider( "option", "min", 10 );
orientation

Type: String
Default: "horizontal"
Determines whether the slider handles move horizontally (min on left, max on right) or vertically (min on bottom, max on top). Possible values: "horizontal", "vertical".
Code examples:
Initialize the slider with the orientation option specified:

1
2
3
$( ".selector" ).slider({
orientation: "vertical"
});
Get or set the orientation option, after initialization:

1
2
3
4
5
// Getter
var orientation = $( ".selector" ).slider( "option", "orientation" );

// Setter
$( ".selector" ).slider( "option", "orientation", "vertical" );
range

Type: Boolean or String
Default: false
Whether the slider represents a range.
Multiple types supported:
Boolean: If set to true, the slider will detect if you have two handles and create a styleable range element between these two.
String: Either "min" or "max". A min range goes from the slider min to one handle. A max range goes from one handle to the slider max.
Code examples:
Initialize the slider with the range option specified:

1
2
3
$( ".selector" ).slider({
range: true
});
Get or set the range option, after initialization:

1
2
3
4
5
// Getter
var range = $( ".selector" ).slider( "option", "range" );

// Setter
$( ".selector" ).slider( "option", "range", true );
step

Type: Number
Default: 1
Determines the size or amount of each interval or step the slider takes between the min and max. The full specified value range of the slider (max - min) should be evenly divisible by the step.
Code examples:
Initialize the slider with the step option specified:

1
2
3
$( ".selector" ).slider({
step: 5
});
Get or set the step option, after initialization:

1
2
3
4
5
// Getter
var step = $( ".selector" ).slider( "option", "step" );

// Setter
$( ".selector" ).slider( "option", "step", 5 );
value

Type: Number
Default: 0
Determines the value of the slider, if there's only one handle. If there is more than one handle, determines the value of the first handle.
Code examples:
Initialize the slider with the value option specified:

1
2
3
$( ".selector" ).slider({
value: 10
});
Get or set the value option, after initialization:

1
2
3
4
5
// Getter
var value = $( ".selector" ).slider( "option", "value" );

// Setter
$( ".selector" ).slider( "option", "value", 10 );
values

Type: Array
Default: null
This option can be used to specify multiple handles. If the range option is set to true, the length of values should be 2.
Code examples:
Initialize the slider with the values option specified:

1
2
3
$( ".selector" ).slider({
values: [ 10, 25 ]
});
Get or set the values option, after initialization:

1
2
3
4
5
// Getter
var values = $( ".selector" ).slider( "option", "values" );

// Setter
$( ".selector" ).slider( "option", "values", [ 10, 25 ] );
Methods
destroy()Returns: jQuery (plugin only)

Removes the slider functionality completely. This will return the element back to its pre-init state.
This method does not accept any arguments.
Code examples:
Invoke the destroy method:

1
$( ".selector" ).slider( "destroy" );
disable()Returns: jQuery (plugin only)

Disables the slider.
This method does not accept any arguments.
Code examples:
Invoke the disable method:

1
$( ".selector" ).slider( "disable" );
enable()Returns: jQuery (plugin only)

Enables the slider.
This method does not accept any arguments.
Code examples:
Invoke the enable method:

1
$( ".selector" ).slider( "enable" );
instance()Returns: Object

Retrieves the slider's instance object. If the element does not have an associated instance, undefined is returned.

Unlike other widget methods, instance() is safe to call on any element after the slider plugin has loaded.

This method does not accept any arguments.
Code examples:
Invoke the instance method:

1
$( ".selector" ).slider( "instance" );
option( optionName )Returns: Object

Gets the value currently associated with the specified optionName.

Note: For options that have objects as their value, you can get the value of a specific key by using dot notation. For example, "foo.bar" would get the value of the bar property on the foo option.

optionName
Type: String
The name of the option to get.
Code examples:
Invoke the method:

1
var isDisabled = $( ".selector" ).slider( "option", "disabled" );
option()Returns: PlainObject

Gets an object containing key/value pairs representing the current slider options hash.
This signature does not accept any arguments.
Code examples:
Invoke the method:

1
var options = $( ".selector" ).slider( "option" );
option( optionName, value )Returns: jQuery (plugin only)

Sets the value of the slider option associated with the specified optionName.

Note: For options that have objects as their value, you can set the value of just one property by using dot notation for optionName. For example, "foo.bar" would update only the bar property of the foo option.

optionName
Type: String
The name of the option to set.
value
Type: Object
A value to set for the option.
Code examples:
Invoke the method:

1
$( ".selector" ).slider( "option", "disabled", true );
option( options )Returns: jQuery (plugin only)

Sets one or more options for the slider.
options
Type: Object
A map of option-value pairs to set.
Code examples:
Invoke the method:

1
$( ".selector" ).slider( "option", { disabled: true } );
value()Returns: Number

Get the value of the slider.
This signature does not accept any arguments.
Code examples:
Invoke the method:

1
var selection = $( ".selector" ).slider( "value" );
value( value )Returns: jQuery (plugin only)

Set the value of the slider.
value
Type: Number
The value to set.
Code examples:
Invoke the method:

1
$( ".selector" ).slider( "value", 55 );
values()Returns: Array

Get the value for all handles.
This signature does not accept any arguments.
Code examples:
Invoke the method:

1
var values = $( ".selector" ).slider( "values" );
values( index )Returns: Number

Get the value for the specified handle.
index
Type: Integer
The zero-based index of the handle.
Code examples:
Invoke the method:

1
var value = $( ".selector" ).slider( "values", 0 );
values( index, value )Returns: jQuery (plugin only)

Set the value for the specified handle.
index
Type: Integer
The zero-based index of the handle.
value
Type: Number
The value to set.
Code examples:
Invoke the method:

1
$( ".selector" ).slider( "values", 0, 55 );
values( values )Returns: jQuery (plugin only)

Set the value for all handles.
values
Type: Array
The values to set.
Code examples:
Invoke the method:

1
$( ".selector" ).slider( "values", [ 55, 105 ] );
widget()Returns: jQuery

Returns a jQuery object containing the slider.
This method does not accept any arguments.
Code examples:
Invoke the widget method:

1
var widget = $( ".selector" ).slider( "widget" );
Events
change( event, ui )Type: slidechange

Triggered after the user slides a handle, if the value has changed; or if the value is changed programmatically via the value method.
event
Type: Event
ui
Type: Object
handle
Type: jQuery
The jQuery object representing the handle that was changed.
value
Type: Number
The current value of the slider.
Code examples:
Initialize the slider with the change callback specified:

1
2
3
$( ".selector" ).slider({
change: function( event, ui ) {}
});
Bind an event listener to the slidechange event:

1
$( ".selector" ).on( "slidechange", function( event, ui ) {} );
create( event, ui )Type: slidecreate

Triggered when the slider is created.
event
Type: Event
ui
Type: Object
Note: The ui object is empty but included for consistency with other events.

Code examples:
Initialize the slider with the create callback specified:

1
2
3
$( ".selector" ).slider({
create: function( event, ui ) {}
});
Bind an event listener to the slidecreate event:

1
$( ".selector" ).on( "slidecreate", function( event, ui ) {} );
slide( event, ui )Type: slide

Triggered on every mouse move during slide. The value provided in the event as ui.value represents the value that the handle will have as a result of the current movement. Canceling the event will prevent the handle from moving and the handle will continue to have its previous value.
event
Type: Event
ui
Type: Object
handle
Type: jQuery
The jQuery object representing the handle being moved.
value
Type: Number
The value that the handle will move to if the event is not canceled.
values
Type: Array
An array of the current values of a multi-handled slider.
Code examples:
Initialize the slider with the slide callback specified:

1
2
3
$( ".selector" ).slider({
slide: function( event, ui ) {}
});
Bind an event listener to the slide event:

1
$( ".selector" ).on( "slide", function( event, ui ) {} );
start( event, ui )Type: slidestart

Triggered when the user starts sliding.
event
Type: Event
ui
Type: Object
handle
Type: jQuery
The jQuery object representing the handle being moved.
value
Type: Number
The current value of the slider.
Code examples:
Initialize the slider with the start callback specified:

1
2
3
$( ".selector" ).slider({
start: function( event, ui ) {}
});
Bind an event listener to the slidestart event:

1
$( ".selector" ).on( "slidestart", function( event, ui ) {} );
stop( event, ui )Type: slidestop

Triggered after the user slides a handle.
event
Type: Event
ui
Type: Object
handle
Type: jQuery
The jQuery object representing the handle that was moved.
value
Type: Number
The current value of the slider.
Code examples:
Initialize the slider with the stop callback specified:

1
2
3
$( ".selector" ).slider({
stop: function( event, ui ) {}
});
Bind an event listener to the slidestop event:

1
$( ".selector" ).on( "slidestop", function( event, ui ) {} );
Example:
A simple jQuery UI Slider.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>slider demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<style>#slider { margin: 10px; } </style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>

<div id="slider"></div>

<script>
$( "#slider" ).slider();
</script>

</body>
</html>
Demo:

jQuery UI 1.11

Effects
Effects Core
Interactions
Method Overrides
Methods
Selectors
Theming
UI Core
Utilities
Widgets
Other Versions

jQuery UI 1.10
jQuery UI 1.9
jQuery UI 1.8
BOOKS

jQuery UI in Action by TJ VanToll jQuery UI in Action
TJ VanToll
jQuery UI Themes by Adam BoduchjQuery UI Themes
Adam Boduch
jQuery UI Cookbook by Adam BoduchjQuery UI Cookbook
Adam Boduch
Learning Center

Forum

API

Twitter

IRC

GitHub
Copyright 2015 The jQuery Foundation. jQuery License
Web hosting by Media Temple | CDN by MaxCDN | Powered by WordPress | Thanks: Members, Sponsors

как подключить библиотеку

Яндекс

КОМПАНИЯ ВАКАНСИИ БЛОГ ОБУЧЕНИЕ

ТЕХНОЛОГИИ СОБЫТИЯ

НАУКА

Как подключить библиотеку?

Статические пути до библиотек

Общий путь до библиотеки выглядит следующим образом:

yandex.st/<имя библиотеки>/<полная версия>/<имя файла>

В большинстве случаев имя файла совпадает с названием библиотеки, за исключением Dojo, jQuery UI, script.aculo.us, YUI. Суффикс .min в имени файла обозначает, что файл сжат (не содержит документации и метасимволов).

Примеры:

http://yandex.st/jquery/1.3.2/jquery.min.js

http://yandex.st/swfobject/2.1/swfobject.js

Подключение с помощью загрузчика

Загрузчик API находится по адресу:

http://yandex.st/jslibs/loader.js

/**
  * Загружает указанную версию библиотеки.
  * @param {String} library Название библиотеки.
  * @param {String} [version] Версия библиотеки. Если не указана, то загружается последняя доступная.
  * @param {Object} [params] Параметры.
  * @param {Boolean} [params.uncompressed=false] Загружать сжатую версию.
  * @param {Function} [params.onload] Обработчик загрузки библиотеки.
  * @param {Number} [params.metrika] ID Метрики
  */
Ya.load = function(library, version, params) {};

Пример 1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Пример использования сервиса Хостинг JavaScript-библиотек</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <script type="text/javascript" src="//yandex.st/jslibs/loader.js"></script>
</head>
<body>
<script type="text/javascript">
// загружается последняя версия 1.3.x
Ya.load('jquery', '1.3', {onload: function() {
    $('<div>this div is created from jquery</div>').appendTo('body');
}});
</script>
</body>
</html>

Пример 2:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>YUI: Simple Drag</title>
    <style type="text/css">
        #demo
        {
            height: 100px;
            width: 100px;
            border: 1px solid black;
            background-color: #8DD5E7;
            cursor: move;
        }
    </style>
    <script type="text/javascript" src="//yandex.st/yui/3.0.0/yui/yui-min.js"></script>
</head>
<body class=" yui-skin-sam">
<h1 id="">Simple Drag<span class="no_print edit-section"></span></h1>
<div class="exampleIntro">
    <p>This example shows a simple drag interaction that doesn't require a drop interaction.</p>
</div>
<div id="demo">Drag Me</div>
<script type="text/javascript">
    YUI({combine: false, timeout: 10000}).use('dd-drag', function(Y) {
        new Y.DD.Drag({
            node: '#demo'
        });
    });
</script>
</body>
</html>

Яндекс КОМПАНИЯВАКАНСИИБЛОГОБУЧЕНИЕ ТЕХНОЛОГИИСОБЫТИЯ НАУКА playusagame JavaScript-библиотекиДокументация Поиск по документации Руководство разработчика Обзор API Как подключить библиотеку? ← Ctrl ПредыдущаяСледующая Ctrl → Как подключить библиотеку? Статические пути до библиотек Подключение с помощью загрузчика Статические пути до библиотек Общий путь до библиотеки выглядит следующим образом: yandex.st/<имя библиотеки>/<полная версия>/<имя файла> В большинстве случаев имя файла совпадает с названием библиотеки, за исключением Dojo, jQuery UI, script.aculo.us, YUI. Суффикс .min в имени файла обозначает, что файл сжат (не содержит документации и метасимволов). Примеры: http://yandex.st/jquery/1.3.2/jquery.min.js http://yandex.st/swfobject/2.1/swfobject.js Подключение с помощью загрузчика Загрузчик API находится по адресу: http://yandex.st/jslibs/loader.js /** * Загружает указанную версию библиотеки. * @param {String} library Название библиотеки. * @param {String} [version] Версия библиотеки. Если не указана, то загружается последняя доступная. * @param {Object} [params] Параметры. * @param {Boolean} [params.uncompressed=false] Загружать сжатую версию. * @param {Function} [params.onload] Обработчик загрузки библиотеки. * @param {Number} [params.metrika] ID Метрики */ Ya.load = function(library, version, params) {}; Пример 1: Пример использования сервиса Хостинг JavaScript-библиотек Пример 2: YUI: Simple Drag

Simple Drag

This example shows a simple drag interaction that doesn't require a drop interaction.

Drag Me

Ярлыки: нфтвуч

Пример использования сервиса Хостинг JavaScript-библиотек

Ярлыки: yandex

This example shows a simple drag interaction that doesn't require a drop interaction.

YUI: Simple Drag

Simple Drag

This example shows a simple drag interaction that doesn't require a drop interaction.

Drag Me

Ярлыки: yandex

posox

пятница, 28 августа 2015 г.

position

Selectmenu

A simple jQuery UI Indeterminate Progressbar

The jQuery UI Slider plugin

как подключить библиотеку

Как подключить библиотеку?

Статические пути до библиотек

Подключение с помощью загрузчика

Simple Drag

Пример использования сервиса Хостинг JavaScript-библиотек

This example shows a simple drag interaction that doesn't require a drop interaction.

Simple Drag

Обо мне

Ссылки

Предыдущие сообщения

Архивы

posox

пятница, 28 августа 2015 г.

position

Selectmenu

A simple jQuery UI Indeterminate Progressbar

The jQuery UI Slider plugin

как подключить библиотеку

Как подключить библиотеку?

Статические пути до библиотек

Подключение с помощью загрузчика

Simple Drag

Пример использования сервиса Хостинг JavaScript-библиотек

This example shows a simple drag interaction that doesn't require a drop interaction.

Simple Drag

Обо мне

Ссылки

Предыдущие сообщения

Архивы

пятница, 28 августа 2015 г.