User:Hoskir: Difference between revisions

From Engineering Policy Guide
Jump to navigation Jump to search
← Older edit
No edit summary
 
(63 intermediate revisions by the same user not shown)
Line 1: Line 1:
<h1>h1. This is a very large header.</h1>
= <big>'''Revisions'''</big> =
<h2>h2. This is a large header.</h2>
[[User:Hoskir/Revision Request 4254|Revision Request 4254]] -edits ready to publish
<h3>h3. This is a medium header.</h3>
<h4>h4. This is a moderate header.</h4>
<h5>h5. This is a small header.</h5>
<h6>h6. This is a tiny header.</h6>
=test=
==test==
===test===


<ul class="vcard">
[[User:Hoskir/Revision Request 4253|Revision Request 4253]] -edits ready to publish
  <li class="fn">Gaius Baltar</li>
  <li class="street-address">123 Colonial Ave.</li>
  <li class="locality">Caprica City</li>
  <li><span class="state">Caprica</span>, <span class="zip">12345</span></li>
  <li class="email">g.baltar@cmail.com</li>
</ul>


<ul class="example-orbit" data-orbit data-options="animation:slide; pause_on_hover:true;animation_speed:500;navigation_arrows:true; resume_on_mouseout: true; timer_speed:4500;">
[[User:Hoskir/Revision Request 4251|Revision Request 4251]] PUBLISHED AUGUST
  <li class="active">
    [[Image:EPG-001.png|slide 1]]


  </li>
[[User:Hoskir/Revision Request 4250|Revision Request 4250]] PUBLISHED AUGUST
  <li>
    [[Image:EPG-002.png|slide 2]]
    <div class="orbit-caption">
      Caption Two.
    </div>
  </li>
  <li>
    [[Image:EPG-003.png|slide 3]]
    <div class="orbit-caption">
      Caption Three.
    </div>
  </li>
</ul>


<ul class="example-orbit" data-orbit>
[[User:Hoskir/Revision Request 4249|Revision Request 4249]] PUBLISHED AUGUST
  <li class="active">
    [[Image:EPG-004.png|slide 1]]


  </li>
[[User:Hoskir/Revision Request 4248|Revision Request 4248]] PUBLISHED JULY
  <li>
    [[Image:EPG-005.png|slide 2]]
    <div class="orbit-caption">
      Caption Two.
    </div>
  </li>
  <li>
    [[Image:EPG-006.png|slide 3]]
    <div class="orbit-caption">
      Caption Three.
    </div>
  </li>
</ul>


<ul class="tabs" data-tab>
[[User:Hoskir/Revision Request 4247|Revision Request 4247]] -figure updated (waiting on more changes possibly)
  <li class="tab-title active"><a href="#panel1">Tab 1</a></li>
  <li class="tab-title"><a href="#panel2">Tab 2</a></li>
  <li class="tab-title"><a href="#panel3">Tab 3</a></li>
  <li class="tab-title"><a href="#panel4">Tab 4</a></li>
</ul>
<div class="tabs-content">
  <div class="content active" id="panel1">
    <p>This is the first panel of the basic tab example. You can place all sorts of content here including a grid.</p>
  </div>
  <div class="content" id="panel2">
    <p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
  </div>
  <div class="content" id="panel3">
    <p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p>
  </div>
  <div class="content" id="panel4">
    <p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p>
  </div>
</div>


[[User:Hoskir/Revision Request 4246|Revision Request 4246]] PUBLISHED JULY


[[User:Hoskir/Revision Request 4244|Revision Request 4244]] -edits ready to publish


Often when people want to have tabs in tables or in forms in MediaWiki they turn to the Header Tabs extension. [[mw:Extension:Header Tabs|Header Tabs]] works by simply taking all of your first level headers, such as <code><nowiki>= General =</nowiki></code> and turning them into tabs. Foreground removes the need for the Header Tabs extension by including tab functionality directly via the Foundation framework. Foreground's native tabs are faster, more flexible, and are responsive by default.
[[User:Hoskir/Revision Request 4243|Revision Request 4243]] PUBLISHED JULY


