tabs work

sheltowt · Jun 15, 2013 · f77fa76 · f77fa76
1 parent 466fc18
commit f77fa76
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 28 deletions.
diff --git a/assets/style.css b/assets/style.css
@@ -3,4 +3,12 @@ body {
 	width: 1400px;
 	margin: 25px;
 	font-style: courier;
+}
+
+#tabs
+{
+border:2px solid #a1a1a1;
+padding:10px 40px; 
+background:#ffffff;
+border-radius:25px;
 }
diff --git a/index.html b/index.html
@@ -9,14 +9,18 @@
     <meta name="author" content="">
 
     <!-- Le styles -->
-    <link href="assets/bootstrap/css/bootstrap.css" rel="stylesheet">
     <script src="assets/underscore.js"></script>
+    <link href="assets/bootstrap/css/bootstrap.css" rel="stylesheet">
     <script src="assets/backbone.js"></script>
     <script src="assets/dataJSON2.js"></script>
     <script src="assets/HandleBars.js"></script>
     <script src="assets/jquery.js"></script>
     <script src="assets/backbone.js"></script>
     <link rel="stylesheet" href="assets/style.css" type="text/css">
+    <style type="text/css"></style>
+
+    <script src="models.js"></script>
+    <script src="views.js"></script>
     <style type="text/css">
       body {
         padding-top: 60px;
@@ -30,12 +34,6 @@
       <script src="../assets/js/html5shiv.js"></script>
     <![endif]-->
 
-    <!-- Fav and touch icons -->
-    <!-- <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
-    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
-      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
-                    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
-                                   <link rel="shortcut icon" href="../assets/ico/favicon.png"> -->
   </head>
 
   <body>
@@ -80,11 +78,11 @@
     <div class="container">
 
       <!-- Main hero unit for a primary marketing message or call to action -->
-      <div class="hero-unit">
+      <!-- <div class="hero-unit">
         <h1>adValue from adWords</h1>
         <p>Get instant information from your adWords data!</p>
         <p><a href="#" class="btn btn-primary btn-large">Learn more &raquo;</a></p>
-      </div>
+      </div> -->
 
       <div id='tabs'>
       </div>
@@ -96,8 +94,7 @@ <h1>adValue from adWords</h1>
     </div> <!-- /container -->
 
     <script>
-
-
+      app = new App();
     </script>
   </body>
 </html>
diff --git a/models.js b/models.js
@@ -1,13 +1,15 @@
-App = Backbone.Model.extend({
-  initialize: function(){
-    this.set(tabModles, new Tabs());
-    this.set(tabsView, new TabsView())
-    var bubbleChartModel = new Tab({viewId: "bubble-chart", csvData:'blah1,blah2\nval11,val12\n,val21,val22\n'})
-    tabs.add(bubbleChartModel);
-
-    // tabs.add(new Tab({viewId: "other_type", csvData:'blah1,blah2\nval11,val12\n,val21,val22\n'}));
-    // tabs.add(new Tab({viewId: "other_type", csvData:'blah1,blah2\nval11,val12\n,val21,val22\n'}));
+var App = function(){
+  this.tableLogic = new TableLogic;
+  this.tabModles = new Tabs();
+  this.tabsView =  new TabsView({el: '#tabs', model: this.tableLogic});
+  this.bubbleChartModel = new Tab({viewId: "bubble-chart", csvData:'blah1,blah2\nval11,val12\n,val21,val22\n'});
+  this.tabView = new TabView({model: this.bubbleChartModel, id: this.bubbleChartModel.get('viewId')});  
+  this.tabModles.add(this.bubbleChartModel);
+};
 
+var TableLogic = Backbone.Model.extend({
+  defaults: {
+    activeTab: "bubble-tab"
   }
 });
 
@@ -16,7 +18,4 @@ var Tabs = Backbone.Collection.extend({
 });
 
 var Tab = Backbone.Model.extend({
-  initialize: function(){
-
-  }
 })
diff --git a/views.js b/views.js
@@ -1,14 +1,41 @@
 var TabsView = Backbone.View.extend({
+  initialize: function(){
+    this.model.on('change:activeTab', function(){
+      this.render();
+    },this)
+    this.render();
+  },
+  events: {
+    'click a': 'parseClick'
+  },
+  template: _.template('<ul class="nav nav-tabs">' +
+      '<li><a id="bubble-tab">Bubble Chart</a></li>' +
+      '<li><a id="graph2-tab">Graph2</a></li>' +
+      '<li><a id="graph3-tab">Graph3</a></li>' +
+      '<li><a id="graph4-tab">Graph4</a></li>' +
+    '</ul>'
+  ),
+
+  parseClick: function(event){
+    this.model.set('activeTab', event.target.id);
+  },
+
+  render: function(){
+    this.$el.empty();
+    this.$el.append(this.template());
+    this.$el.find('#'+ this.model.get('activeTab')).parent().attr('class', 'active');
+  }
 
 });
 
-TabView
-  id: this.model.get('viewId'),
+var TabView = Backbone.View.extend({
+  initialize: function(){
+  },
 
-  template: _.template('<div id='graph'></div><div id='table'></div>'),
+  template: _.template("<div id='graph'></div><div id='table'></div>"),
 
-  render: functin(){
+  render: function(){
     this.$el.append(svc);
     this.$el.append(table);
   }
-}
+});