cxSelect
cxSelect — это основанный на jQuery плагин для многоуровневых интерактивных меню, который подходит для использования в таких областях, как провинции и города, категории товаров и т. д.
Данные списка загружаются через AJAX или могут быть настроены пользователем, а содержимое данных представлено в формате JSON.
Также cxSelect совместим с Zepto, что удобно для использования на мобильных устройствах.
Версия:
Demo: http://ciaoca.github.io/cxSelect/
<script src="jquery.js"></script>
<script src="jquery.cxselect.js"></script>
<!--
select должен находиться внутри элемента с id="element_id", независимо от уровня вложенности.
class для select может быть любым, также можно добавить несколько классов, например class="province otherclass". При вызове достаточно указать один из них, но нельзя повторять.
-->
<div id="element_id">
<select class="province"></select>
<select class="city"></select>
<select class="area"></select>
</div>
<!--
Метод 1: использование атрибутов value и selected для option
-->
<select class="province">
<option value="浙江省" selected>浙江省</option>
</select>
<!--
Способ 2: использование атрибута data-value для select
Если одновременно установить значение data-value и value для option, то будет использоваться значение data-value.
-->
<select class="province" data-value="浙江省"></select>
$('#element_id').cxSelect({
url: 'cityData.min.json',
selects: ['province', 'city', 'area'], // selects представляет собой массив, обратите внимание на порядок
emptyStyle: 'none'
});
$.cxSelect.defaults.url = 'cityData.min.json';
$.cxSelect.defaults.emptyStyle = 'none';
Параметр | По умолчанию | Описание |
---|---|---|
selects | [] | Группа выпадающих списков. Ввод className для select |
url | null | Адрес URL для интеграции данных (URL) |
data | null | Пользовательские данные, представленные в виде массива в формате JSON |
emptyStyle | null | Стиль отображения элемента select, когда подмножество данных пусто. Можно установить как "none" (display: none), так и "hidden" (visibility: hidden) |
required | false | Является ли обязательным. Если установлено значение false, в списке будет добавлен элемент {firstTitle} |
firstTitle | 'Пожалуйста, выберите' | Заголовок первого элемента списка (действует только тогда, когда required имеет значение false) |
firstValue | '' | Значение первого элемента списка (действует только тогда, когда required имеет значение false) |
jsonSpace | '' | Пространство имён данных |
jsonName | 'n' | Имя поля заголовка данных (используется для заголовка option) |
jsonValue | '' | Имя поля значения данных (используется для значения option, если нет поля значения, используется заголовок в качестве значения) |
jsonSub | 's' | Поле данных подмножества |
<div id="element_id" data-url="cityData.min.json" data-required="true"></div>
Атрибут | Описание |
---|---|
data-selects | Группа выпадающих списков. Используется строка, разделённая запятыми |
data-url | Адрес URL для списка данных |
data-empty-style | Стиль отображения элемента select при отсутствии данных в подмножестве |
data-required | Является ли список обязательным |
data-first-title | Заголовок первого элемента списка |
data-first-value | Значение первого элемента списка |
data-json-space | Пространство имён данных |
data-json-name | Имя поля заголовка данных |
data-json-value | Имя поля значения данных |
data-json-sub | Поле данных подмножества |
<select class="province" data-value="浙江省" data-first-title="Выберите провинцию"></select>
Атрибут | Описание |
---|---|
data-value | Значение по умолчанию |
data-url | URL текущего списка данных, см. DEMO |
data-required | Является ли список обязательным |
data-query-name | Передаёт параметр значения предыдущего списка (по умолчанию используется значение name для предыдущего элемента) |
data-first-title | Заголовок первого элемента списка |
data-first-value | Значение первого элемента списка |
data-json-space | Пространство имён данных |
data-json-name | Имя поля заголовка данных |
data-json-value | Имя поля значения данных |
var cxSelectApi;
// Метод 1:
cxSelectApi = $.cxSelect($('#element_id'), {
selects: ['province', 'city', 'area']
});
// Способ 2:
$('#element_id').cxSelect({
selects: ['province', 'city', 'area']
}, function(api) {
cxSelectApi = api;
});
cxSelectApi.attach();
cxSelectApi.detach();
cxSelectApi.clear();
cxSelectApi.setOptions();
Метод | Описание |
---|---|
attach() | Привязка. Вызов автоматически привязывает при использовании detach для отмены привязки, затем повторно привязывает |
detach() | Отмена привязки. После отмены привязки больше не будет иметь эффекта привязки |
clear(index) | Очистить параметры. Очищает параметры для select с индексом index и последующих элементов select |
setOptions(settings) | Сбросить параметры. settings соответствует параметрам вызова |
Можно использовать любые типы данных, но они будут преобразованы в текст.
Для каждого select можно настроить отдельный интерфейс, соответствующий структуре данных JSON. При загрузке страницы первый список уже имеет параметры, поэтому для первого списка не нужно настраивать интерфейс.
Пример независимого интерфейса
cityData.json
Данные о городах Китая: Административное деление Китайской Народной Республики (по состоянию на 31 декабря 2019 года)
cityData-simple.json
Сокращённые названия городов Китая Не включает:
- Первый уровень: провинции, города, районы
- Второй уровень: города, районы, уезды, префектуры, округа
globalData.json
Основные мировые города: данные собраны из различных китайских веб-сайтов и программного обеспечения Date: 2014.07.29
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )