From 974ae07465d4d77650441f84bc5acee1124cf4e2 Mon Sep 17 00:00:00 2001 From: Steve Schwartz Date: Thu, 19 Jan 2012 00:12:38 -0500 Subject: [PATCH] Created new basic demo with link. Deleted all extraneous demos. --- examples/ajax.html | 44 ------ examples/ajax_content.html | 10 -- examples/basic.html | 46 ------- examples/bottom.html | 51 ------- examples/collapsible-and-cancel.html | 57 -------- examples/data-id-bug.html | 53 -------- examples/demo.html | 109 +++++++++++++++ examples/disconnected.html | 49 ------- examples/height-and-transition-options.html | 106 --------------- examples/multiple.html | 142 -------------------- examples/nested.html | 70 ---------- examples/non-div-panels.html | 42 ------ examples/prev-next.html | 102 -------------- examples/side.html | 53 -------- 14 files changed, 109 insertions(+), 825 deletions(-) delete mode 100644 examples/ajax.html delete mode 100644 examples/ajax_content.html delete mode 100644 examples/basic.html delete mode 100644 examples/bottom.html delete mode 100644 examples/collapsible-and-cancel.html delete mode 100644 examples/data-id-bug.html create mode 100644 examples/demo.html delete mode 100644 examples/disconnected.html delete mode 100644 examples/height-and-transition-options.html delete mode 100644 examples/multiple.html delete mode 100644 examples/nested.html delete mode 100644 examples/non-div-panels.html delete mode 100644 examples/prev-next.html delete mode 100644 examples/side.html diff --git a/examples/ajax.html b/examples/ajax.html deleted file mode 100644 index 4653f9b..0000000 --- a/examples/ajax.html +++ /dev/null @@ -1,44 +0,0 @@ - - - - - JQuery EasyTabs Demo – Basic - Alfa Jango Blog - - - - - - - - -
- -
-
-

Heading 1

-

This is the content of the first tab.

-
-
-
-
-
-
-
- - diff --git a/examples/ajax_content.html b/examples/ajax_content.html deleted file mode 100644 index 20ada2b..0000000 --- a/examples/ajax_content.html +++ /dev/null @@ -1,10 +0,0 @@ -
-

- Hi there. I'm the first div in ajax_content.html. -

-
-
-

- I'm some other content from ajax_content.html. -

-
diff --git a/examples/basic.html b/examples/basic.html deleted file mode 100644 index cf7f087..0000000 --- a/examples/basic.html +++ /dev/null @@ -1,46 +0,0 @@ - - - - - JQuery EasyTabs Demo – Basic - Alfa Jango Blog - - - - - - - - -
- -
-
-

Heading 1

-

This is the content of the first tab.

-
-
-

Heading 2

-

Stuff from the second tab.

-
-
-

Heading 3

-

More stuff from the last tab.

-
-
-
- - diff --git a/examples/bottom.html b/examples/bottom.html deleted file mode 100644 index 2fe34a0..0000000 --- a/examples/bottom.html +++ /dev/null @@ -1,51 +0,0 @@ - - - - - JQuery EasyTabs Demo – Bottom Tabs - Alfa Jango Blog - - - - - - - - -
-
-
-

Heading 1

-

This is the content of the first tab.

-
-
-

Configuration

-

This example displays the second tab by default. Also, the tab-switching animation is slowed down to 4 seconds (2sec fade-out and 2sec fade-in).

-
-
-

Heading 3

-

More stuff from the last tab.

-
-
- -
- - diff --git a/examples/collapsible-and-cancel.html b/examples/collapsible-and-cancel.html deleted file mode 100644 index 40067ac..0000000 --- a/examples/collapsible-and-cancel.html +++ /dev/null @@ -1,57 +0,0 @@ - - - - - JQuery EasyTabs Demo – Basic - Alfa Jango Blog - - - - - - - - -
- -
-
-

Heading 1

-

This is the content of the first tab.

-
-
-

Heading 2

-

Stuff from the second tab.

-
-
-

Heading 3

-

More stuff from the last tab.

