Verint | Telligent Community
Verint | Telligent Community
  • Site
  • User
  • Site
  • Search
  • User
Verint Community 11.x
  • Verint Community
Verint Community 11.x
API Documentation links UI Component
  • User Documentation
  • Ask the Community
  • API Documentation
  • Manager Training
  • Developer Training
  • Tags
  • More
  • Cancel
  • New
  • API Documentation
  • +In-Process API Documentation
  • +Plugin API Documentation
  • +REST API Documentation
  • -Widget, Theme, and Automation APIs
    • +Automation Events
    • -Client-side APIs
      • +Client Messages
      • +Composer Plugins
      • +JavaScript API Modules
      • +jQuery Events
      • +jQuery Plugins
      • -UI Components
        • bookmark UI Component
        • code UI Component
        • collapseexpand UI Component
        • feature UI Component
        • html UI Component
        • like UI Component
        • links UI Component
        • loading UI Component
        • masonry UI Component
        • moderate UI Component
        • page UI Component
        • poll UI Component
        • previewhtml UI Component
        • rate UI Component
        • resizedimage UI Component
        • scheduledfile UI Component
        • searchresult UI Component
        • select UI Component
        • squeezetext UI Component
        • theater UI Component
        • tip UI Component
        • tourtip UI Component
        • UI Component tag
        • viewhtml UI Component
        • webpreview UI Component
    • +Dynamic Configuration
    • +LESS Functions
    • +Script API Types
    • +Script APIs

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.

Related:

  • 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>

  • Share
  • History
  • More
  • Cancel
Related
Recommended
  • Telligent
  • Professional Services
  • Submit a Support Ticket
  • Become a Partner
  • Request a Demo
  • Contact Us

About
Privacy Policy
Terms of use
Copyright 2022 Verint, Inc.
Powered by Verint Community