Разное

Как сделать выпадающий список в html: Атрибут multiple | htmlbook.ru

31.03.2021

Содержание

Как в html сделать выпадающий список


Как сделать выпадающий список в HTML (ТОП 16)

За последние два года, разработка веб-приложений (сайтов) продвинулась далеко вперед и то, что мы использовали для создания сайта ранее — уже устарело или появились более свежие методы.

Ранее, чтобы создать выпадающий список в html (на англ. — dropdown), мы просто использовали и . Факт в том, что мы и сейчас может его использовать, но зачастую нам нужно менять стили и адаптировать цветовую гамму выпадающего списка под стиль дизайна. К сожалению, не всегда получается стилизовать так как хочется, потому что select и option имеют свои ограничения и плохую поддержку кроссбраузерности.

Специально для этой статьи, я нашел 16 разных примеров, которые могут пригодиться во время разработки сайта. И так приступим.

1. Настраиваемый список

Html шаблон, который позволяет настроить собственные цвета на выпадающего списка.

Посмотреть в песочнице — http://codepen.io/silverdrop/pen/msrcE

2. Сделанный на CSS3/JavaScript

Написан на CSS3 и JavaScript. Обычный выпадающий список.

Посмотреть в песочнице — http://codepen.io/pedronauck/pen/fcaDw

3. Стиль: станции метро

Прозрачный выпадающий список со стилистикой станций метро.

Посмотреть в песочнице — http://codepen.io/carlcalderon/pen/KhwDH

4. Dropy. Написанное на SCSS & jQuery

Посмотреть в песочнице — http://codepen.io/Tombek/pen/JAvHC

5. Для длинных выдающих списков

Отличное решение для длинных выпадающих меню.

Посмотреть в песочнице — http://codepen.io/larrygeams/pen/feoDc

6. Темное и светлое выпадающее меню

Выпадающее меню, которое написано на чисто CSS без использования каких-либо скриптов.

Посмотреть в песочнице — http://codepen.io/Thibaut/pen/Jasci

7. Навигация, эффект раскрытия

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

Посмотреть в песочнице — http://cssdeck.com/labs/navigation-dropdown-with-flip-effect

8. Стильное меню настроек пользователя

Посмотреть в песочнице — http://codepen.io/jakestuts/pen/nEFyw

9. CSS3 выпадающий список

Посмотреть в песочнице — http://codepen.io/daniesy/pen/pfxFi

10. UI выпадающее меню

Сделано в стиле UI, подойдет под UI стилистику сайта.

Посмотреть в песочнице — http://codepen.io/Jeplaa/pen/IzAvx

11. Простой dropdown

Посмотреть в песочнице — http://codepen.io/Dianatomic/pen/HqICG

12. Выбор флага

Dropdown в стиле выбора страны. 

Посмотреть в песочнице — http://codepen.io/abhishek/pen/bkfLi

13. Обычный HTML, CSS dropdown

Посмотреть в песочнице — http://codepen.io/Metty/pen/dglwH

14. Пользовательские действия

Посмотреть в песочнице — http://codepen.io/DKunin/pen/EIobp

15. Анимационное выпадающее меню

Посмотреть в песочнице — http://codepen.io/MrBambule/pen/jIseg

16. 3D dropdown

Довольно интересный и простой дизайн.

Посмотреть в песочнице — http://codepen.io/mingger/pen/hdtiD

Надеюсь вам понравилось моя подборка. Оставляйте комментарии, делитесь мнением и присылайте собственные работы!

Как сделать выпадающий список в html (подборка ТОП 16) от bologer

Как сделать выпадающий список в HTML

Простейший выпадающий список в HTML легко создать, используя тег select. Это тег-контейнер, в него вкладываются теги option – именно они задают элементы списка.

Есть несколько вариантов списков, которые можно сделать с помощью тега select: раскрывающийся список (варианты выпадают после клика на основном поле или наведения на него курсора) и список множественного выбора – в нем пользователь может выбрать несколько пунктов. Первые более распространены, они являются значимым элементом навигации современных сайтов. Выпадающий список множественного выбора можно применить, например, в каталогах, где нужно выбрать несколько характеристик товара.

Изменять внешний вид и свойства списков можно с помощью универсальных и специальных атрибутов.

Атрибуты тега select

1. Multiple – задает множественный выбор.

2. Size – задает количество видимых строк в списке, то есть высоту. И тут все зависит от того, присутствует атрибут multiple или нет. Если да, и вы не указываете size, то при наличии multiple пользователь увидит все возможные варианты выбора, если же multiple отсутствует, то показана будет всего одна строчка, а остальные посетитель сможет прочитать, когда нажмет на значок лифта с правой стороны. Если же высота size задана и она меньше количества вариантов, то справа появится полоса прокрутки.

3. Name – имя. Выпадающий список может обойтись и без него, но оно может быть необходимым для взаимодействия с программой-обработчиком на сервере. Как правило, имя все-таки указывают.

Тег select не имеет обязательных атрибутов в отличие от тега option.

Атрибуты вложенного тега option

  1. Selected – предназначен для выделения пункта списка. Пользователь сможет выделять более одного пункта, если задан атрибут multiple (см. выше).
  2. Value – значение. Этот атрибут обязателен. Веб-сервер должен понимать, какие именно пункты списка выбрал пользователь.
  3. Label. С помощью этого атрибута можно сокращать слишком длинные элементы списков. Например, на экран будет выводиться «Милан», вместо указанного в теге option «Милан — административный центр Ломбардии. Северная Италия». Этот атрибут также используется для группировки пунктов в списке.

Что касается ширины списка, то она устанавливается по умолчанию по длине самого широкого текста в списке. Разумеется, ширину можно менять при помощи стилей HTML.

Его можно сделать при помощи CSS, например, список будет появляться при наведении курсора на элемент страницы. Отличные возможности для создания списков предоставляет JavaScript , работу которого упрощает библиотека Jquery. Выпадающий список, подключенный с помощью этой библиотеки, может быть очень сложным, например, каскадным. То есть при выборе элемента в одном списке появляется следующий список, например, существует пункт меню «Женская одежда» (при наведении выпадают виды одежды), затем при выборе одного из видов, например, «Верхняя одежда», выпадает список с элементами: куртки, парки, пальто, полупальто, шубы и т. п.

Мы поверхностно перечислили основные способы, при помощи которых можно создать выпадающий список. Разумеется, есть масса нюансов в HTML, в CSS и в JavaScript, которые позволяют менять функциональность и внешний вид списков.

Элемент Select. Как сделать выпадающий список на HTML.

Посмотрите на следующий выпадающий список.

Пункт 1Пункт 2Пункт 3

Этот список становится возможным создать с помощью языка HTML. Давайте рассмотрим код, который за это отвечает.

Пункт 1 Пункт 2 Пункт 3

Итак за создание самого списка отвечает элемент select, а за пункты, которые будут выпадать элемент option.

Вполне возможно, что вам может понадобиться сделать так, чтобы по умолчанию у вас был выбран не «Пункт 1», который идет первый по списку, а скажем «Пункт 3». Для этой цели можно воспользоваться атрибутом selected.

Вот как будет выглядеть код:

Пункт 1 Пункт 2 Пункт 3

Как создать редактируемый выпадающий список в HTML?

Я не уверен, что есть способ сделать это автоматически без javascript.

Что вам нужно — это что-то, что работает на стороне браузера, чтобы отправить форму на сервер, когда пользователь делает выбор — следовательно, javascript.

Кроме того, убедитесь, что у вас есть альтернативное средство (то есть кнопка отправки) для тех, у кого отключен javascript.

Хороший пример: Combo-Box Viewer

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

Тег select — выпадающий список

Тег select создает выпадающий список для использования в HTML формах.

Отдельный пункт списка должен храниться в теге option.

Атрибуты

Атрибут Описание
multiple Наличие данного атрибута создает мультиселект
— выпадающий список, в котором можно выбрать несколько пунктов, зажав клавишу контрол (Ctrl) или выделив их мышкой.
Необязательный атрибут. Пользоваться так: <select multiple> или так <select multiple=»multiple»>.
name Имя выпадающего списка. Нужно для того, чтобы достать данные поля ввода в PHP. Для корректной работы формы имена полей ввода не должны совпадать друг с другом (в одной форме). Если они совпадают — в PHP придут данные того поля ввода, которое ниже в HTML коде.

Пример

Давайте посмотрим, как работает выпадающий список:

<select> <option>Москва</option> <option>Минск</option> <option>Киев</option> <option>Лондон</option> </select>

:

Пример

Давайте ширину выпадающего списка сделаем равной ширине самого большого элемента (если она не будет явно указана с помощью CSS свойства width):

<select> <option>Москва - столица России</option> <option>Минск</option> <option>Киев</option> <option>Лондон</option> </select>

:

Пример . Выбор по умолчанию

