The Telligent Community Mobile API provides support for rendering and handling lists of links.
[toc]
Rendering Lists of Links
Common mobile interaction design patterns include:
- Showing only essential actions in a list, and hiding others behind a 'more' links.
- Automatically overflowing long horizontal lists of links behind a 'more' link, dependent upon the width of a device.
- Or, alternatively, allowing a long horizontal list of links to scroll left and right.
- Displaying a popup "sheet" of links.
The ui-links ui component is designed to streamline these patterns. It enables declaring a set of links to be rendered horizontally, with configuration to support whether it should scroll or overflow into a 'more' link. Links that overflow are rendered via a popup sheet. Among other instances, this can be seen in action on group home pages' horizontally scrolling list of links, single gear icons tapping to reveal a sheet of actions on a group home page or user profile, and actions beneath posts that overflow into the ellipsis (more) link's popup sheet.
Examples
Overflowing a horizontal list of links into a popup sheet
Note the use of a high data-maxlinks
value to ensure as many links will be shown as can visually fit, and inclusion of data-more
and data-cancel
links to support showing the popup sheet.
The following
<div class="actions ui-links" data-minlinks="0" data-maxlinks="50">
<ul>
<li><a href="#">Action 1</a></li>
<li><a href="#">Action 2</a></li>
<li><a href="#">Action 3</a></li>
<li><a href="#">Action 4</a></li>
<li><a href="#">Action 5</a></li>
<li><a href="#">Action 6</a></li>
<li><a href="#" data-more>More</a></li>
<li><a href="#" data-cancel>Cancel</a></li>
</ul>
</div>
Renders
As many links as can fit are rendered, followed by the More
link.
Tapping More
renders a sheet of remaining links which did not fit.
Since more links can fit in horizontal view, more links are shown by default, and fewer are contained in the More
sheet.
Horizontally scrolling a list of links
Note the use of a high data-minlinks
attribute value to force more links to render horizontally than would otherwise fit. This causes the list of links to become horizontally scrollable, supporting momentum scrolling as well as hiding the scroll bar.
The following
<div class="actions ui-links" data-minlinks="50">
<ul>
<li><a href="#">Action 1</a></li>
<li><a href="#">Action 2</a></li>
<li><a href="#">Action 3</a></li>
<li><a href="#">Action 4</a></li>
<li><a href="#">Action 5</a></li>
<li><a href="#">Action 6</a></li>
<li><a href="#">Action 7</a></li>
<li><a href="#">Action 8</a></li>
<li><a href="#">Action 9</a></li>
<li><a href="#" data-more>More</a></li>
<li><a href="#" data-cancel>Cancel</a></li>
</ul>
</div>
Renders
To pre-define a specific link to be scrolled into view when first rendered, apply the data-selected
attribute.
<li><a href="#" data-selected>Action 4</a></li>
Rendering all links behind a popup sheet
To effectively render a pop-up list as a sheet without any links shown by default, a data-maxlinks
attribute value of 0
can be used.
The following
<div class="actions ui-links" data-minlinks="0" data-maxlinks="0">
<ul>
<li><a href="#">Action 1</a></li>
<li><a href="#">Action 2</a></li>
<li><a href="#">Action 3</a></li>
<li><a href="#">Action 4</a></li>
<li><a href="#" data-more>More</a></li>
<li><a href="#" data-cancel>Cancel</a></li>
</ul>
</div>
Renders
For more information about ui-links, please refer to the Javascript API documentation.
Handling Links
Links rendered by ui-links
will sometimes be removed and re-positioned in the DOM pending whether they are displayed, or whether they are shown within a popup sheet. If a link uses a standard href
attribute, it will still function normally. If instead the link requires an attached tap or click event handler, it's usually easier and more reliable use message links instead of explicit event binding.
Message links refer to anchor elements which define a data-messagename
attribute. These links automatically publish messages when tapped or clicked instead of following their hrefs.
Example
Note the use of data-messagename
attributes with no explicit event binding.
<div class="actions ui-links" data-minlinks="0" data-maxlinks="0"> <ul> <li><a href="http://telligent.com">Telligent</a></li> <li><a href="#" data-messagename="action-2">Action 2</a></li> <li><a href="#" data-messagename="action-3">Action 3</a></li> <li><a href="#" data-more>More</a></li> <li><a href="#" data-cancel>Cancel</a></li> </ul> </div>
Message link messages can be handled like any other messages:
$.telligent.evolution.messaging.subscribe('action-2', function(data){ // handle the message });
For more information about message links please refer to the Javascript API documentation.