目录 |
方法来自OpenWetWare:Toggle
首先必须得修改ediaWiki的Common.js 地址,增加隐藏/显示切换的脚本。 修改MediaWiki:Common.js 的方法,在搜索框中输入MediaWiki:Common.js 。点击进入, 然后创建页面就行了。直接进入可能会出现403Forbidden的情况。在这个页面增加以下代码。
/* Any JavaScript here will be loaded for all users on every page load. */ // <syntax type="javascript"> /** Toggles the display of elements on a page Author/contact: Austin Che http://openwetware.org/wiki/User:Austin_J._Che See http://openwetware.org/wiki/OpenWetWare:Toggle for examples and documentation */ // indexed array of toggler ids to array of associated toggle operations // each operation is a two element array, the first being the type, the second a class name or array of elements // operation types are strings like "_reset" or "" for the default toggle operation var togglers = new Array(); var allClasses = new Object(); // associative map of class names to page elements function toggler(id) { var toBeToggled = togglers[id]; if (!toBeToggled) return; // if some element is in list more than once, it will be toggled multiple times for (var i = 0; i < toBeToggled.length; i++) { // get array of elements to operate on var toggles = toBeToggled[i][1]; if (typeof(toggles) == "string") { if (toggles.charAt(0) == '-') { // treat as an element ID, not as class toggles = document.getElementById(toggles.substring(1)); if (toggles) toggles = new Array(toggles); } else toggles = allClasses[toggles]; } if (!toggles || !toggles.length) continue; var op = toBeToggled[i][0]; // what the operation will be switch (op) { case "_reset": for (var j in toggles) toggles[j].style.display = toggles[j]._toggle_original_display; break; case "_show": for (var j in toggles) toggles[j].style.display = ''; break; case "_hide": for (var j in toggles) toggles[j].style.display = 'none'; break; case "": default: // Toggle for (var j in toggles) toggles[j].style.display = ((toggles[j].style.display == 'none') ? '' : 'none'); break; } } } function createTogglerLink(toggler, id) { var toggle = document.createElement("a"); toggle.className = 'toggler-link'; toggle.setAttribute('id', 'toggler' + id); toggle.setAttribute('href', 'javascript:toggler("' + id + '");'); var child = toggler.firstChild; toggler.removeChild(child); toggle.appendChild(child); toggler.insertBefore(toggle, toggler.firstChild); } function toggleInit() { var togglerElems = new Array(); var toggleGroup = new Array(); // initialize/clear any old information togglers = new Array(); allClasses = new Object(); // make list of all document classes var elems = document.getElementsByTagName("*"); var numelems = elems.length; for (var i = 0; i < elems.length; i++) { var elem = elems[i]; if (!elem.className) continue; elem._toggle_original_display = elem.style.display; var togglerID = -1; var elemClasses = elem.className.split(' '); // get list of classes for (var j = 0; j < elemClasses.length; j++) { var elemClass = elemClasses[j]; if (! allClasses[elemClass]) allClasses[elemClass] = new Array(); allClasses[elemClass].push(elem); // all the special classes begin with _toggle if (elemClass.substring(0, 7) != "_toggle") continue; if (elemClass == "_togglegroup") toggleGroup = new Array(); else if (elemClass == "_toggle") toggleGroup.push(elem); else if (elemClass.substring(0, 12) == "_toggle_init") { // set initial value for display (ignore the original CSS set value) // understands _toggle_initshow and _toggle_inithide var disp = elemClass.substring(12); if (disp == "show") elem.style.display = ''; else if (disp == "hide") elem.style.display = 'none'; elem._toggle_original_display = disp; } else if (elemClass.substring(0, 8) == "_toggler") { if (togglerID == -1) { togglerID = togglers.length; togglers[togglerID] = new Array(); togglerElems[togglerID] = elem; } // all classes are of form _toggler_op-CLASS // figure out what class we're toggling // if none is specified, then we use the current toggle group var toBeToggled; var hyphen = elemClass.indexOf('-'); if (hyphen != -1) toBeToggled = elemClass.substring(hyphen+1); else { toBeToggled = toggleGroup; hyphen = elemClass.length; } var op = elemClass.substring(8, hyphen); togglers[togglerID].push(new Array(op, toBeToggled)); } } } function owwsitesearch(f){ f.q.value='site:http://openwetware.org/wiki/'+ f.base.value+'++'+f.qfront.value } // add javascript links to all toggler elements for (var i = 0; i < togglerElems.length; i++) createTogglerLink(togglerElems[i], i); } addOnloadHook(toggleInit); // </syntax>
Toggling 基于CSS类。在维基中,你可以通过<div class="class1 class2 class3">'''wiki text here'''</div> 来定义一个要素。
你也可以给这个要素制定某些属性,比如说<div style="display: none;" class="class1"></div>就是指定一个隐藏的要素。
你可以给为任意元素来生成一个Toggler。要定义一个基本的toggler,给一个要素增加一个_toggler-CLASS属性就行了。
比如说代码<span class="_toggler-foo">foo toggler</span>就制定了foo的toggler。点击前面的链接之所以没反应是
因为我们当前的页面上并没有基于"foo"类的元素。
我们也可以增加其他类型的Toggler,方法便是 _toggler_OPERATION-CLASS,比如说_toggler_show-foo这样就能增
加显示foo内容的切换器。当然还有其他可用的方法,包括:reset,show,hide。
有些地方需要注意一下:
a、toggler可以切换其他的toggler,甚至本身。
b、toggler可以有多重切换操作,比如说代码"_toggler_hide-foo _toggler_show-bar"就能隐藏所有foo元素并同时显示所有bar元素。
c、我们也可以同过元素的ID来进行切换,方法便是 "_toggler--myelement" (此Toggler对应的便是用<div>...</div>来定义的元素)。
因为在同一页面中ID是唯一的,所以此toggler一次至多切换一个页面元素。
切换组
为了不用去对每个toggle制定对应的元素类,我们引入了toggle group的概念。
一个toggle group对应那些具有class为"_togglegroup"的元素,使用这个类就是为了限定toggle group的界限。
在一个toggle group中的toggle就不用制定对应的类了,它对应的是所有的toggle。e.g. "_toggler" or "_toggler_reset".
Toggles within a toggle group are defined using the class "_toggle".
模板: 使用mediawiki的模板相当方便日常使用。模板集合如下:
Template:hide
Template:hide all
Template:show all
Template:show hide all
Template:toggle
增加一个默认隐藏的DIV,然后增加对应此DIV的切换器
注意两者Class要相同
<span class="_toggler-toggle">Template:toggle</span>
<div style="display: none;" class="toggle">
<source lang = "css">
<div class="_toggle {{{3|}}}">{{{1}}}</div>
<div class="_toggle {{{3|}}}" style="display:none;">{{{2}}}</div>
</source >
</div>
Template:toggle
{{hide|<source line="GESHI_FANCY_LINE_NUMBERS" lang="c">
main
{
int a =1;
}
</source>
}}
main
{int a =1;
}
{{hide|hello world}}
{{hide|bye world}}
*{{toggle|item1||item1 item}}
*{{toggle|item2||item2 item}}
*<span class="_toggler-item1">toggle item1</span>
*<span class="_toggler-item2">toggle item2</span>
*<span class="_toggler-item">toggle both items</span>
{{show hide all}} (only shows/hides items that use the Template:Hide template)
[show all] [hide all] (only shows/hides items that use the Template:Hide template)
#<span class="_toggler-toggler2 toggler1">Toggle #2</span> #<span class="_toggler-toggler1 toggler2">Toggle #1</span>
{| border="1"
|- class="row1"
| class="column1" | Row 1, Column 1
| class="column2" | Row 1, Column 2
|- class="row2"
| class="column1" | Row 2, Column 1
| class="column2" | Row 2, Column 2
|}
*<span class="_toggler-row1">Toggle row 1</span>
*<span class="_toggler-row2">Toggle row 2</span>
*<span class="_toggler-column1">Toggle column1</span>
*<span class="_toggler-column2">Toggle column2</span>
| Row 1, Column 1 | Row 1, Column 2 |
| Row 2, Column 1 | Row 2, Column 2 |
<span class="_toggler--column-one _toggler--footer">toggle headers/footers/navigation</span>
[<span class="_togglegroup _toggle _toggler">open level 1</span><span style="display: none;" class="_toggle _toggler">close level 1</span>] <div style="display: none;" class="_toggle"> Level 1 [<span class="_togglegroup _toggle _toggler">open level 2</span><span style="display: none;" class="_toggle _toggler">close level 2</span>] <div style="display: none;" class="_toggle"> Level 2 </div> </div>
[open level 1]
<div class="tabs-blue">
*<span class="_toggler_hide-tabs _toggler_show-tab1">tab1</span>
*<span class="_toggler_hide-tabs _toggler_show-tab2">tab2</span>
*<span class="_toggler_hide-tabs _toggler_show-tab3">tab3</span>
</div> <div class="tabcontent">
{{toggle|Tab 1||tab1 tabs}} {{toggle||Tab 2|tab2 tabs}} {{toggle||Tab 3|tab3 tabs}}
</div>