Лучшее руководство по JQuery UI пример - выбор (по выбору пользователя) в 2024 году. В этом руководстве вы можете изучить По умолчанию функция,Оно отображается в виде сетки,Сериализация,
Используйте мышь, чтобы выбрать один элемент или группу элементов.
Для получения более подробной информации о выбираемой взаимодействия, обратитесь к документации по 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>