Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Updated demo to auto create the highlighted code blocks

  • Loading branch information...
commit 603f3297d716781723023d10900f872b79f5b973 1 parent 2b2fede
@tefra authored
Showing with 163 additions and 94 deletions.
  1. +44 −9 demo/demo.css
  2. +29 −0 demo/demo.js
  3. +23 −7 demo/fixture.js
  4. +67 −78 demo/index.html
View
53 demo/demo.css
@@ -667,7 +667,7 @@ div.wrapper {
}
section.description {
- padding: 10px;
+ padding: 10px 10px 0 10px;
}
.center {
@@ -689,25 +689,21 @@ h1.logo a {
margin: 0 auto;
}
-span.title {
+span.navgoco {
font-size: 22px;
font-weight: bold;
color: #7f8c8d;
}
-span.title a:hover {
+span.navgoco a:hover {
color: #95a5a6;
text-decoration: none;
}
-span.title a {
+span.navgoco a {
color: #7f8c8d;
}
-section.demo {
-
-}
-
footer.copyright {
text-align: center;
font-size: 12px;
@@ -719,7 +715,7 @@ p.external {
}
hr {
- margin: 10px 0;
+ margin: 20px 0;
border: 0;
border-top: 1px solid #ddd;
border-bottom: 1px solid #fff;
@@ -741,4 +737,43 @@ pre code {
max-height: 450px;
white-space: pre;
overflow: auto;
+}
+
+
+/* Tabs */
+ul.tabs {
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ border-bottom: 1px solid #ddd;
+}
+
+ul.tabs li {
+ display: inline-block;
+ line-height: 34px;
+}
+
+ul.tabs li a {
+ display: block;
+ line-height: 25px;
+ padding: 5px 10px;
+ text-decoration: none;
+ color: #95a5a6;
+ font-weight: bold;
+ margin-bottom: 0px;
+ -webkit-border-radius: 4px 4px 0 0;
+ -moz-border-radius: 4px 4px 0 0;
+ border-radius: 4px 4px 0 0;
+}
+
+ul.tabs li a:hover {
+ background-color: #bdc3c7;
+ color: #ecf0f1;
+}
+
+ul.tabs li.active a {
+ color: #2c3e50;
+ background-color: #fff;
+ border: 1px solid #ddd;
+ border-bottom: none;
}
View
29 demo/demo.js
@@ -0,0 +1,29 @@
+$(document).ready(function() {
+ // Create menus on the fly from fixtures
+ var demoMenu = '\n' + arrayToUl(links);
+ $("#demo1").append(demoMenu);
+ $('#demo1 li').first().addClass('active');
+ $("#demo2").append(demoMenu);
+ $('#demo2 li').first().addClass('active');
+ hljs.tabReplace = ' ';
+
+ $('pre > code').each(function() {
+ var that = $(this),
+ type = that.attr('class'),
+ source = that.data('source'),
+ code = $('#' + source + '-' + type).html();
+ that.text($.trim(code));
+ });
+
+ $(".tabs a").click(function(e) {
+ e.preventDefault();
+ $(this).parent().siblings().removeClass('active').end().addClass('active');
+ $(this).parents('ul').next().children().hide().eq($(this).parent().index()).show();
+ });
+
+ $(".panes").each(function() {
+ $(this).children().hide().eq(0).show();
+
+ });
+ hljs.initHighlightingOnLoad();
+});
View
30 demo/fixture.js
@@ -1,16 +1,32 @@
-function arrayToUl(data) {
- var html = '';
+function repeat(pattern, count) {
+ if (count < 1)
+ return '';
+ var result = '';
+ while (count > 0) {
+ if (count & 1)
+ result += pattern;
+ count >>= 1, pattern += pattern;
+ }
+ return result;
+}
+
+function arrayToUl(data, depth) {
+ depth = (isNaN(depth) || depth == 0) ? 1 : depth;
+ var html = '',
+ il = repeat('\t', depth),
+ iu = repeat('\t', depth + 1);
+
for (var key in data) {
- html += '<li>';
+ html += il + '<li>';
var isInt = (parseInt(key) == key);
var label = isInt ? data[key] : key;
html += '<a href="#">' + label + '</a>';
if (!isInt) {
- html += '<ul>';
- html += arrayToUl(data[key]);
- html += '</ul>';
+ html += '\n' + iu + '<ul>\n';
+ html += arrayToUl(data[key], depth + 2);
+ html += iu + '</ul>\n' + il;
}
- html += '<li>';
+ html += '</li>\n';
}
return html;
}
View
145 demo/index.html
@@ -8,6 +8,7 @@
<script src="../libs/jquery.loader.js"></script>
<script src="../libs/highlight.pack.js"></script>
<script src="fixture.js"></script>
+ <script src="demo.js"></script>
<!-- Add JQuery cookie plugin (optional) -->
<script src="../src/jquery.cookie.js"></script>
@@ -15,54 +16,48 @@
<script type="text/javascript" src="../src/jquery.navgoco.js"></script>
<link rel="stylesheet" type="text/css" href="../src/jquery.navgoco.css" media="screen" />
- <script type="text/javascript">
- $(document).ready(function() {
- var demoMenu = arrayToUl(links);
- // Remember state demo
- $("#demo1").append(demoMenu);
- $('#demo1 li').first().addClass('active');
- // Initialize navgoco with default options
- var test = $("#demo1").navgoco({
- caret: '<span class="caret"></span>',
- accordion: false,
- openClass: 'open',
- save: true,
- cookie: {
- name: 'navgoco',
- expires: false,
- path: '/'
- },
- slide: {
- duration: 400,
- easing: 'swing'
- }
- });
+<script type="text/javascript" id="demo1-javascript">
+$(document).ready(function() {
+ // Initialize navgoco with default options
+ $("#demo1").navgoco({
+ caret: '<span class="caret"></span>',
+ accordion: false,
+ openClass: 'open',
+ save: true,
+ cookie: {
+ name: 'navgoco',
+ expires: false,
+ path: '/'
+ },
+ slide: {
+ duration: 400,
+ easing: 'swing'
+ }
+ });
- $("#collapseAll").click(function(e) {
- e.preventDefault();
- $("#demo1").navgoco('toggle', false);
- });
+ $("#collapseAll").click(function(e) {
+ e.preventDefault();
+ $("#demo1").navgoco('toggle', false);
+ });
- $("#expandAll").click(function(e) {
- e.preventDefault();
- $("#demo1").navgoco('toggle', true);
- });
-
- // Accordion demo
- $("#demo2").append(demoMenu);
- $('#demo2 li').first().addClass('active');
- $("#demo2").navgoco({accordion: true});
- hljs.tabReplace = ' ';
- hljs.initHighlightingOnLoad();
- });
- </script>
+ $("#expandAll").click(function(e) {
+ e.preventDefault();
+ $("#demo1").navgoco('toggle', true);
+ });
+});
+</script>
+<script type="text/javascript" id="demo2-javascript">
+$(document).ready(function() {
+ $("#demo2").navgoco({accordion: true});
+});
+</script>
</head>
<body>
<a href="https://github.com/tefra/navgoco/"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
<div class="wrapper">
<h1 class="logo"><a href="http://www.komposta.net/article/navgoco">navgoco</a></h1>
<section class="description">
- <span class="title">{:<a href="http://www.komposta.net/article/navgoco">navgoco</a>}</span> is a simple JQuery plugin which turns a nested unordered
+ <span class="navgoco">{:<a href="http://www.komposta.net/article/navgoco">navgoco</a>}</span> is a simple JQuery plugin which turns a nested unordered
list of links into a beautiful vertical multi-level slide navigation,
with ability to preserve expanded submenus between sessions by using
cookies and optionally act as an accordion menu.
@@ -90,48 +85,42 @@ <h1 class="logo"><a href="http://www.komposta.net/article/navgoco">navgoco</a></
</strong>
</p>
</section>
- <hr />
- <section class="demo">
- <h2>Demo: Remember state</h2>
- <ul id="demo1" class="nav"></ul>
- <p class="external">
- <a href="#" id="collapseAll">Collapse All</a> | <a href="#" id="expandAll">Expand All</a>
- </p>
- <strong>Javascript</strong>
- <pre><code class="javascript">// Setup navgoco menu with default options
-$("#demo1").navgoco({
- caret: '&lt;span class="caret"&gt;&lt;/span&gt;',
- accordion: false,
- openClass: 'open',
- save: true,
- cookie: {
- name: 'navgoco',
- expires: false,
- path: '/'
- },
- slide: {
- duration: 400,
- easing: 'swing'
- }
-});
-$("#collapseAll").click(function(e) {
- e.preventDefault();
- $("#demo1").navgoco('toggle', false);
-});
+ <hr />
-$("#expandAll").click(function(e) {
- e.preventDefault();
- $("#demo1").navgoco('toggle', true);
-});</code></pre>
+ <section>
+ <ul class="tabs">
+ <li class="active"><a href="#">Default Settings</a></li>
+ <li><a href="#">Javascript</a></li>
+ <li><a href="#">Html</a></li>
+ </ul>
+ <div class="panes">
+ <div id="demo1-html">
+ <ul id="demo1" class="nav"></ul>
+<p class="external">
+ <a href="#" id="collapseAll">Collapse All</a> | <a href="#" id="expandAll">Expand All</a>
+</p>
+ </div>
+ <pre><code class="javascript" data-source="demo1"></code></pre>
+ <pre><code class="html" data-source="demo1"></code></pre>
+ </div>
</section>
+
<hr />
- <section class="demo">
- <h2>Demo: Accordion</h2>
- <ul id="demo2" class="nav"></ul>
- <strong>Javascript</strong>
- <pre><code class="javascript">// Setup navgoco accordion menu
-$("#demo2").navgoco({accordion: true});</code></pre>
+
+ <section>
+ <ul class="tabs">
+ <li class="active"><a href="#">Accordion</a></li>
+ <li><a href="#">Javascript</a></li>
+ <li><a href="#">Html</a></li>
+ </ul>
+ <div class="panes">
+ <div id="demo2-html">
+ <ul id="demo2" class="nav"></ul>
+ </div>
+ <pre><code class="javascript" data-source="demo2"></code></pre>
+ <pre><code class="html" data-source="demo2"></code></pre>
+ </div>
</section>
<hr />
</div>
Please sign in to comment.
Something went wrong with that request. Please try again.