Here is an example of what the tabs look like using the "Header Tabs" extension:
[[User:Hoskir/Revision Request 4241|Revision Request 4241]] PUBLISHED JULY


= Lorem =
[[User:Hoskir/Revision Request 4240|Revision Request 4240]] -edits ready to publish
Some text to show in the Lorem tab.


= Eleifend =
[[User:Hoskir/Revision Request 4238|Revision Request 4238]] -edits ready to publish
Some text to show in the Eleifend tab.


= Urna =
[[User:Hoskir/Revision Request 4237|Revision Request 4237]] PUBLISHED JULY
Some text to show in the Urna tab.


= Magna =
[[User:Hoskir/Revision Request 4236|Revision Request 4236]] PUBLISHED JULY
Some text to show in the Magna tab.


<headertabs />
[[User:Hoskir/Revision Request 4235|Revision Request 4235]] PUBLISHED JULY


The code to generate these tabs with the "Header Tabs" extension:
[[User:Hoskir/Revision Request 4230|Revision Request 4230]] PUBLISHED JULY
<pre>
= Lorem =
Some text to show in the Lorem tab.
= Eleifend =
Some text to show in the Eleifend tab.
= Urna =
Some text to show in the Urna tab.
= Magna =
Some text to show in the Magna tab.
<headertabs />
</pre>
<br />


;Now using Foreground's built in tabs!
[[User:Hoskir/Revision Request 4225|Revision Request 4225]] PUBLISHED JULY


<ul class="tabs" data-tab>
[[User:Hoskir/Revision Request 4224|Revision Request 4224]] PUBLISHED JULY
  <li class="tab-title active"><a href="#panel1">Tab 1</a></li>
  <li class="tab-title"><a href="#panel2">Tab 2</a></li>
  <li class="tab-title"><a href="#panel3">Tab 3</a></li>
  <li class="tab-title"><a href="#panel4">Tab 4</a></li>
</ul>
<div class="tabs-content">
  <div class="content active" id="panel1">
    <p>Lorem ipsum dolor sit amet, ornare neque quisque etiam posuere voluptatem erat, scelerisque ornare tellus duis arcu eget ullamcorper. Lectus orci tincidunt augue tristique. Libero mus augue tortor urna, mauris sollicitudin fusce vestibulum nec, erat blandit in placerat ultrices, facilisis interdum consectetuer. Maecenas in unde, dolor a est ornare placerat dicta, ut nostra. Vehicula aliquam erat arcu. Nibh integer vestibulum natoque lacinia quis. A felis euismod sapien, eu dapibus, adipiscing in risus fringilla, hendrerit maecenas in dolor, vel nullam a.</p>
  </div>
  <div class="content" id="panel2">
    <p>Eleifend vel ut ultrices, vestibulum elit eget tempus urna mauris pede, nec ipsum congue penatibus vehicula cras, suspendisse nunc vitae consectetuer feugiat mauris id, hac odio pellentesque suscipit hymenaeos mattis. Penatibus etiam habitasse, in donec libero vivamus orci fermentum, congue risus auctor in, libero diam velit eget ad, aenean nam etiam faucibus wisi. Fringilla ultricies quam erat placerat, nec purus sit proin. Nulla diam sapien in massa. Nonummy sollicitudin. Aliquet risus. Aenean commodo sit inventore ridiculus.</p>
  </div>
  <div class="content" id="panel3">
    <p>Urna sed. Integer pellentesque odio sem donec accumsan, vel amet ultrices lobortis ac neque, diam quam lobortis enim vestibulum, ut consectetuer class interdum sit neque donec. Venenatis ullamcorper et sagittis porttitor tincidunt, rhoncus mauris sagittis, sagittis risus mi ante elit volutpat libero. Hac placerat vitae curae, voluptas quam adipiscing urna, luctus elit duis, euismod ornare nec nisl ac ac, minim dolor et metus id vel quia. Malesuada vivamus dui ut nec aliquam vel. Explicabo eget placerat auctor nam, luctus vitae sed libero urna consectetuer, nulla lacus habitasse eligendi, lorem quia, mauris nisl tortor nascetur lacus vestibulum. Varius bibendum amet sapien, pellentesque velit aliquet vitae ac maxime, posuere ipsum pellentesque nisl risus viverra dictum. Consectetuer leo sapien enim orci vel, feugiat proin orci ut commodo nullam tellus, at donec tempus dapibus, orci massa commodo lectus vel ante, interdum leo dolor elit. Lacus wisi morbi urna, pede dictum praesent mi leo. Quis ipsum metus id sit mauris ipsum. Dui elit feugiat cum cras, suscipit a imperdiet et, enim lectus inventore donec aliquet, cubilia tincidunt. Aliquam potenti vestibulum feugiat molestie.</p>
  </div>
  <div class="content" id="panel4">
    <p>Magna pede, dignissim diam diam, in ac quis molestie felis, facilisis rhoncus, est vestibulum libero suspendisse. Ac sed eget est arcu, tempus hac, maecenas potenti eu, aliquam sit praesent vestibulum sapien aliquet. Accumsan aliquam velit aliquam cupidatat orci rhoncus, quis massa cum condimentum enim bibendum ante, leo odio suspendisse id vestibulum nibh. At donec sociis quis leo ac, consectetuer donec, tempus consectetuer congue dolor magna, libero nam in vivamus proin praesent, nulla in et sollicitudin cras. Lorem enim tincidunt convallis mauris a viverra, cras dictumst gravida, pulvinar ut commodo turpis, nonummy dui id.</p>
  </div>
