Verint | Telligent Community
Verint | Telligent Community
  • Site
  • User
  • Site
  • Search
  • User
Verint Community 11.x
  • Verint Community
Verint Community 11.x
API Documentation masonry 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

masonry UI Component


jQuery.telligent.evolution.ui.components.masonry

UI component which arranges elements in a masonry layout using evolutionMasonry. UI Component which arranges elements in a masonry layout using evolutionMasonry. The default implementation uses the evolutionMasonry plugin. Overrides can be provided at the theme level to present masonry differently.

Endless scrolling can be achieved with a combination of the scrollend event and the evolutionMasonry plugin's, append method.

Options

Data made available to instances of the component:

  • columnClass: (string) CSS class name to apply to each rendered column. Should define, at minimum, a desired width. Through media queries, alternate widths can be defined for different targets.
    • default: masonry-column

Example

Static Example using ui-masonry

<div class="ui-masonry container" data-columnclass="masonry-column">
    <div class="item" style="height: 40px; background-color: red;">1</div>
    <div class="item" style="height: 60px; background-color: blue;">2</div>
    <div class="item" style="height: 80px; background-color: green;">3</div>
    <div class="item" style="height: 50px; background-color: orange;">4</div>
    <div class="item" style="height: 20px; background-color: purple;">5</div>
    <div class="item" style="height: 100px; background-color: blue;">6</div>
    <div class="item" style="height: 70px; background-color: teal;">7</div>
    <div class="item" style="height: 90px; background-color: black;">8</div>
    <div class="item" style="height: 40px; background-color: red;">9</div>
</div>

Default Implementation

For reference purposes or as the basis for an override:

$.telligent.evolution.ui.components.masonry = {
    setup: function() {},
    add: function(elm, options) {
        $(elm).evolutionMasonry({
            'columnClass': (options.columnclass || $.fn.evolutionMasonry.defaults.columnClass)
        }).css({ 'visibility': 'visible' });

    }
};

  • 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 2024 Verint, Inc.
Powered by Verint Community