javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-06 22:29:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

Angular and taweaks

Browse Source
This commit is contained in:
Max Lynch
2013-08-31 18:15:56 -05:00
parent 09a4e6c0ef
commit ef32c8cd2a
18 changed files with 186 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
example/angular/app.js vendored
View File

@ -1,3 +1,5 @@
/*
document.addEventListener('touchstart', function() {});
var app = angular.module('peopleApp', ['ngRoute', 'ngAnimate']);
@ -45,3 +47,4 @@ app.controller('CustomerCtrl', function($scope, $routeParams, Customers) {
$scope.customer = customer;
console.log('Showing user', id, customer);
});
*/

19
example/angular/chat/app.js vendored
View File

@ -9,10 +9,19 @@ chat.controller('RoomsCtrl', function($scope) {
{ name: 'All', key: 'all' },
{ name: 'Marketing', key: 'marketing' }
];
$scope.openPanel = function() {
console.log('Open panel');
$scope.isPanelShowing = true;
};
});
// TODO: Move this to a directive corresponding to this panel
// Grab the sections
var page = document.getElementById('page');
var leftPanel = document.getElementById('left-panel');
var rightPanel = document.getElementById('right-panel');
var controller = new ion.controllers.LeftRightPanelViewController({
left: leftPanel,
leftWidth: 270,
right: rightPanel,
rightWidth: 270,
center: page,
animateClass: 'ion-panel-animated'
});

70
example/angular/chat/index.html
View File

@ -7,47 +7,47 @@
<link rel="stylesheet" href="../../../dist/ionic.css">
<script src="angular-1.2.0rc1.min.js"></script>
<script src="angular-touch.js"></script>
<script src="app.js"></script>
<script src="../../../js/framework/ion-panel.js"></script>
<script src="../../../js/framework/glue/angular-glue.js"></script>
</head>
<body ng-app="Chat">
<section class="panel-page-container" ng-controller="RoomsCtrl">
<div id="left-panel" class="ion-panel ion-panel-left">
<ul class="list">
<li class="list-item">
Max Lynch
</li>
</ul>
</div>
<div id="right-panel" class="ion-panel ion-panel-right">
<ul class="list">
<li class="list-item">
Max Lynch
</li>
</ul>
</div>
<div id="page" class="full-section">
<header class="bar bar-header bar-dark">
<button class="button button-dark">Rooms</button>
<h1 class="title">Feeds</h1>
</header>
<section id="this-panel" class="panel-content" ng-class="{'ion-panel-opened': isPanelShowing}">
<ul class="list">
<li class="list-item">
Max Lynch
<main class="content has-header">
<ul class="list" ng-controller="RoomsCtrl">
<li class="list-item" ng-repeat="room in rooms">
{{room.name}}
</li>
</ul>
</section>
<section id="that-panel" class="panel-content" ng-class="{'ion-panel-opened': isPanelShowing}">
<ul class="list">
<li class="list-item">
Max Lynch
</li>
</ul>
</section>
</main>
</div>
<section>
<header class="bar bar-header bar-dark">
<button class="button button-dark" ng-click="openPanel()">Rooms</button>
<h1 class="title">Feeds</h1>
</header>
<main class="content has-header">
<ul class="list">
<li class="list-item" ng-repeat="room in rooms">
{{room.name}}
</li>
</ul>
</main>
</section>
</section>
<script src="../../../js/ionic-events.js"></script>
<script src="../../../js/ionic-gestures.js"></script>
<script src="../../../js/controllers/ionic-leftrightpanel.js"></script>
<script src="../../../js/ionic-panel.js"></script>
<script src="../../../connectors/angular/angular-glue.js"></script>
<script src="app.js"></script>
</body>
</html>

5
example/angular/index.html
View File

@ -9,9 +9,8 @@
<link rel="stylesheet" href="../../dist/ionic.css">
<link rel="stylesheet" href="app.css">
<script src="/vendor/angular/angular.js"></script>
<script src="/vendor/angular/angular-route.js"></script>
<script src="/vendor/angular/angular-animate.js"></script>
<script src="/vendor/angular/1.2.0rc1/angular-1.2.0rc1.min.js"></script>
<script src="/vendor/angular/1.2.0rc1/angular-touch.js"></script>
<script src="app.js"></script>
</head>

8
example/button-groups.html
View File

@ -20,10 +20,10 @@
<main class="content-padded has-header">
<p>
<div class="button-group">
<a class="button button-primary" href="index.html">Success</a>
<a class="button button-primary" href="index.html">Warning</a>
<a class="button button-primary" href="index.html">Danger</a>
<a class="button button-primary" href="index.html">Dark</a>
<a class="button button-primary">Success</a>
<a class="button button-primary">Warning</a>
<a class="button button-primary">Danger</a>
<a class="button button-primary">Dark</a>
</div>
</p>
<p><a class="button button-secondary" href="index.html">Homepage</a></p>

16
example/buttons.html
View File

@ -25,14 +25,14 @@
<main class="content-padded has-header">
<p>
<a class="button button-default" href="grid.html">Default</a>
<a class="button button-secondary" href="index.html">Secondary</a>
<a class="button button-primary" href="listview.html">Primary</a>
<a class="button button-info" href="index.html">Info</a>
<a class="button button-success" href="index.html">Success</a>
<a class="button button-warning" href="index.html">Warning</a>
<a class="button button-danger" href="index.html">Danger</a>
<a class="button button-dark" href="index.html">Dark</a>
<a class="button button-default">Default</a>
<a class="button button-secondary">Secondary</a>
<a class="button button-primary">Primary</a>
<a class="button button-info">Info</a>
<a class="button button-success">Success</a>
<a class="button button-warning">Warning</a>
<a class="button button-danger">Danger</a>
<a class="button button-dark">Dark</a>
</p>
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
</main>

9
example/headers.html
View File

@ -14,7 +14,14 @@
<section>
<header class="bar bar-header bar-dark">
<h1 class="title">Header</h1>
<div class="buttons">
<a class="button button-clear">Back</a>
<a class="button button-clear">This</a>
</div>
<h1 class="title">Life Choices</h1>
<div class="buttons">
<a class="button button-success">Forward</a>
</div>
</header>
<main class="content content-padded has-header">

2
example/index.html
View File

@ -12,8 +12,6 @@
<script src="/vendor/angular/angular.js"></script>
<script src="/vendor/angular/angular-route.js"></script>
<script src="/vendor/angular/angular-animate.js"></script>
<script src="app.js"></script>
</head>
<body>

37
example/tab-bars.html
View File

@ -21,6 +21,43 @@
</main>
<footer class="bar bar-tabs bar-footer bar-success">
<nav class="tabs">
<ul class="tabs-inner">
<li class="tab-item">
<a href="#">
<i class="glyphicon glyphicon-home"></i>
Home
</a>
</li>
<li class="tab-item">
<a href="#">
<i class="glyphicon glyphicon-user"></i>
Friends
</a>
</li>
<li class="tab-item">
<a href="#">
<i class="glyphicon glyphicon-thumbs-down"></i>
Enemies
</a>
</li>
<li class="tab-item">
<a href="#">
<i class="glyphicon glyphicon-wrench"></i>
Settings
</a>
</li>
<li class="tab-item">
<a href="#">
<i class="glyphicon glyphicon-th"></i>
More
</a>
</li>
</ul>
</nav>
</footer>
</section>
</body>