Skip to content

Latest commit

 

History

History
179 lines (157 loc) · 3.79 KB

README.md

File metadata and controls

179 lines (157 loc) · 3.79 KB
Raw

ImageDropdownSelector

image-selector

image-selector-expanded

Usage

  1. Include the image-selecgtor.lib.js Library to your HTML Project:
<html>
  <head>
    <script src="image-selector.lib.min.js"></script>
    ...
  </head>
  ...
</html>
  1. Add the custom element tag to your HTML document:
<image-selector id="example_selector">
  <image-option id="option_1" title="Option 1" image="filename/or/url/" />
  <image-option id="option_2" title="Option 2" image="filename/or/url/" />
  ...
</image-selector>
  1. It will be automatically initialized by the image-selector.lib.js Library.

Get / Set selected option

  1. Get current selected option
// Option 1: Get Index
function getSelectedIndex() {
    var selector = document.getElementById('example_selector');
    
    var selectionIndex = ImageSelector.getCurrentSelectedIndex(selector);
    
    return selectionIndex;
}

// Option 2: Get Option-Element
function getSelectedElement() {
    var selector = document.getElementById('example_selector');
    
    var selectionElement = ImageSelector.getCurrentSelected(selector);
    
    return selectionElement;
}
  1. Set current selected option
// Option 1: Set selected option by index
function setSelectedIndex(index) {
    var selector = document.getElementById('example_selector');
    
    ImageSelector.setSelectedIndex(selector, index);
}

// Option 2: Set selected option by option id
function setSelectedById(id) {
    var selector = document.getElementById('example_selector');
    
    ImageSelector.setSelectedOptionById(selector, 'option_1');
}

// Option 3: Set selected option by option element
function setSelectedOption(option) {
    ImageSelector.setSelectedOptionById(option);
}

Overview - Available functions

Function Return Type Description
ImageSelector.setSelectedIndex(selector, index) <void> Set the selected option for a selector by a specific option index
ImageSelector.setSelectedOptionById(selector, optionId) <void> Set the selected option for a selector by a specific option id
ImageSelector.setSelectedOption(option) <void> Set the selected option for a selector by a given option
ImageSelector.setOnSelectListener(selector, fct, replaceExisting) <void> Set an OnSelectListener
ImageSelector.getItemCount(selector) <number> Get the number of options for a given selector
ImageSelector.getCurrentSelected(selector) <HTMLElement|null> Get the current selected selector option
ImageSelector.getCurrentSelectedIndex(selector) <number> Get the index of the current selected selector option
ImageSelector.getIndexOf(option) <number> Get the index of a given options Item