Темизация списков с помощью Linkselect jQuery

linkselect и темизация списковЗаметка является переводом статьи о ЛинкСелекте

Обзор

Плагин jQuery Linkselect преобразует элемент в комбинацию якоря связанного с выпадающим меню. Эта комбинация позволяет гибко темизировать вид как самого объекта, так и выпадающей области, без потери функциональности.

Хотя существует множество аналогичных плагинов, ключевым отличием Linkselect в том, что это легко поместится в ограниченном пространстве. Один из ключевых вопросов дизайна с является трудность учета размера, занимаемого вашим элементом. Если содержит ссылки различных размеров, ширина элемента может быстро выйти из-под контроля.

В недавнем проекте, над которым мы работали, нам была необходима функциональность элемента, при условии отображения элемента в ограниченной области. Поскольку мы не могли контролировать количество и длину данных внутри элемента , мы не знали, можем ли использовать его так как есть. Нам нужен был элемент , который позволил бы компактно размещать длинные строки. Это и привело к созданию плагина Linkselect.

Linkselect устраняет лишнее пространство, заменяя якорем, который обеспечивает ту же функциональность при щелчке.

Что требуется для работы

Чтобы использовать Linkselect вам необходимы:

  • jQuery v1.2.6 (или выше)*
  • Плагин jquery.linkselect.js
  • Плагин jquery.bgiframe.js (опционально; для фиксации проблем с IE6)

*Этот модуль может работать с более старыми версиями jQuery в ветке 1.2. Если вы используете его с помощью старой версии jQuery, вам необходимо включить плагин jquery.dimensions.js (для jQuery версии 1.2.6 плагин jquery.dimensions.js включен в ядро)

Как использовать

Для преобразования элемента в элемент linkselect, нужно использовать следующий синтаксис:
$("select").linkselect([параметры]);

Ширина раскрывающейся области принимается равной ширине якоря. Если якорь является встроенным элементом (т. е. display: inline;,), то ширина будет совпадать с родительским элементом якоря. Если fixedWidth установлен в false, то выпадающее поле будет скорректировано, чтобы убедиться, что ширина раскрывающегося поля достаточна широка. Вы можете установить максимальную ширину, установив максимальную ширину в свойстве класса .linkselectContainer.

Аргументы

options

Этот аргумент не является обязательным и позволяет настроить параметры, используемые для каждого экземпляра плагина. Для получения списка всех доступных параметров см. пункт Параметры.

Элементы

специализированных элементов пользовательского интерфейса. Есть несколько ключевых атрибутов с обеих и элементами, которые используются вилки Linkselect в систему и специальные funcationality. Ниже приведен список атрибутов, которые были приняты особые функциональные возможности Linkselect Plug-In.

Linkselect преобразует обычный в специальный элемент пользовательского интерфейса. Есть несколько ключевых атрибутов для и , которые используются плагином Linkselect и определяют функциональность. Ниже приведен список этих атрибутов.

id
Этот атрибут обязателен и используется как имя и id атрибута скрытого тега, создаваемого плагином.

title
Этот атрибут является необязательным и является названием заголовка выпадающего списка Linkselect.

tabindex
Атрибут является необязательны используется для установки параметра tabindex в якоре. Он дублирует оригинальный tabindex элемента .

onchange
Необязательный атрибут который работает подобно одноименному событию onchange. При вызове функции будет обращаться к тем же атрибутам что и обычный обработчик onchange.

ЗАМЕЧАНИЕ: плагин Linkselect был спроектирован для выбора только одного элемента списка. Вы не сможете делать множественный выбор пунктов выпадающего меню.

ЗАМЕЧАНИЕ: текст из представляется как текст отображаемый в выпадающем меню.

value

Этот атрибут является опцией и используется в качестве значения для выбранного пункта.

selected

Этот атрибут не является обязательным и используется, чтобы определить, какой вариант будет выбран по умолчанию.

class

Этот атрибут не является обязательным и используется для определения любого класса, который должен быть применен к пункту выпадающего меню.