</div>


<ul class="tabs vertical" data-tab>
[[User:Hoskir/Revision Request 4223|Revision Request 4223]] PUBLISHED JULY
  <li class="tab-title active"><a href="#panel11">Tab 1</a></li>
  <li class="tab-title"><a href="#panel21">Tab 2</a></li>
  <li class="tab-title"><a href="#panel31">Tab 3</a></li>
  <li class="tab-title"><a href="#panel41">Tab 4</a></li>
</ul>
<div class="tabs-content">
  <div class="content active" id="panel11">
    <p>Lorem ipsum dolor sit amet, ornare neque quisque etiam posuere voluptatem erat, scelerisque ornare tellus duis arcu eget ullamcorper. Lectus orci tincidunt augue tristique. Libero mus augue tortor urna, mauris sollicitudin fusce vestibulum nec, erat blandit in placerat ultrices, facilisis interdum consectetuer. Maecenas in unde, dolor a est ornare placerat dicta, ut nostra. Vehicula aliquam erat arcu. Nibh integer vestibulum natoque lacinia quis. A felis euismod sapien, eu dapibus, adipiscing in risus fringilla, hendrerit maecenas in dolor, vel nullam a.</p>
  </div>
  <div class="content" id="panel21">
    <p>Eleifend vel ut ultrices, vestibulum elit eget tempus urna mauris pede, nec ipsum congue penatibus vehicula cras, suspendisse nunc vitae consectetuer feugiat mauris id, hac odio pellentesque suscipit hymenaeos mattis. Penatibus etiam habitasse, in donec libero vivamus orci fermentum, congue risus auctor in, libero diam velit eget ad, aenean nam etiam faucibus wisi. Fringilla ultricies quam erat placerat, nec purus sit proin. Nulla diam sapien in massa. Nonummy sollicitudin. Aliquet risus. Aenean commodo sit inventore ridiculus.</p>
  </div>
  <div class="content" id="panel31">
    <p>Urna sed. Integer pellentesque odio sem donec accumsan, vel amet ultrices lobortis ac neque, diam quam lobortis enim vestibulum, ut consectetuer class interdum sit neque donec. Venenatis ullamcorper et sagittis porttitor tincidunt, rhoncus mauris sagittis, sagittis risus mi ante elit volutpat libero. Hac placerat vitae curae, voluptas quam adipiscing urna, luctus elit duis, euismod ornare nec nisl ac ac, minim dolor et metus id vel quia. Malesuada vivamus dui ut nec aliquam vel. Explicabo eget placerat auctor nam, luctus vitae sed libero urna consectetuer, nulla lacus habitasse eligendi, lorem quia, mauris nisl tortor nascetur lacus vestibulum. Varius bibendum amet sapien, pellentesque velit aliquet vitae ac maxime, posuere ipsum pellentesque nisl risus viverra dictum. Consectetuer leo sapien enim orci vel, feugiat proin orci ut commodo nullam tellus, at donec tempus dapibus, orci massa commodo lectus vel ante, interdum leo dolor elit. Lacus wisi morbi urna, pede dictum praesent mi leo. Quis ipsum metus id sit mauris ipsum. Dui elit feugiat cum cras, suscipit a imperdiet et, enim lectus inventore donec aliquet, cubilia tincidunt. Aliquam potenti vestibulum feugiat molestie.</p>
  </div>
  <div class="content" id="panel41">
    <p>Magna pede, dignissim diam diam, in ac quis molestie felis, facilisis rhoncus, est vestibulum libero suspendisse. Ac sed eget est arcu, tempus hac, maecenas potenti eu, aliquam sit praesent vestibulum sapien aliquet. Accumsan aliquam velit aliquam cupidatat orci rhoncus, quis massa cum condimentum enim bibendum ante, leo odio suspendisse id vestibulum nibh. At donec sociis quis leo ac, consectetuer donec, tempus consectetuer congue dolor magna, libero nam in vivamus proin praesent, nulla in et sollicitudin cras. Lorem enim tincidunt convallis mauris a viverra, cras dictumst gravida, pulvinar ut commodo turpis, nonummy dui id.</p>
  </div>
