Template:TabAccordion

No headers
/*
Author: rberinger - 09/13/2009
Version: 2.1

Version History: 2.0 Initial inception after consoidation
2.1 Fixed bug with Accordion mode and Allowedit: true (edit link had to be moved to content area)

Description: This template will insert a tab or accordion structure within a MindTouch Page. 
This template was created using the examples found on the jQuery-ui site: http://jqueryui.com/demos/

Parameters:
type (required): The type of Structure Must be either "tab" or "accordion".
id (required): The unique id to be assigned to this accordian (Must start with #)
content (required): A list of maps containing the name and value for each section of the structure.
The list may also contain a map with path and allowedit keys to insert pages.
options (optional): Customizable options per the follwoing web site(s):
For the accordion options see: http://jqueryui.com/demos/accordion/
For the Tab options see: http://jqueryui.com/demos/tabs/


Example usage:

To Insert a Tab:
TabAccordion{type:'tab',
id: '#MyID1', 
content: [ {name: 'Tab Number 1', value: 'Tab Number 1 Value'},
{name:'test 2', value: 'My second Text String 2'},
{path:'/User:rberinger/SandBox/Test_Structure/Another_Test_Page', allowedit:false} 
] 
}

To Insert an Accordion:
TabAccordion{type:'accordion',
id: '#MyID1', 
content: [ {name: 'Tab Number 1', value: 'Tab Number 1 Value'},
{name:'test 2', value: 'My second Text String 2'},
{path:'/User:rberinger/SandBox/Test_Structure/Another_Test_Page', allowedit:false} 
] 
}

*/

var uitype = ($type ?? $0 ?? 'tab');
var theid = ($id ?? $1 ?? '#acctab');
var cnts = ( $content ?? $2 ?? [ { name: 'Title 1', value: 'Value 1' } , { name: 'Title 2', value: 'Value 2' } ] );
var chid = string.replace(theid, '#', '');
var opts = '';

if(uitype == 'accordion') {
let opts = ( $options ?? $3 ?? {collapsible: true, autoHeight: false, active:false} );
let opts ..= {header: 'dd'};
} else {
let opts = ($options ?? $3 ?? {collapsible: true});

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


if(uitype == 'accordion') {
<div id=(chid)>;
foreach(var itm in cnts) {
if(map.contains(itm, 'path')) {
var p = wiki.getpage(itm.path);

if(itm.allowedit == true) {
<dd><a href="#">; p.title; </a></dd>;
<div>
<div>
<div style="font-size:xx-small;">
<a style="position: absolute; right: 5px; top: 0; padding-bottom: 5px" href=(p.uri ..'?action=edit')>'edit'</a>
</div><br/>
wiki.page(p.path)
</div>
</div>
} else {
<dd><a href="#">; p.title; </a></dd>;
<div><div>; wiki.page(p.path); </div></div>;
}
} else {
<dd><a href="#">; itm.name; </a></dd>;
<div><div>; itm.value; </div></div>;
}
}
</div>;
} else {
var i = 1;
<div id=(chid)>;
<ul style="list-style:none">;

foreach(var t in cnts) {
if(map.contains(t, 'path')) {
var p = wiki.getpage(t.path);

if(t.allowedit == true) {
<li><a href=('#'..chid..'-'..i)><span style="font-size:.6em;">; p.title; </span></a><span style="font-size:xx-small;"><a href=(p.uri ..'?action=edit')>'edit'</a></span></li>;
} else {
<li><a href=('#'..chid..'-'..i)><span style="font-size:.6em;">; p.title; </span></a></li>;
}
} else {
<li><a href=('#'..chid..'-'..i)><span style="font-size:.6em;">; t.name; </span></a></li>;
}
let i = i +1;
}

</ul>;
let i = 1;
foreach(var t in cnts) {
<div id=(chid..'-'..i)>;
if(map.contains(t, 'path')) {
<div>; wiki.page(t.path); </div>;
} else {
<div>; t.value; </div>;
}
</div>;
let i = i + 1;
}
</div>;

}

<html><head>;
<link type="text/css" href="http://scripts.mindtouch.com/res/jqueryui/ui.all.css" rel="stylesheet" />
<link type="text/css" href="http://scripts.mindtouch.com/res/jqueryui/ui.base.css" rel="stylesheet" />
<link type="text/css" href="http://scripts.mindtouch.com/res/jqueryui/ui.core.css" rel="stylesheet" />
<link type="text/css" href="http://scripts.mindtouch.com/res/jqueryui/ui.theme.css" rel="stylesheet" />
<link href="/skins/common/oobe.css" rel="stylesheet" type="text/css" /> 
<link type="text/css" href="http://scripts.mindtouch.com/res/jqueryui/ui.accordion.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://scripts.mindtouch.com/res/jqueryui/ui.core.js.txt"></script>
<script type="text/javascript" src="http://scripts.mindtouch.com/res/jqueryui/ui.tabs.js.txt"></script>
<script type="text/javascript" src="http://scripts.mindtouch.com/res/jqueryui/ui.accordion.js.txt"></script>
<script type="text/javascript">

if(uitype == 'tab') {
"$(function(){$('"..theid.."').tabs("..JSON.emit(opts)..");});"
} else {
"$(function(){$('"..theid.."').accordion("..JSON.emit(opts).."); });"
}

</script>
</head></html>;
Files (0)

Comments (0)

You must login to post a comment.
Template:TabAccordion

Table of contents

Files (0)

Comments (0)
