Custom 7

Overview

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

Note: this example is a clone of custom 6 example without toggle selection feature for dual multi-select.

Screenshot

sample screenshot

Demonstration

Give it a try

Dependencies

This example requires mandatory resources :

Explains step by step

Step 1

The dual multi-select is created with headers (lines 39-42), and load with data defined from $fruit_array (lines 23 thru 33).

Step 2

Two layouts need two different templates:
- Alternative template is set on lines 64-76, for a dual multi-select element shape.
- Main template is set on lines 53-61, for a single checkboxes multi-select element shape.

Final template is set (lines 78-82) accordingly to user-choice (see checkbox near buttons lines 89-93).

Depending of template used (single or dual multi-select), we will set (line 131) or not the additional CSS rules.

Step 3

On dual multi-select, both list are 200 pixels width (line 40) and display 10 items (default attribute). Styles are managed by CSS rules and class pool (lines 109-124).

Property Value Default
size   10
width 200 100
class pool  

All buttons used default values, and an additional CSS class rule inputCommand (lines 44-50;126-128).

Property Value Default
name   add
value    >> 
type   button
class inputCommand  

Property Value Default
name   remove
value    << 
type   button
class inputCommand  

Property Value Default
name   all
value    Select All 
type   button
class inputCommand  

Property Value Default
name   none
value    Select None 
type   button
class inputCommand  

Property Value Default
name   toggle
value    Toggle Selection 
type   button
class inputCommand  

Property Value Default
name   up
value    Up 
type   button
class inputCommand  

Property Value Default
name   down
value    Down 
type   button
class inputCommand  

Source Code

PHP code
  1. <?php
  2. /**
  3.  * Custom advMultiSelect HTML_QuickForm element
  4.  * with extended buttons (select all, select none, toggle selection)
  5.  *
  6.  * @version    $Id: qfams_custom_7.php,v 1.4 2009/01/28 22:24:43 farell Exp $
  7.  * @author     Laurent Laville <pear@laurent-laville.org>
  8.  * @package    HTML_QuickForm_advmultiselect
  9.  * @subpackage Examples
  10.  * @access     public
  11.  * @example    examples/qfams_custom_7.php
  12.  *             qfams_custom_7 source code
  13.  * @link       http://www.laurent-laville.org/img/qfams/screenshot/custom7.png
  14.  *             screenshot (Image PNG, 640x525 pixels) 160 Kb
  15.  */
  16.  
  17. require_once 'HTML/QuickForm.php';
  18. require_once 'HTML/QuickForm/advmultiselect.php';
  19.  
  20. $form = new HTML_QuickForm('amsCustom7');
  21. $form->removeAttribute('name');        // XHTML compliance
  22.  
  23. $fruit_array = array(
  24.     'apple'     =>  'Apple',
  25.     'orange'    =>  'Orange',
  26.     'pear'      =>  'Pear',
  27.     'banana'    =>  'Banana',
  28.     'cherry'    =>  'Cherry',
  29.     'kiwi'      =>  'Kiwi',
  30.     'lemon'     =>  'Lemon',
  31.     'lime'      =>  'Lime',
  32.     'tangerine' =>  'Tangerine',
  33. );
  34.  
  35.  
  36. // rendering with QF renderer engine and template system
  37. $form->addElement('header', null, 'Advanced Multiple Select: custom layout ');
  38.  
  39. $ams =& $form->addElement('advmultiselect', 'fruit', null, $fruit_array,
  40.                            array('class' => 'pool', 'style' => 'width:200px;')
  41. );
  42. $ams->setLabel(array('Fruit:', 'Available', 'Selected'));
  43.  
  44. $ams->setButtonAttributes('add'     , 'class=inputCommand');
  45. $ams->setButtonAttributes('remove'  , 'class=inputCommand');
  46. $ams->setButtonAttributes('all'     , 'class=inputCommand');
  47. $ams->setButtonAttributes('none'    , 'class=inputCommand');
  48. $ams->setButtonAttributes('toggle'  , 'class=inputCommand');
  49. $ams->setButtonAttributes('moveup'  , 'class=inputCommand');
  50. $ams->setButtonAttributes('movedown', 'class=inputCommand');
  51.  
  52. // template for a single checkboxes multi-select element shape
  53. $template1 = '
  54. <table{class}>
  55. <!-- BEGIN label_3 --><tr><th>{label_3}</th><th>&nbsp;</th></tr><!-- END label_3 -->
  56. <tr>
  57.  <td>{selected}</td>
  58.  <td>{all}<br />{none}<br />{toggle}</td>
  59. </tr>
  60. </table>
  61. ';
  62.  
  63. // template for a dual multi-select element shape
  64. $template2 = '
  65. <table{class}>
  66. <!-- BEGIN label_2 --><tr><th>{label_2}</th><!-- END label_2 -->
  67. <!-- BEGIN label_3 --><th>&nbsp;</th><th>{label_3}</th></tr><!-- END label_3 -->
  68. <tr>
  69.  <td>{unselected}</td>
  70.  <td align="center">
  71.    {add}<br />{remove}<br /><br />{all}<br />{none}<br /><br />{moveup}<br />{movedown}<br />
  72.  </td>
  73.  <td>{selected}</td>
  74. </tr>
  75. </table>
  76. ';
  77.  
  78. if (isset($_POST['multiselect'])) {
  79.     $ams->setElementTemplate($template2);
  80. } else {
  81.     $ams->setElementTemplate($template1);
  82. }
  83.  
  84. if ($_SERVER['REQUEST_METHOD'] == 'GET') {
  85.     // fruit default values already selected without any end-user actions
  86.     $form->setDefaults(array('fruit' => array('kiwi','lime')));
  87. }
  88.  
  89. $buttons[] =& $form->createElement('submit', null, 'Submit');
  90. $buttons[] =& $form->createElement('reset',  null, 'Reset');
  91. $buttons[] =& $form->createElement('checkbox', 'multiselect', null,
  92.                                    'use dual select boxes layout');
  93. $form->addGroup($buttons, null, '&nbsp;');
  94. ?>
  95. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  96.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  97. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  98. <head>
  99. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  100. <title>HTML_QuickForm::advMultiSelect custom example 7</title>
  101. <style type="text/css">
  102. <!--
  103. body {
  104.   background-color: #FFF;
  105.   font-family: Verdana, Arial, helvetica;
  106.   font-size: 10pt;
  107. }
  108.  
  109. table.pool {
  110.   border: 0;
  111.   background-color: cyan;
  112. }
  113. table.pool td {
  114.   padding-left: 1em;
  115. }
  116. table.pool th {
  117.   font-size: 80%;
  118.   font-style: italic;
  119.   text-align: center;
  120. }
  121. table.pool select {
  122.   color: gray;
  123.   background-color: #eee;
  124. }
  125.  
  126. .inputCommand {
  127.   width: 120px;
  128. }
  129. <?php
  130. if (!isset($_POST['multiselect'])) {
  131.     echo $ams->getElementCss();
  132. }
  133. ?>
  134.  -->
  135. </style>
  136. <?php echo $ams->getElementJs(false); ?>
  137. </head>
  138. <body>
  139. <?php
  140. if ($form->validate()) {
  141.     $clean = $form->getSubmitValues();
  142.  
  143.     echo '<pre>';
  144.     print_r($clean);
  145.     echo '</pre>';
  146. }
  147. $form->display();
  148. ?>
  149. </body>
  150. </html>
generated by Generic Syntax Highlighter - GeSHi