</div>


[[User:Hoskir/Revision Request 4220|Revision Request 4220]] PUBLISHED JULY


=== Multiple Tab Sets ===
[[User:Hoskir/Revision Request 4213|Revision Request 4213]] PUBLISHED JULY


You can create a group of horizontal tabs using minimal markup.
[[User:Hoskir/Revision Request 4209|Revision Request 4209]] -new test method but needs to be approved and put in EPG format.


<div class="row">
[[User:Hoskir/Revision Request 4202|Revision Request 4202]] PUBLISHED JULY
<div class="large-6 columns">
;HTML MARKUP
<syntaxhighlight lang="html">
<ul class="tabs" data-tab>
  <li class="tab-title active"><a href="#panel1">Tab 1</a></li>
  <li class="tab-title"><a href="#panel2">Tab 2</a></li>
  <li class="tab-title"><a href="#panel3">Tab 3</a></li>
  <li class="tab-title"><a href="#panel4">Tab 4</a></li>
</ul>
<div class="tabs-content">
  <div class="content active" id="panel1">
    <p>This is the first panel of the basic tab example. You can place all sorts of content here including a grid.</p>
  </div>
  <div class="content" id="panel2">
    <p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
  </div>
  <div class="content" id="panel3">
    <p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p>
  </div>
  <div class="content" id="panel4">
    <p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p>
  </div>
</div>
</syntaxhighlight>
</div>


<div class="large-6 columns">
[[User:Hoskir/Revision Request 4191|Revision Request 4191 (ON HOLD)]] -may be withdrawn later
;RENDERED HTML
<ul class="tabs" data-tab>
  <li class="tab-title active"><a href="#panel1">Tab 1</a></li>
  <li class="tab-title"><a href="#panel2">Tab 2</a></li>
  <li class="tab-title"><a href="#panel3">Tab 3</a></li>
  <li class="tab-title"><a href="#panel4">Tab 4</a></li>
</ul>
<div class="tabs-content">
  <div class="content active" id="panel1">
    <p>This is the first panel of the basic tab example. You can place all sorts of content here including a grid.</p>
  </div>
  <div class="content" id="panel2">
    <p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
  </div>
  <div class="content" id="panel3">
    <p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p>
  </div>
  <div class="content" id="panel4">
    <p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p>
  </div>
</div>
</div>
</div>


[[User:Hoskir/Revision Request 4190|Revision Request 4190]] PUBLISHED JULY


=== Vertical Tabs ===
[[User:Hoskir/Revision Request 4175|Revision Request 4175 (ON HOLD)]]


You can create a group of vertical tabs using minimal markup. Just adding the class <code>vertical</code> changes the orientation of horizontal tabs.
[[User:Hoskir/Revision Request 4165|Revision Request 4165]] -waiting to publish info needs to be sent out by Gidget.