А теперь давайте попробуем выбрать по умолчанию город Минск. Сделаем это с помощью атрибута

selected:

<select> <option>Москва - столица России</option> <option selected>Минск</option> <option>Киев</option> <option>Лондон</option> </select>

:

Пример . Мультиселект

Давайте теперь превратим обычный select в мультиселект с помощью атрибута multiple. Для этого зажмем клавишу контрол (ctrl) и, не отпуская ее, можем выбрать несколько пунктов выпадающего списка. Или же просто выделим мышкой несколько пунктов (зажмием левую кнопку и выделяем).

<select multiple name="city[]"> <option>Москва - столица России</option> <option>Минск</option> <option>Киев</option> <option>Лондон</option> </select>

:

Пример . Несколько значений по умолчанию в мультиселекте

А теперь, в мультиселекте по умолчанию, попробуем выбрать более, чем одно значение:

<select multiple name="city[]"> <option>Москва - столица России</option> <option selected>Минск</option> <option>Киев</option> <option selected>Лондон</option> </select>

:

Смотрите также

  • атрибут selected,
    который задает выбранный по умолчанию пункт списка
  • тег optgroup,
    который группирует пункты списка
  • тег datalist,
    который создает выпадающий список

Выпадающие списки в HTML-формах. Самоучитель HTML

Выпадающие списки в HTML-формах имеют интересную конструкцию, которорая состоит из тега-оболочки select и тегов-элементов option. Атрибут name присваивается тегу select, а атрибут value тегу option.

<select name="name_spiska" >
       <option value="0"> Ваш возраст </option>
       <option value="1"> до 18 </option>
       <option value="2"> 18-35 </option>
       <option value="3"> 35-50 </option>
       <option value="4"> больше 50 </option>
 </select>

Результат: Ваш возраст до 18 18-35 35-50 больше 50

При использовании в одной HTML-форме двух или более списков помещать их в таблицу нет необходимости. За исключением случаев если этого требует ваш дизайн(шаблон) сайта.

В выпадающем списке всегда(по умолчанию) первым отображается верхний элемент. Но умолчания для того и придумали чтобы их можно было менять на нужное вам значение. Делается это при помощи атрибута

selected, который присваивается тегу option без значения.

<select name="name_spiska" >
       <option value="1"> до 18 </option>
       <option value="2" selected> 18-35 </option>
       <option value="3"> 35-50 </option>
       <option value="4"> больше 50 </option>
 </select>

Выбрать возраст: до 18 18-35 35-50 больше 50

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

<select name="name_spiska" size="3">
       <option value="1"> до 18 </option>
       <option value="2"> 18-25 </option>
       <option value="3"> 25-35 </option>
       <option value="4"> 35-50 </option>
       <option value="5"> 50-60 </option>
       <option value="6"> больше 60 </option>
 </select>

до 18 18-25 25-35 35-50 50-60 больше 60
Как заметили, значение атрибута size является цифра, которая указывает сколько элементом должно отображаться, в моем примере три.

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

Раскрывающийся список | Yocton

Содержание:

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

<select name="">
    <option value="1">Один</option>
    <option value="2">Два</option>
    <option value="3">Три</option>
    <option value="4">Четыре</option>
</select>
ОдинДваТриЧетыре

Вы можете изменить количество отображаемых пунктов меню с помощью атрибута size. Значение этого атрибута равное 0 или 1 отображает стандартное раскрывающийся список. Если же атрибутsize превышает 1, то список отображается как поле, отображающее несколько строк, с одним значением на строку и полосой прокрутки для выбора доступных пунктов.

<select name="" size="3"></select>
ОдинДваТриЧетыре

По умолчанию пользователи могут выбирать только одно значение. Добавление атрибута multiple позволяет пользователям одновременно выбирать несколько элементов списка и отправлять все выбранные значения в форме. Использование атрибута multiple автоматически преобразует раскрывающийся список в поле, как если бы он имел определенный размер. Размер по умолчанию этого поля определяется конкретным браузером, который вы используете, и его невозможно вернуть в в вид обычного раскрывающегося списка.

<select name="" multiple></select>
ОдинДваТриЧетыре

При использовании атрибута multiple существует разница между использованием значений 0 и 1 для атрибута size. Использование 0 приведет к тому, что браузер будет вести себя по умолчанию, как будто атрибута size вообще нет. Использование значения равного 1 будет явно задавать размер получаемого поля только в одну строку.

ОдинДваТриЧетыре

Элементы option внутри элемента select — это те пункты списка, из которых пользователь будет выбирать. Стандартный синтаксис для элемента option выглядит следующим образом:

<option>Выбери меня</option>

Однако важно отметить, что текст внутри самого элемента <option> не всегда используется, и по существу становится значением по умолчанию для атрибутов, которые не указаны. На самом деле внешним видом и передоваемым значением на сервер являются соответственно атрибуты label и value. Атрибут label представляет собой текст, который будет отображаться в раскрывающемся меню (видимый пункт, который вы выбираете из списка). Атрибут value — это текст, который будет отправлен вместе с отправкой формы. Если одно из этих значений опущено, то вместо него использует текст внутри элемента как значение. Таким образом, приведенный выше пример может быть «расширен»:

<option label="Пункт 1" value="1">Выбери меня</option>
<option label="Пункт 2" value="2">
Выбери меня

Обратите внимание на отсутствие внутреннего текста и конечного тега, которые не требуются для фактического создания пункта списка. Если они будут включены, то внутренний текст будет проигнорирован, потому что оба атрибута указаны и текст не нужен. Тем не менее большинство пишут иным образом:

<option  value="1">Пункт 1</option>
<option  value="2">Пункт 1</option>

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

<option value="2" selected>Два</option>
ОдинДваТриЧетыре

Если вы используете атрибут selected в многовариантном списке, то по умолчанию будут выбраны все пункты с этим атрибутом, и ни пункт не будет выбран, если все пункты не имеют этого атрибута.

<option value="1">Один</option>
<option selected value="2">Два</option>
<option value="3">Три</option>
<option selected value="4">Четыре</option>
ОдинДваТриЧетыре

Вы можете группировать свои пункты в раскрывающимся списке, чтобы обеспечить более структурированный макет в длинном списке параметров, с помощью элемента <optgroup>. Синтаксис очень простой, просто используя элемент с атрибутом label для идентификации заголовка для группы и содержащий ноль или более пунктов, которые должны быть внутри этой группы.

<select name="">
    <option value="milk">Молоко</option>
    <optgroup label="Фрукты">
        <option value="banana">Бананы</option>
        <option value="strawberry">Клубника</option>
    </optgroup>
    <optgroup label="Овощи" disabled>
        <option value="carrot">Морковь</option>
        <option value="zucchini">Цукини</option>
    </optgroup>
</select>
МолокоБананыКлубникаМорковьЦуккини

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

Элемент <datalist> указывает список пунктов для элемента . Он позволяет создать функцию автозаполнения для элементов . Пользователи будут видеть раскрывающийся список параметров по мере их записи. Список, создаваемый элементом <datalist>, связывается с текстовым полем посредством атрибута id. Его значение должно совпадать со значением атрибута list элемента <input>.

<input list="Languages">
<datalist>
    <option value="PHP">
    <option value="Perl">
    <option value="Python">
    <option value="Ruby">
    <option value="C+">
</datalist>

Но не все браузеры поддерживают данный элемент, например Safari.

Как сделать выпадающий список в Excel

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

Excel предусматривает множество различных методов генерации выпадающего меню, и кроме того, дает возможность гибко настраивать их. Давайте проанализируем эти методы более подробно.

Процесс создания списка

Чтобы сгенерировать всплывающее меню, следует кликнуть на пункты меню по пути «Данные» – «Проверка данных». Откроется диалоговое окошко, где надо найти вкладку «Параметры» и нажать по ней, если она до этого еще не была открыта. В нем есть множество настроек, но нам важен пункт «Тип данных». Из всех значений «Список» – это то, что надо.

1

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

  1. Самостоятельное указание элементов списка через точку с запятой в поле «Источник», расположенного на той же вкладке того же диалогового окна.

    2

  2. Предварительное указание значений. В поле «Источник» содержится диапазон, где имеется необходимая информация.

    3

  3. Указание именованного диапазона. Метод, повторяющий прошлый, но только необходимо предварительно назвать диапазон.

    4

Любой из этих методов выдаст требуемый результат. Давайте разберем методы генерации раскрывающихся перечней в реальных ситуациях.

На основе данных из перечня

Допустим, у нас есть таблица, описывающая виды разных фруктов.

5

Для создания перечня в раскрывающемся меню, основываясь на этом наборе информации, нужно совершить такие действия:

  1. Выбрать ячейку, отведенную под будущий перечень.
  2. На ленте найти вкладку «Данные». Там осуществляем нажатие по «Проверка данных».

    6

  3. Найти пункт «Тип данных» и переключить значение на «Список».

    7

  4. В поле, обозначающем опцию «Источник», ввести нужный диапазон. Обратите внимание, что нужно указывать абсолютные ссылки, чтобы при копировании списка информация не смещалась.

    8

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

