Автор оригинала: Chris Harrington.
Этот промежуточный мини-учебник Angularjs является частью 4 из 5 серийных серий с каждым учением, как построить то, что вы можете использовать на вашей веб-странице. Этот учебник научит вам, как создать управление текстовой коробкой фокусировки с использованием директивных директив Angularjs, меньше CSS и Stone Awesome.
Другие сообщения в серии:
- Часть 1 – Создание календаря
- Часть 2 – Анимированные флип-плитки
- Часть 3 – Как сделать скользящее меню с директивами
- Часть 5 – Создание раскрывающегося управления для вашего сайта
Угловой текст фокусировки JS
Сегодня я собираюсь поговорить о том, как создать элемент управления фокусом, используя Угловые js , Меньше CSS и Шрифт потрясающий Отказ Директива должна заменить входы типа текста и пароля и предоставляет некоторую относительно модульную обратную связь пользователю относительно того, какой вход фокусируется.
Я собираюсь предположить, что вы хотя бы на полпути знаком с этими инструментами, но если вы не можете, я предлагаю вам взглянуть, используя ссылки выше. Вы можете увидеть демонстрацию здесь Отказ
Я собираюсь разделить статью на три отдельных раздела: HTML, JavaScript и CSS. В разделе HTML я покажу, как быстро добавить директиву на свой сайт. Я также объясню некоторые из того, что происходит в HTML Директивы. Далее я говорю о JavaScript и как настроить угловое приложение JS, контроллер и директиву. Я также объясню, как рукоятки директивы в контроллер. Наконец, я прогулюсь по CSS и опишу, как именно я выполняю анимацию фокусировки.
Примечание: Показанные здесь CSS могут не совпадать с тем, что вы видите на демонстрационной странице, потому что я хочу, чтобы демонстрировать, как минимум на полпути, приличный с некоторым симпатичным стилем. По большей части я собираюсь попытаться сохранить CSS на уроке как можно более обнаженным.
HTML
Директива
Вот пример того, как вы можете использовать текстовую директиву. Зажигатель Атрибут работает так же, как для регулярного контроля ввода, предоставляя текст, прежде чем пользователь ввел что-либо. NG-модель Встроенная угловая директива JS позволяет связывать значение входа в переменную контроллеру. В нашем случае выше значение ввода связано с контроллером Имя Переменная.
Фокус текстовый шаблон
Несмотря на то, что шаблон для направленной директивы фокусировки не очень большой, он все равно будет громоздким, чтобы встроить в соответствии с директивой, поэтому он в отдельном файле.
>
Мы устанавливаем пару вещей прямо из объема нашей директивы здесь. Первый – это Тип из ввода, который в нашем случае будет один из «текста» или «пароля». Как видите, это прямой проход через использование директивы к шаблону Директивы. Зажигатель Значение работает точно так же, кроме конечно, что это может быть все, что вы хотите. NG-модель Атрибут определяет привязку между переменной на внешнем объеме (контроллер) и изолированной областью нашей директивы. В основном это означает, что когда пользователь набирает значение в поле ввода, то значение автоматически применяется к переменной контроллере, как указано в используемом режиме.
Javascript
Вот угловой код для настройки направленности текста фокусировки, а также контроллер для нашей тестовой страницы. Чтобы уменьшить путаницу, я бы разбил контроллер и директива в отдельные файлы, так как угловая лучшая практика. Ради краткости я включил весь сценарий в одном разделе.
var app = angular.module("demo", []);
app.controller("textDemo", function($scope) {
$scope.value = "";
});
app.directive("text", function() {
return {
restrict: "E",
templateUrl: "templates/focus.html",
scope: {
type: "@",
placeholder: "@",
ngModel: "="
},
link: function(scope, element) {
$(element).on("focus", "input", function() {
$(element).addClass("focus");
});
$(element).on("blur", "input", function() {
$(element).removeClass("focus");
});
}
}
});
Здесь происходит три вещи. Во-первых, мы создаем приложение Angular JS. Угловой поставляется с очень полезной способностью инъекционных зависимостей. Поскольку у нас нет никаких зависимостей в этом кратком примере, второй параметр для модуля является просто пустой массив. Во-вторых, мы определяем контроллер, который управляет всей логикой для рендеринга просмотра. Наш контроллер имеет возможность имеет только одну переменную (имя), которая связывается с полем нашей директивы. Наконец, у нас сам по определению директивы. Это ограничено быть элементом через Ограничить: «E» вариант.
После этого расположение шаблона HTML, а затем есть изолированная декларация области. Угловые JS обеспечивает ряд различных вариантов объема возможностей, но я обнаружил, что изолированную область является наиболее распространенным. Если вы покинете опцию «Область» все вместе, директива будет иметь доступ к родительскому объему. Создание объема, так как мы сделали, значит, у нас есть доступ только к области охвата Директивы, и ничего выше, снаружи указанных привязки, как тип, заполнитель и NGModel в нашем примере.
Наконец, у нас есть Компилировать Функция, которая позволяет нам выполнять действия по HTML-элементу Директивы. В нашем случае мы подключаемся к обработчикам событий, чтобы применить и удалить класс фокусировки, когда элемент сосредоточен и размыты соответственно. Это то, что позволяет нам оказывать фокусную анимацию.
CSS.
@spacing:10px;
@select-colour:#2875C7;
.vertical-centre (@height) { height:@height; line-height:@height !important; display:inline-block; vertical-align:middle; }
text {
float:left;
display:block;
width:250px;
border:solid 1px #AAA;
margin-right:15px;
div.text-container {
float:left;
width:100%;
text-align:inherit;
>input {
float:left;
width:100%;
-webkit-appearance:none;
text-align:inherit;
padding:@spacing;
border:none;
font-size:0.875em;
background:white;
outline:none;
border-box:box-sizing;
border-radius:3px;
transition:background ease 250ms;
}
>div.focus {
float:left;
width:100%;
margin-top:-1px;
position:relative;
height:1px;
background:transparent;
border-color:transparent;
>div {
position:absolute;
z-index:2;
width:100%;
transform:scale(0, 1);
height:2px;
margin-top:-1px;
background:@select-colour;
transition:all ease 250ms;
}
}
}
&.focus {
input {
background:#DEE9FA !important;
}
div.focus>div {
transform:scale(1, 1) !important;
}
}
&.error {
div.focus>div {
background:red !important;
}
}
&.focus.error {
input {
background:rgba(255, 0, 0, 0.125) !important;
}
}
}
Первые несколько строк определяют некоторые переменные и смешины, которые мы будем использовать для остальных правил CSS. Обратите внимание, что Вертикальный центр Микс, который позволяет нам центрировать что-нибудь вертикально, если мы знаем высоту. После этого мы просто устанавливаем внешний вид текстового поля фокусировки. Для позиционирования мы перемещаем панель фокуса вверх по пикселю, чтобы скрыть нижнюю границу на текстовом поле. Существует две анимации, которые возникают, когда текстовое поле усиливает фокус: во-первых, мы распространяем полосу фокусировки на дне ввода, а во-вторых, мы исчезаем фон ввода на синий (или красный, если Ошибка, склонная).
Первый достигнут с помощью Преобразование: масштаб правило Преобразование шкалы до (0, 1) указывает на то, что ширина элемента должна быть отображена как ноль, а высота должна составлять 100%, что является нашей по умолчанию. При фокусировании масштаб изменяется в (1, 1), что указывает на ширину, следует вернуть до 100%. Это анимировано, потому что у нас есть Переход установить для трансформировать имущество. Фон исчезновения достигается таким же образом, добавляя Переход к Фон Свойство входного элемента.
Примечание: CSS выше не учитывает префиксы поставщиков для некоторых новых правил CSS. Такие вещи, такие как пограничный радиус, коробка, преобразование и переход, все потребуют множества префиксов поставщиков для совместимости со всеми общими браузерами.
Заключение
Вот и все! Как я уже упоминал выше, я собрал демонстрационную страницу, которая показывает текстовое поле в его окончательной форме. Вы можете увидеть это здесь Отказ Спасибо за прочтение!