;HTML MARKUP
[[User:Hoskir/Revision Request 4136|Revision Request 4136 (ON HOLD)]]
<syntaxhighlight lang="html">
<ul class="tabs vertical" data-tab>
  <li class="tab-title active"><a href="#panel11">Tab 1</a></li>
  <li class="tab-title"><a href="#panel21">Tab 2</a></li>
  <li class="tab-title"><a href="#panel31">Tab 3</a></li>
  <li class="tab-title"><a href="#panel41">Tab 4</a></li>
</ul>
<div class="tabs-content">
  <div class="content active" id="panel11">
    <p>This is the first panel of the basic tab example. You can place all sorts of content here including a grid.</p>
  </div>
  <div class="content" id="panel21">
    <p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
  </div>
  <div class="content" id="panel31">
    <p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p>
  </div>
  <div class="content" id="panel41">
    <p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p>
  </div>
</div>
</syntaxhighlight>


[[User:Hoskir/Revision Request 4036|Revision Request 4036 (ON HOLD)]]


;RENDERED HTML
[[User:Hoskir/Revision Request 3906|Revision Request 3906 (ON HOLD)]]
<ul class="tabs vertical" data-tab>
  <li class="tab-title active"><a href="#panel11">Tab 1</a></li>
  <li class="tab-title"><a href="#panel21">Tab 2</a></li>
  <li class="tab-title"><a href="#panel31">Tab 3</a></li>
  <li class="tab-title"><a href="#panel41">Tab 4</a></li>
</ul>
<div class="tabs-content">
  <div class="content active" id="panel11">
    <p>This is the first panel of the basic tab example. You can place all sorts of content here including a grid.</p>
  </div>
  <div class="content" id="panel21">
    <p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
  </div>
  <div class="content" id="panel31">
    <p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p>
  </div>
  <div class="content" id="panel41">
    <p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p>
  </div>
</div>


__NOTOC__
[[User:Hoskir/Revision Request 3905|Revision Request 3905 (ON HOLD)]]
__NOEDITSECTION__


__NOTOC__
[[User:Hoskir/Revision Request 3902|Revision Request 3902 (ON HOLD)]]
__NOEDITSECTION__
 
[[Category:Documentation]]
[[User:Hoskir/Revision Request 3818|Revision Request 3818 (ON HOLD)]]

Latest revision as of 15:12, 7 August 2026

Revisions

Revision Request 4254 -edits ready to publish

Revision Request 4253 -edits ready to publish

Revision Request 4251 PUBLISHED AUGUST

Revision Request 4250 PUBLISHED AUGUST

Revision Request 4249 PUBLISHED AUGUST

Revision Request 4248 PUBLISHED JULY

Revision Request 4247 -figure updated (waiting on more changes possibly)

Revision Request 4246 PUBLISHED JULY

Revision Request 4244 -edits ready to publish

Revision Request 4243 PUBLISHED JULY

Revision Request 4241 PUBLISHED JULY

Revision Request 4240 -edits ready to publish

Revision Request 4238 -edits ready to publish

Revision Request 4237 PUBLISHED JULY

Revision Request 4236 PUBLISHED JULY

Revision Request 4235 PUBLISHED JULY

Revision Request 4230 PUBLISHED JULY

Revision Request 4225 PUBLISHED JULY

Revision Request 4224 PUBLISHED JULY

Revision Request 4223 PUBLISHED JULY

Revision Request 4220 PUBLISHED JULY

Revision Request 4213 PUBLISHED JULY

Revision Request 4209 -new test method but needs to be approved and put in EPG format.

Revision Request 4202 PUBLISHED JULY

Revision Request 4191 (ON HOLD) -may be withdrawn later

Revision Request 4190 PUBLISHED JULY

Revision Request 4175 (ON HOLD)

Revision Request 4165 -waiting to publish info needs to be sent out by Gidget.

Revision Request 4136 (ON HOLD)

Revision Request 4036 (ON HOLD)

Revision Request 3906 (ON HOLD)

Revision Request 3905 (ON HOLD)

Revision Request 3902 (ON HOLD)

Revision Request 3818 (ON HOLD)

Retrieved from "https://epg.modot.org/index.php?title=User:Hoskir&oldid=59203"