С ручной записью данных

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

Допустим, перед нами стоит задача создать список, содержащий два возможных варианта выбора: да и нет. Чтобы реализовать поставленную задачу, необходимо:

  1. Нажать по ячейке, отведенной под перечень.
  2. Открыть «Данные» и там отыскать знакомый нам раздел «Проверка данных».

    9

  3. Снова выбираем тип «Список».

    10

  4. Здесь в качестве источника необходимо ввести “Да;Нет”. Видим, что информация при ручном вводе вводится с использованием точки с запятой для перечисления.

После нажатия «ОК» у нас появился следующий результат.

11

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

Создание раскрывающегося списка при помощи функции СМЕЩ

Кроме классического метода возможно применение функции СМЕЩ, чтобы генерировать выпадающие меню.

Откроем лист.

12

Чтобы применять функцию для выпадающего списка надо выполнить такое:

  1. Выбрать интересующую ячейку, где надо разместить будущий список.
  2. Открыть последовательно вкладку «Данные» и окно «Проверка данных».

    13

  3. Задаем «Список». Делается это аналогично предыдущим примерам. Наконец, используется такая формула: =СМЕЩ(A$2$;0;0;5). Мы ее вводим там, где задаются ячейки, которые будут использоваться в качестве аргумента.

Потом программой создастся меню с перечнем фруктов.

Синтаксис этой такой:

=СМЕЩ(ссылка;смещ_по_строкам;смещ_по_столбцам;[высота];[ширина])

Видим, что сия функция предусматривает 5 аргументов. Сначала дается первый адрес ячейки для смещения. Следующие два аргумента указывают, сколько рядов и колонок, на какое происходит смещение. Если говорить о нас, в качестве аргумента «Высота» приводится значение 5, поскольку оно отображает высоту перечня. 

Выпадающий список в Excel с подстановкой данных (+ с использованием функции СМЕЩ)

В приведенном случае СМЕЩ позволила создать всплывающее меню, расположенное в фиксированном диапазоне. Недостаток этого метода – после добавления пункта придется самостоятельно редактировать формулу.

Чтобы создать динамический перечень с поддержкой ввода новой информации, необходимо:

  1. Осуществить выделение интересующей ячейки.
  2. Раскрыть вкладку «Данные» и нажать по «Проверка данных».
  3. В открывшемся окошке снова осуществляем выбор пункта «Список» и источником данных указываем такую формулу: =СМЕЩ(A$2$;0;0;СЧЕТЕСЛИ($A$2:$A$100;”<>”))
  4. Нажимаем «ОК».

Здесь содержится функция СЧЕТЕСЛИ, чтобы сразу определять, сколько ячеек заполнено (хотя у нее есть значительно большее количество применений, просто мы записываем ее здесь для конкретной цели).

Чтобы формула функционировала нормально, надо проследить есть ли на пути формулы пустые ячейки. Их быть не должно.

Выпадающий список с данными другого листа или файла Excel

Классический метод не функционирует, если требуется получить информацию из другого документа или даже содержащегося в этом же файле листа. Для этого используется функция ДВССЫЛ, позволяющая ввести в верном формате ссылку на ячейку, находящуюся в другом листе или вообще – файле. Необходимо выполнить такие действия:

  1. Активировать ячейку, где размещаем перечень.
  2. Открываем уже знакомое нам окно. В том же месте, где мы ранее указывали источники на другие диапазоны, указывается формула в формате =ДВССЫЛ(“[Список1.xlsx]Лист1!$A$1:$A$9”). Естественно, вместо Список1 и Лист1 можно вставлять свои имена книги и листа соответственно. 

Внимание! Имя файла указывается в квадратных скобках. При этом Excel не сможет применять в качестве источника информации файл, закрытый в данный момент.

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

Создание зависимых выпадающих списков

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

24

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

  1. Создать 1-й перечень с именами диапазонов.

    25

  2. В месте ввода источника один за одним выделяются требуемые показатели.

    26

  3. Создать 2-й перечень, зависящий от типа растений, который предпочел человек. Как вариант, если в первом указать деревья, то информацией во втором списке станет «дуб, граб, каштан» и дальше. Необходимо записать в месте ввода источника данных формулу =ДВССЫЛ(E3). E3 – ячейка содержащая название диапазона 1.=ДВССЫЛ(E3). E3 – ячейка с наименованием списка 1.

Теперь все готово.

27

Как выбрать несколько значений из выпадающего списка?

Иногда нет возможности отдать предпочтение только одному значению, поэтому надо выбрать больше одного. Тогда надо добавить в код страницы макрос. С использованием комбинации клавиш Alt + F11 открывается редактор Visual Basic. И туда вставляется код.

Private Sub Worksheet_Change(ByVal Target As Range)

    On Error Resume Next

    If Not Intersect(Target, Range(“Е2:Е9”)) Is Nothing And Target.Cells.Count = 1 Then

        Application.EnableEvents = False

        If Len(Target.Offset(0, 1)) = 0 Then

            Target.Offset(0, 1) = Target

        Else

            Target.End(xlToRight).Offset(0, 1) = Target

        End If

        Target.ClearContents

        Application.EnableEvents = True

    End If

End Sub 

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

Private Sub Worksheet_Change(ByVal Target As Range)

    On Error Resume Next

    If Not Intersect(Target, Range(“Н2:К2”)) Is Nothing And Target.Cells.Count = 1 Then

        Application.EnableEvents = False

        If Len(Target.Offset(1, 0)) = 0 Then

            Target.Offset(1, 0) = Target

        Else

            Target.End(xlDown).Offset(1, 0) = Target

        End If

        Target.ClearContents

        Application.EnableEvents = True

    End If

End Sub

Ну и наконец, для записи в одной ячейке используется этот код.

Private Sub Worksheet_Change(ByVal Target As Range)

    On Error Resume Next

    If Not Intersect(Target, Range(“C2:C5”)) Is Nothing And Target.Cells.Count = 1 Then

        Application.EnableEvents = False

        newVal = Target

        Application.Undo

        oldval = Target

        If Len(oldval) <> 0 And oldval <> newVal Then

            Target = Target & “,” & newVal

        Else

            Target = newVal

        End If

        If Len(newVal) = 0 Then Target.ClearContents

        Application.EnableEvents = True

    End If

End Sub

Диапазоны редактируемы.

Как сделать выпадающий список с поиском?

В этом случае надо изначально использовать другой тип перечня. Открывается вкладка «Разработчик», после чего надо кликнуть или тапнуть (если экран сенсорный) на элемент «Вставить» – «ActiveX». Там есть «Поле со списком». Будет предложено нарисовать этот список, после чего он добавится в документ.

28

Далее он настраивается через свойства, где в опции ListFillRange прописывается диапазон. Ячейка, где отобразиться определенное пользователем значение, настраивается с помощью опции LinkedCell. Далее нужно просто записывать первые символы, как программа автоматически подскажет возможные значения.

Выпадающий список с автоматической подстановкой данных

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

  1. Создать набор ячеек для будущего перечня. В случае с нами это набор цветов. Выделяем его.

    14

  2. Далее его необходимо отформатировать, как таблицу. Нужно нажать одноименную кнопку и осуществить выбор стиля таблицы. 15

    16

Далее нужно подтвердить этот диапазон путем нажатия клавиши «ОК».

17

Выделяем получившуюся таблицу и даем ей имя через поле ввода, находящееся сверху столбца А.

18

Все, таблица есть, и она может использоваться в качестве основы для выпадающего списка, для чего надо:

  1. Выбрать ячейку, где перечень располагается.
  2. Открыть диалог «Проверка данных».

    19

  3. Тип данных выставляем «Список», а как значения даем имя таблицы через знак =. 20

    21

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

22

В этом и заключается преимущество таблицы, что диапазон автоматически увеличивается при добавлении новых данных. Соответственно, это самый удобный способ добавления списка.

23

Как скопировать выпадающий список?

Для копирования достаточно использовать комбинацию клавиш Ctrl + C и Ctrl + V. Так выпадающий список будет скопирован вместе с форматированием. Чтобы убрать форматирование, нужно воспользоваться специальной вставкой (в контекстном меню такая опция появляется после копирования списка), где выставляется опция «условия на значения».

Выделение всех ячеек, содержащих выпадающий список

Чтобы выполнить эту задачу, необходимо воспользоваться функцией «Выделить группу ячеек» в группе «Найти и выделить».

29

После этого откроется диалоговое окно, где следует в меню «Проверка данных» выбрать пункты «Всех» и «Этих же». Первый пункт выделяет все списки, а второй – только похожие на определенные.

