1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/mirrors-cxSelect

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Клонировать/Скачать
Внести вклад в разработку кода
Синхронизировать код
Отмена
Подсказка: Поскольку Git не поддерживает пустые директории, создание директории приведёт к созданию пустого файла .keep.
Loading...
README.md

cxSelect

cxSelect — это основанный на jQuery плагин для многоуровневых интерактивных меню, который подходит для использования в таких областях, как провинции и города, категории товаров и т. д.

Данные списка загружаются через AJAX или могут быть настроены пользователем, а содержимое данных представлено в формате JSON.

Также cxSelect совместим с Zepto, что удобно для использования на мобильных устройствах.

Версия:

  • jQuery v1.7+ || Zepto v1.0+
  • jQuery cxSelect v1.4.2

Demo: http://ciaoca.github.io/cxSelect/

Использование

Загрузка файлов JavaScript

<script src="jquery.js"></script>
<script src="jquery.cxselect.js"></script>

Структура DOM

<!--
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> 

Вызов cxSelect

$('#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' Поле данных подмножества

Атрибуты данных

Атрибут data- для родительского элемента

<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 Поле данных подмножества

Атрибут data- для элемента select

<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 Имя поля значения данных

API

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 )

Вы можете оставить комментарий после Вход в систему

Введение

Описание недоступно Развернуть Свернуть
MIT
Отмена

Обновления

Пока нет обновлений

Участники

все

Недавние действия

Загрузить больше
Больше нет результатов для загрузки
1
https://api.gitlife.ru/oschina-mirror/mirrors-cxSelect.git
git@api.gitlife.ru:oschina-mirror/mirrors-cxSelect.git
oschina-mirror
mirrors-cxSelect
mirrors-cxSelect
master