1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
4 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
5 <title>Cookies Tabber Example</title>
7 <link rel="stylesheet" href="example.css" TYPE="text/css" MEDIA="screen">
8 <link rel="stylesheet" href="example-print.css" TYPE="text/css" MEDIA="print">
10 <script type="text/javascript">/* <![CDATA[ */
12 /* Optional: Temporarily hide the "tabber" class so it does not "flash"
13 on the page as plain HTML. After tabber runs, the class is changed
14 to "tabberlive" and it will appear. */
16 document.write('<style type="text/css">.tabber{display:none;}<\/style>');
18 /*==================================================
19 Set the tabber options (must do this before including tabber.js)
20 ==================================================*/
23 'cookie':"tabber", /* Name to use for the cookie */
25 'onLoad': function(argsObj)
27 var t = argsObj.tabber;
30 /* Optional: Add the id of the tabber to the cookie name to allow
31 for multiple tabber interfaces on the site. If you have
32 multiple tabber interfaces (even on different pages) I suggest
33 setting a unique id on each one, to avoid having the cookie set
37 t.cookie = t.id + t.cookie;
40 /* If a cookie was previously set, restore the active tab */
41 i = parseInt(getCookie(t.cookie));
42 if (isNaN(i)) { return; }
44 alert('getCookie(' + t.cookie + ') = ' + i);
47 'onClick':function(argsObj)
49 var c = argsObj.tabber.cookie;
50 var i = argsObj.index;
51 alert('setCookie(' + c + ',' + i + ')');
56 /*==================================================
58 ==================================================*/
59 function setCookie(name, value, expires, path, domain, secure) {
60 document.cookie= name + "=" + escape(value) +
61 ((expires) ? "; expires=" + expires.toGMTString() : "") +
62 ((path) ? "; path=" + path : "") +
63 ((domain) ? "; domain=" + domain : "") +
64 ((secure) ? "; secure" : "");
67 function getCookie(name) {
68 var dc = document.cookie;
69 var prefix = name + "=";
70 var begin = dc.indexOf("; " + prefix);
72 begin = dc.indexOf(prefix);
73 if (begin != 0) return null;
77 var end = document.cookie.indexOf(";", begin);
81 return unescape(dc.substring(begin + prefix.length, end));
83 function deleteCookie(name, path, domain) {
84 if (getCookie(name)) {
85 document.cookie = name + "=" +
86 ((path) ? "; path=" + path : "") +
87 ((domain) ? "; domain=" + domain : "") +
88 "; expires=Thu, 01-Jan-70 00:00:01 GMT";
94 <!-- Include the tabber code -->
95 <script type="text/javascript" src="tabber.js"></script>
100 <h1>Tabber Example</h1>
102 <p>← <a href="http://www.barelyfitz.com/projects/tabber/">Tabber Home</a></p>
104 <p>This example sets a cookie whenever the you click the tab, so if you leave the page and return the same tab remains selected. For purposes of example, this page displays an alert to indicate when a cookie is set or retrieved.</p>
106 <div class="tabber" id="mytabber1">
108 <div class="tabbertab">
110 <p>Tab 1 content.</p>
114 <div class="tabbertab">
116 <p>Tab 2 content.</p>
120 <div class="tabbertab">
122 <p>Tab 3 content.</p>