Оцените качество статьи. Нам важно ваше мнение:

Переход при выборе пункта из выпадающего списка

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

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

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

<script language="JavaScript" type="text/javascript">
<!--
function linklist(what){
var selectedopt=what.options[what.selectedIndex]
if (document.getElementById && selectedopt.getAttribute("target")=="new")
window.open(selectedopt.value)
else
window.location=selectedopt.value
}
-->
</script>

В третьей сточке у нас указывается имя функции («linklist» в данном случае), которое можно задать произвольно, главное чтобы не странице не существовало ещё одной функции с таким же именем.

Далее вставляем сам код выпадающего списка.

<form name="menu">
<select name="sel" onChange="linklist(document.menu.sel)">
<option value="#">Выберите раздел для перехода</option>
<option title="Переход на главную страницу (откроется в новом окне)" 
        value="http://www.redsimple.ru/" target="new">Главная страница</option>
<option title="Переход к портфолио по сайтам" value="http://www.redsimple.ru/sites/">Сайты</option>
<option title="Переход к странице с изображениями" value="http://www.redsimple.ru/foto/">Фото</option>
<option title="Переход к архиву ссылок" value="http://www.redsimple.ru/links/">Линки</option>
</select>
</form>

Имя формы (<form name=»имя_формы»>) и имя списка (<form name=»имя_списка» … >) указываются произвольными, главное чтобы были уникальными. Самое важное — не напутать их в параметрах вызова нашей функции перехода. Прописывается вызов в атрибутах списка (вторая строчка):

onChange=»имя_функции(document.имя_формы.имя_списка)»

В нашем случае onChange=»linklist(document.menu.sel)»

Если прописать тэгу элемента (<option>)списка атрибут target=»new», то ссылка будет открываться в новом окне (пятая строчка).

В атрибуте title=»…» указываем всплывающую подсказку для ссылки (точно так же, как для тэга <a>).

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

<script language="JavaScript" type="text/javascript">
<!--
function linklist(what){
var selectedopt=what.options[what.selectedIndex]
if (document.getElementById && selectedopt.getAttribute("target")=="new")
window.open(selectedopt.value)
else
window.location=selectedopt.value
}
-->
</script>

А в коде списка меняем событие OnChange на OnClick

<form name="menu">
<select name="sel">
<option value="#">Выберите раздел для перехода</option>
<option title="Переход на главную страницу (откроется в новом окне)" 
        value="http://www.redsimple.ru/" target="new">Главная страница</option>
<option title="Переход к портфолио по сайтам" value="http://www.redsimple.ru/sites/">Сайты</option>
<option title="Переход к странице с изображениями" value="http://www.redsimple.ru/foto/">Фото</option>
<option title="Переход к архиву ссылок" value="http://www.redsimple.ru/links/">Линки</option>
<input type="button" value="Переход">
</select>
</form>

Ну и конечно же смотрим, чтобы на одной странице не было функций, форм и списков с одинаковыми именами.

И ещё, визуальные редакторы Joomla режут JavaSrcipt, по этому необходимо сохранять материал с этим списком в режиме «Без редактора».

