Permalink
Browse files

Adds a new jQueryUI tabs sample

  • Loading branch information...
1 parent 3294fc2 commit 8fb133d4849ccc6331a13f6e29c5c6fe126b9238 @asual committed Nov 12, 2012
View
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>jQuery Address SubTabs</title>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8">
+ <link type="text/css" href="jquery-ui-1.8.13.custom.css" rel="stylesheet">
+ <link type="text/css" href="styles.css" rel="stylesheet">
+ <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
+ <script type="text/javascript" src="jquery-ui-1.8.13.custom.min.js"></script>
+ <script type="text/javascript" src="jquery.address-1.5.min.js"></script>
+ <script type="text/javascript">
+
+ var tabs,
+ separator = '-',
+ initialTab = 'tab1',
+ navSelector = 'ul.ui-tabs-nav a',
+ tabSelector = '#tabs, #tab1 > #subtabs';
+
+ $.address.wrap(true);
+
+ if ($.address.value() == '/') {
+ $.address.history(false).value(initialTab).history(true);
+ }
+
+ $.address.change(function(event) {
+
+ // Selects the current anchor
+ var current = $('a[href=#' + event.value.replace(/^\//, '').replace('/', separator) + ']:first'),
+ selection = current.attr('href'),
+ href = selection.replace('/', separator),
+ parts = href.split(separator),
+ subselection;
+
+ // Sets the page title
+ $.address.title($.address.title().split(' | ')[0] + ' | ' + current.text());
+
+ if (!tabs) {
+ // Creates the tabs
+ tabs = $(tabSelector).tabs({
+ event: 'change'
+ }).css('display', 'block');
+ tabs.find(navSelector).click(function(e) {
+ $.address.value(e.target.hash.replace(/^#/, '').replace(separator, '/'));
+ e.preventDefault();
+ });
+ }
+
+ // Selects the parent tabs
+ if (parts.length != 1) {
+ for (var i = 1; i < parts.length; i++) {
+ tabs.tabs('select', parts.slice(0, i).join(separator));
+ }
+ }
+
+ // Selects the chosen tab
+ tabs.tabs('select', selection);
+
+ // Selects the first child tab
+ while (subselection = $(selection + ' ' + navSelector + ':first').attr('href')) {
+ tabs.tabs('select', subselection);
+ selection = subselection;
+ }
+
+ });
+
+ // Hides the tabs during initialization
+ document.write('<style type="text/css"> #tabs { display: none; } </style>');
+
+ </script>
+ </head>
+ <body>
+ <div class="page">
+ <h1>jQuery Address SubTabs</h1>
+ <div id="tabs">
+ <ul>
+ <li><a href="#tab1">Tab 1</a></li>
+ <li><a href="#tab2">Tab 2</a></li>
+ </ul>
+ <div id="tab1">
+ <p>Tab 1</p>
+ <div id="subtabs">
+ <ul>
+ <li><a href="#tab1-subtab1">SubTab 1</a></li>
+ <li><a href="#tab1-subtab2">SubTab 2</a></li>
+ </ul>
+ <div id="tab1-subtab1">
+ <p>SubTab 1</p>
+ </div>
+ <div id="tab1-subtab2">
+ <p>SubTab 2</p>
+ </div>
+ </div>
+ </div>
+ <div id="tab2">
+ <p>Tab 2</p>
+ </div>
+ </div>
+ </div>
+ </body>
+</html>

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -0,0 +1,119 @@
+/*
+ * jQuery UI CSS Framework @VERSION
+ *
+ * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Theming/API
+ */
+
+/* Layout helpers
+----------------------------------*/
+.ui-helper-hidden { display: none; }
+.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
+.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
+.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
+.ui-helper-clearfix { display: inline-block; }
+/* required comment for clearfix to work in Opera \*/
+* html .ui-helper-clearfix { height:1%; }
+.ui-helper-clearfix { display:block; }
+/* end clearfix */
+.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
+
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-disabled { cursor: default !important; }
+
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Overlays */
+.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
+
+
+/*
+ * jQuery UI CSS Framework @VERSION
+ *
+ * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Theming/API
+ *
+ * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana,%20Arial,%20sans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=6px&bgColorHeader=444444&bgTextureHeader=03_highlight_soft.png&bgImgOpacityHeader=44&borderColorHeader=333333&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=000000&bgTextureContent=14_loop.png&bgImgOpacityContent=25&borderColorContent=555555&fcContent=ffffff&iconColorContent=cccccc&bgColorDefault=222222&bgTextureDefault=03_highlight_soft.png&bgImgOpacityDefault=35&borderColorDefault=444444&fcDefault=eeeeee&iconColorDefault=cccccc&bgColorHover=003147&bgTextureHover=03_highlight_soft.png&bgImgOpacityHover=33&borderColorHover=0b93d5&fcHover=ffffff&iconColorHover=ffffff&bgColorActive=0972a5&bgTextureActive=04_highlight_hard.png&bgImgOpacityActive=20&borderColorActive=26b3f7&fcActive=ffffff&iconColorActive=222222&bgColorHighlight=eeeeee&bgTextureHighlight=03_highlight_soft.png&bgImgOpacityHighlight=80&borderColorHighlight=cccccc&fcHighlight=2e7db2&iconColorHighlight=4b8e0b&bgColorError=ffc73d&bgTextureError=02_glass.png&bgImgOpacityError=40&borderColorError=ffb73d&fcError=111111&iconColorError=a83300&bgColorOverlay=5c5c5c&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=50&opacityOverlay=80&bgColorShadow=cccccc&bgTextureShadow=01_flat.png&bgImgOpacityShadow=30&opacityShadow=60&thicknessShadow=7px&offsetTopShadow=-7px&offsetLeftShadow=-7px&cornerRadiusShadow=8px
+ */
+
+
+/* Component containers
+----------------------------------*/
+.ui-widget { font-family: Arial, sans-serif; font-size: 14px; }
+.ui-widget .ui-widget { font-size: 14px; }
+.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Arial, sans-serif; font-size: 14px; }
+.ui-widget-content { border: 1px solid #eee; background: #eee; color: #333; }
+.ui-widget-content a { color: #176092; }
+.ui-widget-header { border: 1px solid #000; background: #39414a; color: #fff; font-weight: bold; }
+.ui-widget-header a { color: #fff; }
+
+/* Interaction states
+----------------------------------*/
+.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #29313a; background: #176092; font-weight: bold; color: #fff; outline: none; }
+.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #fff; text-decoration: none; outline: none; }
+.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #19212a; background: #5db0e6; font-weight: bold; color: #fff; outline: none; }
+.ui-state-hover a, .ui-state-hover a:hover { color: #fff; text-decoration: none; outline: none; font-weight: bold; }
+.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #eee; background: #eee; font-weight: bold; color: #176092; outline: none; }
+.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #176092; font-weight: bold; text-decoration: none; }
+.ui-widget :active { outline: none; }
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {border: 1px solid #052f57; background: #0b58a2; color: #fff; }
+.ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #fff; }
+.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #cd0a0a; background: #a32d00; color: #fff; }
+.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #fff; }
+.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #fff; }
+.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
+.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
+.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Corner radius */
+.ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; }
+.ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; }
+.ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; }
+.ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }
+.ui-corner-top { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; }
+.ui-corner-bottom { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }
+.ui-corner-right { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }
+.ui-corner-left { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; }
+.ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }
+
+ * jQuery UI Tabs @VERSION
+ *
+ * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Tabs#theming
+ */
+.ui-tabs { position: relative; padding: 4px; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
+.ui-tabs .ui-tabs-nav { margin: 0; padding: 4px 6px 0; }
+.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }
+.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
+.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; }
+.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
+.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
+.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; }
+.ui-tabs .ui-tabs-hide { display: none !important; }
Oops, something went wrong.

0 comments on commit 8fb133d

Please sign in to comment.