Zelda Dungeon Wiki

User:Locke/common.js: Difference between revisions

User page Talk
Want an adless experience? Log in or Create an account.

User:Locke/common.js (view source)

Revision as of 08:23, June 27, 2020

309 bytes removed ,  June 27, 2020
m
update doc
(deselect tabs in all tabsets sharing selector, not just in the current tabset)
m (update doc)
Line 3: Line 3:


First, create a target out of any element (usually a div):
First, create a target out of any element (usually a div):
   -add class "tabtarget"
   -add class "zdw-tabcontainer"
   -add a unique id
   -add a unique id


Next, add content to the target:
Next, add content to the target:
   -each must be a div and a direct child to the target
   -each must be a div and a direct child to the target
   -add class "tabcontent2"
   -add class "zdw-tabcontent"
   -add attribute "data-tab-content" to hold the unique (for this target) identifying string
   -add attribute "data-tab-content" to hold the unique (for this target) identifying string
   --for multiple selectors, this string is an ordered, space-separated list of selections for each selector
   --for multiple selectors, use multiple "data-tab-content-selectorname" attributes
  --otherwise, it can be anything


Then, add selectors:
Then, add selectors:
   -they can go anywhere, inside or outside of the target
   -they can go anywhere, inside or outside of the target
   -add class "tabset"
   -add class "zdw-tabset"
   -set attribute "data-tab-target" to the target's id
   -set attribute "data-tab-target" to the target's id
   -set attribute "data-tab-type" to "click" or "hover" to control how the tabs are activated
   -set attribute "data-tab-type" to "click" or "hover" to control how the tabs are activated
   -optional: set attribute "data-tab-selector" to an integer if you wish to have more than one tabset for the same selector
   -optional: set attribute "data-tab-selector" to some string if you wish to have more than one tabset for the same selector
  --by default, tabsets start at 0 and increment by 1 for each subsequent definition


Finally, add tabs:
Finally, add tabs:
   -they must be descendants of their respective tabsets
   -they must be descendants of their respective tabsets
   -add class "tab2"
   -add class "zdw-tab"
   -set attribute "data-tab-selection" to a unique (for this selector) identifying string
   -optional: set attribute "data-tab-selection" to a unique (for this selector) identifying string
   --this will get combined with the selections of other selectors to form the string found in "data-tab-content" in the target
   --this will be compared to "data-tab-content-selectorname" in the target
  --for example, data-tab-selection="April" in selector 0 plus data-tab-selection="1st" in selector 1 will match data-tab-content="April 1st"
*/
*/


Retrieved from "https://www.zeldadungeon.net/wiki/Special:MobileDiff/225544"