«ܘܝܩܝܦܕܝܐ:NavFrame»: ܦܘܪܫܐ ܒܝܢܝ ܬܢܝܬ̈ܐ

ܙ
Bot: Replace deprecated <source> tag and "enclose" parameter; ܫܘܚܠܦ̈ܐ ܫܘܦܪ̈ܢܝܐ
ܙ (ܒܘܛ: ܫܘܢܝܐ ܕ ܐܣܘܪ̈ܐ ܕܐܢܛܪܘܝܩܝ, ܐܝܬ ܗܫܐ ܒܘܝܩܝܓܠܝܬ̈ܐ ܥܠ d:q13395701)
ܙ (Bot: Replace deprecated <source> tag and "enclose" parameter; ܫܘܚܠܦ̈ܐ ܫܘܦܪ̈ܢܝܐ)
 
{{notice|The use of NavFrame for tables has been deprecated in favor of [[Wikipediaܘܝܩܝܦܕܝܐ:Collapsible tables|collapsible tables]] since September 2007. NavFrame is still useful for non-table content.}}
{{shortcut|WP:NAVFRAME}}
Documentation for '''dynamic navigation boxes'''.
 
Dynamic navigation boxes use a combination of [[CSS]] and [[Javascript]] to make collapsible navigation boxes. The technical parts comprise style sheet declarations in [[MediaWikiܡܝܕܝܐܘܝܩܝ:Common.css]], and Javascript code in [[MediaWikiܡܝܕܝܐܘܝܩܝ:Common.js]].
 
Example (click "show" or "hide" to see the good bits):
From: [[User:Mzajac/Soviet-legacy_AFV_Navbox]].-->
 
== How to use ==
=== NavFrame divs ===
The basic concept here is to use the [[Span and div|'''div''']] [[HTML element|element]] within a Wiki article's markup code to identify certain content (which we'll call the "details" here) that we want the user to be able to "show" or "hide". The markup code used to achieve this effect comprises three main classes: <code>'''NavFrame''', '''NavHead''', '''NavContent'''</code>.
 
The underlying implementation uses [[Javascript]] to add a "show" or "hide" link in the <code>NavHead</code> part, and to turn the visibility of the <code>NavContent</code> part on or off. In web browsers that do not support Javascript, or where Javascript is disabled, the content will always be displayed, and the "show"/"hide" links will not be present.
 
The default behavior of this code will initially "show" the details, as well as a link to "hide" the details. To reverse the default behavior, so that the details are initially hidden, use <code>class="NavFrame collapsed"</code> (instead of <code>class="NavFrame"</code>) in the outer div element. Do not add <code>style="display:none;"</code> to the NavContent element, because that will make it impossible for users without Javascript to see the content.
 
==== Simple example ====
You will need to create three <code>div</code> elements:
<sourcesyntaxhighlight lang="html4strict"><div class="NavFrame">
<div class="NavHead">[... This is the title of your collapsible content ...]</div>
<div class="NavContent">
[... The content you want to hide goes here ...]
</div>
</div></sourcesyntaxhighlight>
<div class="NavFrame">
<div class="NavHead">[... This is the title of your collapsible content ...]</div>
 
To initially hide the content do this:
<sourcesyntaxhighlight lang="html4strict"><div class="NavFrame collapsed">
<div class="NavHead">[... This is the title of the hidden content ...]</div>
<div class="NavContent">
[... This content is initially hidden ...]
</div>
</div></sourcesyntaxhighlight>
<div class="NavFrame collapsed">
<div class="NavHead">[... This is the title of the hidden content ...]</div>
</div>
 
==== Mixed classes example ====
You can even apply other classes along with these, making a more styled design rather than if you were to use the standard classes:
<sourcesyntaxhighlight lang="html4strict"><div class="messagebox standard-talk NavFrame">
<div class="somerandomclass NavHead">
[... This is the title; it does not have to be plain text, you can get creative here ...]</div>
[... The content you want to hide goes here ...]
</div>
</div></sourcesyntaxhighlight>
<div class="messagebox standard-talk NavFrame">
<div class="somerandomclass NavHead">
</div>
 
==== Getting a caption instead of a heading ====
If you swap the order of the two inner <code>div</code> elements, then you can get an always-visible caption below optionally-hidden content, instead of an always-visible heading above optionally-hidden content:
 
<sourcesyntaxhighlight lang="html4strict"><div class="NavFrame">
<div class="NavContent">
[... The content you want to hide goes here ...]
</div>
<div class="NavHead">[... This is the caption below your collapsible content ...]</div>
</div></sourcesyntaxhighlight>
<div class="NavFrame">
<div class="NavContent">
</div>
 
==== If the title doesn't fit on one line ====
If the title is too long, then the formatting is very bad:
<sourcesyntaxhighlight lang="html4strict"><div style="width: 20em">
<div class="NavFrame">
<div class="NavHead">[... This is the title of your collapsible content ...]</div>
</div>
</div>
</div></sourcesyntaxhighlight>
<div style="width: 20em">
<div class="NavFrame">
 
To correct this, you need to add <code>height: auto</code> to the style of the <code>NavHead</code> <code>div</code>, and a dummy element to leave space for the "show/hide" link:
<sourcesyntaxhighlight lang="html4strict"><div style="width: 20em">
<div class="NavFrame" style="width: 20em">
<div class="NavHead" style="height:auto">
</div>
</div>
</div></sourcesyntaxhighlight>
<div style="width: 20em">
<div class="NavFrame" style="width: 20em">
</div>
 
=== Collapsible tables ===
{{see main|Help:Collapsing}}
The initial state of any collapsible content can be controlled using a "collapsible table", because it also allows a table with only one element with content, and a header.
 
== Left-alignment ==
To have things lined up to the left, add in this line of code <sourcesyntaxhighlight lang="html4strict">style="text-align:left"</sourcesyntaxhighlight> to the first (or whichever) <tt><nowiki><div></nowiki></tt> you want the text inside aligned to the left.
<div class="NavFrame collapsed" style="text-align:left">
<div class="NavHead">Left-alignment</div>
 
== Templates ==
* [[Templateܩܠܒܐ:Hidden]]
* [[Templateܩܠܒܐ:Hidden_begin]]
{{Navigational templates}}
 
{{DEFAULTSORT:NavFrame}}
[[Categoryܣܕܪܐ:Navigational boxes|NavFrame]]
 
[[ko:위키백과:NavFrame]]
6,451

edits