Автор оригинала: Chris Harrington.
Этот промежуточный мини-учебник Angularjs является частью 3 из 5 серийных серий с каждым преподаванием, как создать то, что вы можете использовать на вашей веб-странице. Этот учебник научит вам, как сделать скользящее меню, используя директивы Angularjs среди других инструментов.
Другие сообщения в серии:
- Часть 1 – Создание календаря
- Часть 2 – Анимированные флип-плитки
- Часть 4 – Создание контроля текстового блока фокусировки с модной обратной связью
- Часть 5 – Создание раскрывающегося управления для вашего сайта
Угловое скользящее меню JS
Я хотел бы поговорить о том, как создать раздвижное управление меню, используя Угловые js и Меньше CSS Отказ Основная идея состоит в том, что я хочу меню, чтобы скользить из левой, либо правой стороны экрана на основе некоторого внешнего действия контроллера.
Если вы тот человек, который хочет увидеть большую картину вместо того, чтобы устроиться на шаг за шагом, выложен для вас, я собрал демонстрационную страницу, которую вы можете увидеть здесь Отказ Сам меню будет иметь угловую директиву JS, которая занимает всего два аргумента: видимое и выравнивание. Видимый указывает, какая переменная контроллера должна быть ответственна за отображение меню, и переменная выравнивания определяет, следует ли меню слегки с левой стороны экрана или правой стороны экрана.
Эта статья будет разбита на три отдельных раздела: HTML, JavaScript и CSS. HTML показывает, как у меня установлена директива меню, а также обеспечивает пример использования. JavaScript – это мясо статьи, и объяснит, как создать директиву скольжения меню, а также как привязать угловой контроллер JS в самой директивы. CSS немного сложняется, так как я добавляю модные анимации, чтобы сделать фактическое скольжение, но за пределами этого, это просто простное старое укладка.
HTML
Пример использования
Используйте следующее, чтобы добавить направлению скользящей меню на вашу страницу, где «видимые» и «выравнивание» являются переменными на вашем контроллере.
Директива
Вот HTML для Директива шаблона. Это относительно просто, но я все равно рекомендую вам поставить это в отдельный файл для простоты использования. Единственное интересное, которое происходит здесь, – это использование NG-класс Директива, которая указывает на то, что класс CSS будет добавлен в указанный элемент на основе правдимости указанной переменной. В этом случае, если видимое – это правда (то есть не нулевая или не определена), класс Show будет добавлен в родительский Div. Я также устанавливаю здесь класс выравнивания с левым, присваивая левый класс и справа справа, соответственно. NG-Transclude Директива используется для рендеринга детей в директиве. Например, использование образца выше обозначает три пункта меню; Эти три узла будут размещены внутри оказанного HTML для меню, как описано ниже.
Javascript
JavaScript разбит в пару разных разделов. Во-первых, есть инициализация углового приложения JS. Во-вторых, мы посмотрим на контроллер, который инициализирует директиву. И, наконец, мы посмотрим на две директивы, используемые для рендеринга меню: сам меню и вложенные пункты меню.
Заявление
Здесь мы инициализируем приложение Angular JS, а затем подключив некоторые события, которые мы можем использовать, чтобы скрыть меню, как только они раскрыты. Когда пользователь попадает в побег или щелкает в любом месте документа, меню следует скрывать. Угловые js имеет эмиттеров событий, встроенные в свои объекты масштаба, поэтому мы используем их на $ rofsscope Переменная, которая представляет собой всеобъемлющий объем, который является возможным родителем всех других областей в вашем приложении.
Примечание: Вам придется остановить распространение мероприятия, используемого для того, чтобы вызвать отображение меню, потому что если вы этого не сделаете, этот обработчик Click Project Chick сразу же скрыт меню после того, как он показан. Посмотрите на Тестовая страница Например, как это сделать.
var app = angular.module("demo", []);
app.run(function($rootScope) {
document.addEventListener("keyup", function(e) {
if (e.keyCode === 27)
$rootScope.$broadcast("escapePressed", e.target);
});
document.addEventListener("click", function(e) {
$rootScope.$broadcast("documentClicked", e.target);
});
});
Контроллер
Вот пример относительно того, как ваш контроллер манипулирует меню, чтобы показать и скрыть их. Функции ShowLeft и Showright будут отображаться левый и правый меню соответственно, и мы связываем на вышеупомянутое событие Emiiter на $ rofsscope Переменная через $ на Методы, чтобы закрыть меню, когда это уместно.
app.controller("modalDemo", function($scope, $rootScope) {
$scope.leftVisible = false;
$scope.rightVisible = false;
$scope.close = function() {
$scope.leftVisible = false;
$scope.rightVisible = false;
};
$scope.showLeft = function(e) {
$scope.leftVisible = true;
e.stopPropagation();
};
$scope.showRight = function(e) {
$scope.rightVisible = true;
e.stopPropagation();
}
$rootScope.$on("documentClicked", _close);
$rootScope.$on("escapePressed", _close);
function _close() {
$scope.$apply(function() {
$scope.close();
});
}
});
Директивы
Вот код для управления двумя директивами в меню. Оба ограничены элементами (через restrict: «E» опция), и мы транспортируем внутреннее содержание как в контент каждой директивы. Это означает, что внутреннее содержание Директивы меню в приведенном выше примере приведена записано в немедленный ребенок меню. Внутреннее содержание каждого тега меню-элемента (а именно текст, который мы хотим показать в пунктах меню), тоже отображаются в каждом пункте меню. Угловые JS знают, где поставить трансклывочное содержимое через NG-Transclude Директива, которую вы видите в обеих шаблонах ниже. Для директивы меню мы создали изолированную область, содержащую видимую двустороннюю привязку и выравнивание одностороннего привязки. Это позволяет нам прочитать значение видимой переменной и строковое значение выравнивания. Мы делаем аналогично с переменной хешей в изолированном объеме элемента меню. Наконец, элемент меню имеет способ, добавленный к его объему, через функцию параметров ссылки, навигации, которая уволен, когда пользователь нажимает на элемент меню, как видно на NG-нажмите Директива.
app.directive("menu", function() {
return {
restrict: "E",
template: "",
transclude: true,
scope: {
visible: "=",
alignment: "@"
}
};
});
app.directive("menuItem", function() {
return {
restrict: "E",
template: "",
transclude: true,
scope: {
hash: "@"
},
link: function($scope) {
$scope.navigate = function() {
window.location.hash = $scope.hash;
}
}
}
});
CSS.
Наконец, вот CSS. Первые три строки описывают некоторые метки CSS Mixins, которые я определенных, чтобы облегчить кошмар Prefix поставщика. Первый – для определения переходов (или анимации); Второй для преобразований CSS; И третья – установить значение пограничной коробки для размера коробки. Ниже приведены CSS для меню, а в том, что каждый элемент меню. Я делаю либеральное использование & Меньше команды CSS, которая позволяет мне указывать стили для различных условий, которые в этом случае являются дополнительными классами, такие как левое, шоу и т. Д. Те, кто практически исключительно используется для определения позиционирования меню в зависимости от указанного выравнивания.
.transition (@value1,@value2:X,...) { @value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`; -webkit-transition: @value; -moz-transition: @value; -ms-transition: @value; -o-transition: @value; transition: @value; }
.transform (@value1,@value2:X,...) { @value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`; transform:@value; -ms-transform:@value; -webkit-transform:@value; -o-transform:@value; -moz-transform:@value; }
.border-box { box-sizing:border-box; -moz-box-sizing:border-box; }
menu { display:block;
@menu-width:250px;
>div { position:absolute; z-index:2; top:0; width:@menu-width; height:100%; .border-box; .transition(-webkit-transform ease 250ms); .transition(transform ease 250ms);
&.left { background:#273D7A; left:@menu-width*-1; }
&.show.left { .transform(translate3d(@menu-width, 0, 0)); }
&.right { background:#6B1919; right:@menu-width*-1; }
&.show.right { .transform(translate3d(@menu-width*-1, 0, 0)); }
>menu-item { display:block;
>div { float:left; width:100%; margin:0; padding:10px 15px; border-bottom:solid 1px #555; cursor:pointer; .border-box; color:#B0B0B0;
&:hover { color:#F0F0F0; }
>span { float:left; color:inherit; }
}
}
}
}
Заключение
Это оно! Я надеюсь, что это научило вас кое-что, как вы прочитали это. Если вы хотите увидеть эти меню в действии, вы можете проверить Демо-страница , который добавляет как влево, так и правильное меню на страницу. Спасибо за прочтение!