Как сделать выпадающий список в HTML

      Рубрики

    • Автомобили
    • Бизнес
    • Дом и семья
    • Домашний уют
    • Духовное развитие
    • Еда и напитки
    • Закон
    • Здоровье
    • Интернет
    • Искусство и развлечения
    • Карьера
    • Компьютеры
    • Красота
    • Маркетинг
    • Мода
    • Новости и общество
    • Образование
    • Отношения
    • Публикации и написание статей
    • Путешествия
    • Реклама
    • Самосовершенствование
    • Спорт и Фитнес
    • Технологии
    • Финансы
    • Хобби
    • О проекте
    • Реклама на сайте
    • Условия
    • Конфиденциальность
    • Вопросы и ответы

    FB

    Войти Ему трона не видать: эксперты думают, что принц Чарльз королем не станет Уинстон Черчилль остроумно подметил одну черту характера, свойственную русским Как на самом деле теряются друзья? Отнюдь не ссорах (мнение Бе

    примеров и передовых методов — Smashing Magazine

    Об авторе

    Мэтт Кронин — заядлый графический дизайнер, веб-дизайнер / разработчик, программист какао, фотограф, цифровой художник и т.п. Еще ему нравится писать, и он … Больше о Мэтт ↬

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

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

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


    Огромная вертикальная выпадающая панель от Foodnetwork; обратите внимание на кнопку закрытия («x» в правом верхнем углу).

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

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

    Организация страниц в разделе

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

    Организация категорий в блоге

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

    Показать продукты на веб-сайте электронной коммерции

    Вы увидите, что многие веб-сайты электронной коммерции используют раскрывающиеся меню для отображения продуктов или категорий продуктов.Выпадающее меню — это удобная функция, в которой все потребители могут легко понять, поэтому это идеальный способ упорядочить продукты. Веб-сайт Best Buy, показанный ниже, делает именно это.

    Дисплейные модули

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

    Best Practices

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

    Избегайте раскрывающегося списка с более чем двумя уровнями

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

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

    В принципе, есть два способа доступа к раскрывающемуся меню: с помощью наведения или щелчка, чтобы активировать меню. С точки зрения дизайна и удобства, всплывающее меню лучше.

    С другой стороны, многие будут утверждать, что интерактивное меню лучше, потому что оно намного удобнее. Причина? Из-за способа построения всплывающего меню пользователь должен постоянно держать указатель над меню. Если пользователь теряет фокус всплывающего меню, оно закрывается. Поэтому лучше использовать раскрывающееся меню, которое активируется нажатием кнопки, а затем деактивируется нажатием кнопки еще раз.

    CSS-Tricks содержит руководство, показывающее, как создать макет, похожий на макет Digg.Это идеальное раскрывающееся меню с функцией активации / деактивации щелчком, так что вам, безусловно, стоит взглянуть на него.

    Кроме того, в Google есть раскрывающееся меню, в котором используется трюк включения / выключения.

    Задержка деактивации наведения

    Избегание наведения структуры и многих уровней в раскрывающемся списке может быть слишком большим ограничением для навигации, которую вы пытаетесь создать. Однако есть решение, которое может повысить удобство использования всплывающего и многоуровневого меню.В большинстве меню раскрывающийся список исчезает сразу после того, как пользователь отводит указатель мыши от меню. Решение — отсрочить его исчезновение. Или используйте функцию щелчка, которая требует, чтобы пользователи щелкали за пределами области меню, чтобы закрыть раскрывающийся список, аналогично тому, как работает лайтбокс.

    Возьмем, к примеру, Dell. Он использует многоуровневое раскрывающееся меню, но его все же можно использовать. Это единственное исключение из использования многоуровневых раскрывающихся меню.

    Кроме того, меню на сайте Porsche имеет несколько уровней.Однако в меню очень широкий диапазон фокусировки. Это означает, что вам нужно переместить указатель на определенное расстояние от меню, чтобы закрыть его.

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

    Пример ниже, домашняя страница MediaTemple, демонстрирует сильный эффект наведения курсора на параметры навигации, который помогает поддерживать раскрывающееся меню.

    Бесшовные переходы

    Раскрывающееся меню должно отображаться плавно и без прерываний. Меню должно загрузиться немедленно. Многие веб-сайты делают ошибку, делая меню настолько «тяжелым», что его загрузка занимает больше времени при наведении курсора.

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

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

    Удалить всплывающие подсказки

    Конечно, при разработке раскрывающихся меню всегда есть небольшие детали, которые влияют на удобство использования.Одна важная практика, которую вы можете упустить, — это наличие всплывающих подсказок или их отсутствие. Вы всегда должны удалять всплывающие подсказки с кнопок с раскрывающимися меню. Причина? Всплывающие подсказки просто мешают, а иногда даже блокируют первый элемент списка в раскрывающемся меню.

    Да, мы еще раз выберем Microsoft. Microsoft допускает эту ошибку на своей корпоративной странице. Обратите внимание, как всплывающая подсказка блокирует многие элементы списка, что значительно усложняет навигацию.

    Приемы стилизации

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

    Используйте чистый список

    Важен не только стиль элемента, но и стиль содержимого. Чистая типографика и читаемый список важны. Используйте разумный интервал между элементами в списке и добавьте границу над и под элементами списка.

    Пример ниже от Audi показывает очень хорошо организованный и читаемый список.Элементы списка разделены, и есть даже значки элементов списка.

    С другой стороны, на сайте The Washington Post список в раскрывающемся меню очень скудный. Между элементами списка недостаточно интервалов, поэтому меню очень загромождено и его сложно использовать.

    Эффекты наведения на элементы списка

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

    Полупрозрачный фон

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

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

    В приведенном ниже примере раскрывающееся меню выглядит так, как должно.

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

    Navigant Consulting

    Это меню плохо оформлено и не работает.

    Panasonic

    Хотя это меню хорошо оформлено, его трудно использовать из-за плохого эффекта наведения.

    Toshiba

    Меню Toshiba слишком маленькое и не соответствует правилам оформления.

    LG

    Как и в меню Microsoft выше, у этого есть небольшая задержка, что затрудняет использование.

    Chrysler

    На странице Chrysler используется раскрывающееся меню с очень мелким текстом, что затрудняет чтение.

    Sun

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

    Creative Labs

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

    HP

    Еще одно всплывающее меню, в котором отсутствуют полезные функции.

    Alienware

    Черное меню на черном фоне затрудняет использование этого раскрывающегося списка.

    Здесь много раскрывающихся меню с удобными функциями и функциями стилизации.

    Sony

    Хорошо продуманное всплывающее меню с хорошим списком.

    ActionEnvelope

    Чистая вертикальная раскрывающаяся панель с большим количеством отступов; обратите внимание, как панель выглядит выше других элементов дизайна.Простое и красивое решение.

    Helmy Bern

    Красиво оформленное меню с плавным переходом.

    RedBrick

    Это меню аккуратно оформлено и легко читается.

    REI

    Это раскрывающееся меню очень широкое, поэтому мышь легко удерживать в фокусе.

    Philips

    Philips имеет большой и удобный раскрывающийся модуль.

    Walmart

    На сайте Walmart пользователь щелкает область за пределами меню, чтобы закрыть его.

    Samsung

    Меню Samsung удобно использовать из-за большого размера и стиля.

    Epson

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

    Mini Cooper

    На этом веб-сайте используется раскрывающееся меню с отложенным закрытием.

    Шлюз

    Вот еще один полезный раскрывающийся элемент.

    Asus Global

    Хорошо оформленное меню с отложенным скрытием.

    Intel

    Очень чистое выпадающее меню.

    Target

    Хорошо организованное меню с отложенным закрытием.

    Garmin

    Это раскрывающееся меню простое, но функциональное.

    Logitech

    Раскрывающийся список с очень красивым стилем, который соответствует меню.

    Incase

    Это меню очень простое, но служит своей цели.

    evelMerch

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

    IBM

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

    EA

    Очень чистый и хорошо организованный выпадающий элемент.

    Дополнительная литература по SmashingMag:

    (al, il)

    Выпадающие списки Excel — проверка данных

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

    Что такое проверка данных?

    В Excel функция проверки данных помогает контролировать, что может быть введенным в ваш рабочий лист. Например, вы можете:

    • создать раскрывающийся список элементов в ячейке
    • ограничить записи, например дату диапазон или только целые числа
    • создать заказ правила того, что можно ввести

    В этом руководстве вы узнаете, как создать раскрывающийся список вариантов. в ячейке, как в списке имен сотрудников, показанном ниже.

    Создать раскрывающийся список в ячейке

    Чтобы создать раскрывающийся список в Excel, вы можете назвать список элементы на основе именованной таблицы Excel. Затем используйте этот список в качестве источника для раскрывающегося списка Проверка данных. Если ты не хочешь создавать именованной таблицы, вы можете следовать инструкциям в именованном диапазоне раздел ниже.

    Посмотрите шаги в этом коротком видео и письменные инструкции находятся под видео

    Как создать раскрывающийся список

    С помощью проверки данных вы можете создать раскрывающийся список параметров в клетка.Есть 3 простых шага:

    1. Создайте таблицу элементов ИЛИ создайте список

    2. Назовите список

    3. Создайте раскрывающийся список

    Примечание : Проверка данных не является надежной. Это можно обойти вставив данные в ячейку или выбрав «Очистить»> «Очистить все», на вкладке «Главная» ленты.

    1. Создайте таблицу товаров

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

    ПРИМЕЧАНИЕ. В списке проверки данных может отображаться до 32 767 элементов из список на листе.

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

    3. Выберите ячейку в списке и на вкладке «Вставка» ленты щелкните Стол

    4. Поставьте галочку в «Моя таблица с заголовками» и нажмите Ok

    Теперь таблица является именованной таблицей Excel.

    2. Назовите список

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

    Вы можете использовать Диспетчер имен, как показано на видео, или использовать поле имени. Оба метода описаны ниже. Метод Name Box быстрее, но вы не можете добавить комментарий.

    Используйте диспетчер имен

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

    1. Выберите одну из ячеек в списке имен сотрудников.
    2. На ленте щелкните вкладку Формулы и в группе Определенные имена щелкните Определить имя
    3. В диалоговом окне «Новое имя» введите имя из одного слова для выбранного диапазона, например EmpNames
    4. Оставьте объем работ как книгу
    5. Щелкните поле «Ссылается на» (на листе ячейка, которая в настоящее время указана в поле «Ссылается на», будет выделена)
    6. Чтобы выбрать все имена в списке, наведите указатель мыши на верхнюю часть ячейки заголовка (B1) и, когда появится черная стрелка, щелкните, чтобы выбрать все имена без ячейки заголовка.(Обязательно нажимайте, когда стрелка находится в ячейке B1, а не в кнопке заголовка столбца B)
    7. Имя таблицы и имя столбца появятся в поле «Ссылается на»: = Таблица1 [Сотрудники]
    8. Щелкните OK, чтобы ввести имя.
    Используйте поле имени

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

    1. Щелкните вверху ячейки заголовка, чтобы выбрать все ячейки в списке (заголовок выделяться не будет).

    2. Щелкните поле Имя слева от строки формул
    3. Введите имя из одного слова для выбранного диапазона, например EmpNames, а затем нажмите клавишу Enter , чтобы ввести имя.
    • ПРИМЕЧАНИЕ: После того, как вы нажмите Enter, имя исчезнет, ​​а имя таблицы появится в поле имени.

    3.Создать раскрывающийся список

    Теперь, когда вы создали именованный диапазон, вы можете использовать его для создания выпадающий список в одной или нескольких ячейках

    1. Выберите ячейки, в которых требуется раскрывающийся список
    2. На вкладке «Данные» ленты щелкните «Проверка данных».

    3. В раскрывающемся списке Разрешить выберите Список

    4. Щелкните поле «Источник», введите знак равенства и список имя, например:
      = EmpNames
      ИЛИ нажмите клавишу F3, чтобы просмотреть список имен, щелкните имя и нажмите ОК

    5. Нажмите ОК, чтобы закрыть диалоговое окно Проверка данных.
    6. Щелкните одну из ячеек и щелкните стрелку раскрывающегося списка.

    7. Щелкните элемент в раскрывающемся списке, чтобы ввести его в ячейку.

    Включить Другой лист

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

    Посмотрите это видео, чтобы увидеть шаги, и ознакомьтесь с письменными инструкциями здесь: Список из другой книги

    Использовать список с разделителями

    Вместо того, чтобы обращаться к списку элементов на листе, вы можете введите список в поле «Источник» через запятую. Например:

    Да, Нет, Возможно

    Примечания :

    1. Этот метод проверки данных чувствителен к регистру — если пользователь вводит ДА, будет отображаться предупреждение об ошибке.
    2. Пробелы можно вводить до или после допустимых элементов, и сообщение об ошибке не отображается, например » Да » будет разрешено. (Спасибо Питеру за этот совет.)

    Разрешить записи, которых нет в раскрывающемся списке

    Чтобы пользователи могли также вводить элементы, которых нет в списке, снимите флажок, чтобы отключить Предупреждение об ошибке.

    Скачать образец файла

    Вы можете скачать образец файла раскрывающихся списков здесь: Drop Книга вниз по списку.Заархивированный файл имеет формат xlsx и не содержит макросов.

    Видео для проверки данных

    В этом плейлисте основных видео с проверкой данных . Щелкните, чтобы запустить список воспроизведения. Или в левом верхнем углу видео, щелкните значок «Плейлист» и щелкните миниатюру видео, чтобы начать это видео.

    В этом плейлисте видео с расширенной проверкой данных . Щелкните, чтобы запустить список воспроизведения. Или в верхнем левом углу видео, щелкните значок «Плейлист» и щелкните миниатюру видео, чтобы начать это видео

    Не пропустите наши советы по Excel

    Не пропустите мои последние советы и видео по Excel! Нажмите OK, чтобы получать мой еженедельный информационный бюллетень с советами по Excel и ссылками на другие новости и ресурсы Excel.

    Дополнительные уроки

    Создание зависимых раскрывающихся списков

    Индекс проверки данных Страница

    Изменить название продукта на код

    Dependent Drop Down Lists Видео

    Скрыть использованные предметы в раскрывающемся списке

    Список из другой книги

    Примеры критериев проверки данных

    Правила даты проверки данных

    Советы по проверке данных

    Проверка данных с помощью комбинированного списка

    Создание раскрывающегося списка Excel 2003

    Создание раскрывающегося меню навигации с помощью HTML5 и CSS3

    Есть несколько отличных решений для раскрывающихся меню навигации, например, плагин jquery superfish.Многие из них используют много файлов и ресурсов для создания раскрывающихся списков, но иногда они вам не нужны. Я хочу показать вам, как создать собственное простое, но стильное раскрывающееся меню, используя новые теги HTML5 и великолепные стили CSS3.

    Nav Menu (7783 загрузки)

    Раскрывающийся список, который мы собираемся создать, скрывается и открывается при наведении курсора, используя только CSS. Используя новые функции переходов CSS3, мы будем анимировать состояния наведения и раскрывающиеся списки. Эти эффекты действуют точно так же, как эффекты javascript, которые вы использовали.Структура файлов проста. Вам понадобятся файлы index.html и style.css для хранения стилей css.

    Вот предварительный просмотр того, что мы построим сегодня:

    Начнем со структуры HTML. Это головная часть:

    
     Раскрывающееся меню навигации HTML5 / CSS3 
    
    
    
    
     
    
    
    
    
     

    В основной части мы добавим html-код для навигационного меню. Каждый список ul внутри li представляет собой раскрывающееся меню. Я добавил «» к каждому родительскому li, чтобы показать иерархию. Код создает двойные кавычки под прямым углом к ​​элементу.

    
    
    
    
    
     

    Теперь стилизуем навигацию.Начнем со стилей для основной навигации. При желании стили для #nav id можно удалить. Они просто в центре меню. Вы можете изменить их, чтобы они соответствовали вашему дизайну.

    / * Основная навигация * /
    #nav {
    положение: относительное;
    ширина: 620 пикселей;
    маржа: 0 авто;
    маржа сверху: 50 пикселей;
    отступ: 10 пикселей;
    }
    
    ul # navigation {
    маржа: 0px авто;
    положение: относительное;
    плыть налево;
    граница слева: сплошной 1px # c4dbe7;
    граница справа: сплошной 1px # c4dbe7;
    }
    
    ul # navigation li {
    дисплей: встроенный;
    размер шрифта: 12 пикселей;
    font-weight: жирный;
    маржа: 0;
    отступ: 0;
    плыть налево;
    положение: относительное;
    верхняя граница: 1px solid # c4dbe7;
    нижняя граница: 2px solid # c4dbe7;
    }
    
    ul # navigation li a {
    отступ: 10px 25px;
    цвет: # 616161;
    тень текста: 1px 1px 0px #fff;
    текстовое оформление: нет;
    дисплей: встроенный блок;
    граница справа: сплошной 1px #fff;
    граница слева: сплошной цвет 1px # C2C2C2;
    верхняя граница: 1px solid #fff;
    фон: # f5f5f5;
    
    -webkit-transition: цвет 0.2 с линейный, фон 0,2 с линейный;
    -moz-transition: цвет 0,2 с линейный, фон 0,2 с линейный;
    -o-переход: цветной 0,2 с линейный, фон 0,2 с линейный;
    переход: цветной 0,2 с линейный, фон 0,2 с линейный;
    }
    
    ul # navigation li a: hover {
    фон: # f8f8f8;
    цвет: # 282828;
    }
    
    ul # navigation li a.first {
    граница слева: 0 нет;
    }
    
    ul # navigation li a.last {
    граница справа: 0 нет;
    }
    
    ul # navigation li: hover> a {
    фон: #fff;
    }
    
     

    Обратите внимание, что ul # navigation li a имеет несколько стилей перехода.Они используются для создания приятного эффекта затухания при наведении курсора.

    Теперь стилизуем выпадающие меню:

    / * Выпадающая навигация * /
    ul # навигация li: hover> ul
    {
    / * эти 2 стиля очень важны,
    это те, которые заставляют раскрывающийся список появляться при наведении * /
    видимость: видимая;
    непрозрачность: 1;
    }
    
    ul # navigation ul, ul # navigation ul li ul {
    стиль списка: нет;
        маржа: 0;
        отступ: 0;
    / * следующие 2 стиля очень важны,
    это те, которые заставляют раскрывающийся список оставаться скрытым * /
        видимость: скрыта;
        непрозрачность: 0;
        позиция: абсолютная;
        z-индекс: 99999;
    ширина: 180 пикселей;
    фон: # f8f8f8;
    box-shadow: 1px 1px 3px #ccc;
    / * css3 переходы для плавного наведения * /
    -webkit-transition: непрозрачность 0.2 с линейный, видимость 0,2 с линейная;
    -moz-transition: непрозрачность 0,2 с линейная, видимость 0,2 с линейная;
    -o-переход: непрозрачность 0,2 с линейная, видимость 0,2 с линейная;
    переход: непрозрачность 0,2 с линейная, видимость 0,2 с линейная;
    }
    
    ul # navigation ul {
        верх: 43px;
        слева: 1px;
    }
    
    ul # navigation ul li ul {
        верх: 0;
        слева: 181px; / * сильно зависит от ширины: 180 пикселей; сверху */
    }
    
    ul # navigation ul li {
    ясно: оба;
    ширина: 100%;
    граница: 0 нет;
    нижняя граница: 1px solid # c9c9c9;
    }
    
    ul # navigation ul li a {
    фон: нет;
    отступ: 7px 15px;
    цвет: # 616161;
    тень текста: 1px 1px 0px #fff;
    текстовое оформление: нет;
    дисплей: встроенный блок;
    граница: 0 нет;
    плыть налево;
    ясно: оба;
    ширина: 150 пикселей;
    }
     

    Теперь меню стилизовано и процесс разработки завершен.Меню готово к использованию в ваших собственных проектах. При использовании CSS3, конечно, возникают проблемы с совместимостью IE с меню. Плавные эффекты, реализованные с помощью переходов CSS3, не работают в IE, но меню все еще работает и может быть надежной альтернативой меню javascript.

    Благодарю вас за ваше время и за любые отзывы / вопросы, не стесняйтесь оставлять комментарии ниже!

    [Всего: 25 Среднее: 4,4 / 5]

    Как создать раскрывающееся меню в Dreamweaver

    Dreamweaver упрощает создание раскрывающихся меню для вашего веб-сайта.Но, как и все формы HTML, они могут быть немного сложными. Это руководство проведет вас через шаги по созданию раскрывающегося меню в Dreamweaver.

    Меню переходов Dreamweaver

    Dreamweaver 8 также предоставляет мастер для создания меню перехода для навигации по вашему веб-сайту. В отличие от базовых раскрывающихся меню, это меню действительно что-то сделает, когда вы закончите. Вам не нужно писать JavaScript или CGI, чтобы раскрывающаяся форма заработала. В этом руководстве также объясняется, как использовать мастер Dreamweaver 8 для создания меню перехода.

    Сначала создайте форму

    За исключением специальных мастеров, таких как меню перехода, Dreamweaver не помогает заставить HTML-формы «работать». Для этого вам понадобится CGI или JavaScript.

    Когда вы добавляете раскрывающееся меню на свой веб-сайт, первое, что вам нужно, — это форма, окружающая его. В Dreamweaver перейдите в меню «Вставка» и щелкните «Форма», затем выберите «Форма».

    Отображение форм в представлении «Дизайн»

    Dreamweaver визуально отображает расположение формы в представлении «Дизайн», чтобы вы знали, где разместить элементы формы.Это важно, потому что теги раскрывающегося меню недействительны (и не будут работать) вне элемента формы. Как вы можете видеть на изображении, в режиме конструктора форма представляет собой красную пунктирную линию.

    Выбрать список / меню

    Выпадающие меню в Dreamweaver называются элементами «списка» или «меню». Итак, чтобы добавить его в форму, вам нужно зайти в меню «Форма» в меню «Вставка» и выбрать «Список / Меню». Убедитесь, что курсор находится внутри красной пунктирной линии поля формы.

    Окно специальных параметров

    В параметрах Dreamweaver есть экран специальных возможностей.Формы — это место, где многие веб-сайты теряют доступность, и после заполнения этих пяти вариантов раскрывающиеся меню сразу станут более доступными.

    Доступность формы

    Варианты доступности:

    Этикетка

    Это название поля. Он будет отображаться в виде текста рядом с вашим элементом формы.
    Напишите, что вы хотите вызвать в раскрывающемся меню. Это может быть вопрос или короткая фраза, на которую ответит раскрывающееся меню.

    Стиль

    HTML включает тег метки для идентификации меток вашей формы в веб-браузере. По вашему выбору можно заключить раскрывающееся меню и текст метки в тег, использовать атрибут «for» в теге метки, чтобы определить, на какой тег формы он ссылается, или вообще не использовать тег метки.

    Позиция

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

    Ключ доступа

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

    Указатель вкладок

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

    Когда вы обновите свои специальные возможности, нажмите ОК.

    Выберите меню

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

    Свойства меню

    Меню свойств изменится на свойства списка / меню для этого раскрывающегося меню. Здесь вы можете присвоить своему меню идентификатор (где написано «выбрать»), решить, хотите ли вы, чтобы оно было списком или меню, присвоить ему класс стиля из вашей таблицы стилей и присвоить значения раскрывающемуся списку.

    В чем разница между списком и меню?

    Dreamweaver вызывает раскрывающееся меню в любом раскрывающемся списке, в котором можно выбрать только один вариант.«Список» позволяет выбрать несколько вариантов в раскрывающемся списке и может содержать более одного элемента.

    Если вы хотите, чтобы раскрывающееся меню состояло из нескольких строк, измените его на тип «список» и не устанавливайте флажок «Выбор».

    Добавить новые элементы в список

    Чтобы добавить новые элементы в ваше меню, нажмите кнопку «Список значений …». Это откроет указанное выше окно. Введите метку вашего предмета в первое поле. Это то, что будет отображаться на странице. Если вы оставите значение пустым, оно также будет отправлено в форме.

    Добавить и повторно заказать

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

    Дать всем позициям значения

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

    Выберите значение по умолчанию

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

    См. Свой список в режиме просмотра «Дизайн»

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

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

    Если вы переключитесь в режим просмотра кода, вы увидите, что Dreamweaver добавляет раскрывающееся меню с очень чистым кодом. Единственные дополнительные атрибуты — это те, которые мы добавили с опциями доступности.Код имеет отступы, его очень легко читать и понимать.

    Сохранить и просмотреть в браузере

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

    Но он ничего не делает …

    Меню, которое мы создали выше, выглядит нормально, но ничего не делает. Чтобы заставить его что-то делать, вам нужно настроить действие формы в самой форме.

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

    Меню перехода Dreamweaver создает раскрывающееся меню с именами и URL-адресами. Затем вы можете выбрать элемент в меню, и веб-страница переместится в это место, как если бы вы щелкнули ссылку.

    Перейдите в меню «Вставка» и выберите «Форма», а затем «Меню переходов».

    Окно меню переходов

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

    Для первого элемента измените текст «untitled1» на то, что вы хотите, чтобы он читался, и добавьте URL-адрес, на который должна переходить эта ссылка.

    Добавить элементы в меню переходов

    Щелкните элемент «Добавить», чтобы добавить новый элемент в меню перехода. Добавьте столько предметов, сколько хотите.

    Параметры меню перехода

    После того, как вы добавили все нужные ссылки, вы должны выбрать свои варианты:

    открытых URL-адресов в

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

    Название меню

    Дайте своему меню уникальный идентификатор страницы. Это необходимо для корректной работы скрипта. Это также позволяет вам иметь несколько меню переходов в одной форме — просто дайте им разные имена.

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

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

    Выбрать первый элемент после изменения URL

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

    Просмотр дизайна меню перехода

    Как и в случае с первым меню, Dreamweaver настраивает меню перехода в режиме конструктора с видимым элементом по умолчанию. Затем вы можете редактировать раскрывающееся меню, как любое другое.

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

    Меню переходов в браузере

    Сохранение файла и нажатие F12 откроет страницу в предпочитаемом вами браузере. Там вы можете выбрать вариант, нажать «Перейти», и меню перехода работает!

    Спасибо, что сообщили нам!

    Расскажите, почему!

    Другой Недостаточно подробностей Сложно понять

    Пример сворачиваемого раскрывающегося списка | WAI-ARIA Authoring Practices 1.1

    Пример сворачиваемого раскрывающегося списка | Авторские практики WAI-ARIA 1.1

    В следующем примере реализации шаблон проектирования для списка демонстрирует сворачиваемый виджет списка с одним выбором, который функционально подобен входу HTML select с атрибутом size = "1" . Виджет состоит из кнопки, которая запускает отображение списка. В состоянии по умолчанию виджет свернут (список не отображается), а метка кнопки показывает текущий выбранный вариант из списка.Когда кнопка активирована, отображается список, и текущая опция выделяется и выбирается.

    Подобные примеры включают:

    Пример

    Выберите свой любимый трансурановый элемент (актинид или трансактинид).

    Выберите элемент: Нептуний
    • Нептуний
    • Плутоний
    • Америций
    • Кюрий
    • Берклий
    • Калифорний
    • Эйнштейний
    • Фермий
    • Менделевий
    • Нобелий
    • Лоуренсий
    • Резерфордий
    • Дубний
    • Сиборгий
    • Бориум
    • Калий
    • Мейтнерий
    • Дармштадтиум
    • Рентген
    • Copernicium
    • Нихоний
    • Флеровий
    • Московий
    • Ливерморий
    • Tennessine
    • Оганессон
    Банкноты

    Этот список можно прокручивать; у него больше возможностей, чем может вместить его высота.

    1. Прокрутка работает должным образом только в том случае, если в списке указан параметр « offsetParent ». В этом примере в списке используется позиция : относительно .
    2. Когда в фокусе находится опция, которая не (полностью) видна, позиция прокрутки списка обновляется:
      1. Если нажать Стрелка вверх или Стрелка вниз , предыдущий или следующий параметр прокручивается в поле зрения.
      2. Если нажать Home или End , список прокручивается полностью вверх или вниз.
      3. Если вызывается focusItem , опция в фокусе будет прокручена в верхнюю часть представления, если она была расположена над ней, или вниз, если она была ниже нее.
      4. Если щелкнуть мышью по частично видимому параметру, он будет полностью прокручен.
    3. Когда полностью видимый параметр находится в фокусе, прокрутка не происходит.

    Подставка для клавиатуры

    Пример списка на этой странице реализует следующий интерфейс клавиатуры. Другие варианты и параметры интерфейса клавиатуры описаны в Раздел «Взаимодействие с клавиатурой» шаблона проектирования «Список».

    Ключ Функция
    Введите
    • Если фокус находится на кнопке, раскрывает список и переводит фокус на текущий выбранный параметр в списке.
    • Если фокус находится в списке, сворачивает список и сохраняет текущий выбранный параметр в качестве метки кнопки.
    Побег Если отображается список, сворачивает список и перемещает фокус на кнопку.
    Стрелка вниз
    • Перемещает фокус и выбирает следующий параметр.
    • Если список свернут, также разворачивает список.
    Стрелка вверх
    • Перемещает фокус и выбирает предыдущий параметр.
    • Если список свернут, также разворачивает список.
    Домашний Если отображается список, перемещает фокус и выбирает первый вариант.
    Конец Если отображается список, перемещает фокус и выбирает последний вариант.
    Печатаемые символы
    • Введите символ: фокус перемещается к следующему элементу с именем, которое начинается с набранного символа.
    • Введите несколько символов в быстрой последовательности: фокус перемещается к следующему элементу с именем, которое начинается с строки набранных символов.

    Роль, свойство, состояние и атрибуты Tabindex

    Пример списка на этой странице реализует следующие роли, состояния и свойства ARIA. Информация о других способах применения ролей, состояний и свойств ARIA доступна в разделе Раздел «Роли, состояния и свойства» шаблона проектирования «Список».

    Роль Атрибут Элемент Использование
    aria-labelledby = "ID_REF1 ID_REF2" кнопка
    • Ссылается на два элемента, ярлыки которых объединяются браузером для обозначения кнопки.
    • Первый элемент — это диапазон, содержащий текст. Выберите элемент: .
    • Второй элемент — это сама кнопка; текст кнопки устанавливается на имя текущего выбранного элемента.
    aria-haspopup = "listbox" кнопка Указывает, что при нажатии кнопки отображается список.
    aria-extended = "true" кнопка
    • Устанавливается JavaScript при отображении списка.
    • Иначе, нет.
    список ul Определяет фокусируемый элемент, который имеет поведение списка и содержит параметры списка.
    aria-labelledby = "ID_REF" ul Относится к элементу, содержащему метку списка.
    tabindex = "- 1" ul
    • Делает список доступным для фокусировки.
    • JavaScript устанавливает фокус на список, когда он отображается.
    aria-activedescendant = "ID_REF" ul
    • Устанавливается JavaScript, когда он отображает и устанавливает фокус в списке; иначе нет.
    • Относится к параметру в списке, который визуально обозначается как имеющий фокус клавиатуры.
    • При нажатии клавиш навигации, таких как Стрелка вниз , JavaScript изменяет значение.
    • Позволяет вспомогательным технологиям знать, какой элемент приложение считает сфокусированным, в то время как фокус DOM остается на элементе ul .
    • Для получения дополнительной информации об этой технике управления фокусом см. Использование aria-activedescendant для управления фокусом.
    role = "option" ли Обозначает каждый выбираемый элемент, содержащий имя опции.
    aria-selected = "true" ли
    • Указывает, что опция выбрана.
    • Применяется к элементу с опцией роли, который визуально оформлен как выбранный.
    • Параметр с этим атрибутом всегда совпадает с параметром, на который ссылается aria-activedescendant, потому что это список с одним выбором, в котором выбор следует за фокусом.

    Исходный код JavaScript и CSS

    Исходный код HTML

      
    Шаблон проектирования Listbox в методиках разработки WAI-ARIA 1.1 Раскрывающийся список

    — документация Kivy 2.0.0

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

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

    Базовый пример

    Кнопка с раскрывающимся списком из 10 возможных значений. Все кнопки внутри раскрывающийся список вызовет выпадающий метод DropDown.select () . После при вызове, текст основной кнопки будет отображать выбор падать.

     из kivy.uix.dropdown import DropDown
    из kivy.uix.button import Button
    из kivy.base импорт runTouchApp
    
    # создаем раскрывающийся список с 10 кнопками
    dropdown = DropDown ()
    для индекса в диапазоне (10):
        # При добавлении виджетов высоту нужно указывать вручную
        # (отключение size_hint_y), чтобы раскрывающийся список мог вычислить
        # площадь, в которой он нуждается.
    
        btn = Button (text = 'Value% d'% index, size_hint_y = None, height = 44)
    
        # для каждой кнопки прикрепите обратный вызов, который вызовет метод select ()
        # в раскрывающемся списке.Мы передадим текст кнопки как данные
        # выбор.
        btn.bind (on_release = лямбда btn: dropdown.select (btn.text))
    
        # затем добавьте кнопку внутри раскрывающегося списка
        dropdown.add_widget (btn)
    
    # создаем большую главную кнопку
    mainbutton = Button (text = 'Hello', size_hint = (Нет, Нет))
    
    # показать выпадающее меню, когда основная кнопка отпущена
    # примечание: все вызовы bind () передают экземпляр вызывающего (здесь
    # экземпляр mainbutton) в качестве первого аргумента обратного вызова (здесь
    # падать.открыто.).
    mainbutton.bind (on_release = dropdown.open)
    
    # И последнее, прислушайтесь к выбору в раскрывающемся списке и
    # присвоить данные тексту кнопки.
    dropdown.bind (on_select = экземпляр лямбда, x: setattr (mainbutton, 'text', x))
    
    runTouchApp (основная кнопка)
     

    Расширяющийся раскрывающийся список в Kv

    Вы можете создать раскрывающийся список прямо из вашего kv:

     #: kivy 1.4.0
    :
        Кнопка:
            текст: "Мой первый предмет"
            size_hint_y: Нет
            высота: 44
            on_release: корень.выберите ('элемент1')
        Этикетка:
            текст: 'Невыбираемый элемент'
            size_hint_y: Нет
            высота: 44
        Кнопка:
            текст: "Мой второй предмет"
            size_hint_y: Нет
            высота: 44
            on_release: root.select ('элемент2')
     

    Затем создайте связанный класс python и используйте его:

     класс CustomDropDown (DropDown):
        проходить
    
    dropdown = CustomDropDown ()
    mainbutton = Button (text = 'Hello', size_hint = (Нет, Нет))
    mainbutton.bind (on_release = dropdown.open)
    падать.bind (on_select = экземпляр лямбда, x: setattr (mainbutton, 'text', x))
     
    класс kivy.uix.dropdown. DropDown ( ** kwargs ) [источник]

    Базы: kivy.uix.scrollview.ScrollView

    DropDown класс. См. Дополнительную информацию в документации модуля.

    События
    on_select : data

    Запускается, когда выбор сделан. Данные выбора передаются in в качестве первого аргумента, и это то, что вы передаете в select () метод в качестве первого аргумента.

    on_dismiss :

    Вызывается, когда DropDown закрывается, либо при выборе, либо при включении. касание за пределами виджета.

    add_widget ( * largs ) [источник]

    Добавьте новый виджет как дочерний по отношению к этому виджету.

    Параметры
    виджет : Виджет

    Виджет для добавления в наш список дочерних элементов.

    index : int, по умолчанию 0

    Index для вставки виджета в список. Обратите внимание, что по умолчанию 0 означает, что виджет вставлен в начало списка и, таким образом, будет отображаться поверх других виджетов-родственников. Для полное обсуждение индекса и иерархии виджетов см. Руководство по программированию виджетов.

    холст : str, по умолчанию Нет

    Холст, на который нужно добавить холст виджета. Может быть «до», «после» или Нет для холста по умолчанию.

     >>> from kivy.uix.button import Button
    >>> из kivy.uix.slider import Slider
    >>> корень = виджет ()
    >>> root.add_widget (Кнопка ())
    >>> ползунок = Ползунок ()
    >>> root.add_widget (слайдер)
     
    attach_to

    (внутреннее) Свойство, которое будет установлено для виджета, для которого выпадающий список прилагается.

    Метод open () автоматически устанавливает это свойство, пока dismiss () вернет значение None.

    auto_dismiss

    По умолчанию раскрывающийся список автоматически закрывается, когда касание происходит вне его, эта опция позволяет отключить это характеристика

    auto_dismiss — это BooleanProperty и по умолчанию True.

    auto_width

    По умолчанию ширина раскрывающегося списка будет такой же, как ширина прикрепленный виджет. Установите значение False, если вы хотите указать собственную ширину.

    auto_width — это BooleanProperty и по умолчанию True.

    clear_widgets () [источник]

    Удалить всех (или указанных) дочерних элементов этого виджета. Если указан аргумент «children», это должен быть список (или отфильтрованный список) дочерних элементов текущего виджета.

    Изменено в версии 1.8.0: аргумент children может использоваться для указания дочерних элементов, которые вы хочу удалить.

    контейнер

    (внутреннее) Свойство, которое будет установлено для контейнера раскрывающегося списка список. По умолчанию это GridLayout .

    уволить ( * largs ) [источник]

    Удалите выпадающий виджет из окна и отсоедините его от прикрепленный виджет.

    dismiss_on_select

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

    dismiss_on_select — это BooleanProperty и по умолчанию True.

    max_height

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

    max_height — это NumericProperty и по умолчанию — Нет.

    min_state_time

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

    min_state_time — это NumericProperty и по умолчанию используется значение Config min_state_time .

    on_touch_down ( touch ) [источник]

    Принять событие приземления.

    Параметры
    touch : MotionEvent class

    Touch получен.Касание находится в родительских координатах. Видеть relativelayout для обсуждения системы координат.

    Возвращает

    булев Если True, отправка события касания будет остановлена. Если False, событие будет продолжать отправляться остальным. дерева виджетов.

    on_touch_move ( touch ) [источник]

    Получение события касания перемещения. Касание находится в родительских координатах.

    См. on_touch_down () для получения дополнительной информации.

    on_touch_up ( touch ) [источник]

    Получите событие ретуши. Касание находится в родительских координатах.

    См. on_touch_down () для получения дополнительной информации.

    открыто ( виджет ) [источник]

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

    remove_widget ( * largs ) [источник]

    Удалите виджет из дочерних элементов этого виджета.

    Параметры
    виджет : Виджет

    Виджет, который нужно удалить из нашего списка дочерних элементов.

     >>> from kivy.uix.button import Button
    >>> корень = виджет ()
    >>> button = Кнопка ()
    >>> корень.add_widget (кнопка)
    >>> root.remove_widget (кнопка)
     
    выберите ( данные ) [источник]

    Вызовите этот метод, чтобы вызвать событие on_select с данными выбор. Данные могут быть чем угодно.

    Создание выпадающего списка в ячейке

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

    Чтобы создать собственный раскрывающийся список для ячейки, выполните следующие действия:

    1. Создайте столбец или строку элементов в активная таблица для раскрывающегося списка.

    2. Выберите ячейку, в которой требуется раскрывающийся список для проверка данных (в данном примере ячейка B2 ).

    3. На вкладке Data в Data Tools группы, щелкните Проверка данных :

    4. В диалоговом окне Проверка данных на вкладка Настройки :

    • В раскрывающемся списке Разрешить выберите элемент Список .
    • В поле Источник укажите диапазон, содержащий элементы раскрывающегося списка. (в этом примере диапазон: E1: E8 ).
    • Отметьте опцию In-Cell Dropdown , чтобы отобразить раскрывающийся список. В противном случае Excel проверяет ввод данных, но не показывает раскрывающуюся кнопку для выбора элементов из списка.

    5. Нажмите ОК .

    Примечания :

    • Вы можете скрыть диапазон значений, используемых в поле Источник , или создать его на защищенный лист, который можно скрыть.
    • Вы можете добавить раскрывающийся список в несколько ячеек, выбрав соответствующий ячейки или скопируйте / вставьте ячейку со списком.
    • Если список короткий, вы можете избежать шага 1. Вместо этого введите элементы списка. (через запятую) в поле Источник в Проверка данных диалоговое окно:
    • Если вы планируете поделиться своей книгой с пользователями Excel 2007 или более ранней версии, сделайте убедитесь, что список находится на том же листе, что и раскрывающийся список.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *