„Példa” változatai közötti eltérés

MediaWiki:tabs-dropdown-bgcolor

<syntaxhighlight lang="html4strict" line start="100" highlight="5" enclose="div">
HTML module goes here...
</syntaxhighlight>

<table align=center style="background: ivory;color:maroon;font-style:italic;font-family:arial;font-weight:bold;font-size:10pt;"> 
<tr><th> Heading 1 </th><th> Heading 2 </th></tr>
<tr>
<td style="padding:10px;"> This is cell 1 text </td>
<td style="padding:10px;"> This is cell 2 text </td>
</tr>
</table>

 <source lang="javascript" collapse="true" first-line="2">
// SyntaxHighlighter makes your code snippets beautiful without tiring your servers.
// http://alexgorbatchev.com
var setArray = function(elems) {
    this.length = 0;
    push.apply(this, elems);
    return this;
}
</source>

// SyntaxHighlighter makes your code snippets beautiful without tiring your servers.
// http://alexgorbatchev.com
var setArray = function(elems) {
    this.length = 0;
    push.apply(this, elems);
    return this;
}

Ha egy sor előtt space van, kiemeli a sort kerettel, háttérszínnel.

/*
  Button

 Turns on and off a light emitting diode(LED) connected to digital  
 pin 13, when pressing a pushbutton attached to pin 2. 

 The circuit:
 * LED attached from pin 13 to ground 
 * pushbutton attached to pin 2 from +5V
 * 10K resistor attached to pin 2 from ground

 * Note: on most Arduinos there is already an LED on the board
 attached to pin 13.

 created 2005
 by DojoDave <http://www.0j0.org>
 modified 30 Aug 2011
 by Tom Igoe
 modified Apr 27 2012
 by Robert Wessels

 This example code is in the public domain.

 http://www.arduino.cc/en/Tutorial/Button
 */

// constants won't change. They're used here to 
// set pin numbers:
const int buttonPin = PUSH2;     // the number of the pushbutton pin
const int ledPin =  GREEN_LED;      // the number of the LED pin

// variables will change:
int buttonState = 0;         // variable for reading the pushbutton status

void setup() {
  // initialize the LED pin as an output:
  pinMode(ledPin, OUTPUT);      
  // initialize the pushbutton pin as an input:
  pinMode(buttonPin, INPUT_PULLUP);     
}

void loop(){
  // read the state of the pushbutton value:
  buttonState = digitalRead(buttonPin);

  // check if the pushbutton is pressed.
  // if it is, the buttonState is HIGH:
  if (buttonState == HIGH) {     
    // turn LED on:    
    digitalWrite(ledPin, HIGH);  
  } 
  else {
    // turn LED off:
    digitalWrite(ledPin, LOW); 
  }
}

<html>
<iframe title="ApaBoard 0.1" width="800" height="600" scrolling="no" frameborder="0" name="ApaBoard 0.1" class="eda_tool" src="http://upverter.com/eda/embed/#designId=369a2e10a738c260,tool=schematic,zoom=1,center=6520x-760"></iframe>
</html>

{| class="wikitable"
! Orange
! Apple
! style="text-align:right;"| 12,333.00
|-
| Bread
| Pie
| style="text-align:right;"| 500.00
|- style="font-style: italic; color: green;"
| Butter
| Ice cream
| style="text-align:right;"| 1.00
|}

<div class="toccolours mw-collapsible mw-collapsed">
This text is not collapsible; but the next is collapsible and hidden by default:
<div class="mw-collapsible-content">{{Lorem}}</div>
</div>

<tabs style="color:{{#if:{{{1|}}}|green|red}}">
<tab name="{{{1|}}}">Foo</tab>
<tab name="{{{2|}}}">Bar</tab>
</tabs>

