Permalink
Browse files

Tabs basic demo added

  • Loading branch information...
1 parent a00b20c commit 4da519a1be0cd1bd8757a3089fa88861a622785a @lakshmivyas lakshmivyas committed Oct 21, 2011
@@ -0,0 +1 @@
+group: dateinput
@@ -0,0 +1,3 @@
+group: user guide
+extends: doc.j2
+hero: usersguide
@@ -0,0 +1 @@
+group: overlay
@@ -0,0 +1 @@
+group: rangeinput
@@ -0,0 +1 @@
+group: scrollable
@@ -1,12 +1,16 @@
-{% extends "userguide.j2" %}
+---
+index: 0
+title: Tab tool basics
+---
-{% block css %}
+{% block extra_css %}
+{{ super() }}
<style>
div.panes div {
margin-top:10px;
display:none;
height:80px;
- width:700px;
+ width:650px;
font-size:18px;
}
@@ -17,27 +21,24 @@
</style>
{% endblock %}
-{% block script %}
+{% block extra_script %}
<script>
$(function() {
$(".tabs").tabs(".panes > div");
});
</script>
{% endblock %}
-{% block content %}
-<h1 style="background-image:url({{ media_url('img/hero/tabs.jpg') }})">
- jQuery TOOLS / Tabs - Tabs done right
-</h1>
-
-<ul class="tabs" style="position:relative;top:-46px;margin-top:0px">
+{% block blurb %}
+<div class="box">
+<ul class="tabs">
<li><a href="#">First tab</a></li>
<li><a href="#">Second tab</a></li>
<li><a href="#">Third tab</a></li>
</ul>
<br clear="all" />
-<div class="panes" style="height:110px;position:relative;top:-40px">
+<div class="panes">
<div>
<img src="{{ media_url('img/logo-medium.png') }}"
style="position:relative;top:-75px;margin-bottom:-80px"/>
@@ -65,10 +66,10 @@ <h1 style="background-image:url({{ media_url('img/hero/tabs.jpg') }})">
orci luctus et ultrices posuere cubilia Curae.
</div>
</div>
+</div>
<br clear="all" />
-
-<div class="feat">
+<div class="col">
<h3 class="first">Simple</h3>
<p>
@@ -87,7 +88,7 @@ <h3>Fading, sliding, ajaxed, horizontal ...</h3>
</p>
</div>
-<div class="feat last">
+<div class="col last">
<h3 class="first">Respects browsers' back button</h3>
<p>
You can enable <samp>history</samp> support for tabs so that end
@@ -106,17 +107,20 @@ <h3>File size: 0.9 Kb</h3>
size is 2.9 Kb.
</p>
</div>
-<br clear="all" />
+{% endblock %}
+
+{% block content %}
+
-<h3>Quick Start</h3>
+<h2>Quick Start</h2>
<p>
Here is the minimal HTML code to get tabs working:
</p>
-<pii:code lang="html">
+~~~html~~~
<!-- the tabs -->
<ul class="tabs">
<li><a href="#">Tab 1</a></li>
@@ -130,9 +134,9 @@ <h3>Quick Start</h3>
<div>pane 2 content</div>
<div>pane 3 content</div>
</div>
-</pii:code>
+~~~~~~~~
-<h4>JavaScript setup</h4>
+<h3>JavaScript setup</h3>
<p>
This JavaScript snippet activates those tabs:
@@ -158,7 +162,7 @@ <h4>JavaScript setup</h4>
<a name="demos"></a>
-<h2>demos</h2>
+<h2>Demos</h2>
<p>
It's important to <strong>study the first demo</strong>, "Minimal
@@ -167,22 +171,12 @@ <h2>demos</h2>
</p>
<ul>
- <c:forEach items="${f:getDemo(context.toolDemos, 'tabs/index.html').category.demos}" var="demo">
- <li> <a href="{{ content_url('demos/${demo.path}') }}">${demo.title}</a> </li>
- </c:forEach>
+ {% set tabDemoNode = site.content.node_from_relative_path('demos/tabs') %}
+ {% for demo in tabDemoNode.walk_resources_grouped_by_group() %}
+ <li> <a href="{{ content_url(demo.relative_path) }}">{{ demo.meta.title }}</a> </li>
+ {% endfor %}
</ul>
-<c:set var="description">
- <p>
- These graphics are being used in the following CSS
- files: <a href="{{ media_url('css/tabs.css') }}">default tabs</a>
- and <a href="{{ media_url('css/validator/form-flowplayer.css') }}">tabs
- with panes</a> and they are using a technique
- called <a href="http://www.alistapart.com/articles/sprites/"
- class="external">CSS sprites</a> which is a very important
- technology in tab design.
- </p>
-</c:set>
{% include "graphics.j2" %}
@@ -202,6 +196,17 @@ <h2>demos</h2>
<img src="{{ media_url('img/tabs/thumb/blue_panes.jpg') }}" />
</p>
+<p>
+ These graphics are being used in the following CSS files:
+ <ul>
+ <li><a href="{{ media_url('css/tabs.css') }}">default tabs</a></li>
+ <li><a href="{{ media_url('css/validator/form-flowplayer.css') }}">tabs with panes</a></li>
+ </ul>
+
+ They are using a technique called <a href="http://www.alistapart.com/articles/sprites/"
+ class="external">CSS sprites</a> which is a very important
+ technology in tab design.
+</p>
<a name="configuration"></a>
<h2>Configuration</h2>
@@ -211,7 +216,7 @@ <h2>Configuration</h2>
above. Here is a generic form for constructing tabs:
</p>
-<pii:code>
+~~~js~~~
$("<tabs_selector>").tabs("<pane_selector>", {
/* tabs configuration goes here */
@@ -223,7 +228,7 @@ <h2>Configuration</h2>
// ... the rest of the configuration properties
});
-</pii:code>
+~~~
<h4>tabs_selector</h4>
@@ -275,6 +280,7 @@ <h4><em>2<sup>nd</sup> argument:</em> configuration</h4>
the same call then you should <a href="#multiple">read this</a>.
</p>
+<div class="table">
<table class="listing">
<thead>
<tr>
@@ -407,6 +413,7 @@ <h4><em>2<sup>nd</sup> argument:</em> configuration</h4>
</tr>
</table>
+</div>
<a name="multiple"></a>
<h3>Initializing multiple Tabs</h3>
@@ -490,6 +497,7 @@ <h2>Events</h2>
Object</a> as the first argument.
</p>
+<div class="table">
<table class="listing">
<thead>
<tr>
@@ -512,6 +520,7 @@ <h2>Events</h2>
</td>
</tr>
</table>
+</div>
<a name="api"></a>
<h2>Scripting <em>API</em></h2>
@@ -542,6 +551,7 @@ <h2>Scripting <em>API</em></h2>
Here is a list of all API methods:
</p>
+<div class="table">
<table class="listing">
<thead>
<tr>
@@ -629,6 +639,7 @@ <h2>Scripting <em>API</em></h2>
</td>
</tr>
</table>
+</div>
<a name="effects"></a>
<h2>Making custom effects</h2>
@@ -0,0 +1,2 @@
+group: tabs
+hero: tabs
@@ -0,0 +1 @@
+group: toolbox
@@ -0,0 +1 @@
+group: tooltip
@@ -0,0 +1 @@
+group: validator
@@ -1,35 +0,0 @@
-@import "include/vars"
-@import "include/fix"
-@import "include/mixins"
-@import "include/icons"
-@import "include/code"
-@import "include/sidebar"
-
-.blurb
- clearfix()
-
-.col
- width 48%
- float left
- margin 0 1%
-
- h3
- font-size 14px
- margin 16px 0
-
- p
- font-size 12px
-
- &.more
- font-size 14px
- color textgray
- margin-bottom 16px
-
-
- &.last
- margin 0
- float right
-
- img
- float left
- margin 10px 8px
@@ -4,4 +4,32 @@
@import "include/gradients"
@import "include/code"
@import "include/jqtabs.css"
-@import "include/tabs"
+
+.blurb
+ clearfix()
+
+.col
+ width 48%
+ float left
+ margin 0 1%
+
+ h3
+ font-size 14px
+ margin 16px 0
+
+ p
+ font-size 12px
+
+ &.more
+ font-size 14px
+ color textgray
+ margin-bottom 16px
+
+
+ &.last
+ margin 0
+ float right
+
+ img
+ float left
+ margin 10px 8px
@@ -1,5 +1,12 @@
.box
margin 12px 0 12px
+p
+ margin 12px 0
+
+ul, ol
+ margin 2px 16px 6px
+ line-height 20px
+
.blurb
margin 12px 0 24px
@@ -62,13 +69,6 @@ body
.tease.first
margin-top 12px
- p
- margin 12px 0
-
- ul, ol
- margin 2px 16px 6px
- line-height 20px
-
.box
background-color clear - 3
clearfix()
@@ -19,6 +19,10 @@ nav
letter-spacing 1px
text-align left
+ ol, ul
+ margin 0
+ padding 0
+
ol.cat
display none
View
@@ -0,0 +1,26 @@
+{% extends "root.j2" %}
+
+{% block extra_css %}
+<link rel="stylesheet" type="text/css" href="{{ media_url('css/docs.css') }}">
+<link rel="stylesheet" type="text/css" href="{{ media_url('css/syntax.css') }}">
+{% endblock %}
+
+{% block main %}
+<img id="hero" src="{{ media_url('img/hero/' ~ resource.meta.hero ~ '.jpg') }}">
+<div class="blurb">
+<h1 class="teaser title">{{ resource.meta.title|typogrify }}</h1>
+{% block blurb %}
+{% endblock %}
+</div>
+
+{% block content %}
+{% endblock %}
+
+{% endblock %}
+
+
+{% block right_navigation %}
+<nav class="sidebar">
+{% include "group_nav.j2" %}
+</nav>
+{% endblock %}
Oops, something went wrong.

0 comments on commit 4da519a

Please sign in to comment.