Начинать Делаем каталог.
Необходимо было создать дерево категорий товаров/компаний/услуг с бесконечной вложенностью.
Каждую категорию можно отметить флажком, чтобы в дальнейшем получить список/массив всех отмеченных категорий (например, для поиска по ним).
я написал это дерево .
Реализован как плагин для моего любимого JQuery)
Что он может сделать:
- Если указан пустой div, то он загружает все категории и подкатегории (вложенные uls) из указанного скрипта, если li имеет класс папки и не имеет вложенного списка (ul) - дерево автоматически загрузит этот список из указанного скрипта с указанной глубиной рекурсии (это обязанность скрипта выдавать запрошенные данные с необходимыми параметрами).
- Если указан готовый список, то можно свернуть/развернуть подкатегории, отметить нужные, которые будут выделены данным классом
- Получить выбранные номера категорий (значения флажков) в массиве.
- Возможность поиска по всем загруженным ветвям дерева, выводя результат поиска в указанный div (укажите div для поиска, в котором строка для ввода запроса + div (пустой) для отображения результатов)
- Количество результатов поиска может быть ограничено (в параметрах)
- При нажатии на один из найденных результатов открывается дерево для отображения указанной ветки и оно подсвечивается по классу (указанному в параметрах)
- Вы можете указать, что при нажатии на родительскую категорию внутренние также будут выделены.
- Вы можете установить сообщение, которое будет отображаться при попытке установить дополнительный флажок, если их количество ограничено.
- _loadPath — путь к файлу, откуда будут загружены категории.
- _loadLvl — количество подкатегорий по умолчанию — 0 — загрузить все подкатегории
- _selectChildren — выбирать ли дочерние подкатегории при выборе родительской
- _liminSelected — ограничить количество выбранных категорий
- _limitMessage — сообщение при превышении количества отмеченных категорий
- _searchDiv — контейнер поиска (должна быть строка и div)
- _showResult — сколько результатов поиска найдено, чтобы отобразить 0-все.
- _hlClass — класс, которым будут подсвечиваться найденные категории
- _checkedClass — это класс, который выделяет отмеченные категории.
Позвольте мне немного объяснить: элемент li, имеющий вложенные списки, должен иметь класс папки, все uls, которые должны быть видны, имеют расширенный класс.$('.sp-tree-container').
tree({_loadPath: 'php/li.html'}); * This source code was highlighted with Source Code Highlighter.
Заголовок категории вставляется в диапазон, и просто нажав на него, подветвь сворачивается/разворачивается.
Ну вроде бы всё.
У меня пока не очень красиво получилось, так что не судите.
Приму конструктивную критику ;) Теги: #jQuery #TREE #дерево с поиском #Чулан
-
Шоу Uxtra – Эпизод 1: Интерфейсы Мечты
19 Oct, 24 -
Саундтрек №41
19 Oct, 24 -
Блиц-Шаблоны
19 Oct, 24 -
Реклама Компьютерной Игры Guitar Hero 5
19 Oct, 24 -
Ключевые Маркетинговые Приемы В Saas-Проекте
19 Oct, 24
