7272 < span class ="icon-bar "> </ span >
7373 < span class ="icon-bar "> </ span >
7474 </ button >
75- < a class ="brand " href ="# "> Angular Timer</ a >
75+ < a class ="brand " href ="index.html#introduction "> Angular Timer</ a >
7676 < div class ="nav-collapse collapse ">
7777 < ul class ="nav ">
7878 < li class ="dropdown ">
8585 </ li >
8686 < li ng-non-bindable > < a href ="index.html#markup "> <timer/></ a > </ li >
8787 < li class ="dropdown ">
88- < a href ="# " class ="dropdown-toggle " data-toggle ="dropdown "> Usage < b class ="caret "> </ b > </ a >
88+ < a href ="# " class ="dropdown-toggle " data-toggle ="dropdown "> Usage From < b class ="caret "> </ b > </ a >
8989 < ul class ="dropdown-menu ">
90- < li > < a href ="examples.html#angularjs-single-timer "> From AngularJS - Single Timer</ a > </ li >
91- < li > < a href ="examples.html#angularjs-multiple-timers " > From AngularJS - Multiple Timers</ a > </ li >
92- < li > < a href ="# " > From native JavaScript </ a > </ li >
93- < li > < a href ="# " > From jQuery </ a > </ li >
90+ < li > < a href ="examples.html#angularjs-single-timer "> AngularJS - Single Timer</ a > </ li >
91+ < li > < a href ="examples.html#angularjs-multiple-timer " > AngularJS - Multiple Timers</ a > </ li >
92+ < li > < a href ="examples.html#jquery-timer " > JQuery </ a > </ li >
93+ < li > < a href ="examples.html#plain-javascript " > Plain JavaScript </ a > </ li >
9494 </ ul >
9595 </ li >
9696 </ ul >
100100</ div >
101101< div class ="container page-content ">
102102 < section id ="angularjs-single-timer ">
103- < h3 > AngularJS Example - Single Timer</ h3 >
104- < ul class ="nav nav-tabs " id ="myTab ">
105- < li class ="active "> < a data-toggle ="tab " href ="#angularjs-example -source "> index.html</ a > </ li >
106- < li > < a data-toggle ="tab " href ="#angularjs-example -demo "> Demo</ a > </ li >
103+ < h3 > AngularJS - Single Timer</ h3 >
104+ < ul class ="nav nav-tabs " id ="angularjs-single-timer-tab ">
105+ < li class ="active "> < a data-toggle ="tab " href ="#angularjs-single-timer -source "> index.html</ a > </ li >
106+ < li > < a data-toggle ="tab " href ="#angularjs-single-timer -demo "> Demo</ a > </ li >
107107 </ ul >
108108
109109 < div class ="tab-content ">
110- < div class ="tab-pane active " id ="angularjs-example -source ">
110+ < div class ="tab-pane active " id ="angularjs-single-timer -source ">
111111 < pre class ="prettyprint linenums ">
112112<!DOCTYPE html>
113113<html>
114114<head>
115- <title>AngularJS Example - Single Timer</title>
115+ <title>AngularJS Example - Single Timer Example </title>
116116 <script src="../angular/angular.min.js"></script>
117117 <script src="../app/js/timer.js"></script>
118118 <script>
@@ -134,25 +134,157 @@ <h3>AngularJS Example - Single Timer</h3>
134134 </script>
135135</head>
136136<body ng-app="MyApp">
137- <div ng-controller="MyAppController" style="border: 1px solid gainsboro; text-align: center;" >
138- <h2 >Single Timer</h2 >
137+ <div ng-controller="MyAppController">
138+ <h1 >AngularJS - Single Timer Example </h1 >
139139 <h3><timer/></h3>
140140 <button ng-click="startTimer()" ng-disabled="timerRunning">Start Timer</button>
141141 <button ng-click="stopTimer()" ng-disabled="!timerRunning">Stop Timer</button>
142142 </div>
143143 <br/>
144- <div ng-controller="MyAppController" style="border: 1px solid gainsboro; text-align: center;">
145- <h2>Multiple Timers</h2>
146- <h3>Timer 1: <timer interval="2000"/></h3>
147- <h3>Timer 2: <timer>{{minutes}} minutes, {{seconds}} seconds.</timer></h3>
144+ </body>
145+ </html></ pre >
146+ </ div >
147+ < div class ="tab-pane " id ="angularjs-single-timer-demo ">
148+ < iframe src ="examples/angularjs-single-timer.html " width ="100% " height ="350px "> </ iframe >
149+ </ div >
150+ </ div >
151+ </ section >
152+
153+ < section id ="angularjs-multiple-timer ">
154+ < h3 > AngularJS - Multiple Timer</ h3 >
155+ < ul class ="nav nav-tabs " id ="angularjs-multiple-timer-tab ">
156+ < li class ="active "> < a data-toggle ="tab " href ="#angularjs-multiple-timer-source "> index.html</ a > </ li >
157+ < li > < a data-toggle ="tab " href ="#angularjs-multiple-timer-demo "> Demo</ a > </ li >
158+ </ ul >
159+
160+ < div class ="tab-content ">
161+ < div class ="tab-pane active " id ="angularjs-multiple-timer-source ">
162+ < pre class ="prettyprint linenums ">
163+ <!DOCTYPE html>
164+ <html>
165+ <head>
166+ <title>AngularJS Example - Multiple Timers Example</title>
167+ <script src="../angular/angular.min.js"></script>
168+ <script src="../app/js/timer.js"></script>
169+ <script>
170+ angular.module('MyApp', ['timer']);
171+ function MyAppController($scope) {
172+ $scope.timerRunning = true;
173+
174+ $scope.startTimer = function (){
175+ $scope.$broadcast('timer-start');
176+ $scope.timerRunning = true;
177+ };
178+
179+ $scope.stopTimer = function (){
180+ $scope.$broadcast('timer-stop');
181+ $scope.timerRunning = false;
182+ };
183+ }
184+ MyAppController.$inject = ['$scope'];
185+ </script>
186+ </head>
187+ <body ng-app="MyApp">
188+ <div ng-controller="MyAppController">
189+ <h2>AngularJS - Multiple Timers Example</h2>
190+ <h3>Timer 1: <timer/></h3>
191+ <h3>Timer 2: <timer interval="2000"/></h3>
192+ <h3>Timer 3: <timer>{{minutes}} minutes, {{seconds}} seconds.</timer></h3>
148193 <button ng-click="startTimer()" ng-disabled="timerRunning">Start Timers</button>
149194 <button ng-click="stopTimer()" ng-disabled="!timerRunning">Stop Timers</button>
150195 </div>
151196</body>
152197</html></ pre >
153198 </ div >
154- < div class ="tab-pane " id ="angularjs-example-demo ">
155- < iframe src ="examples/angularjs-single-timer.html " width ="100% " height ="350px "> </ iframe >
199+ < div class ="tab-pane " id ="angularjs-multiple-timer-demo ">
200+ < iframe src ="examples/angularjs-multiple-timers.html " width ="100% " height ="350px "> </ iframe >
201+ </ div >
202+ </ div >
203+ </ section >
204+
205+ < section id ="jquery-timer ">
206+ < h3 > JQuery Timer</ h3 >
207+ < ul class ="nav nav-tabs " id ="jquery-timer-tab ">
208+ < li class ="active "> < a data-toggle ="tab " href ="#jquery-timer-source "> index.html</ a > </ li >
209+ < li > < a data-toggle ="tab " href ="#jquery-timer-demo "> Demo</ a > </ li >
210+ </ ul >
211+
212+ < div class ="tab-content ">
213+ < div class ="tab-pane active " id ="jquery-timer-source ">
214+ < pre class ="prettyprint linenums ">
215+ <!DOCTYPE html>
216+ <html>
217+ <head>
218+ <title>JQuery Timer Example</title>
219+ <script src="../jquery/jquery-1.9.1.min.js"></script>
220+ <script src="../angular/angular.min.js"></script>
221+ <script src="../app/js/timer.js"></script>
222+ <script>
223+ function startTimer() {
224+ $('timer')[0].start();
225+ }
226+
227+ function stopTimer() {
228+ $('timer')[0].stop();
229+ }
230+ </script>
231+ </head>
232+ <body>
233+ <div ng-controller="MyAppController">
234+ <h2>JQuery - Timer Example</h2>
235+ <h3 ng-app="timer"><timer/></h3>
236+ <button onclick="startTimer()">Start Timer</button>
237+ <button onclick="stopTimer()">Stop Timer</button>
238+ </div>
239+ <br/>
240+ </body>
241+ </html></ pre >
242+ </ div >
243+ < div class ="tab-pane " id ="jquery-timer-demo ">
244+ < iframe src ="examples/jquery-timer.html " width ="100% " height ="350px "> </ iframe >
245+ </ div >
246+ </ div >
247+ </ section >
248+
249+ < section id ="plain-javascript ">
250+ < h3 > Plain JavaScript</ h3 >
251+ < ul class ="nav nav-tabs " id ="plain-javascript-tab ">
252+ < li class ="active "> < a data-toggle ="tab " href ="#plain-javascript-source "> index.html</ a > </ li >
253+ < li > < a data-toggle ="tab " href ="#plain-javascript-demo "> Demo</ a > </ li >
254+ </ ul >
255+
256+ < div class ="tab-content ">
257+ < div class ="tab-pane active " id ="plain-javascript-source ">
258+ < pre class ="prettyprint linenums ">
259+ <!DOCTYPE html>
260+ <html>
261+ <head>
262+ <title>Plain Javascript Timer Example</title>
263+ <script src="../angular/angular.min.js"></script>
264+ <script src="../app/js/timer.js"></script>
265+ <script>
266+ function startTimer() {
267+ document.getElementsByTagName('timer')[0].start();
268+ }
269+
270+ function stopTimer() {
271+ document.getElementsByTagName('timer')[0].stop();
272+ }
273+ </script>
274+ </head>
275+ <body>
276+ <div>
277+ <h2>Plain JavaScript - Timer Example</h2>
278+ <h3><timer ng-app="timer"/></h3>
279+ <button onclick="startTimer()">Start Timer</button>
280+ <button onclick="stopTimer()">Stop Timer</button>
281+ </div>
282+ <br/>
283+ </body>
284+ </html></ pre >
285+ </ div >
286+ < div class ="tab-pane " id ="plain-javascript-demo ">
287+ < iframe src ="examples/plain-javascript.html " width ="100% " height ="350px "> </ iframe >
156288 </ div >
157289 </ div >
158290 </ section >
0 commit comments