Custom 8

Overview

This example will display either a dual or single multi-select QuickForm element, with move buttons to Top or Bottom of selection.
On dual multi-select, since version 1.5.0 we can now move directly an item on on Top or on Bottom of selection.

Screenshot

sample screenshot

Demonstration

Give it a try

Dependencies

This example requires mandatory resources :

Explains

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 66-79, for a dual multi-select element shape.
- Main template is set on lines 55-63, for a single checkboxes multi-select element shape.

Final template is set (lines 81-85) accordingly to user-choice (see checkbox near buttons lines 92-96).

Depending of template used (single or dual multi-select), we will set (line 134) 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 112-127).

Property Value Default
size   10
width 200 100
class pool  

All buttons used default values, and an additional CSS class rule inputCommand (lines 44-52;129-131).

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  

Property Value Default
name   top
value    Top 
type   button
class inputCommand  

Property Value Default
name   bottom
value    Bottom 
type   button
class inputCommand  

Source Code

PHP code
  1. <?php
  2. /**
  3.  * Custom advMultiSelect HTML_QuickForm element
  4.  * with extended move buttons (move Top, move Bottom)
  5.  *
  6.  * @version    $Id: qfams_custom_8.php,v 1.3 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_8.php
  12.  *             qfams_custom_8 source code
  13.  * @link       http://www.laurent-laville.org/img/qfams/screenshot/custom8.png
  14.  *             screenshot (Image PNG, 648x312 pixels) 13 Kb
  15.  */
  16.  
  17. require_once 'HTML/QuickForm.php';
  18. require_once 'HTML/QuickForm/advmultiselect.php';
  19.  
  20. $form = new HTML_QuickForm('amsCustom8');
  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. $ams->setButtonAttributes('movetop'   , 'class=inputCommand');
  52. $ams->setButtonAttributes('movebottom', 'class=inputCommand');
  53.  
  54. // template for a single checkboxes multi-select element shape
  55. $template1 = '
  56. <table{class}>
  57. <!-- BEGIN label_3 --><tr><th>{label_3}</th><th>&nbsp;</th></tr><!-- END label_3 -->
  58. <tr>
  59.  <td>{selected}</td>
  60.  <td>{all}<br />{none}<br />{toggle}</td>
  61. </tr>
  62. </table>
  63. ';
  64.  
  65. // template for a dual multi-select element shape
  66. $template2 = '
  67. <table{class}>
  68. <!-- BEGIN label_2 --><tr><th>{label_2}</th><!-- END label_2 -->
  69. <!-- BEGIN label_3 --><th>&nbsp;</th><th>{label_3}</th></tr><!-- END label_3 -->
  70. <tr>
  71.  <td>{unselected}</td>
  72.  <td align="center">
  73.    {add}<br />{remove}<br /><br />{all}<br />{none}<br /><br />{moveup}<br />{movedown}<br />
  74.    {movetop}<br />{movebottom}
  75.  </td>
  76.  <td>{selected}</td>
  77. </tr>
  78. </table>
  79. ';
  80.  
  81. if (isset($_POST['multiselect'])) {
  82.     $ams->setElementTemplate($template2);
  83. } else {
  84.     $ams->setElementTemplate($template1);
  85. }
  86.  
  87. if ($_SERVER['REQUEST_METHOD'] == 'GET') {
  88.     // fruit default values already selected without any end-user actions
  89.     $form->setDefaults(array('fruit' => array('kiwi','lime')));
  90. }
  91.  
  92. $buttons[] =& $form->createElement('submit', null, 'Submit');
  93. $buttons[] =& $form->createElement('reset',  null, 'Reset');
  94. $buttons[] =& $form->createElement('checkbox', 'multiselect', null,
  95.                                    'use dual select boxes layout');
  96. $form->addGroup($buttons, null, '&nbsp;');
  97. ?>
  98. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  99.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  100. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  101. <head>
  102. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  103. <title>HTML_QuickForm::advMultiSelect custom example 8</title>
  104. <style type="text/css">
  105. <!--
  106. body {
  107.   background-color: #FFF;
  108.   font-family: Verdana, Arial, helvetica;
  109.   font-size: 10pt;
  110. }
  111.  
  112. table.pool {
  113.   border: 0;
  114.   background-color: yellow;
  115. }
  116. table.pool td {
  117.   padding-left: 1em;
  118. }
  119. table.pool th {
  120.   font-size: 80%;
  121.   font-style: italic;
  122.   text-align: center;
  123. }
  124. table.pool select {
  125.   color: gray;
  126.   background-color: #eee;
  127. }
  128.  
  129. .inputCommand {
  130.   width: 120px;
  131. }
  132. <?php
  133. if (!isset($_POST['multiselect'])) {
  134.     echo $ams->getElementCss();
  135. }
  136. ?>
  137.  -->
  138. </style>
  139. <?php echo $ams->getElementJs(false, true); ?>
  140. </head>
  141. <body>
  142. <?php
  143. if ($form->validate()) {
  144.     $clean = $form->getSubmitValues();
  145.  
  146.     echo '<pre>';
  147.     print_r($clean);
  148.     echo '</pre>';
  149. }
  150. $form->display();
  151. ?>
  152. </body>
  153. </html>
generated by Generic Syntax Highlighter - GeSHi