内容隐藏

出自LajiWiki
跳转到: 导航, 搜索

目录

方法来自OpenWetWare:Toggle 

需要配置的内容

MediaWiki:Common.js

首先必须得修改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>
}}

  1. main
  2. {
  3.     int a =1;
  4. }


Simple hiding

{{hide|hello world}} 

{{hide|bye world}} 

hello world


bye world


Multiple

*{{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>
  • item1
  • item2
  • toggle item1
  • toggle item2
  • toggle both items

Show hide all

{{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)

Mutual toggling

#<span class="_toggler-toggler2 toggler1">Toggle #2</span> 
#<span class="_toggler-toggler1 toggler2">Toggle #1</span>
  1. Toggle #2
  2. Toggle #1

Toggling table rows/cols

{| 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
  • Toggle row 1
  • Toggle row 2
  • Toggle column1
  • Toggle column2

Remote action

<span class="_toggler--column-one _toggler--footer">toggle headers/footers/navigation</span> 

toggle headers/footers/navigation

Nesting

[<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]

Tabs

<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> 
  • tab1
  • tab2
  • tab3
Tab 1
个人工具