-
-
-
- - diff --git a/examples/data-id-bug.html b/examples/data-id-bug.html deleted file mode 100644 index 0783d3b..0000000 --- a/examples/data-id-bug.html +++ /dev/null @@ -1,53 +0,0 @@ - - - - - JQuery EasyTabs Demo – Basic - Alfa Jango Blog - - - - - - - -
- -
- -
-
-
- Panel 1 -
-
- Panel 2 -
-
- - - diff --git a/examples/demo.html b/examples/demo.html new file mode 100644 index 0000000..a54e70e --- /dev/null +++ b/examples/demo.html @@ -0,0 +1,109 @@ + + + + + + + + + + + + + +

View more demos and docs

+ +
+ +
+
+

HTML Markup for these tabs

+ + 
+    
+<div id="tab-container" class="tab-container">
+  <ul class='etabs'>
+    <li class='tab'><a href="#tabs1-html">HTML Markup</a></li>
+    <li class='tab'><a href="#tabs1-js">Required JS</a></li>
+    <li class='tab'><a href="#tabs1-css">Example CSS</a></li>
+  </ul>
+  <div id="tabs1-html">
+    <h2>HTML Markup for these tabs</h2>
+    <!-- content -->
+  </div>
+  <div id="tabs1-js">
+    <h2>JS for these tabs</h2>
+    <!-- content -->
+  </div>
+  <div id="tabs1-css">
+    <h2>CSS Styles for these tabs</h2>
+    <!-- content -->
+  </div>
+</div>
+    
+
+ +

The HTML markup for your tabs and content can be arranged however you want. At the minimum, you need a container, a collection of links for your tabs (an unordered list by default), and matching divs for your tabbed content. Make sure the tab href attributes match the +id of the target panel. This is standard semantic markup for in-page anchors.

+

The class names above are just to make it easy to style. You can make them whatever you want, there's no magic here.

+
+
+

JS for these tabs

+ + 
+    
+<script src="/javascripts/jquery.js" type="text/javascript"></script>
+<script src="/javascripts/jquery.hashchange.js" type="text/javascript"></script>
+<script src="/javascripts/jquery.easytabs.js" type="text/javascript"></script>
+    
+
+ +

Optionally include the jquery hashchange plugin (recommended) or address plugin to enable forward- +and back-button functionality.

+ + 
+    
+$('#tab-container').easytabs();
+    
+
+ +
+
+

CSS Styles for these tabs

