Автор оригинала: Chris Harrington.
Этот промежуточный мини-учебник Angularjs является частью 5 из 5 серийных серий с каждым преподаванием, как создать то, что вы можете использовать на вашей веб-странице. Этот учебник научит вас, как сделать раскрывающийся контроль, используя директивы Angularjs, меньше CSS и Stone Awesome.
Другие сообщения в серии:
- Часть 1 – Создание календаря
- Часть 2 – Анимированные флип-плитки
- Часть 3 – Как сделать скользящее меню с директивами
- Часть 4 – Создание контроля текстового блока фокусировки с модной обратной связью
Угловые JS выпадают
Сегодня я собираюсь поговорить о том, как создать раскрывающееся контроль, используя Угловые js , Меньше CSS и Шрифт потрясающий Отказ Я собираюсь предположить, что вы хотя бы на полпути знаком с этими инструментами, но если вы не можете, я предлагаю вам взглянуть, используя ссылки выше. Сам раскрывающийся список представляет собой угловую директиву JS, которая стильна с использованием меньшего количества CSS, чтобы обеспечить некоторую необработанную открытую и близкую анимацию. Вы можете увидеть это здесь Отказ
Написание по записи будет разделено на три различных раздела. Во-первых, есть HTML, который будет включать пример использования для Директивы, а также объяснение того, что я делаю в шаблоне Директивы. Во-вторых, я пойду через JavaScript и как он связывает директиву в контроллер и самого углового приложения. Наконец, я покажу вам CSS, которые я использовал для стиля выпадания и как он использует анимацию CSS3, чтобы предоставить (мобильную дружелюбную) открытую и закрытую анимацию.
Примечание: Показанные здесь CSS могут не совпадать с тем, что вы видите на демонстрационной странице, потому что я хочу, чтобы демонстрировать, как минимум на полпути, приличный с некоторым симпатичным стилем. По большей части я собираюсь попытаться сохранить CSS на уроке как можно более обнаженным.
HTML
Директива
Вот пример того, как вы можете использовать выпадать. Зажигатель атрибут определяет, какой текст, чтобы показать, прежде чем пользователь выбрал что-либо. Цвета Переменная соответствует списку элементов, которые вы хотите показать в списке, который используется в сочетании с Недвижимость Атрибут, который определяет свойство, которое должно отображаться пользователю из вашего сложного блока JavaScript. Наконец, выбран Атрибут хранит выбранное значение на родительском контроллере.
Раскрывающийся шаблон
Поскольку раскрывающий шаблон довольно большой, я извлек его и поместил его в свой собственный HTML-файл, который является лучшей практикой.
{{display}} {{placeholder}}lt;/span>{{property !== undefined ? item[property] : item}}
Большая часть этого простой, но есть пара вещей, которые я должен перейти. Во-первых, мы используем шрифт Suesome, чтобы сделать стрелку, которая указывает на пользователя, что произойдет действие при нажатии на раскрывающийся дисплей. Это достигается с использованием шрифтов CSS CSS, а именно ФА и a-down-down Отказ Первый – это базовый шрифт потрясающий класс, а второй указывает, какой значок рисовать. Мы делаем либеральное использование NG-класс Встроенная угловая Директива, которая добавляет класс CSS к элементу на основе правдимости указанного значения. Мы также используем NG-если Директива, которая делает только приписываемый элемент, если указанная переменная область имеет правду. В этом случае мы показываем контейнер заполнителя только в том случае, если Источник Переменная установлена, которую я пойду ниже. Для списка элементов в раскрывающемся списке мы используем NG-Repeat Директива, которая делает приписываемого элемента (и его детей) для каждого из элементов в указанном списке. Наконец, мы используем NG-нажмите Директива для подключения обработчика щелчка, чтобы выбрать элемент в списке при нажатии.
Получить пользовательскую директиву, построенную для 50 долларов
Javascript
Вот угловой код для настройки раскрывающейся директивы, а также контроллер для нашей тестовой страницы. Чтобы уменьшить путаницу, я бы разбил контроллер и директива в отдельные файлы, так как угловая лучшая практика. Ради краткости я включил весь сценарий в одном разделе.
var app = angular.module("demo", []); app.controller("dropdownDemo", function($scope) { $scope.colours = [{ name: "Red", hex: "#F21B1B" }, { name: "Blue", hex: "#1B66F2" }, { name: "Green", hex: "#07BA16" }]; $scope.colour = ""; }); app.run(function($rootScope) { angular.element(document).on("click", function(e) { $rootScope.$broadcast("documentClicked", angular.element(e.target)); }); }); app.directive("dropdown", function($rootScope) { return { restrict: "E", templateUrl: "templates/dropdown.html", scope: { placeholder: "@", list: "=", selected: "=", property: "@" }, link: function(scope) { scope.listVisible = false; scope.isPlaceholder = true; scope.select = function(item) { scope.isPlaceholder = false; scope.selected = item; }; scope.isSelected = function(item) { return item[scope.property] === scope.selected[scope.property]; }; scope.show = function() { scope.listVisible = true; }; $rootScope.$on("documentClicked", function(inner, target) { console.log($(target[0]).is(".dropdown-display.clicked") || $(target[0]).parents(".dropdown-display.clicked").length > 0); if (!$(target[0]).is(".dropdown-display.clicked") && !$(target[0]).parents(".dropdown-display.clicked").length > 0) scope.$apply(function() { scope.listVisible = false; }); }); scope.$watch("selected", function(value) { scope.isPlaceholder = scope.selected[scope.property] === undefined; scope.display = scope.selected[scope.property]; }); } } });
Во-первых, мы устанавливаем угловое приложение для демонстрации. Затем мы настроили контроллер для страницы, и, наконец, мы создаем раскрывающую директиву. Контроллер содержит две переменные: Цвета и цвет Отказ Первый – список цветов, чтобы показать в раскрывающемся списке, а второй хранит выбранный цвет после нажатия пользователя на элементе в раскрывающемся списке. Список «Цвета» содержит сложные объекты вместо просто строк или целых чисел, чтобы эмулировать сценарий реального мира, где ваш выпадающий список может содержать модели вместо всего основных переменных.
Мы добавляем функцию запуска в угловое приложение, чтобы позволить нам выстрелить DocumentClicked мероприятие. Когда пользователь нажимает на документ, мы транслируем это любым другим угловым слушателям, которые мы используем для скрытия выпадания. Мы хотим раскрывающегося списка, когда пользователь нажал в любом месте документа.
Сама директива относительно длина. Во-первых, мы определяем, что Директива должна быть ограничена только одним из элементов (через ограничить Значение «E»). Мы также создаем изолированную область для директивы, которая содержит значение заполнителей (просто текст, как указано через символ @), список объектов (двусторонняя привязка VIA =), выбранное значение (другое двустороннее привязка ) и, наконец, название собственности на наши сложные объекты, которые следует показывать на раскрывающемся списке. Это позволяет нам иметь сложные объекты, переданные в раскрывающемся списке без какого-либо жесткого класса значений. Есть две переменные, которые мы настроим на область: Источник и ListVisible Отказ Первое верно, если пользователь еще не выбрал значение, а второе указывает, находится ли выпадающий вниз в расширенном состоянии. Мы также добавили три функции: Выберите , Увидел и Показать Отказ Функция SELECT – это обработчик Click для каждого элемента и устанавливает выбранный элемент на область. Функция ISSELECTED определяет, выбран, выбран пропущенный пункт, и функция Show расширяет раскрывающуюся. Мы подключаемся к DocumentClicked Мероприятие, чтобы определить, нужно ли нам закрыть выпад, и, наконец, мы наблюдаем за изменениями на выбран Переменная охвата, чтобы обновить отображаемое значение в верхней части раскрывающегося списка.
CSS.
@height:40px; @spacing:10px; @placeholder-colour:#AAA; @select-colour:#2875C7; @font-size:14px; @border-colour:#DDD; .vertical-centre (@height) { height:@height; line-height:@height !important; display:inline-block; vertical-align:middle; } dropdown { float:left; display:block; width:250px; >div { float:left; width:100%; >div.dropdown-display { float:left; width:100%; background:white; height:@height; cursor:pointer; border:solid 1px @border-colour; box-sizing:border-box; @icon-width:14px; >* { float:left; height:100%; .vertical-centre(@height); } >span { font-size:@font-size; width:100%; position:relative; box-sizing:border-box; padding-right:@icon-width+@spacing*2; padding-left:@spacing; &.placeholder { color:@placeholder-colour; } } >i { position:relative; width:@icon-width; margin-left:(@spacing+@icon-width)*-1; font-size:1.125em; font-weight:bold; padding-right:@spacing; text-align:right; } } >div.dropdown-list { float:left; width:100%; position:relative; width:100%; transform:scale(1, 0); transition:transform ease 250ms; >div { position:absolute; width:100%; z-index:2; cursor:pointer; background:white; >div { float:left; width:100%; padding:0 @spacing; font-size:@font-size; box-sizing:border-box; border:solid 1px @border-colour; border-top:none; @icon-width:20px; &:hover { background:#F0F0F0; } &.selected { background:@select-colour; color:white; } >* { .vertical-centre(@height); } >span { float:left; width:100%; position:relative; padding-right:@icon-width+@spacing; box-sizing:border-box; color:inherit; } >i { float:left; width:@icon-width; margin-left:@icon-width*-1; display:none; } &.selected>i { display:inline-block; } } } } } >div.show>div.dropdown-list { transform:scale(1, 1); } }
Первые несколько строк определяют некоторые переменные и смешины, которые мы будем использовать для остальных правил CSS. Обратите внимание, что Вертикальный центр Микс, который позволяет нам центрировать что-нибудь вертикально, если мы знаем высоту. После этого мы просто устанавливаем внешний вид раскрывающегося списка. выпадающий список Класс показывает, как я делаю анимацию, чтобы показать и скрыть раскрывающийся список, который является масштаб операция. Я анимирую в преобразовании вместо высоты из-за мобильной совместимости. Существует четыре основных перехода, которые браузер действительно хорошо: непрозрачность, перевод, масштаб и вращение. На мобильном устройстве, используя переход с высотой приведет к плохой производительности, но масштаб преобразования работает много, намного лучше.
Заключение
Вот и все! Как я уже упоминал выше, я собрал демонстрационную страницу, которая показывает раскрывающуюся форму. Вы можете увидеть это здесь Отказ Спасибо за прочтение!
Кодаментар Крис Харрингтон является разработчиком переднего конца с семилетним опытом создания веб-приложений. Недавно он был сосредоточен на реакции, ангулярных и нокаут JS. Он находится в процессе строительства Лист , исполнительное приложение, используемое в качестве инструмента для отслеживания вопросов и задач, которые необходимо завершено в среде разработки программного обеспечения.
Нужна помощь Криса? Забронировать 1-на-1 сеанс!
Или присоединяйтесь к нам как эксперт наставником!