Прежде чем реализовать вкладку в стиле MVVM AngularJS, мы сначала выдвигаем нашу обычно используемую реализацию jQuery.
1. JQuery достигает простого и грубого эффекта вкладки
var Nav = $ (". Tabs"); // Tab Switch Box = $ (". Box"); // контейнер NAV.On ("click", function () {// Щелкнуть событие var this_index = $ (this) .index (); $ (this) .adclass ("active"). Siblings (). removeclass ("Active"); box.eq (this_index) .show ().Здесь приведена только основная часть JS, а HTML и CSS не подробно описаны.
Приведенный выше код просто и приблизительно реализует эффект вкладки и использует событие Click для получения elem.index() , устанавливает индекс и контейнер вместе, чтобы управлять дисплеем и скрыть его.
2. Angularjs реализует простой эффект вкладки
HTML Part
<раздел ng-app = "myApp"> <div ng-controller = "tabController As Tab"> <vav> <ul> <li ng-class = "{'current': tab.isset (1)}"> <a href = "#" ng-click = "tab.setcurrent (1)"> <pran> </span> </a> </li> ng-class = "{'current': tab.isset (2)}"> <a href = "#" ng-click = "tab.setcurrent (2)"> <pan> work </span> </a> </li> <li ng-class = "{'current': tab.isset (3)}"> <a href = "#" ng-click = "tab.setCurrent (3)"> <pan> blog </span> </a> </li> <li ng-class = "{'' current ': tab.isset (4)}"> <a href = "#" ng-click = "tab.setcurrent (4)"> <pan> о </span> </a> </li> ng-class = "{'current': tab.isset (5)}"> <a href = "#" ng-click = "tab.setcurrent (5)"> <pan> contact </span> </a> </li> </vav> <div> <section id = "Раздел 1" ng-shefe = "tab.isset (1)"> <p> 1 </p> </psect spection. ng-show = "tab.isset (2)"> <p> 2 </p> </section> <section id = "раздел-3" ng-show = "tab.isset (3)"> <p> 3 </p> </section> <раздел идентификатор = "раздел-4" ng-show = "tab.isset (4)"> <p> 4 </p> </section> <раздел = раздел = "раздел =" раздел = "раздел =" раздел = "раздел =" раздел = "раздел =" раздел = "раздел =" раздел = "раздел =" раздел = "раздел = раздел =" ng-show = "tab.isset (5)"> <p> 5 </p> </section> </div> </section> Часть CSS (чтобы облегчить нам использовать Less синтаксиса, детская обувь может настроить CSS для достижения персонализированных эффектов)
* {маржа: 0; Подкладка: 0;} Body {founale: #e7ecea; шрифт-вес: 600; Фондовая семья: «Raleway», Arial, Sans-Serif; Text-Align: Center;} a {Color: #2CC185; Текстовое декорация: нет; Схема: нет; &: hover {color: #74777b; }}. Табс {позиция: относительно; Ширина: 100%; Маржа: 30px Auto 0 Auto; Nav {ul {позиция: относительно; дисплей: Flex; максимальная ширина: 1200px; Поле: 0 Авто; Список стиля: нет; Flex-Flow: Row Wrap; Justify-Content: Center; li {Flex: 1; & .current a {color: #74777b; }}}}} a {display: block; позиция: относительно; переполнение: скрыто; высота линии: 2,5; span {вертикальный альбом: средний; размер шрифта: 1,5 эм; }}}. Содержание {позиция: относительно; раздел { /* отображение: нет; */ Маржа: 0 Авто; максимальная ширина: 1200px; & .content-current { /* display: block; */} p {color: rgba (40,44,42, 0,4); поля: 0; Заполнение: 1,75 эм 0; Фонт-вес: 900; размер шрифта: 5EM; высота линии: 1; }}}. Стиль табс {Nav { /* founal: rgba (255,255,255,0,4); */ ul li {a {overflow: visible; Пограничный подъем: 1PX SOLID RGBA (0,0,0,0,2); -Вебкит-транзиция: цвет 0,2 с; Переход: цвет 0,2 с; }} ul li li.current a {&: после и: до {content: '' позиция: абсолютно; Верх: 100%; Слева: 50%; Ширина: 0; высота: 0; Граница: твердый прозрачный; } &: после {margin -left: -10px; ширина границы: 10px; пограничный цвет: #E7ECEA; } &: до {margin -left: -11px; ширина границы: 11px; пограничный цвет: RGBA (0,0,0,0,2); }}}}JS Part
Angular.Module ('myApp', []) .controller ('tabController', function () {this.current = 1; this.setCurrent = function (tab) {this.current = tab;}; this.isset = function (tab) {return this.current == tab;};});Окончательный эффект показан на рисунке ниже:
Через приведенный выше код мы можем обнаружить, что основой реализации являются директивы ng-class и ng-click и ng-show встроенные в AngularJS.
Проще говоря: контроллер определяет текущие данные. Значение данных по умолчанию составляет 1. ng-click настраивает функцию события Click и изменяет current данные. ng-class получает условие привязки current значения и добавляет current стиль к выбранному индексу в настоящее время. Контейнер также получает current данные в controller и отображает его спрятаны через элемент управления ng-show .
3. angularjs достигает слегка сложного эффекта мобильной вкладки
HTML Part
<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"></script><script src="http://cdn.bootcss.com/angular.js/1.3.8/angular-touch.min.js"></script>//A mobile touch event library for AngularJs <div ng-app = 'myApp' ng-controller = "myController"> <div> <div ng-repeat = "item в [1,2,3,4]" ng-click = "changeIndex ($ index)"> вкладка {{item}} </div> </div> <div style = " 25*activeIndex}}%"></div> </div> <div ng-swipe-right="swipeRight()" ng-swipe-left="swipeLeft()"> <div style="left:{{ -100*activeIndex}}%"> <div ng-repeat="item in [1,2,3,4]" > <br /><br /><br /><br /> <br/> <h1> tab {{item}} </h1> </div> </div> </div> </div> </div> </div> </div>CSS часть
*{Padding: 0; поля: 0; font-family: 'arial';}. type-tabs {ширина: 100%; Высота: 40px;}. Type-tabs div {float: left; Ширина: 25%; высота линии: 40px; Текст-альбом: Центр; курсор: указатель; Пользовательский выбор: нет; -Webkit-USER-SELECT: NONE;}. GUID-BAR {Положение: относительно; Margin-top: -3px;}. Guid-bar-content {ширина: 25%; Высота: 3PX; фоновый цвет: #345; позиция: абсолютно; Слева: 50%; Переход: все 400 мс легче;}. Tab-Content {ширина: 100%; Высота: 500px; фоновый цвет: #CCC; переполнение: hidden;}. Tab-content-inner {ширина: 400%; позиция: относительно; Переход: все 400 мс;}. Tab-content-item {ширина: 25%; Плавание: осталось; Текст-альбом: Центр;}JS Part
var myapp = angular.module ('myapp', ['ngtouch']); myapp.controller ('myController', function ($ scope) {$ scope.activeDex = 0; $ scope.changeIndex = function (index) {$ scope.activeDex = index;}; $ scope.activeDex = ++ $ if ($ scope.activeIndex <0) $ scope.activeIndex = 3;Эффекты следующие:
Хорошо, сегодня мы приведем эти два примера. Вы можете быстро понять детскую обувь, которую вы узнали об angularjs, посмотрев напрямую на код. Детская обувь, которую вы никогда не понимали, также могут узнать о черной магии MVVM и ее структуре организации кода с помощью этих двух примеров.
4. Что лучше в режиме MVVM AngularJS, чем работа DOM JQUERY?
1. С точки зрения макроса, один из них заключается в использовании данных и данных процесса, а другой - работать с DOM и пользовательским интерфейсом.
Процесс общего веб-проекта может быть обобщен в три процесса: 1) Вы хотите получить данные на интерфейсе 2) обмены данными в фоне 3) После получения данных повторно возродите интерфейс. В этом процессе, как вы реализуете обмен данными с помощью бэкэнда? jQuery's Ajax. Если API обмена данными предполагает более 20, сколько $ .get или $ .ajax вам нужно написать, чтобы включить все это? Более того, все ссылки API не находятся в одном и том же месте, что довольно трудно управлять. И Angularjs просто настройка route .
После получения данных, как вы управляете этими данными и как вы передаете данные в интерфейс?
Как управлять различными событиями? Сам jquery характеризуется запуска событий. Много раз это когда вы пишете процесс для запуска событий-> обработки данных. Очевидно, что после того, как будет больше функций, код будет переплетен как лапша. Вокруг меня много традиционных фронтальных положений JQUERY в течение двух или трех лет. Я не изучал углубленные исследования по делегированию событий, операциям DOM, процессам рендеринга браузеров, упаковке компонентов плагина и т. Д., Таким образом, вы можете представить, насколько плохо качество кода. На самом деле, JQuery - это библиотека классов, а не структура разработки. JQ - это еще одна инкапсуляция Native API JS, позволяющая вам более счастливо выполнять операции DOM, анимационные операции и AJAX. Это именно потому, что он слишком гибкий, что легче написать код трудного для употребления.
2. Производительность: операция DOM является медленной, а сам объект DOM также является объектом JS. Так строго говоря, дело не в том, что управление этим объектом является медленной, но после работы этого объекта будет вызвано некоторое поведение браузера, например, макет и живопись.
Суммировать
По мере того, как веб -продукты становятся все более и более сложными, иерархическая архитектура необходима. Следовательно, двустороннее связывание используется в качестве противоядия в сочетании с структурой MVC, которая была популярна в течение долгого времени, был получен артефакт MVVM. Блогер твердо верит, что MVVM станет окончательным решением для фронта. От работы DOM до операции данных требуется процесс адаптации, но до тех пор, пока результат хорош, эти усилия того стоят. В этом процессе это также улучшение ваших профессиональных способностей. Давай, друзья мои! ! !