{{#tag:tabs|
{{#tag:tab|Foo|name={{{1|}}}}}
{{#tab:{{{2|}}}|Bar}}
|style=color:{{#if:{{{1|}}}|green|red}} }}

<tab>This toggle box has no attributes assigned to it.</tab>

<tab collapsed openname="Toggle" style="font-weight:bold;width:500px;" container="font-style:italic;" title="Example tooltip">
This toggle box has the following attributes defined:
*<code>collapsed</code> - By default, it is closed.
*<code>openname="Toggle"</code> - The label will show "Toggle" when it can be clicked to open the box. Since no <code>closename</code> attribute is defined, it defaults to "Toggle" too.
*<code>style="font-weight:bold;width:500px;"</code> - The whole toggle box will be bold, and have a width of 500px.
*<code>container="font-style:italic;"</code> - Only the contents of the toggle box will be italic.
*<code>title="Example tooltip"</code> - The tooltip that shows when hovering over this tab is defined via the <code>title</code> attribute.
</tab>

<tab inline collapsed openname="Show" closename="Hide">

*Menu item 1
*Menu item 2
**Sub-menu item 1
*#Sub-menu item 2

*Menu item 1
#Menu item 2
#*Sub-menu item 1
#*Sub-menu item 2
#*#Sub-sub-menu item 1

<tab dropdown style="width:300pt" openname="Click/hover to show" closename="Showing...">
This dropdown contains no lists, so it will not have any of the styling designed for dropdowns. It does work as it normally would though.

This dropdown also has its <code>style</code> attribute set to <code>style="width:300pt"</code>. It also has different <code>openname</code> and <code>closename</code> attributes, so it defaults to the <code>openname</code> value.
</tab>

<tab dropdown bgcolor="salmon}body{font-weight:bold;">
This tab has a its <code>bgcolor</code> attribute set to <code>bgcolor="salmon"</code>.
Just defining a <code>background-color</code> style would not work.
</tab>

<tab dropdown>
#The first 2 items use ordered lists, which will show links as list items too.
#[[#Dropdown demos|Example link]]
*From here on this dropdown uses ordered lists, so links are shown within text.
*See this [[#Dropdown demos|example link]].
*Any links in dropdown menus placed outside lists will also be rendered as list items, like the following link:
[[#Dropdown demos|Example link]]
</tab>

<tab dropdown inline>
*You can do anything you'd normally do in a dropdown
*This box will fit in with the text.
</tab>

<tab dropdown>
*This dropdown menu demonstrates dropdown menus with multiple levels.
*Hovering over a list item with further lists nested within it will cause the next level to show up
*Hover over this item to see
**This list now shows up.
**Nested lists can also contain even more lists
**See this item for example
***This is a third level menu
**This can go on for any amount of levels.
*Multiple sub-menus are also allowed
**Such as this one.
</tab>

<tab dropdown>
*It is possible to alternate between ordered and unordered lists, but not within sub-menus.
*The first 2 items are unordered list items
#And this is an ordered list item
#*This is an unordered list item again
#*This also ''has'' to be an unordered list item
#*#This can be an ordered list item again though
#*#But then this also has to be ordered.
#*Within an individual sub-menu, it is not possible to change between ordered and unordered list items
</tab>

<tab dropdown>
*This item is in an unordered list, so it allows [[#Dropdown demos|in-line linking]].
#This item and the next one are in an ordered list, so they turn links into list-items
#[[#Dropdown demos|List-item links]]
#*...with a sub-menu that uses unordered lists again, so allows [[#Dropdown demos|in-line linking]] again.
#*#And this sub-menu again creates...
#*#[[#Dropdown demos|...list-item links]]
</tab>

<tabs>
<tab name="First" style="border:1px solid black;">This tab has a defined <code>name</code>. It also has a <code>style</code> attribute set to <code>style="border:1px solid black;"</code>.</tab>
<tab name="Second" style="background:salmon;">This tab also has a defined <code>name</code> attribute, and its <code>style</code> attribute set to <code>style="background:salmon;"</code>.</tab>
<tab>This tab has no attributes defined. Its name is automatically generated based on its position.</tab>
<tab index="1">This is a seperate tab. It has a defined <code>index</code> attribute with value "1". This makes it also show when the first tab is selected.</tab>
<tab name="Second">This is a seperate tab. It has a defined <code>name</code> attribute, with a value equal to that of the second tab ("Second"). It therefore also shows when the second tab is opened.</tab>
----
This line of text will show for every tab you view. It is not placed within <code><tab> tags, and can be used as default content for the tab menu.
</tabs>

<tabs>
<tab name="Default 1" style="background:lightgreen;">First tab.</tab>
<tab name="Default 2" style="background:lightgreen;">Second tab.</tab>
<tab name="Inline" style="background:salmon;">Third tab.</tab>
<tab name="Block" style="background:royalblue;">Fourth tab.</tab>
<tab index="1">This is a seperate tab. It demonstrates what happens if a tab has no <code>inline</code> or <code>block</code> attributes defined. If the tab contains a lot of text, it will automatically be forced to a new line, despite extra space being available at the end of the previous line.</tab>
<tab index="2">This seperate tab isn't forced to a new line, since it's short enough.</tab>
<tab index="3" inline>This is a seperate tab that has an <code>inline</code> attribute defined. It will fit in with the text as normal text would, and it fills up any space that is left available after the previous line. This makes tabs with <code>inline</code> attributes a bit better at fitting in with the flow of text.</tab>
<tab index="4" block>Despite fitting on the previous line, the <code>block</code> attribute forces this seperate tab to a new line</tab>
</tabs>

<tabs plain style="width:250px;">
<tab>This tab interface doesn't have a box surrounding it, but just has buttons above it.</tab>
<tab>This makes it a bit easier to customise the box</tab>
<tab>It is also more useful for storing tabbed tables in</tab>
</tabs>

<tabs>
This line of text contains <tab name="Exaggerating">over 9000</tab><tab name="Truth">a couple of</tab> switching parts. The <tab index="1">biggest by far</tab><tab index="2">main</tab> part of this tab's contents is placed outside any <tab index="1">awesome</tab> <code><tab></code> tags.

The switching <tab index="1">epicness</tab><tab index="2">parts</tab> are made by putting <code><tab></code> tags within the flow of the text.
</tabs>

<tabs>
This line of text contains {{#tab:Exagerrating,Truth|over 9000|a couple of}} switching parts. The {{#tab:|very biggest|main}} part of this tab's contents is placed outside any {{#tab:|awesome}} <code><tab></code> tags.

The switching {{#tab:|epicness|parts}} are made by putting <code><tab></code> tags within the flow of the text.
</tabs>

<tabs>
<tab name="First"/>{{#tab:Second,Third}}
The {{#tab:|first|second|third}} tab is predefined via ''{{#tab:|a self-closing <code><tab /></code> tag|the parser-function syntax|$2}}''.

<tab index="3">The italic text in the above line is defined via a <code>$2</code> reference. This automatically inserts the contents for the second value entered into the third tab too.
</tab>
</tabs>

<tab>
This tab contains a tab menu:

<tabs>
{{#tab:First, Second|These tabs use the <code>#tab:</code> parser function to create the nested tabs.|Placing <code><tab></code> tags inside another <code><tab></code> tag will cause the parser to recognise the inner closing tag as the closing tag for the outer tag, which messes it up.}}
</tabs>
</tab>

<tab dropdown>
And here is another tab menu:
<tabs>
{{#tag:tab|These tabs are generated via the <code>#tag:tab</code> parser function|name="First"}}
{{#tag:tab|This is required, for the same reason as explained in the Second tab in the toggle box example above.|name="Second"}}
</tabs>
</tab>

<tab>
This toggle box has another toggle box nested inside it.

{{#tag:tab|This tab is generated by the <code>#tag:tab</code> parser function.|openname=Show|closename="Hide"}}
</tab>

{{#tag:tab|
It is also possible to use the <code>#tag:tab</code> parser function for the outer tab.
<tab collapsed>
This inner toggle box is made via the <code><tag></code> syntax.
</tab>
|dropdown=true}}

<tabs>
<tab name="Toggle box">
This first tab has a toggle box nested inside it
{{#tab:Toggle|This toggle box is made via the <code>#tab:</code> parser function.}}
</tab>
<tab name="Dropdown">
This second tab has a dropdown nested inside it
{{#tag:tab|This dropdown is created via the <code>#tag:tab</code> parser function, since it's not possible to define attributes such as <code>dropdown</code> via the <code>#tab:</code> parser function.|dropdown=true}}
</tab>
<tab index="*" block>
{{#tag:tab|This toggle box shows up inside {{#tab:|every|each of the|nested=true}} tab{{#tag:tab|s|index=2|nested=true}}, because the containing tab tag has got its index attribute set to <code>index="*"</code>. It also has a <code>block</code> attribute.|openname=Open|closename=Close}}
</tab>
</tabs>

<tab dropdown name="nested toggle boxes" style="width:250px">
This dropdown has a nested toggle box that has <code>inline</code> and <code>collapsed</code> attributes filled in: {{#tag:tab|You can do the same things with nested boxes as you'd normally do outside other tags.|inline=true|collapsed=true}}
</tab>

<tab dropdown name="nested dropdowns">
*It is even possible to have a dropdown inside a list item in another dropdown box
*{{#tag:tab|This a dropdown inside a list in the outer dropdown menu|dropdown=true}}
*And it is even possible to have a dropdown inside sub-menus in the dropdown...
**{{#tag:tab|It also works normally in sub-menus, although <code>style="width:186px;"</code> would be recommended. Although making the encasing <code><tab></code> wider using <code>style="width:214px;"</code> would work just as well.|dropdown=true|style=width:186px;}}
Or if you want, you can place it outside lists too.
{{#tag:tab|Here's a dropdown inside a dropdown, but not in any list|dropdown=true}}
</tab>

Code	Description
`{{#tab:name1/#1, name2/#2, etc\|content 1\|content 2\|etc}}`	Each of the defined names will be set as `name` or `index` attributes, respectively. All values that are prefixed with `#`, and are numbers only will be recognised as indices. For indices, surrounding whitespace is allowed, but internal whitespace or any non-number characters such as decimal points aren't. If these condtions are not met, the entered value is interpreted as a name. If the entered value contains only whitespace or is left empty, the index of that tab is automatically calculated.
`{{#tab:\|content 1\|content 2\|etc}}`	No indices or names are defined here, so the indices of the tabs within the parser functions are automatically assigned as index.
`{{#tab:name1/#1, , name3/#3, name4/#4\|content 1\|content 2\| \|content 4}}`	The second tab will automatically get `index="2"`, and the third tab will have no content: If the third tab has a name defined in the list of names, then it becomes a self-closing tag. If the third tab has an index defined, this tab is skipped, and no output is generated for this tab.
`{{#tab:name1, name2, name3...}}`	This will define three tabs, "name1", "name2" and "name3" using the self-closing syntax.
`{{#tab:#3, #5\|content 3\|content 5}}`	This will add "content 3" to the rest of the contents of tab 3, and "content 5" to the rest of the content of tab 5.
`{{#tab:name1/#1, etc\|content 1\|$1}}`	When the content of a tab is `$n` (where `n` is the place of the tab in the parser function), the contents of that tab are copied over to the tab that has `$n` in it. For this to work, the following conditions must be met: The tab must contain nothing other than a dollar sign and a number directly after it. Surrounding whitespace is allowed. The parser function's `n`th parameter must be defined. `n` may also be bigger than the current tab index (so, `{{#tab:#3,#5\|$2\|Hi}}` would put "Hi" in both tab 3 and 5). The parser function's `n`th parameter must contain something other than just whitespace. Recursive references won't work, so `{{#tab:\|Hi\|$1\|$2}}` will put "Hi" in tabs 1 and 2, and the literal text "$1" in tab 3.
`{{#tab:\|3=content 3\| 5 = content 5}}`	You can also refer to the tab index (so not the tab name) by putting the tab index before an equals sign (`=`) in the parameter. This will not work for tab names, to prevent unwanted effects caused by equals signs inside the tab (which then would cause all of the preceding text to be interpreted as a tab name). This syntax will override an index or name specified using the syntax of the above code examples.

„Példa” változatai közötti eltérés

A lap jelenlegi, 2017. április 28., 20:12-kori változata

Kategória hozzárendlése

Kategóriák létrehozása

categorytree

videoflash

Getting started

syntaxhighlight Usage

SyntaxHighlighter

File

HELP

Alapok (angol nyelven)

Menu css beállítása

Space használata

Program kód beillesztése helyesen

Upverter beillesztése

Táblázat

Sroll

TAB

Installation

Configuration

Usage

General usage information

Hotlinking tabs

Toggle box

Documentation

Available attributes:

Toggle box demos

Plain toggle box

Toggle box attributes

Inline toggle boxes

Dropdown menus

Documentation

Available attributes:

Dropdown demos

Dropdown without lists

Background-color for dropdowns

Lists and links

Inline dropdowns

Nested lists

Alternating ordered and unordered lists

Tab menus

Documentation

Available attributes

Self-closing tabs

Parser function

Demos

Naming and reusing tabs, and default text

block and inline tabs

plain tab interfaces

Inline switching parts

Predefining tabs and reference syntax

Nested combinations

Nested tab menus

Inside toggle boxes

Inside dropdowns

Nested toggle/dropdown boxes

Toggle boxes in toggle boxes

Toggle boxes in dropdowns

Toggle boxes and dropdowns in tab boxes

Toggle boxes in dropdowns

Dropdowns in dropdowns

Navigációs menü

Keresés

`block` and `inline` tabs

`plain` tab interfaces