mirror of
https://github.com/ExactTarget/fuelux.git
synced 2026-04-26 03:00:10 -04:00
352 lines
14 KiB
HTML
352 lines
14 KiB
HTML
---
|
|
layout: default
|
|
title: Plugins
|
|
slug: plugins
|
|
lead: "Information on writing plugins for Fuel UX, documentation on stock plugins, and links to those written by the community."
|
|
---
|
|
|
|
|
|
|
|
<!-- checkbox
|
|
================================================== -->
|
|
<div class="fu-docs-section">
|
|
<h1 id="writing-plugins" class="page-header">Writing a Plugin</h1>
|
|
|
|
<h2 id="writing-plugins-general">General</h2>
|
|
<p>The general way of writing a plugin.</p>
|
|
|
|
<h2 id="writing-plugins-repeater">Repeater Views</h2>
|
|
<p>How to write repeater view plugins.</p>
|
|
<ul>
|
|
<li>...</li>
|
|
</ul>
|
|
|
|
|
|
|
|
<h1 id="stock-plugins" class="page-header">Stock Plugins</h1>
|
|
<p class="lead">Plugins that come as a part of Fuel UX by default.</p>
|
|
|
|
<h2 id="stock-plugins-list">Repeater List View</h2>
|
|
<p>The repeater list view plugin will render data in a tabular format, with many options and methods to suit your
|
|
needs.
|
|
</p>
|
|
|
|
<h3>Example</h3>
|
|
<div class="bs-example">
|
|
<div class="repeater" data-staticheight="400px" id="MyRepeaterList">
|
|
<div class="repeater-header">
|
|
<div class="repeater-header-left">
|
|
<span class="repeater-title">Awesome Repeater</span>
|
|
<div class="repeater-search">
|
|
<div class="search input-group">
|
|
<input type="search" class="form-control" placeholder="Search"/>
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-default" type="button">
|
|
<span class="glyphicon glyphicon-search"></span>
|
|
<span class="sr-only">Search</span>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="repeater-header-right">
|
|
<div class="btn-group selectlist repeater-filters" data-resize="auto">
|
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
|
<span class="selected-label"> </span>
|
|
<span class="caret"></span>
|
|
<span class="sr-only">Toggle Filters</span>
|
|
</button>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li data-value="all" data-selected="true"><a href="#">all</a></li>
|
|
<li data-value="bug"><a href="#">bug</a></li>
|
|
<li data-value="dark"><a href="#">dark</a></li>
|
|
<li data-value="dragon"><a href="#">dragon</a></li>
|
|
<li data-value="electric"><a href="#">electric</a></li>
|
|
<li data-value="fairy"><a href="#">fairy</a></li>
|
|
<li data-value="fighting"><a href="#">fighting</a></li>
|
|
<li data-value="fire"><a href="#">fire</a></li>
|
|
<li data-value="flying"><a href="#">flying</a></li>
|
|
<li data-value="ghost"><a href="#">ghost</a></li>
|
|
<li data-value="grass"><a href="#">grass</a></li>
|
|
<li data-value="ground"><a href="#">ground</a></li>
|
|
<li data-value="ice"><a href="#">ice</a></li>
|
|
<li data-value="normal"><a href="#">normal</a></li>
|
|
<li data-value="poison"><a href="#">poison</a></li>
|
|
<li data-value="psychic"><a href="#">psychic</a></li>
|
|
<li data-value="rock"><a href="#">rock</a></li>
|
|
<li data-value="steel"><a href="#">steel</a></li>
|
|
<li data-value="water"><a href="#">water</a></li>
|
|
</ul>
|
|
<input class="hidden hidden-field" name="filterSelection" readonly="readonly" aria-hidden="true" type="text"/>
|
|
</div>
|
|
<div class="btn-group repeater-views" data-toggle="buttons">
|
|
<label class="btn btn-default active">
|
|
<input name="repeaterViews" type="radio" value="list"><span class="glyphicon glyphicon-list"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="repeater-viewport">
|
|
<div class="repeater-canvas"></div>
|
|
<div class="loader repeater-loader"></div>
|
|
</div>
|
|
<div class="repeater-footer">
|
|
<div class="repeater-footer-left">
|
|
<div class="repeater-itemization">
|
|
<span><span class="repeater-start"></span> - <span class="repeater-end"></span> of <span class="repeater-count"></span> items</span>
|
|
<div class="btn-group selectlist" data-resize="auto">
|
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
|
<span class="selected-label"> </span>
|
|
<span class="caret"></span>
|
|
<span class="sr-only">Toggle Dropdown</span>
|
|
</button>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li data-value="5"><a href="#">5</a></li>
|
|
<li data-value="10" data-selected="true"><a href="#">10</a></li>
|
|
<li data-value="20"><a href="#">20</a></li>
|
|
<li data-value="50" data-foo="bar" data-fizz="buzz"><a href="#">50</a></li>
|
|
<li data-value="100"><a href="#">100</a></li>
|
|
</ul>
|
|
<input class="hidden hidden-field" name="itemsPerPage" readonly="readonly" aria-hidden="true" type="text"/>
|
|
</div>
|
|
<span>Per Page</span>
|
|
</div>
|
|
</div>
|
|
<div class="repeater-footer-right">
|
|
<div class="repeater-pagination">
|
|
<button type="button" class="btn btn-default btn-sm repeater-prev"><span class="glyphicon glyphicon-chevron-left"></span></button>
|
|
<span>Page</span>
|
|
<div class="repeater-primaryPaging active">
|
|
<div class="input-group input-append dropdown combobox">
|
|
<input type="text" class="form-control">
|
|
<div class="input-group-btn">
|
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
|
|
<ul class="dropdown-menu pull-right"></ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<input type="text" class="form-control repeater-secondaryPaging">
|
|
<span>of <span class="repeater-pages"></span></span>
|
|
<button type="button" class="btn btn-default btn-sm repeater-next"><span class="glyphicon glyphicon-chevron-right"></span></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3>Usage</h3>
|
|
<p>The repeater view plugin extends repeater functionality, so it's usage follows the steps specified in the repeater
|
|
docs. It also provides the following additional features:</p>
|
|
|
|
<h3>Data Source</h3>
|
|
<p>Blah blah blah I need to put some crud here.</p>
|
|
|
|
<h3>Options</h3>
|
|
<p>Options can be passed via Javascript upon initialization.</p>
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 100px;">Name</th>
|
|
<th style="width: 100px;">type</th>
|
|
<th style="width: 50px;">default</th>
|
|
<th>description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>list_columnRendered</td>
|
|
<td>function</td>
|
|
<td>null</td>
|
|
<td>If set, this function will be called after the repeater renders each column. Passes a <code>helpers</code>
|
|
object and <code>callback</code> function as arguments. The <code>helpers</code> object has
|
|
the parent <code>container</code> and current column <code>item</code> as attributes, if available.
|
|
Once ready, the <code>callback</code> function must be called in order to continue with rendering.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>list_columnSizing</td>
|
|
<td>boolean</td>
|
|
<td>true</td>
|
|
<td>Dictates whether the repeater should run the intelligent column resizing algorithm. Accounts for
|
|
columns with set widths, only sizing those without. Setting this to <code>false</code> will disable
|
|
this feature entirely.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>list_columnSyncing</td>
|
|
<td>boolean</td>
|
|
<td>true</td>
|
|
<td>Dictates whether the repeater should run the post-render column syncing algorithm. This modifies
|
|
column header widths to match column widths that have expanded due to content. Setting this to
|
|
<code>false</code> will disable this feature entirely.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>list_infiniteScroll</td>
|
|
<td>boolean or object</td>
|
|
<td>false</td>
|
|
<td>Dictates whether the repeater list view should utilize infinite scrolling instead of pagination.
|
|
If set to <code>true</code>, infinite scrolling will be enabled with default settings. Additionally,
|
|
it can be set to an object with attributes matching the options available in the infinite scroll
|
|
control for further customization. (dataSource option will be ignored)
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>list_noItemsHTML</td>
|
|
<td>string or jQuery object</td>
|
|
<td>''</td>
|
|
<td>Specifies what gets displayed if there are no items returned from the dataSource. Can be a
|
|
<code>string</code> or <a href="http://learn.jquery.com/using-jquery-core/jquery-object/">jQuery object</a>.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>list_selectable</td>
|
|
<td>boolean or string</td>
|
|
<td>false</td>
|
|
<td>Specifies whether the rendered items rows can be selectable. If set to <code>true</code>, only
|
|
one row can be selected at a time. If set to <code>'multi'</code>, multiple rows can be selected
|
|
at once.
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>list_sortClearing</td>
|
|
<td>boolean</td>
|
|
<td>false</td>
|
|
<td>Specifies whether sortable columns can be "cleared" by a third click (ex: one click, sort ASC.
|
|
second click, sort DESC. third click, no sorting)
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>list_rowRendered</td>
|
|
<td>function</td>
|
|
<td>null</td>
|
|
<td>If set, this function will be called after the repeater renders each row. Passes a <code>helpers</code>
|
|
object and <code>callback</code> function as arguments. The <code>helpers</code> object has
|
|
the parent <code>container</code> and current row <code>item</code> as attributes, if available.
|
|
Once ready, the <code>callback</code> function must be called in order to continue with rendering.
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div><!-- ./bs-table-responsive -->
|
|
|
|
<h2 id="stock-plugins-thumbnail">Repeater Thumbnail View</h2>
|
|
<p>Thumbnail View docs.</p>
|
|
|
|
<h3>Example</h3>
|
|
<div class="bs-example">
|
|
<div class="bs-example">
|
|
<div class="repeater" data-staticheight="400px" id="MyRepeaterThumbnail">
|
|
<div class="repeater-header">
|
|
<div class="repeater-header-left">
|
|
<span class="repeater-title">Awesome Repeater</span>
|
|
<div class="repeater-search">
|
|
<div class="search input-group">
|
|
<input type="search" class="form-control" placeholder="Search"/>
|
|
<span class="input-group-btn">
|
|
<button class="btn btn-default" type="button">
|
|
<span class="glyphicon glyphicon-search"></span>
|
|
<span class="sr-only">Search</span>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="repeater-header-right">
|
|
<div class="btn-group selectlist repeater-filters" data-resize="auto">
|
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
|
<span class="selected-label"> </span>
|
|
<span class="caret"></span>
|
|
<span class="sr-only">Toggle Filters</span>
|
|
</button>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li data-value="all" data-selected="true"><a href="#">all</a></li>
|
|
<li data-value="bug"><a href="#">bug</a></li>
|
|
<li data-value="dark"><a href="#">dark</a></li>
|
|
<li data-value="dragon"><a href="#">dragon</a></li>
|
|
<li data-value="electric"><a href="#">electric</a></li>
|
|
<li data-value="fairy"><a href="#">fairy</a></li>
|
|
<li data-value="fighting"><a href="#">fighting</a></li>
|
|
<li data-value="fire"><a href="#">fire</a></li>
|
|
<li data-value="flying"><a href="#">flying</a></li>
|
|
<li data-value="ghost"><a href="#">ghost</a></li>
|
|
<li data-value="grass"><a href="#">grass</a></li>
|
|
<li data-value="ground"><a href="#">ground</a></li>
|
|
<li data-value="ice"><a href="#">ice</a></li>
|
|
<li data-value="normal"><a href="#">normal</a></li>
|
|
<li data-value="poison"><a href="#">poison</a></li>
|
|
<li data-value="psychic"><a href="#">psychic</a></li>
|
|
<li data-value="rock"><a href="#">rock</a></li>
|
|
<li data-value="steel"><a href="#">steel</a></li>
|
|
<li data-value="water"><a href="#">water</a></li>
|
|
</ul>
|
|
<input class="hidden hidden-field" name="filterSelection" readonly="readonly" aria-hidden="true" type="text"/>
|
|
</div>
|
|
<div class="btn-group repeater-views" data-toggle="buttons">
|
|
<label class="btn btn-default active">
|
|
<input name="repeaterViews2" type="radio" value="thumbnail"><span class="glyphicon glyphicon-th"></span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="repeater-viewport">
|
|
<div class="repeater-canvas"></div>
|
|
<div class="loader repeater-loader"></div>
|
|
</div>
|
|
<div class="repeater-footer">
|
|
<div class="repeater-footer-left">
|
|
<div class="repeater-itemization">
|
|
<span><span class="repeater-start"></span> - <span class="repeater-end"></span> of <span class="repeater-count"></span> items</span>
|
|
<div class="btn-group selectlist" data-resize="auto">
|
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
|
<span class="selected-label"> </span>
|
|
<span class="caret"></span>
|
|
<span class="sr-only">Toggle Dropdown</span>
|
|
</button>
|
|
<ul class="dropdown-menu" role="menu">
|
|
<li data-value="5"><a href="#">5</a></li>
|
|
<li data-value="10" data-selected="true"><a href="#">10</a></li>
|
|
<li data-value="20"><a href="#">20</a></li>
|
|
<li data-value="50" data-foo="bar" data-fizz="buzz"><a href="#">50</a></li>
|
|
<li data-value="100"><a href="#">100</a></li>
|
|
</ul>
|
|
<input class="hidden hidden-field" name="itemsPerPage" readonly="readonly" aria-hidden="true" type="text"/>
|
|
</div>
|
|
<span>Per Page</span>
|
|
</div>
|
|
</div>
|
|
<div class="repeater-footer-right">
|
|
<div class="repeater-pagination">
|
|
<button type="button" class="btn btn-default btn-sm repeater-prev"><span class="glyphicon glyphicon-chevron-left"></span></button>
|
|
<span>Page</span>
|
|
<div class="repeater-primaryPaging active">
|
|
<div class="input-group input-append dropdown combobox">
|
|
<input type="text" class="form-control">
|
|
<div class="input-group-btn">
|
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
|
|
<ul class="dropdown-menu pull-right"></ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<input type="text" class="form-control repeater-secondaryPaging">
|
|
<span>of <span class="repeater-pages"></span></span>
|
|
<button type="button" class="btn btn-default btn-sm repeater-next"><span class="glyphicon glyphicon-chevron-right"></span></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<h1 id="external-plugins" class="page-header">Community Plugin List</h1>
|
|
<h2 id="external-plugins-etc">Etc.</h2>
|
|
<ul>
|
|
<li>Bleh</li>
|
|
<li>Blah</li>
|
|
<li>Bloo</li>
|
|
</ul>
|
|
|
|
</div> |