{table:style=border:1px solid #000; background-color: #eee; margin: 15px auto 0; text-align:center; border-collapse:collapse;}
{tr:style=border:1px solid #000; height:15px;}
{td:style=background-color:#8CC63F; width:30px;|title=Stable}
{td}
{td:style=background-color:#8CC63F; padding:5px; width:30px;|title=Stable}
{td}
{td:style=background-color:#8CC63F; padding:5px; width:30px; border-right:1px solid #000|title=Stable}
{td}
{td:style=background-color:#8CC63F; padding:5px; width:30px;|title=Stable}
{td}
{td:style=background-color:#8CC63F; padding:5px; width:30px;|title=Stable}
{td}
{td:style=background-color:#8CC63F; padding:5px; width:30px; border-right:1px solid #000|title=Stable}
{td}
{td:style=background-color:#8CC63F; padding:5px; width:30px;|title=Stable}
{td}
{td:style=background-color:#8CC63F; padding:5px; width:30px;|title=Stable}
{td}
{td:style=background-color:#8CC63F; padding:5px; width:30px; border-right:1px solid #000|title=Stable}
{td}
{td:style=background-color:#CADB2A; padding:5px; width:30px;|title=In Developtment}
{td}
{td:style=background-color:#CADB2A; padding:5px; width:30px;|title=In Developtment}
{td}
{td:style=background-color:#CADB2A; padding:5px; width:30px; border-right:1px solid #000|title=In Developtment}
{td}
{td:style=background-color:#CADB2A; padding:5px; width:30px;|title=In Developtment}
{td}
{td:style=background-color:#CADB2A; padding:5px; width:30px;|title=In Developtment}
{td}
{td:style=background-color:#CADB2A; padding:5px; width:30px; border-right:1px solid #000|title=In Developtment}
{td}
{td:style=background-color:#FFE000; padding:5px; width:30px;|title=In Design}
{td}
{td:style=background-color:#FFE000; padding:5px; width:30px;|title=In Design}
{td}
{td:style=background-color:#FFE000; padding:5px; width:30px; border-right:1px solid #000|title=In Design}
{td}
{td:style=background-color:#FFE000; padding:5px; width:30px;|title=In Design}
{td}
{td:style=background-color:#FFE000; padding:5px; width:30px;|title=In Design}
{td}
{td:style=background-color:#FFE000; padding:5px; width:30px;|title=In Design}
{td}
{tr}
{tr}
{td:colspan=3|style= border-top:1px solid #000}[Page Links|Pager Storycards#story card 1|1) List of Page Links]
{td}
{td:colspan=3|style= border-top:1px solid #000}[First & Last|Pager Storycards#story card 4|2) First & Last Links]
{td}
{td:colspan=3|style= border-top:1px solid #000}[Previous & Next|Pager Storycards#story card 5|3) Previous & Next Links]
{td}
{td:colspan=3|style= border-top:1px solid #000}[Items Per Page|Pager Storycards#story card 2|4) Allow users to change the number of items shown per page]
{td}
{td:colspan=3|style= border-top:1px solid #000}[Location In List|Pager Storycards#story card 7|5) Show users how many items there are and where they are in the list]
{td}
{td:colspan=3|style= border-top:1px solid #000}[Page-Link Scale|Pager Storycards#story card 3|6) Page-Link Scale]
{td}
{td:colspan=3|style= border-top:1px solid #000}[Meta Data|Pager Storycards#story card 6|7) Meta-data]
{td}
{tr}
{table}
1) [List of Page Links|Pager Storycards#story card 1|List of Page Links]
2) [First & Last Links|Pager Storycards#story card 4|First & Last Links]
3) [Previous & Next Links|Pager Storycards#story card 5|Previous & Next Links]
4) [Allow users to change the number of items shown per page|Pager Storycards#story card 2|Allow users to change the number of items shown per page]
5) [Show users how many items there are and where they are in the list|Pager Storycards#story card 7|Show users how many items there are and where they are in the list]
6) [Page-Link Scale|Pager Storycards#story card 3|Page-Link Scale]
7) [Meta-data|Pager Storycards#story card 6|Meta-data]
Legend
{table-plus:autoNumber=false|enableSorting=false| |columnAttributes=style="background:#8CC63F;",style="background:#CADB2A;",style="background:#FFE000;",style="background:#FFFDE3;"}
|[{color:black}Stable{color}|Glossary#stable|Performs to spec and has undergone Usability, Accessibility, and QA testing]|[{color:black}In Development{color}|Glossary#in progress|Does not completely conform to specification]|[{color:black}In Design{color}|Glossary#in design|Has not yet entered development]|[{color:black}Future{color}|Glossary#future|The feature is planned, but has not yet undergone design]|
{table-plus}
_\*Based on the_ [_latest current release_|Fluid Infusion - Current Release|Current Release]html}
<link href="http://wiki.fluidproject.org/download/attachments/5902236/progress-indicator.css?version=2" rel="stylesheet" type="text/css">
<link href="http://build.fluidproject.org/fluid/fluid-components/css/fluid.layout.css" rel="stylesheet" type="text/css">
<link href="http://build.fluidproject.org/fluid/fluid-components/css/fluid.text.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://build.fluidproject.org/fluid/fluid-components/js/Fluid-all.js"></script>
<script type="text/javascript" src="http://wiki.fluidproject.org/download/attachments/5902236/progress-indicator.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var progressIndicator = fluid.componentProgressIndicator("#fl-cpi-progress-indicator-pager", {featureList: [
{
shortName: "Page Links",
longName: "List of page links",
status: "Stable",
link: "http://wiki.fluidproject.org/display/fluid/Pager+Storycards#PagerStorycards-storycard1"
},
{
shortName: "First & Last",
longName: "First and Last links",
status: "Stable",
link: "http://wiki.fluidproject.org/display/fluid/Pager+Storycards#PagerStorycards-storycard4"
},
{
shortName: "Previous & Next",
longName: "Previous and Next links",
status: "Stable",
link: "http://wiki.fluidproject.org/display/fluid/Pager+Storycards#PagerStorycards-storycard5"
},
{
shortName: "Items Per Page",
longName: "Allow users to change the number of items shown per page",
status: "In Development",
link: "http://wiki.fluidproject.org/display/fluid/Pager+Storycards#PagerStorycards-storycard2"
},
{
shortName: "Location In List",
longName: "Show users how many items there are and where they are in the list",
status: "In Development",
link: "http://wiki.fluidproject.org/display/fluid/Pager+Storycards#PagerStorycards-storycard7"
},
{
shortName: "Page-Link Scale",
longName: "Page-Link scale",
status: "In Design",
link: "http://wiki.fluidproject.org/display/fluid/Pager+Storycards#PagerStorycards-storycard3"
},
{
shortName: "Meta-data",
longName: "Meta-data",
status: "In Design",
link: "http://wiki.fluidproject.org/display/fluid/Pager+Storycards#PagerStorycards-storycard6"
}
]});
jQuery(window).resize(function () {
progressIndicator.refreshView();
});
});
</script>
<div id="fl-cpi-progress-indicator-pager" class="fl-cpi-border">
<div class="fl-cpi-all-progress-container fl-centered fl-cpi-progress-container-all">
<div class="fl-cpi-progress-bars">
<div class="fl-progress">
<div class="fl-progress-bar fl-cpi-height-20-px">
<div class="fl-progress-indicator">
</div>
</div>
</div>
</div>
<table class="fl-cpi-separator fl-cpi-separator-table" role="grid">
<tr class="fl-cpi-progress-row-render" role="row">
<td class="fl-cpi-progress-cell-render fl-cpi-height-20-px fl-cpi-end" role="gridcell"></td>
</tr>
<tr class="fl-cpi-title-row-render" role="row">
<td class="fl-cpi-title-cell-render fl-cpi-height-20-px" role="gridcell">
<a class="fl-cpi-title-link"></a>
</td>
</tr>
</table>
</div>
<ol class="fl-cpi-list-item-container-render">
<li class="fl-cpi-list-item-render" role="listitem">
<a class="fl-cpi-list-link"></a>
</li>
</ol>
<div class="fl-cpi-legend">
<p>Legend</p>
<table>
<tr class="fl-cpi-legend-row">
<td class="fl-cpi-stable fl-cpi-legend-cell" title="Stable"><a class="fl-font-black" href="http://wiki.fluidproject.org/display/fluid/Glossary#Glossary-stable">Stable</a></td>
<td class="fl-cpi-in-development fl-cpi-legend-cell" title="In Development"><a class="fl-font-black" href="http://wiki.fluidproject.org/display/fluid/Glossary#Glossary-inprogress">In Development</a></td>
<td class="fl-cpi-in-design fl-cpi-legend-cell" title="In Design"><a class="fl-font-black" href="http://wiki.fluidproject.org/display/fluid/Glossary#Glossary-indesign">In Design</a></td>
<td class="fl-cpi-legend-cell" title="Future"><a class="fl-font-black" href="http://wiki.fluidproject.org/display/fluid/Glossary#Glossary-future">Future</a></td>
</tr>
</table>
<p class="fl-cpi-small-print fl-font-size-80 fl-font-arial">*Based on the <a href="http://wiki.fluidproject.org/display/fluid/Fluid+Infusion+-+Current+Release">latest current release</a></p>
</div>
</div>
{html}
|