Verint | Telligent Community
Verint | Telligent Community
  • Site
  • User
  • Site
  • Search
  • User
Verint Community 12.x
  • Verint Community
Verint Community 12.x
API Documentation select 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
        • Idea Voting 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
        • tag UI Component
        • theater UI Component
        • tip UI Component
        • tourtip UI Component
        • viewhtml UI Component
        • webpreview UI Component
    • +Dynamic Configuration
    • +LESS Functions
    • +Script API Types
    • +Script APIs

select UI Component


jQuery.telligent.evolution.ui.components.select

UI Component which re-renders select elements as glowDropDownList instances on desktop. On narrow devices, continues to render as a native select, to give the theme a chance to more preceisely theme the form field on desktop use. Re-rendered selects' values are still updated and available to interacted with. Overrides can be provided at the theme level to present selects differently.

Example

Usage

// Re-renders the select as a glowDropDownList on the desktop, not on mobile
<select class="ui-select" id="mySelect">
    <option value="a">Option A</option>
    <option value="b">Option B</option>
    <option value="c">Option C</option>
    <option value="d">Option D</option>
</select>

// Returns the value of the select, even when re-rendered
var value = $('#mySelect').val();

A barebones UI component override which would result in not re-rendering select elements

$.telligent.evolution.ui.components.select = {
    setup: function() { },
    add: function(elm, options) {
        // do nothing when added instead of re-rendering
    }
};

Default Implementation

For reference purposes or as the basis for an override:

(function($, global){

var minWindowWidth = 570,
    minWidth = 150,
    measuredHeight = null,
    measuredBorderHeight = null;

function measure(elm) {
    if(measuredHeight)
        return;
    var testDiv = $('<span class="uiselect"><span>measure</span></span>').css({'display':'none'}).appendTo(elm.parent());
    measuredHeight = testDiv.height();
    measuredBorderHeight = parseInt(testDiv.css('border-top-width') || '0') + parseInt(testDiv.css('border-bottom-width') || '0');
    testDiv.remove();
}

$.telligent.evolution.ui.components.select = {
    setup: function() { },
    add: function(elm, options) {
        elm.removeClass('ui-select');
        measure(elm);

        if(elm.is('select') && $(window).width() > minWindowWidth) {
            // set the height of the expanded view to not have empty space
            var optionLength = elm.find('option').length;
            var expandedHeight = optionLength * measuredHeight;

            // set a reasonable default width
            var width = elm.width();
            if(width < minWidth)
                width = minWidth;

            // render
            elm.show().glowDropDownList({
                selectedItemWidth: width + 20,
                selectedItemHeight: measuredHeight,
                itemsWidth: width + 20,
                itemsHeight: expandedHeight + measuredBorderHeight + 4, // (glowDropDownList assumes to - 4 from height)
                buttonImageUrl: null,
                className: 'uiselect'
            });
        }
    }
};

})(jQuery, window);

  • 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