JQuery UI пример - выбор (по выбору пользователя)
Используйте мышь, чтобы выбрать один элемент или группу элементов.
Для получения более подробной информации о выбираемой взаимодействия, обратитесь к документации по API можно выбрать виджеты (Выбранные виджете) .
По умолчанию функция
Включение функции каждой или на группу элементов на элемент DOM. Выберите запись с помощью мыши. Удерживая нажатой клавишу Ctrl, чтобы выбрать несколько несмежных записей.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> Выбор JQuery UI (по выбору) - функция по умолчанию </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Style>
#feedback {размер шрифта: 1.4em;}
#selectable .ui-выбора {фон: # FECA40;}
#selectable .ui выбранный {фон: # F39814; цвет: белый;}
#selectable {список стиле типа: нет; маржа: 0; обивка: 0; ширина: 60%;}
#selectable Li {поле: 3px; обивка: 0.4em; размер шрифта: 1.4em; высота: 18px;}
</ Style>
<Script>
$ (Function () {
$ ( "#selectable") .selectable ();
});
</ Script>
</ Head>
<Body>
<Ol ID = "выбирается">
<Li класс = "UI-виджета-контента"> Пункт 1 </ li>
<Li класс = "UI-виджета-контента"> Пункт 2 </ li>
<Li класс = "UI-виджета-контента"> Пункт 3 </ li>
<Li класс = "UI-виджета-контента"> Пункт 4 </ li>
<Li класс = "UI-виджета-контента"> Пункт 5 </ li>
<Li класс = "UI-виджета-контента"> Пункт 6 </ li>
<Li класс = "UI-виджета-контента"> Пункт 7 </ li>
</ Ol>
</ Body>
</ HTML>
Оно отображается в виде сетки
Пусть выбирается запись отображается в виде сетки, таким образом, чтобы они используют CSS с теми же размерами и плавучей дисплея.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> Выбор JQuery UI (по выбору) - отображение сетки </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Style>
#feedback {размер шрифта: 1.4em;}
#selectable .ui-выбора {фон: # FECA40;}
#selectable .ui выбранный {фон: # F39814; цвет: белый;}
#selectable {список стиле типа: нет; маржа: 0; обивка: 0; ширина: 450px;}
#selectable Li {поле: 3px; обивка: 1px; поплавок: слева; ширина: 100px, высота: 80px; размер шрифта: 4EM; выравнивания текста: центр;}
</ Style>
<Script>
$ (Function () {
$ ( "#selectable") .selectable ();
});
</ Script>
</ Head>
<Body>
<Ol ID = "выбирается">
<Li класс = "пользовательский интерфейс состояния по умолчанию"> 1 </ li>
<Li класс = "пользовательский интерфейс состояния по умолчанию"> 2 </ li>
<Li класс = "пользовательский интерфейс состояния по умолчанию"> 3 </ li>
<Li класс = "пользовательский интерфейс состояния по умолчанию"> 4 </ li>
<Li класс = "Пользовательский интерфейс состояния по умолчанию"> 5 </ li>
<Li класс = "пользовательский интерфейс состояния по умолчанию"> 6 </ li>
<Li класс = "пользовательский интерфейс состояния по умолчанию"> 7 </ li>
<Li класс = "Пользовательский интерфейс состояния по умолчанию"> 8 </ li>
<Li класс = "Пользовательский интерфейс состояния по умолчанию"> 9 </ li>
<Li класс = "пользовательский интерфейс состояния по умолчанию"> 10 </ li>
<Li класс = "пользовательский интерфейс состояния по умолчанию"> 11 </ li>
<Li класс = "пользовательский интерфейс состояния по умолчанию"> 12 </ li>
</ Ol>
</ Body>
</ HTML>
Сериализация
Напишите функцию , которая stop , когда событие триггера для сбора выбранного значения индекса элемента. Эти значения представлены в качестве обратной связи, или в форме строки передачи данных.
<! DOCTYPE HTML>
<HTML LANG = "EN">
<Head>
<Meta Charset = "UTF-8">
<Title> Выбор JQuery UI (по выбору) - сериализовано </ title>
<Link отн = "таблица стилей" HREF = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<Script SRC = "// code.jquery.com/jquery-1.9.1.js"> </ скрипт>
<Script SRC = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ скрипт>
<Link отн = "таблица стилей" HREF = "http://jqueryui.com/resources/demos/style.css">
<Style>
#feedback {размер шрифта: 1.4em;}
#selectable .ui-выбора {фон: # FECA40;}
#selectable .ui выбранный {фон: # F39814; цвет: белый;}
#selectable {список стиле типа: нет; маржа: 0; обивка: 0; ширина: 60%;}
#selectable Li {поле: 3px; обивка: 0.4em; размер шрифта: 1.4em; высота: 18px;}
</ Style>
<Script>
$ (Function () {
$ ( "#selectable") .selectable ({
остановка: функция () {
Результат переменная = $ ( "# Select-результат») .empty ();
$ ( ".ui-Selected", это) .each (функция () {
индекс VAR = $ ( "#selectable Ли") .index (это);
result.append ( "#" + (индекс + 1));
});
}
});
});
</ Script>
</ Head>
<Body>
<P ID = "обратной связи">
<SPAN> Вы выбрали: </ SPAN> <SPAN ID = "SELECT-результат"> Нет </ SPAN>.
</ P>
<Ol ID = "выбирается">
<Li класс = "UI-виджета-контента"> Пункт 1 </ li>
<Li класс = "UI-виджета-контента"> Пункт 2 </ li>
<Li класс = "UI-виджета-контента"> Пункт 3 </ li>
<Li класс = "UI-виджета-контента"> Пункт 4 </ li>
<Li класс = "UI-виджета-контента"> Пункт 5 </ li>
<Li класс = "UI-виджета-контента"> Пункт 6 </ li>
</ Ol>
</ Body>
</ HTML>