MindTouch Community Portal
Logged in: Logged in as: Log in
Register
Search:
Page last modified 08:40, 9 Sep 2009 by rberinger
Template:Tabs2 >
Page Notifications Off

Template:Tabs2

    Table of contents
    No headers
    // Parameters:
//    tabsid (required):  Any unique id to be assigned to this accordian (Must start with #)
//    tabCnts (required):  A list of maps containing the title and value for each section of the accordian.
//    options (optional):  Customizable options per the follwoing web site: http://jqueryui.com/demos/tabs/
//              NOTE:  The header option should not be used it is automatically appended.
/*
 EXAMPLE: 
{{ template.Tabs2{
                     tabsid:'#myid1', 
                     TabCnts:[{tabname: 'My First Test', tabvalue:'My New Value'} ,
                              {tabname: 'My Other First Test',tabvalue:'My Other New Value'}] ,
                     options: {collapsible: true, event: 'mouseover'} 
                     } 
}}

Version History: 1.01 - Added as check to ensure Collapsible and Mouseover where not 
                        used at the same time, since this yeilded unpredictable results.

*/

// dekiapi();

var tabid = ($tabsid ?? $0 ?? '#tabs');
var cnts = ($tabCnts ?? $1 ?? [ {tabname: 'test 1', tabvalue: 'My Text String'},{tabname: 'test 2', tabvalue: 'My second Text String'} ]);
var opts = ($options ?? $2 ?? {collapsible: true});
var tid = string.replace(tabid,'#','');

// Its bad to use the collapsible event and the mouseover at the same time.
if(opts.event == 'mouseover') {
  let opts ..= { collapsible: false };
}

var i = 1;
<div id=(tid)>;
<ul style="list-style:none">;
foreach(var t in cnts) {
<li><a href=('#'..tid..'-'..i)><span>; t.tabname; </span></a></li>;
let i = i +1;
}
</ul>;
let i = 1;
foreach(var t in cnts) {
<div id=(tid..'-'..i)>;
<p>; t.tabvalue; </p>;
</div>;
let i = i + 1;
}
</div>;

<html><head>;
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.base.css" rel="stylesheet" />
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.core.css" rel="stylesheet" />
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.theme.css" rel="stylesheet" />
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.tabs.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
  <script type="text/javascript">"
  $(document).ready(function(){
    $('"..tabid.."').tabs("..JSON.emit(opts)..");
  });
  "</script>
</head></html>;
    Tag page
    What links here

    Files 0

    Attach file or image
     
    You must login to post a comment.
    MindTouch Social Knowledge Base

    Copyright © 2011 MindTouch, Inc. Powered by