Теперь, когда у нас есть справка по виджету, мы можем ссылаться на любые вызовы API
.

API

$("#id").linkselect("val")
Возвращает текущее значение элемента linkselect

$("#id").linkselect("val", value)
Устанавливает значение элемента

$("#id").linkselect("focus")
Помещает якорь в фокус. Это похоже на $("a").focus();

$("#id").linkselect("blur")
Смещает фокус с якоря. Похоже на $("a").blur();

$("#id").linkselect("open")
Открывает выпадающее меню Linkselect

$("#id").linkselect("close")/
Закрывает выпадающее меню Linkselect

$("#id").linkselect("disable", boolean)

Выключает (true) или включает (false) элемент Linkselect. Выключенные элементы могут передать свои значениея через форму на сервер, но пользователь не сможет изменить их значения через пользовательский интерфейс
.
$("#id").linkselect("replaceOptions", options, doCallback)
Замена параметров выпадающего меню новыми параметрами. Вы можете использовать этот метод API заполнения Linkselect с возможностью вызова с помощью AJAX. При замене параметров, изменения вызвали обратный вызов для вновь выбранный объект. Вы можете установить doCallback в false для предотвращения от срабатывает обратного вызова.

Например:

  1. var options = [
  2. {value: 1, text: "Option 1"}
  3. , {value: 2, text: "Option 2"}
  4. , {value: 3, text: "Option 3", selected: true}
  5. , {value: 4, text: "Option 4"}
  6. , {value: 5, text: "Option 5"}
  7. ];

$("#id").linkselect("replaceOptions", options);
Каждый пункт "Настройки" массив JavaScript объект, который должен содержать по крайней мере, ключи "значение" и "текст". Также поддерживаются ключи " selected " (что может быть верно для любого одного элемента, который необходимо выбрать) и "className", который может быть использован для определения класса для элемента.

$("#id").linkselect("object")
Возвращает ссылку на внутренний $.Linkselect объект. Только для продвинутого использования. Изучите исходный код для объекта $.Linkselect

Настройки

Есть ряд вариантов, доступных для настройки внешнего вида виджетов Linkselect.

  1. {
  2. classLink: "linkselectLink" // класс для якоря
  3. , classLinkOpen: "linkselectLinkOpen" // класс для якоря когда отображается меню
  4. , classLinkFocus: "linkselectLinkFocus" // класс якоря когда он в фокусе
  5. , classContainer: "linkselectContainer" // класс содержащий настройки
  6. , classSelected: "selected" // класс текущего выбранного элемента
  7. , classCurrent: "current" // класс подсвеченного элемента
  8. , classDisabled: "linkselectDisabled" // класс, используемый для текста когда Linkselect выключен
  9. , classValue: "linkselectValue" // класс используется для каждого пункта выпадающего меню
  10. , yAxis: "top" // позиция выпадающего меню относительно ссылки // (может быть как «top» и «bottom»)
  11. , titleAlign: "right" // расположение названия LinkSelect // (может быть "right" or "left")
  12. , fixedWidth: false FALSE = размер выпадающего меню определяется найстройками,
  13. / / TRUE = выпадающее меню использует ширину ссылки , init: null // обратный вызов (callback), при инициализации linkselect меню
  14. , change: null // обратный вызов (callback), при выборе элемента
  15. , format: null // обратный вызов, который происходит при рендеринге HTML для использования
  16. , open: null // обратный вызов (callback), когда меню открыто
  17. , close: null // обратный вызов (callback), когда меню открыто
  18. }

Работа с клавиатурой

Клавиатурная функциональность linkselect является поведенческой особенностью для имитации обработки IE6 элемента . Когда элемент Linkselect имеет фокус вы можете:
Нажать на первую букву опцию, чтобы перейти к первому экземпляру этого пункта в выпадающем меню. Последующие нажатия и тот же ключ будет циклически переводить вас по всем пунктам, которые начинаются с символа соответствия. При нажатии новый ключ, он будет пытаться, чтобы перейти к первому пункту, который начинается с символа новой клавиатуре набрали.
Нажмите [UP ARROW] or [DOWN ARROW] для переключения между действительным страницу
Нажмите [HOME], чтобы перейти к первому пункту
Нажмите [END] для перехода к последнему пункту
Нажмите [PAGE UP] прыгать на одной странице ссылок
Нажмите [PAGE DOWN], чтобы перейти на одну страницу вниз вариантов

