Listbox

Published 2014-10-28 | (Compatible with SDK 2.5,3.5,4.5,5.0,5.1 and 2011,2012,2013,2014 models)

The Listbox component manages the data items in the form of a list.

** This class will not be supported in 2015.

   All functionalities of AppsFramework are more improved, integrating with CAPH. Therefore Appsframework is not supported since 2015 Smart TV. To use functionalities of Appsframework, refer to here.

 

The number of items in the list can be set and an event handler can be added for each entry in the list.

 

Figure. Listbox component

Syntax $.fn.sfList = function(options, value)
Parameter
  • options - date, index, itemsPerPage, show, hide, prev, next, getIndex, move, focus
  • value - The value denotes the text value of each listbox item
Value

  • data (array) - List’s item data

  • index (number) - Default focus item index

  • itemsPerPage (number) - Number of pages

    Example

    var data = ['first item', 'second', 'third', 'fourth', 'fifth', 'sixth', 'seventh'];
$('#list').sfList({ data: data, itemsPerPage: 5});

  • show - Shows list object

    Example

    $('#list').sfList('show');

  • hide - Hides list object

    Example

    $('#list').sfList('hide');

  • prev - Moves focus on previous list item

    Example

    $('#list').sfList('prev');

  • next - Moves focus on next list item

    Example

    $('#list').sfList('next');

  • getIndex - Gets index of the focused item

    Example

    $('#list').sfList('getIndex');

  • move - Sets index of the focused item

    Example

    $('#list').sfList('move');

  • focus - Sets focus on list object

    Example

    $('#list').sfList('focus');

  • blur - Makes list object blured

    Example

    $('#list').sfList('blur');

  • clear - Makes list object cleared

    Example

    $('#list').sfList('clear');
Property
  • ID - Listbox ID
  • Margins Left/Top - Listbox place
  • Margins Width - Listbox width

If the number of list items is changed, it is not visible in the Visual Mode, but the changes are reflected in the Emulator when running the application.

Figure. Listbox properties box

Figure. itemsPerPage

Figure. focus

Figure. blur

Figure. clear

The default code for the Listbox CSS is given below:

#SceneScene1 #svecListbox_R1YN {
    position: absolute;
    left: 320px;
    top: 40px;
    width: 200px;
}