用AngularJS实现动态UI

下载代码

html

css

分享到微信朋友圈

html

<div ng-app="angularPageApp" class="app-container">
  <div class="page-container">
    <h2>Dynamic UI behavior with AngularJS attributes</h2>
    <h3>type="row" start="open"</h3>
    <div class="swirl-container"></div>
    <link-list-widget type="row" start="open" ng-controller="linkListWidgetCtrl"></link-list-widget>
    <div class="divider-bottom"></div>
    <div class="flex">
      <div class="half-width">
        <h3>type="column" start="close"</h3>
        <link-list-widget type="column" start="close" ng-controller="linkListWidgetCtrl"></link-list-widget>
      </div>
      <div class="divider-right"></div>
      <div class="half-width">
        <h3>type="accordion" start="open"</h3>
        <div class="accordion-container flex-center">
          <link-list-widget type="accordion" start="open" ng-controller="linkListWidgetCtrl"></link-list-widget>
        </div>
      </div>
    </div>
  </div>
</div>

css

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
}

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
}

.flex-center {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}

.flex-column {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}

.flex-column-center {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

.flex-column-center-center {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

h2, h3 {
  color: white;
  text-align: center;
  padding-top: 1em;
  margin: 0;
}

.page-container {
  position: relative;
  background-image: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/swirl_pattern.png);
  z-index: 1;
  border: 0.5em solid white;
}
.page-container .swirl-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #5C18BC;
  z-index: -1;
  opacity: 0.7;
}
.page-container .half-width {
  width: 49%;
}

.divider-bottom {
  border-bottom: 0.5em solid white;
  opacity: 1;
}

.divider-right {
  border-right: 0.5em solid white;
}

.content-container {
  font-size: 0.8em;
}
.content-container .content {
  margin: 1em;
}
.content-container .content .item {
  background-color: white;
  box-shadow: 0 0.2em 0.5em 0 rgba(0, 0, 0, 0.26);
  margin: 1em;
  width: 27em;
}
.content-container .content .item.accordion {
  margin-top: 0;
  margin-bottom: 0;
}
.content-container .content .item:not(.open) {
  height: 7em;
}
.content-container .content .item.open header:hover i:last-child {
  transform: rotate(-90deg);
}
.content-container .content .item header {
  position: relative;
  padding: 2.5em 1em 2.5em 1em;
  text-align: center;
  border-bottom: 0.1em solid rgba(0, 0, 0, 0.16);
  color: grey;
  transition: background-color 0.2s linear;
  cursor: pointer;
}
.content-container .content .item header i {
  font-size: 2em;
  position: absolute;
  font-weight: bold;
}
.content-container .content .item header i:first-child {
  color: #5C18BC;
  left: 1em;
}
.content-container .content .item header i:last-child {
  color: #5C18BC;
  right: 1em;
  width: 1.1em;
  height: 1.1em;
  padding-left: 0.1em;
  transition: all 0.2s ease-in;
}
.content-container .content .item header span {
  cursor: default;
  font-size: 1.4em;
  line-height: 1.6em;
}
.content-container .content .item header:hover {
  box-shadow: 0 0 0.3em rgba(0, 0, 0, 0.26);
  background-color: #332C7C;
}
.content-container .content .item header:hover i:first-child {
  color: white;
}
.content-container .content .item header:hover i:last-child {
  background-color: white;
  color: #5C18BC;
  transform: rotate(90deg);
  border-radius: 50%;
  box-shadow: 0 0 0.2em rgba(0, 0, 0, 0.7);
}
.content-container .content .item header:hover span {
  color: white;
}
.content-container .content .item section {
  padding: 1em;
  background-color: white;
}
.content-container .content .item section .title {
  font-weight: bold;
  margin-bottom: 1em;
}
.content-container .content .item section .links .link {
  color: #5C18BC;
  margin-bottom: 0.5em;
  cursor: pointer;
  transition: all 0.1s ease-in;
}
.content-container .content .item section .links .link:hover {
  margin-left: 1em;
  font-weight: bold;
}

JavaScript

var PageApp = angular.module('angularPageApp', ['ngSanitize']);

PageApp.controller('linkListWidgetCtrl', function($scope) {
    // define defaults for the directive behavior in case none are
    // provided as html attributes (see directive link function below)
    $scope.type = 'row';
    $scope.start = 'open';

// content a some ui direction taken from the Google Accounts page (https://myaccount.google.com/)
    $scope.items = [{
        header: {
            text: 'Sign-in & security',
            css: 'fa-lock',
            open: true
        },
        content: {
            title: 'Control your password and account-access settings',
            links: ['Signing in to Google', 'Device activity and notifications', 'Connected apps & sites']
        }
    }, {
        header: {
            text: 'Personal info and privacy',
            css: 'fa-user',
            open: true
        },
        content: {
            title: 'Manage your visibility settings and the data we use to personalize your experience.',
            links: ['Your personal info', 'Activity control', 'Ads settings', 'Account overview', 'Control your content']
        }
    }, {
        header: {
            text: 'Account preferences',
            css: 'fa-cog',
            open: true
        },
        content: {
            title: 'Set language, accessibility, and other settings that help you use Google.',
            links: ['Language & Input Tools', 'Accessibility', 'Your Google Drive storage', 'Delete your account or services']
        }
    }];

// called once from directive link function if the type is set to 'accordion'
    $scope.initAccordion = function() {
        $scope.closeAll();
        if ($scope.start === 'open') {
            $scope.items[0].header.open = true;
        }
    };

// set the header.open boolean to false for all items
    // angular should update the ui for us
    $scope.closeAll = function() {
        for (var i = 0; i < $scope.items.length; i++) {
            $scope.items[i].header.open = false;
        }
    };

// in none-accordion cases all this does is flip the open boolean for
    // the clicked header.  if our type is accordion and we're opening a 
    // currently closed item, we close all items before opening the clicked one
    $scope.headerClick = function(header) {
        if ($scope.type === 'accordion' && header.open === false) {
            $scope.closeAll();
        }
        header.open = !header.open;
    };
});

PageApp.directive('linkListWidget', function($timeout) {
    return {
        restrict: 'E',
        template: [
            '<div class="content-container">',
            '<div class="content" ng-class="{\'flex-center\': type === \'row\', \'flex-column-center\': type === \'column\'}">',
            '<div class="item" ng-repeat="item in items" ng-class="{open: item.header.open === true, accordion: type === \'accordion\'}">',
            '<header ng-click="headerClick(item.header)">',
            '<i class="fa {{ item.header.css }}"></i>',
            '<span>{{ item.header.text }}</span>',
            '<i class="fa fa-angle-right"></i>',
            '</header>',
            '<section ng-show="item.header.open === true">',
            '<div class="title">{{ item.content.title }}</div>',
            '<div class="links">',
            '<div class="link" ng-repeat="link in item.content.links" >{{ link }}</div>',
            '</div>',
            '</section>',
            '</div>',
            '</div>',
            '</div>'
        ].join(''),
        link: function(scope, element, attrs) {
            // feed any attributes defined in the html into our controller's scope
            if (attrs.type) {
                scope.type = attrs.type;
            }
            if (attrs.start) {
                scope.start = attrs.start;
            }
            if (scope.start === 'close') {
                scope.closeAll();
            }
            if (scope.type === 'accordion') {
                scope.initAccordion();
            }
        }
    };
});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg