Page last modified 02:30, 29 Dec 2009 by Admin
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
