seimin
/
itsm-whlg


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
							<!DOCTYPE html>
<html ng-app="asideApp">
  <head>
    <link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="src/styles/animate.css"/>
    <link rel="stylesheet" href="src/styles/aside.css"/>
    <style type="text/css">
      /* Styles go here */
      body {
        padding: 30px 15px 0;
      }

      #downloadbtn {
        margin-bottom: 10px;
      }

      .about-links {
        color: #95a5a6;
      }
      .about-links a {
        border-bottom: 1px dotted;
        text-decoration: none;
        margin-right: 15px;
      }

      .about-links li {line-height: 30px;}
      .about-links li:hover, .about-links li:hover a { color: #666; }
      .about-links .love:hover i { color: #e74c3c; }
      .about-links .prospectus:hover i { color: #f39c12; }
      .about-links .cypher:hover i { color: #16a085; }
      .about-links .lab:hover i { color: #8e44ad; }
    </style>
    <script src="https://code.angularjs.org/1.2.28/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
    <script src="src/scripts/app.js"></script>
    <script src="src/scripts/services/aside.js"></script>
    <script>
      angular.module('asideApp', ['ui.bootstrap', 'ngAside'])
        .controller('MainCtrl', function($scope, $aside) {
          $scope.openAside = function(position) {
            $aside.open({
              templateUrl: 'aside.html',
              placement: position,
              backdrop: true,
              controller: function($scope, $modalInstance) {
                $scope.ok = function(e) {
                  $modalInstance.close();
                  e.stopPropagation();
                };
                $scope.cancel = function(e) {
                  $modalInstance.dismiss();
                  e.stopPropagation();
                };
              }
            })
          }
        });
    </script>
    <script type="text/ng-template" id="aside.html">
      <div class="modal-header">
          <h3 class="modal-title">ngAside</h3>
      </div>
      <div class="modal-body">
        Look im in aside.
      </div>
      <div class="modal-footer">
          <button class="btn btn-primary" ng-click="ok($event)">OK</button>
          <button class="btn btn-warning" ng-click="cancel($event)">Cancel</button>
      </div>
    </script>
  </head>

  <body ng-controller="MainCtrl">
    <div class="container">
      <div class="jumbotron panel panel-default">
        <h1>Angular Aside</h1>
        <p>
          Off canvas side menu to use with ui-bootstrap. Extends ui-bootstrap's $modal provider.
        </p>
        <p>
          <a href="https://github.com/dbtek/angular-aside" class="btn btn-primary btn-lg" id="downloadbtn">
            <span class="glyphicon glyphicon-download"></span> Download
          </a>
          <br />
          <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://github.com/dbtek/angular-aside" data-via="dbtek">Tweet</a>
          <iframe src="http://ghbtns.com/github-btn.html?user=dbtek&repo=angular-aside&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="107" height="20"></iframe>
        </p>
        <div>
          <ul class="text-center about-links list-inline">
            <li class="love">
              made with <i class="fa fa-heart"></i> by <a href="http://twitter.com/dbtek" onclick="_gaq.push(['_trackEvent', 'Outbound Link', 'View twitter account']);">@dbtek</a>
            </li>
            <li class="lab">
              <i class="fa fa-flask"></i>
              <a href="https://github.com/dbtek/angular-aside">github project</a>
            </li>
            <li class="cypher">
              <i class="fa fa-code"></i>
              <a href="http://opensource.org/licenses/MIT">license: MIT</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="jumbotron panel panel-default">
        <h2>Demo</h2>
        <p>
          <span class="pull-left">
            <button type="button" class="btn btn-default btn-lg" ng-click="openAside('left')">
              <span class="glyphicon glyphicon-align-justify"></span> Left
            </button>
            <button type="button" class="btn btn-default btn-lg" ng-click="openAside('top')">
              Up <span class="glyphicon glyphicon-arrow-down"></span>
            </button>
          </span>
          <span class="pull-right">
            <button type="button" class="btn btn-default btn-lg" ng-click="openAside('bottom')">
              Down <span class="glyphicon glyphicon-arrow-up"></span>
            </button>
            <button type="button" class="btn btn-default btn-lg" ng-click="openAside('right')">
              Right <span class="glyphicon glyphicon-align-justify"></span>
            </button>
          </span>
        </p>
        <div class="clearfix"></div>
        <br />
        <!-- plunk-hr -->
        <div class="text-center">
          <ins class="adsbygoogle text-center"
               style="display:inline-block;width:320px;height:100px"
               data-ad-client="ca-pub-7616772085785107"
               data-ad-slot="4180012826"></ins>
        </div>
      </div>
    </div>
    <script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','http://www.google-analytics.com/analytics.js','ga');
    
      ga('create', 'UA-46512232-6', 'auto');
      ga('send', 'pageview');
    
    </script>
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
  </body>
</html>