User:Locke/common.js: Difference between revisions

Jump to navigation Jump to search
Want an adless experience? Log in or Create an account.
(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/User:Locke/common.js"