Приступая к работе

Первое, что нужно сделать - загрузить требуемые библиотеки JavaScript и таблицы стилей CSS используемые виджетом

  1. <script type="text/javascript" src="./lib/jquery-1.2.6.min.js"></script>
  2. <script type="text/javascript" src="./lib/jquery.linkselect.js"></script>
  3.  
  4. <!---// Загрузка CSS в Linkselect //--->
  5. <link type="text/css" href="./css/jquery.linkselect.css" rel="stylesheet" media="all" />

Прежде чем ссылаться на виджет Linkselect, вы должны иметь один или более элементов на вашей странице. Ключевые атрибуты из вашего тега select (ID, title , TabIndex) поддерживаются плагином Linkselect.

  1. <select id="category" title="Выберите категорию" class="linkselect">
  2. <option value="">[отсутствует]</option>
  3. <option value="help_desk">Помощь</option>
  4. <option value="customer_service">Служба поддержки</option>
  5. <option value="knowledge_manager">Менеджер знаний</option>
  6. <option value="change_manager">Менеджер редактор</option>
  7. <option value="service_desk">Служба сервиса</option>
  8. <option value="asset_manager">Управляющий имуществом</option>
  9. <option value="software_manager">Менеджер ПО</option>
  10. </select>

Следующим шагом является создание экземпляра виджета Linkselect. Вы хотите, чтобы убедиться, что для инициализации виджета после всех необходимых элементов DOM доступны, что делает document.ready событием большое место для инициализации виджета

  1. <script type="text/javascript">
  2. $(document).ready(function (){
  3. $("#category").linkselect();
  4. });
  5. </script>

Теперь давайте посмотрим как работает приведенный выше код. (пока что работает только офлайн пример! примечание sadmin)

Пример
Обычный элемент

Пожалуйста, выберите категорию:
Некоторый код использующий плагин

Пожалуйста, выберите категорию: [отсутствует]

Нажмите на якорь "[отсутствует]", чтобы увидеть выпадающее меню linkselect. При изменении параметров, текст якоря будут обновлены с текстом из тег. Скрытый элемент с таким же name/ID атрибута будет обновлен значениями из тега . Скрытый элемент используется для передачи значения элемента Linkselect обратно на сервер.

Элементs linkselect полностью поддерживаются клавиатурой, что характерно для ручной работы в IE6. См. раздел "Работа с клавиатурой» для использования дополнительной информацией.

Дополнительные примеры см. Гива Labs - Linkselect страница примеров

Поддержка

Это исходный код предоставляется "как есть". В это время Гива не предлагает прямой поддержки для данного продукта. Если вы нуждаетесь в помощи, задайте свой вопрос в одном из списков рассылки jQuery. Члены группы по разработке Гива принимают активное участие в списков рассылки jQuery, поэтому если мы видим ваш вопрос, мы постараемся сделать все, чтобы ответить.

Лицензия

Copyright 2010 Giva, Inc. (http://www.givainc.com/labs/)

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Прикрепленный файлРазмер
jquery.linkselect.zip45.52 кб

кнопка reset

Кнопка reset не сбрасывает значение. Как побороть?

Библиотечка о которой написано давно обновилась

Но ваш вопрос очевидно не связан с текущей заметкой. Опишите проблему подробней (а еще лучше покажите код, только не километровый!).

Отправить комментарий

CAPTCHA
Этот вопрос задается для того, чтобы выяснить, пьёте ли Вы кофе или рассылаете спам
1 + 0 =
Решите эту простую математическую задачу и введите результат. То есть для 1+3, введите 4.