Toggle menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Template:DropdownFilter: Difference between revisions

Template page
(Created page with "<includeonly><!-- JSON to build the dropdown from. --><div id="selectionOptions" aria-hidden="true" class="offscreen">{"divID":"{{{dropdownWrapperID|}}}", "name":"{{{dropdown...")
 
m (clean up table wrapper)
 
Line 1: Line 1:
<includeonly><!--
<includeonly><!--
  JSON to build the dropdown from.
  JSON to build the dropdown from.
--><div id="selectionOptions" aria-hidden="true" class="offscreen">{"divID":"{{{dropdownWrapperID|}}}", "name":"{{{dropdownName|}}}", "attribute":"{{{attributeName|}}}", "applyToElementsWithThisClass":"{{{nameOfElementToFilter|}}}", "options":[ {{{options|}}} ]}</div>
--><div id="selectionOptions" aria-hidden="true" class="offscreen">{"divID":"{{{dropdownWrapperID|}}}", "name":"{{{dropdownName|}}}", "attribute":"{{{attributeName|}}}", "applyToElementsWithThisClass":"{{{nameOfElementToFilter|}}}", "options":[ {{{options|}}} ]}</div><!--
{| class="wikitable" width="100%;"
 
! {{{title|Title}}}
--><div id="selectRow"><div id="{{{dropdownWrapperID|}}}" style="display: inline-block;padding:0 2px"></div></div></includeonly><!--
|-
 
| id="selectRow" | <div id="{{{dropdownWrapperID|}}}" style="display: inline-block;padding:0 2px"></div>
--><noinclude>
|-
|<div style="text-align: center">{{{data|}}}</div>
|}</includeonly><noinclude>
::<i> See also: [[Template:FilterByGame]].</i>
::<i> See also: [[Template:FilterByGame]].</i>
This template is meant to make it easy to create dropdowns that let the user filter items by a set of tags ("options").
This template is meant to make it easy to create dropdowns that let the user filter items by a set of tags ("options").

Latest revision as of 23:53, 17 October 2018

See also: Template:FilterByGame.

This template is meant to make it easy to create dropdowns that let the user filter items by a set of tags ("options").

Usage

All fields are mandatory.

<tabs plain> <tab name="Field Description">

{{DropdownFilter
 | dropdownWrapperID = should be unique, cannot have spaces
 | dropdownName = should be unique and different from dropdownWrapperID, cannot have spaces
 | attributeName = e.g. "game-data"; cannot have spaces; the name of the HTML attribute that specifies which "tags" each element has
 | nameOfElementToFilter = e.g. "filter-element"; cannot have spaces; the HTML class that identifies which elements should be filtered by this dropdown
 | options = {{DropdownFilter/Option|BBCT}}, {{DropdownFilter/Option|BBCS}}
             A list of Template:DropdownFilter/Options, which must be split by commas.
             The last one in the list cannot have a comma after it.
             The options will appear in this order in the dropdown.
}}

</tab> <tab name="Blank Template">

{{DropdownFilter
 | dropdownWrapperID = 
 | dropdownName = 
 | attributeName = 
 | nameOfElementToFilter = 
 | options = {{DropdownFilter/Option|BBCT}}, {{DropdownFilter/Option|BBCS}}
}}

</tab> </tabs>

Make sure that dropdownWrapperID and dropdownID are different and unique, or else nothing will happen when options are selected in the dropdown.

Technical Reference

The JSON format for a dropdown looks like this:

{
  "divID":"dropdownWrapperID",
  "name":"dropdownName ",
  "attribute":"attributeName",
  "applyToElementsWithThisClass":"elementsToFilter",
  "options":
    [ 
        ["dropdown option 1", "disabled:false if empty"],
        ["BBCT", ""],
    ]
}