+ + + 
+.etabs { margin: 0; padding: 0; }
+.tab { display: inline-block; zoom:1; *display:inline; background: #eee; border: solid 1px #999; border-bottom: none; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; }
+.tab a { font-size: 14px; line-height: 2em; display: block; padding: 0 10px; outline: none; }
+.tab a:hover { text-decoration: underline; }
+.tab.active { background: #fff; padding-top: 6px; position: relative; top: 1px; border-color: #666; }
+.tab a.active { font-weight: bold; }
+.tab-container .panel-container { background: #fff; border: solid #666 1px; padding: 10px; -moz-border-radius: 0 4px 4px 4px; -webkit-border-radius: 0 4px 4px 4px; }
+
+ + +
+
+
+ + + diff --git a/examples/disconnected.html b/examples/disconnected.html deleted file mode 100644 index 02e4015..0000000 --- a/examples/disconnected.html +++ /dev/null @@ -1,49 +0,0 @@ - - - - - JQuery EasyTabs Demo – Disconnected Content - Alfa Jango Blog - - - - - - - - -
- -
-

Random Info

-

This information is not contained in the tabbed content and situated between the tabs and content divs

-
-
-

Heading 1

-

This is the content of the first tab.

-
-
-

Heading 2

-

Stuff from the second tab.

-
-
-

Heading 3

-

More stuff from the last tab.

-
-
-
- - diff --git a/examples/height-and-transition-options.html b/examples/height-and-transition-options.html deleted file mode 100644 index 8073f22..0000000 --- a/examples/height-and-transition-options.html +++ /dev/null @@ -1,106 +0,0 @@ - - - - - JQuery EasyTabs Demo – Basic - Alfa Jango Blog - - - - - - - - -

- Automatically animating height difference between panels of differing heights -

-
- -
-
-

Heading 1

-

This is the content of the first tab.

-
-
-

Heading 2

-

This tab has a lot of content, and so it's larger than the others.

-
-

The lim'rick packs laughs anatomical

-

In space that is quite economical,

-

But the good ones I've seen

-

So seldom are clean,

-

And the clean ones so seldom are comical.

-
-
-

Heading 3

-

More stuff from the last tab.

-
-
-
- -

-

- Using slideUp and slideDown to transition between tab changes, -
- and fadeOut and fadeIn for collapsing transitions -

-
- -
-
-

Heading 1

-

This is the content of the first tab.

-
-
-

Heading 2

-

Stuff from the second tab.

-
-
-

Heading 3

-

More stuff from the last tab.

-
-
-
- - - diff --git a/examples/multiple.html b/examples/multiple.html deleted file mode 100644 index 811822c..0000000 --- a/examples/multiple.html +++ /dev/null @@ -1,142 +0,0 @@ - - - - - JQuery EasyTabs Demo – Multiple on Same Page - Alfa Jango Blog - - - - - - - - -
- -
-
-

Heading 1

-

This is the content of the first tab.

-

- -

-

- -

-
-
-

Heading 2

-

Stuff from the second tab.

-
-
-

Heading 3

-

More stuff from the last tab.

-
-
-
- -
- -
-
-
-

Heading 1

-

This is the content of the first tab.

-
-
-

Configuration

-

This example displays the second tab by default. Also, the tab-switching animation is slowed down to 2 seconds (1sec fade-out and 1sec fade-in).

-
-
-

Heading 3

-

More stuff from the last tab.

-
-
- -
- -
- -
- -
-
-

Configurations

-

This example has the animation disabled, so tab-switching is instantaneous. It also sets the active class names to custom names for more control over CSS stylization.

-
-
-

Heading 2

-

Stuff from the second tab.

-
-
-

Heading 3

-

More stuff from the last tab.

-
-
-
- - diff --git a/examples/nested.html b/examples/nested.html deleted file mode 100644 index 8a1ef83..0000000 --- a/examples/nested.html +++ /dev/null @@ -1,70 +0,0 @@ - - - - - JQuery EasyTabs Demo – Basic - Alfa Jango Blog - - - - - - - - -
- -
-
-

Heading 1

-

This is the content of the first tab.

-
-
-

Heading 2

-

Stuff from the second tab.

-
-
-

Heading 3

-

More stuff from the last tab.

- -
- -
-
-

Heading A

-

This is a nested first tab

-
-
-

Heading B

-

This is a nested second tab

-
-
-

Heading C

-

This is a nested third tab

-
-
-
-
-
-
-
- - diff --git a/examples/non-div-panels.html b/examples/non-div-panels.html deleted file mode 100644 index 5187365..0000000 --- a/examples/non-div-panels.html +++ /dev/null @@ -1,42 +0,0 @@ - - - - - JQuery EasyTabs Demo – Basic - Alfa Jango Blog - - - - - - - - -
- - Form parts: - - -
-
- - -
-
- - -
-
-
- - diff --git a/examples/prev-next.html b/examples/prev-next.html deleted file mode 100644 index 80319cd..0000000 --- a/examples/prev-next.html +++ /dev/null @@ -1,102 +0,0 @@ - - - - - JQuery EasyTabs try out custom Next/previous links - - - - - - - - - - - - - - -

- Next/previous links, -
- and fadeOut and fadeIn for collapsing transitions -

-
- -
-
-

Heading 1

- -

This is the content of the first tab.

-
-
-

Heading 2

-

Stuff from the second tab.

-
-
- -

Heading 3

-

More stuff from the last tab.

-
-
-
- - - diff --git a/examples/side.html b/examples/side.html deleted file mode 100644 index 515f21d..0000000 --- a/examples/side.html +++ /dev/null @@ -1,53 +0,0 @@ - - - - - JQuery EasyTabs Demo – Side Tabs - Alfa Jango Blog - - - - - - - - -
- -
-
-

Configurations

-

This example has the animation disabled, so tab-switching is instantaneous. It also sets the active class names to custom names for more control over CSS stylization.

-
-
-

Heading 2

-

Stuff from the second tab.

-
-
-

Heading 3

-

More stuff from the last tab.

-
-
-
- -