links UI Component

jQuery.telligent.evolution.ui.components.links

UI Component which dynamically renders a list of links horizontally to fit the maximum width available to it. When the width of the links exceeds the horizontal space, adapts to either horizontally scroll and/or render a final 'more' link which, when tapped, displays a sheet containing the remaining links. Supports the orientationchange event to re-render the available links. Supports retaining bound event handlers on the rendered links

Existing instances of ui-links UI components can be modified programmatically using the $.uilinks jQuery plugin.

Options

Data made available to instances of the component:

minlinks: Minimum number of links that must be always visible and not collapsed. When the link count exceeds minlinks and the combined horizontal width of the links exceeds the available width, remaining links are hidden behind a 'more' link. To cause horizontal scrolling links, this should be a high number. default: 1
maxlinks: Maximum number of links that can be shown horizontally until remaining links are collapsed behind a 'more' link, regardless of available horiztonal width. To cause a 'more' link when there's still remaining space for links to render horizontally, this should be a low number. default: 50
direction: Direction of links. 'horizontal' or 'vertical'. When Vertical, only pays attention to maxlinks. Default: 'vertical'

Link Format:

Links are provided to the component declaratively as an inline ul. Each list item contains a single anchor. Classes on list items are preserved.

Anchor attributes:

data-selected: If the links horizontally scroll, a link with the data-selected attribute will be pre-scrolled into view
data-more: If the links collapse, a link with the data-more attribute will be used as the toggle to reveal the remaining links
data-cancel: If the links collapse, a link with the data-cancel attribute will be used to hide the sheet of displayed remaining links.

uilinks jQuery plugin
ui.links.show Client Message
ui.links.hide Client Message

Example

Render a list of horizontally-scrolling links, pre-scrolled to the third link

<div class="ui-links" data-minlinks="20">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li class="some-class"><a href="#">Link 2</a></li>
        <li><a href="#" data-selected>Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
        <li><a href="#">Link 6</a></li>
        <li><a href="#">Link 7</a></li>
    <ul>
</div>

Render a list of horizontal links to the maximum available width, hiding remaining links behind a 'more' link.

<div class="ui-links">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
        <li><a href="#">Link 6</a></li>
        <li><a href="#">Link 7</a></li>
        <li><a href="#" data-more>More</a></li>
        <li><a href="#" data-cancel>Cancel</a></li>
    <ul>
</div>

Render a list of links behind a 'more' link with only the 'more' link visible.

<div class="ui-links" data-maxlinks="0">
    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#" data-more>Actions</a></li>
        <li><a href="#" data-cancel>Cancel</a></li>
    <ul>
</div>