Portlet Markup Template
- Gary Thompson (Deactivated)
Owned by Gary Thompson (Deactivated)
A template for developing portlet user interfaces.
<!--
PORTLET DEVELOPMENT STANDARDS AND GUIDELINES
| For the standards and guidelines that govern
| the user interface of this portlet
| including HTML, CSS, JavaScript, accessibilty,
| naming conventions, 3rd Party libraries
| (like jQuery and the Fluid Skinning System)
| and more, refer to:
| http://www.ja-sig.org/wiki/x/cQ
-->
<!-- Portlet -->
<!--
| The root portlet div.
| Uses FSS "fl-widget" structure.
| Maps to the WAI-ARIA "section" role.
-->
<div class="fl-widget portlet" role="section">
<!-- Portlet Title -->
<!--
| Title of the portlet view, which should always be an h2.
| h2 maps to the WAI-ARIA "heading" role.
| Subtitle (h3) is optional.
| Uses FSS "fl-widget-titlebar" structure.
-->
<div class="fl-widget-titlebar portlet-title" role="sectionhead">
<h2 role="heading">Portlet View Title</h2>
<h3>Portlet View Subtitle</h3>
</div> <!-- end: portlet-title -->
<!-- Portlet Toolbar -->
<!--
| A collection of commonly used functions represented in compact visual form.
| Uses FSS "fl-widget-options" structure (renders the ul inline as a horizontal list).
| Maps to the WAI-ARIA "toolbar" role.
-->
<div class="fl-widget-options portlet-toolbar" role="toolbar">
<ul>
<li><a href="#" title="Option One"><span>Option One</span></a></li>
<li><a href="#" title="Option Two"><span>Option Two</span></a></li>
<li><a href="#" title="Option Three"><span>Option Three</span></a></li>
</ul>
</div> <!-- end: portlet-toolbar -->
<!-- Portlet Toolbar: Alternate -->
<!-- For use when there is an additional option widget or form element that is not part of the ul.
<div class="fl-col-flex2 portlet-toolbar" role="toolbar">
<div class="fl-col">
<ul>
<li><a href="#" title="Option One"><span>Option One</span></a></li>
<li><a href="#" title="Option Two"><span>Option Two</span></a></li>
<li><a href="#" title="Option Three"><span>Option Three</span></a></li>
</ul>
</div>
<div class="fl-col fl-text-align-right" role="search">
<input type="text" />
<input type="submit" value="Search" />
</div>
</div> --> <!-- end: portlet-toolbar -->
<!-- Portlet Body -->
<!--
| The body (main contents) of the portlet view.
| Uses the FSS "fl-widget-content" structure.
| Maps to the WAI-ARIA "main" role.
-->
<div class="fl-widget-content portlet-body" role="main">
<!-- Portlet Messages -->
<!--
| Dynamic system messages to tell people that an (otherwise invisible, backend) event occurred.
| Messages can be of these types: status, info, error, alert, success.
| Change the base class for the appropriate type of message.
| Use an appropriate WAI-ARIA role to describe the message.
| Use an h3 for the message title, and a paragraph for the message text.
| Messages communicate a system event, but should be written so that a <em>person</em> can understand it. Use plain, people-oriented language.
-->
<div class="portlet-msg-info" role="status"> <!-- role changes to "alert" for error and alert messages. -->
<h3>Information</h3>
<p>A system event has occurred.</p>
</div> <!-- end: portlet-msg -->
<!-- Portlet Note -->
<!--
| Optional. These notes help people know what to do with this portlet view.
| Maps to the WAI-ARIA "note" role.
-->
<div class="portlet-note" role="note">
<p>This description/instructions help people know what to do with this portlet view.</p>
</div> <!-- end: portlet-note -->
<!-- ========== Content Types ========== -->
<!-- Select the template appropriate to the content. -->
<!-- Text-based content -->
<h3>Content Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec diam a ante suscipit sollicitudin. Sed dictum condimentum augue. Praesent in diam sed nulla porttitor vulputate. In fermentum. Morbi interdum sodales ipsum. Aliquam erat volutpat. Aenean imperdiet sem eget purus. Vestibulum suscipit, tortor ac aliquet volutpat, lacus lacus ullamcorper erat, sit amet laoreet elit lacus vel mi. Praesent euismod ullamcorper justo. Mauris dignissim consectetur nisi. Maecenas euismod. Morbi ac urna. Nunc tincidunt eleifend augue. Curabitur at ante lobortis augue porttitor tincidunt. Nulla velit dui, venenatis non, sagittis a, placerat sit amet, ligula. Maecenas egestas eros in justo. Aenean aliquet.</p>
<!-- end: Text-based content -->
<!-- Form-based content -->
<form action="#" method="post" title="Describe what the form accomplishes">
<!-- Portlet Section -->
<!--
| A portlet-section is a structural element.
| Sections are used mapped to the WAI-ARIA role "region";
| "A large perceivable section of a web page or document,
| that the author feels should be included in a summary of page features."
-->
<div class="portlet-section" role="region">
<h3 class="portlet-section-header" role="heading">Section Title</h3>
<div class="portlet-section-body">
<p class="portlet-section-note" role="note">Optional. These notes help people know what to do with this section.</p>
<label for="shape">Shape:</label> <input type="text" id="shape" /><br />
<label for="size">Size:</label> <input type="text" id="size" /><br />
<label for="color">Color:</label> <input type="text" id="color" /><br />
</div>
</div> <!-- end: portlet-section -->
<!-- Portlet Section -->
<!--
| A portlet-section is a structural element.
| Sections are used mapped to the WAI-ARIA role "region";
| "A large perceivable section of a web page or document,
| that the author feels should be included in a summary of page features."
-->
<div class="portlet-section" role="region">
<h3 class="portlet-section-header" role="heading">Section Title</h3>
<div class="portlet-section-body">
<p class="portlet-section-note" role="note">Optional. These notes help people know what to do with this section.</p>
<fieldset>
<legend>Group of Checkboxes</legend>
<input type="checkbox" id="check1" /> <label for="check1">Circle</label>
<input type="checkbox" id="check2" /> <label for="check2">Triangle</label>
<input type="checkbox" id="check3" /> <label for="check3">Square</label>
</fieldset>
</div>
</div> <!-- end: portlet-section -->
</form>
<!-- end: Form-based content -->
<!-- Table-based content -->
<table summary="Summarize the table information.">
<thead>
<tr>
<th>Shape</th>
<th>Size</th>
<th>Color</th>
</tr>
</thead>
<tbody>
<tr>
<td>Circle</td>
<td>Small</td>
<td>Red</td>
</tr>
<tr>
<td>Triangle</td>
<td>Large</td>
<td>Orange</td>
</tr>
<tr>
<td>Rectangle</td>
<td>Medium</td>
<td>Blue</td>
</tr>
<tr>
<td>Rhomboid</td>
<td>Gargantuan</td>
<td>Green</td>
</tr>
</tbody>
</table>
<!-- end: Table-based content -->
<!-- ========== end: Content Types ========== -->
</div> <!-- end: portlet-body -->
</div> <!-- end: portlet -->