![]() |
Search:
|
Page last modified 11:10, 27 Mar 2012 by tehmina.khan
Template:Look and Feel > Template:TabAccordion
Template:TabAccordionTable of contentsNo 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>; |
|
Powered by MindTouch Core |