OSCHINA-MIRROR/Longbow-longbow-select

Выпадающий список в стиле Bootstrap

В разных браузерах Select в стиле Bootstrap отображается по-разному, но все варианты выглядят довольно некрасиво. Поскольку выпадающие списки часто используются вместе с текстовыми полями для ввода данных и отображения информации, их несовпадение по ширине с этими полями при использовании стиля form-control вызывает неудобства. Я переработал выпадающий список на основе текстового поля, чтобы сделать его более удобным и привлекательным в использовании, а также идеально подходящим для совместного использования с текстовым полем.

Онлайн-демонстрация

Одностраничная демонстрация: http://longbowenterprise.gitee.io/longbow-select/
Демонстрация внутри проекта: http://argo.zylweb.cn/ (этот проект представляет собой открытый исходный код бэкенд-фреймворка для управления BootstrapAdmin))

Быстрый старт

Зависимости компонентов: jQuery, bootstrap, font-awesome

CSS

<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://cdn.bootcss.com/font-awesome/5.7.2/css/all.min.css">
<link href="./disk/longbow-select.css">

Скопируйте и вставьте теги <link>, которые импортируют таблицы стилей, в раздел <head> перед всеми остальными таблицами стилей.

JS

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="./disk/longbow-select.js"></script>

Скопируйте и вставьте тег <script>, который импортирует скрипт, в конец раздела <body>.

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

Добавьте элемент HTML на веб-страницу:

<select id="test" class="d-none">
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">深圳</option>
</select>

API

Инициализация элемента через JavaScript

<select id="test" class="d-none">
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">深圳</option>
</select>
<script>
    $('#test').lgbSelect();
</script>

Опции

Можно настроить заполнитель и цвет рамки в соответствии с вашими потребностями:

<select id="test" class="d-none">
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">深圳</option>
</select>
<script>
    $('#test').lgbSelect({ borderClass: 'primary' });
</script>

Проблемы

Пожалуйста, перейдите на страницу Issue, чтобы сообщить о проблемах.

Вклад

Форкните этот проект.
Создайте ветку Feat_xxx.
Отправьте код.
Создайте Pull Request.