Connect

$('#myObject').jqcmbx({
	 'height': '36px',
	 'filter': true,
	 'classes': 'jqcmdx-big',
	 'optionTmpl': '<li data-value="${value}" data-group="${group}" data-filter="${name} - ${group}"><div class="pic"></div>${name}<div class="group">${group}</div><div class="clear"></div></li>' 
});
<select id="myObject" name="testname" tabindex="3">
	<option value="1" data-group="Programmer">Kirill</option>
	<option value="2" data-group="Manager">Yura</option>
	<option value="3" data-group="AnyKeyer">Jhon Smith</option>
	<option value="4" data-group="Big baraboom" selected="selected">Mila</option>
	<option value="5" data-group="Green">Tree</option>
	<option value="6" data-group="Color">Red</option>
	<option value="7" data-group="Town">Kazan</option>
	<option value="8" data-group="City">Moscow</option>
	<option value="9" data-group="Black Gems">Jack Sparrow</option>
	<option value="0" data-group="Matrix">Neo</option>
</select>

Options

  1. listTmpl (example: '<ul></ul>' )
  2. optionTmpl (example: '<li data-value="${value}" data-filter="${name}">${name}</li>' )
  3. width
  4. height
  5. selected - value of selected item
  6. id
  7. name
  8. classes
  9. tabindex
  10. size - http://www.w3schools.com/tags/att_select_size.asp
  11. filter (true | false)- use filter input or not
  12. source (see Example 2)
  13. autocomplete ( true | false; see Example 3 )
  14. input (true | fale) - input new value
  15. minLength - min symbols for activization autocomplete
  16. delay - time after keypress then autocomplete will be update

optionTmpl

System attrs witch must bi include in template is:
* data-value
* data-filter - if you wish use filter input

autocomplete

* true - use source as callback function
inside callback use this.controller( data ) for delegation control in to widget.
callback has widget context!

Templates

System attributes in template:
  1. data-value - for value wich sent to server
  2. data-filter - field for filtering by user input
You can pass variables in template using "data-*" attributes from "option" tag

Example:

<select>
<option value="2" data-var1="Op!">
</select>
var settings = { 
     optionTmpl: '<li data-value="${value}" data-filter="${name}">${name} - ${var1}</li>') 
};
 $( "select" ).jqcmbx( settings );

Example 2:

<div id="id1"></div>
var aThreeCoutries = [
{ name: 'Russia', value: 'Russia' }, 
{ name: 'Unated States of America', value: 'USA' }, 
{ name: 'Germany', value: 'Germany'}];

 $('#id1').jqcmbx({ 'source': aThreeCoutries });

Example 3:

$('#source_autocomplete').jqcmbx({
  'autocomplete': true,
  source: function () { this.update(aThreeCoutries); },
  'minLength': 2
});

Controllers

  1. selectedIndex - http://www.w3schools.com/jsref/prop_select_selectedindex.asp
  2. setActiveItem - set jQuery object from list as active item
  3. getActiveItem - return jQuery object with selected item from list
  4. open - open combobox
  5. close - close combobox
  6. update - update source
  7. add - add value/values(options) to combobox
  var value = 5;
  var cb = $( "#myElement" ).jqcmbx( '_controller_' );
 //setter
  $( "#myElement" ).jqcmbx( 'selectedIndex', value );
 //getter
  var selectedIndex =  $( "#myElement" ).jqcmbx( 'selectedIndex');

// USING setActiveItem
var first_elment_from_list = $( "#myElement [data-jqc="item"]:first" )
$( "#myElement" ).jqcmbx( 'setActiveItem', first_elment_from_list ); // first_elment_from_list - can be any dom element with _data-value_ and _data-name_ attrs
console.log( $( "#myElement" ).jqcmbx( 'selectedIndex') ); //output 0

DOM methods (read only)

  1. selectedIndex
  2. name
  3. value
  4. size
  5. length
  6. type
$( "#myElement" ).jqcmbx( {source:[{name:'test', value:'test'}]} );
console.log( document.getElementById('myElement" ).length ); //output 1

Events

  1. jqcmbxchange - onchange event
  2. jqcmbxfocus - focus event
  3. jqcmbxblur - blur event
  4. jqcmbxkeypress - keypress event
  5. jqcmbxkeup - keyup event
  6. jqcmbxkeydown - keydown event
  $( "#myElement" ).bind( 'jqcmbxchange',  function( event ) { alert( this.selectedIndex ) } );

Last edited Nov 11, 2011 at 11:55 AM by SowingSadness, version 52

Comments

No comments yet.