Table of contents

  1. Basic - basic usage
  2. Custom - customize render of all elements
  3. Multiple - use more than one QFams element on the same page
  4. Template - use QFams element(s) with your own template engine
  1. Basic
    1. This example will display a dual multi-select QuickForm element, to manage a simple car list
      Only default options are used.
    2. This example show how to populate the two select fields with options coming from a database rather than basic array
      Basic render options are used.
  2. Custom
    1. This example will display a dual multi-select QuickForm element, to manage a simple fruit list
      Both lists have headers, buttons are below the lists, and colors are managed by CSS rules.
    2. This example will display a dual multi-select QuickForm element, to manage a simple fruit list
      Both lists have headers, buttons using images (png) are between lists (vertical position), and colors are managed by CSS rules.
    3. This example will display a dual multi-select QuickForm element, to manage a simple fruit list
      Both lists have headers, buttons are below the lists, and colors are managed by CSS rules.
      Fancy attributes may be set to forbid item selection.
    4. This example will display either a dual or single multi-select QuickForm element, to manage a simple fruit list
      This example show how to solve problem when javascript is unavailable (disabled, or browser not compliant). The single multi-select layout (with checkboxes) does not requires javascript to run.
    5. This example will display a dual multi-select QuickForm element, to manage a simple fruit list
      This example show how to arrange item in list with two buttons and a sort option.
    6. This example will display either a dual or single multi-select QuickForm element, with selection buttons
      On both dual or single multi-select, we can: select all item, unselect all item, and toggle selection (since release 1.2.0).
    7. This example will display either a dual or single multi-select QuickForm element, with selection buttons
      On both dual or single multi-select, we can: select all item, unselect all item. Toggle selection was available only for single multi-select and only with release 1.1.0
    8. This example will display either a dual or single multi-select QuickForm element, with move buttons to Top or Bottom of selection
      New buttons are available since version 1.5.0
    9. This example will display either a dual or single multi-select QuickForm element, with options and fancy attributes
      Persistant Options and fancy attributes are now fully supported since version 1.5.0
  3. Multiple
    1. This example will display two dual multi-select QuickForm element on the same page
      Each multi-select may have the same layout but here we have choosen to put two different styles.
    2. This example will display two dual multi-select QuickForm element on the same page
      Each multi-select display live counter of selected/unselected items. This feature is only available since version 1.3.0
  4. Template
    1. This example will display a dual multi-select QuickForm element with the Sigma template engine and using the QF dynamic renderer