Twitter Bootstrap typeaheads учебник

Введение

В этом руководстве вы увидите, как создавать заголовки с помощью Twitter Bootstrap.

typeaheads очень полезны для предоставления подсказок или данных пользователям при заполнении форм. Twitter Bootstrap позволяет с легкостью создавать превосходно выглядящие заголовки, кроме того, он легко расширяется, поэтому вы можете без особых усилий улучшить его функциональность.

Что требуется

Вы должны включить два файла JavaScript jquery.js и bootstrap-typeahead.js, оба присутствующих в docs/assets/js/.

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

Пример

        Пример начальной загрузки типаahead от w3resource     

Посмотреть пример в реальном времени

Вы можете вызвать typeahead через javascript и использовать его различные параметры для добавления функциональности. Использование вызова typeahead через JavaScript:

  $ ('# example'). Typeahead ()  

, где 'example' - это идентификатор поле ввода, к которому вы применяете typeahead.

Пример

       Bootstrap typeahead с примером параметров от w3resource     
var subject = ['PHP', 'MySQL', 'SQL', 'PostgreSQL', 'HTML', 'CSS', 'HTML5', 'CSS3', 'JSON'] ; $ ('# search'). typeahead ({source: themes})

Посмотреть пример вживую.

Параметры

Вы можете использовать различные параметры с опережением ввода. Вот список с подробностями:

source : используется для указания источника данных, содержащего значения, которые будут отображаться при запросе. Значение имеет тип массива, а значение по умолчанию - [].

items : используется для указания максимального количества элементов, отображаемых при запросе. Тип данных - число, значение по умолчанию - 8.

matcher : определяет, соответствует ли запрос элементу. Он принимает единственный аргумент, то есть элемент, по которому проверяется запрос. Доступ к текущему запросу осуществляется с помощью this.query. Он возвращает логическое значение true, если запрос сопоставлен. Тип данных - это функция. По умолчанию регистр не учитывается.

sorter : используется для сортировки результатов автозаполнения. Требуется элемент с одним аргументом, имеющий область действия экземпляра typeahead. Доступ к текущему запросу осуществляется с помощью this.query. Тип данных - это функция. Значение по умолчанию - точное совпадение, с учетом и без учета регистра.

highlighter : используется для выделения результатов автозаполнения. Требуется элемент с одним аргументом, имеющий область действия экземпляра typeahead. Тип данных - функция. По умолчанию он выделяет все совпадения по умолчанию

Методы

  .typeahead (options)   

Он инициализирует ввод с опережением ввода

Здесь вы можете скачать все файлы HTML, CSS, JS и изображения, используемые в наших руководствах.

Оцените статью
nanomode.ru
Добавить комментарий