PEAR logo

HTML_QuickForm_advmultiselect : La Référence

Compteurs dynamiques sur plusieurs éléments
Précédent  Chapitre 9. Exemples  


Compteurs dynamiques sur plusieurs éléments

Figure 9.7. Compteurs dynamiques avec deux éléments advmultiselect

Compteurs dynamiques avec deux éléments advmultiselect

Dans cet exemple, voici nos objectifs :

  • utiliser deux éléments advmultiselect sur la même page.
  • montrer deux implémentations différentes avec les cases à cocher et les listes à bascules.
  • montrer deux formes d'affichage des compteurs dynamiques avec les simple et double listes à sélection.

Exemple 9.7. Compteurs dynamiques multiples sur la même page

  1. <?php
  2. /**
  3. * Two advMultiSelect HTML_QuickForm elements with all properties
  4. * that can be display in one or two select box mode.
  5. * This example demonstrate the new feature of version 1.3.0 : Live Counter
  6. *
  7. * @version    $Id: qfams_multiple_2.php,v 1.1 2007/01/05 16:57:49 farell Exp $
  8. * @author     Laurent Laville <pear@laurent-laville.org>
  9. * @package    HTML_QuickForm_advmultiselect
  10. * @subpackage Examples
  11. * @access     public
  12. * @example    examples/qfams_multiple_2.php
  13. *             qfams_multiple_2 source code
  14. * @link       http://www.laurent-laville.org/img/qfams/screenshot/multiple2.png
  15. *             screenshot (Image PNG, 595x511 pixels) 11.9 Kb
  16. */
  17.  
  18. require_once 'HTML/QuickForm.php';
  19. require_once 'HTML/QuickForm/advmultiselect.php';
  20.  
  21. $form = new HTML_QuickForm('amsMultiple2');
  22. $form->removeAttribute('name');        // XHTML compliance
  23.  
  24. $fruit_array = array(
  25.     'apple'     =>  'Apple',
  26.     'orange'    =>  'Orange',
  27.     'pear'      =>  'Pear',
  28.     'banana'    =>  'Banana',
  29.     'cherry'    =>  'Cherry',
  30.     'kiwi'      =>  'Kiwi',
  31.     'lemon'     =>  'Lemon',
  32.     'lime'      =>  'Lime',
  33.     'tangerine' =>  'Tangerine',
  34. );
  35.  
  36. $car_array = array(
  37.     'dodge'     =>  'Dodge',
  38.     'chevy'     =>  'Chevy',
  39.     'bmw'       =>  'BMW',
  40.     'audi'      =>  'Audi',
  41.     'porsche'   =>  'Porsche',
  42.     'kia'       =>  'Kia',
  43.     'subaru'    =>  'Subaru',
  44.     'mazda'     =>  'Mazda',
  45.     'isuzu'     =>  'Isuzu',
  46. );
  47.  
  48. // template for a single checkboxes multi-select element shape with live counter
  49. $template1 = '
  50. <table{class}>
  51. <!-- BEGIN label_3 --><tr><th>{label_3}(<span id="{selected_count_id}">{selected_count}</span>)</th><th>&nbsp;</th></tr><!-- END label_3 -->
  52. <tr>
  53.   <td>{selected}</td>
  54.   <td>{all}<br />{none}<br />{toggle}</td>
  55. </tr>
  56. </table>
  57. ';
  58.  
  59. // template for a dual multi-select element shape with live counter
  60. $template2 = '
  61. <table{class}>
  62. <!-- BEGIN label_2 --><tr><th>{label_2}(<span id="{unselected_count_id}">{unselected_count}</span>)</th><!-- END label_2 -->
  63. <!-- BEGIN label_3 --><th>&nbsp;</th><th>{label_3}(<span id="{selected_count_id}">{selected_count}</span>)</th></tr><!-- END label_3 -->
  64. <tr>
  65.   <td>{unselected}</td>
  66.   <td align="center">
  67.     {add}<br />{remove}<br /><br />{all}<br />{none}<br />{toggle}<br /><br />{moveup}<br />{movedown}<br />
  68.   </td>
  69.   <td>{selected}</td>
  70. </tr>
  71. </table>
  72. ';
  73.  
  74. $defaults = array();
  75.  
  76. // first QF ams element
  77. $form->addElement('header', null, 'Advanced Multiple Select: Live Counter - pool1 style ');
  78.  
  79. $ams1 =& $form->addElement('advmultiselect', 'cars', null, $car_array,
  80.     array('size' => 10, 'class' => 'pool1', 'style' => 'width:200px;')
  81. );
  82. $ams1->setLabel(array('Cars:', 'Available', 'Selected'));
  83. $ams1->setButtonAttributes('add',      array('name' => 'add1',      'class' => 'inputCommand'));
  84. $ams1->setButtonAttributes('remove',   array('name' => 'remove1',   'class' => 'inputCommand'));
  85. $ams1->setButtonAttributes('all',      array('name' => 'all1',      'class' => 'inputCommand'));
  86. $ams1->setButtonAttributes('none',     array('name' => 'none1',     'class' => 'inputCommand'));
  87. $ams1->setButtonAttributes('toggle',   array('name' => 'toggle1',   'class' => 'inputCommand'));
  88. $ams1->setButtonAttributes('moveup',   array('name' => 'moveup1',   'class' => 'inputCommand'));
  89. $ams1->setButtonAttributes('movedown', array('name' => 'movedown1', 'class' => 'inputCommand'));
  90.  
  91. if (isset($_POST['multiselect1'])) {
  92.     $ams1->setElementTemplate($template2);
  93. } else {
  94.     $ams1->setElementTemplate($template1);
  95. }
  96.  
  97. if (isset($_POST['cars'])) {
  98.     $defaults = array('cars' => $_POST['cars']);
  99. }
  100.  
  101. // second QF ams element
  102. $form->addElement('header', null, 'Advanced Multiple Select: Live Counter - pool2 style ');
  103.  
  104. $ams2 =& $form->addElement('advmultiselect', 'fruit', null, $fruit_array,
  105.     array('size' => 5, 'class' => 'pool2', 'style' => 'width:300px;')
  106. );
  107. $ams2->setLabel(array('Fruit:', 'Available', 'Selected'));
  108. $ams2->setButtonAttributes('add',      array('name' => 'add2',      'class' => 'inputCommand'));
  109. $ams2->setButtonAttributes('remove',   array('name' => 'remove2',   'class' => 'inputCommand'));
  110. $ams2->setButtonAttributes('all',      array('name' => 'all2',      'class' => 'inputCommand'));
  111. $ams2->setButtonAttributes('none',     array('name' => 'none2',     'class' => 'inputCommand'));
  112. $ams2->setButtonAttributes('toggle',   array('name' => 'toggle2',   'class' => 'inputCommand'));
  113. $ams2->setButtonAttributes('moveup',   array('name' => 'moveup2',   'class' => 'inputCommand'));
  114. $ams2->setButtonAttributes('movedown', array('name' => 'movedown2', 'class' => 'inputCommand'));
  115.  
  116. if (isset($_POST['multiselect2'])) {
  117.     $ams2->setElementTemplate($template2);
  118. } else {
  119.     $ams2->setElementTemplate($template1);
  120. }
  121.  
  122. if (isset($_POST['fruit'])) {
  123.     $defaults = array_merge($defaults, array('fruit' => $_POST['fruit']));
  124. }
  125.  
  126. $buttons[] =& $form->createElement('submit', null, 'Submit');
  127. $buttons[] =& $form->createElement('reset',  null, 'Reset');
  128. $buttons[] =& $form->createElement('checkbox', 'multiselect1', null,
  129.                                    'cars list dual select');
  130. $buttons[] =& $form->createElement('checkbox', 'multiselect2', null,
  131.                                    'fruit list dual select');
  132. $form->addGroup($buttons);
  133.  
  134. if (count($defaults) > 0) {
  135.     $form->setDefaults($defaults);
  136. }
  137. ?>
  138. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  139.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  140. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  141. <head>
  142. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  143. <title>HTML_QuickForm::advMultiSelect multiple example 2</title>
  144. <style type="text/css">
  145. <!--
  146. body {
  147.   background-color: #FFF;
  148.   font-family: Verdana, Arial, helvetica;
  149.   font-size: 10pt;
  150. }
  151.  
  152. table.pool1, table.pool2 {
  153.   border: 0;
  154.   background-color: #339900;
  155.   width:450px;
  156. }
  157. table.pool2 {
  158.   background-color: #CFC;
  159. }
  160. table.pool1 th, table.pool2 th {
  161.   font-size: 80%;
  162.   font-style: italic;
  163.   text-align: left;
  164. }
  165. table.pool1 td, table.pool2 td {
  166.   vertical-align: top;
  167. }
  168. table.pool1 select, table.pool2 select {
  169.   color: white;
  170.   background-color: #006600;
  171. }
  172.  
  173. .inputCommand {
  174.     background-color: #d0d0d0;
  175.     border: 1px solid white;
  176.     width: 9em;
  177.     margin-bottom: 2px;
  178. }
  179. <?php
  180. if (!isset($_POST['multiselect1'])) {
  181.     echo $ams1->getElementCss();
  182. }
  183. if (!isset($_POST['multiselect2'])) {
  184.     echo $ams2->getElementCss();
  185. }
  186. ?>
  187.  -->
  188. </style>
  189. <script type="text/javascript" src="qfamsHandler.js"></script>
  190. <script type="text/javascript">
  191. <!--
  192. window.qfamsName = new Array();
  193. window.qfamsName[0] = 'cars';
  194. window.qfamsName[1] = 'fruit';
  195. window.addEventListener('load', qfamsInit, false);
  196. //-->
  197. </script>
  198. </head>
  199. <body>
  200. <?php
  201. if ($form->validate()) {
  202.     $clean = $form->getSubmitValues();
  203.  
  204.     echo '<pre>';
  205.     print_r($clean);
  206.     echo '</pre>';
  207. }
  208. $form->display();
  209. ?>
  210. </body>
  211. </html>
HTML_QuickForm_advmultiselect : La Référence v 1.4.0 : 9 Juin 2007
Précédent  Niveau supérieur  
Utilisation avec un moteur de gabarit   Sommaire