-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
155 lines (112 loc) · 4.23 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<html>
<head>
<title>Backbone.js Panel View</title>
<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','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-44608486-2', 'kjantzer.github.io');
ga('send', 'pageview');
</script>
<!-- Backbone.js Dependencies -->
<script src="lib/jquery.min.js"></script>
<script src="lib/underscore.min.js"></script>
<script src="lib/underscore.string.min.js"></script>
<script src="lib/backbone.min.js"></script>
<script type="text/javascript">
// mixin underscore.string
_.mixin(_.str.exports());
</script>
<!-- Bootstrap 3 - http://getbootstrap.com -->
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- Panel View script -->
<link href="style.css" rel="stylesheet" type="text/css">
<!-- JS TEMPLATES ======================================================================== -->
<!-- Panel View Controller -->
<script id="template-panel-controller" type="text/html">
<div class="panel-overlay"></div>
<ul class="panel-outer"></ul>
</script>
<!-- Panel View -->
<script id="template-panel-view" type="text/html">
<div class="panel-inner">
<div class="panel-header">
<div class="panel-close"></div>
<h3 class="panel-title"></h3>
</div>
<div class="panel-toolbar clearfix"></div>
<div class="panel-content"></div>
<div class="panel-footer clearfix"></div>
</div>
</script>
<!-- ==================================================================================== -->
<script src="src/Panel-final.js"></script>
</head>
<body>
<div class="navbar">
<div class="container">
<a class="navbar-brand" href="#">Blackstone UI Components</a>
<ul class="nav navbar-nav">
<li class=""><a href="http://kjantzer.github.io/backbonejs-list-controller-view/">List Controller</a></li>
<li class="active"><a href="http://kjantzer.github.io/backbonejs-panel-view/">Panel</a></li>
<li class=""><a href="http://kjantzer.github.io/backbonejs-dropdown-view/">Dropdown</a></li>
<li class=""><a href="http://kjantzer.github.io/backbonejs-modal-view/">Modal</a></li>
<li class=""><a href="http://kjantzer.github.io/backbonejs-model-editor-view/">Model Editor</a></li>
<li class=""><a href="http://kjantzer.github.io/basic-buttons/">Basic Buttons</a></li>
</ul>
</div><!-- /.container -->
</div><!-- /.navbar -->
<a href="https://github.com/kjantzer/backbonejs-panel-view"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
<div class="container">
<div class="col-lg-6 col-lg-offset-3">
<h1>Backbone.js Panel View</h1>
<p>Responsive sliding panel views that stack. Complete with optional toolbar and footer. Automatically resizes when window size changes.</p>
<br>
<div id="demos" class="clearfix panel">
<a class="btn btn-primary" href="javascript:panel1.open()">Open Panel 1</a>
<a class="btn btn-primary" href="javascript:panel2.open()">Open Panel 2</a>
</div>
<hr>
<small>Built by Kevin Jantzer, Blackstone Audio Inc.</small>
</div>
</div>
<script type="text/javascript">
$(function() {
window.Panel1 = Panel.View.extend({
title: 'Panel 1 Title',
events: {
'click .open-panel': 'openPanel'
},
init: function(){},
// this is called everytime the panel opens: Panel1.open()
render: function(){
this.$content.html('<p>Panel content here. <a class="panel-close">Close this panel</a></p><hr><a class="btn btn-primary open-panel">Open Panel 2</a>');
return this;
},
openPanel: function(){
panel2.open();
}
})
window.Panel2 = Panel.View.extend({
title: 'Panel 2 Title',
w: 400,
render: function(){
this.$content.html('<p>Panel 2 content here</p>');
return this;
},
toolbar: function(){
return $('<div>\
<p>Panel Toolbar</p>\
<p class="divider"></p>\
<p>Add controls here</p>\
</div>')
},
footer: false
})
window.panel1 = new Panel1();
window.panel2 = new Panel2();
});
</script>
</body>
</html>