PEAR logo

HTML_QuickForm_advmultiselect : La Référence

Utilisation améliorée
Précédent  Chapitre 9. Exemples  Suivant


Utilisation améliorée

Figure 9.2. Personnalisation avec un simple gabarit

Personnalisation avec un simple gabarit

Dans cet exemple, voici nos objectifs :

  • changer la position des bouttons (add, remove). Déplacer aux pieds des listes.
  • centrer les entêtes aux sommets des listes.
  • définir une visibilité de 5 occurences au lieu des 10 par défaut.
  • agrandir la largeur des listes à 300 pixels. Par défaut la largeur est seulement de 100 pixels.
  • changer la couleur des différents éléments.

Exemple 9.2. Votre premier gabarit

  1. <?php
  2. /**
  3. * Custom advMultiSelect HTML_QuickForm element
  4. * using stylesheet rules selectors and a template.
  5. *
  6. * The template allows to add label as headers of dual select box
  7. * and moves the button to another location (below each select box).
  8. *
  9. * @version    $Id: qfams_custom_1.php,v 1.3 2007/01/05 15:35:33 farell Exp $
  10. * @author     Laurent Laville <pear@laurent-laville.org>
  11. * @package    HTML_QuickForm_advmultiselect
  12. * @subpackage Examples
  13. * @access     public
  14. * @example    examples/qfams_custom_1.php
  15. *             qfams_custom_1 source code
  16. * @link       http://www.laurent-laville.org/img/qfams/screenshot/custom1.png
  17. *             screenshot (Image PNG, 677x197 pixels) 4.80 Kb
  18. */
  19.  
  20. require_once 'HTML/QuickForm.php';
  21. require_once 'HTML/QuickForm/advmultiselect.php';
  22.  
  23. $form = new HTML_QuickForm('amsCustom1');
  24. $form->removeAttribute('name');        // XHTML compliance
  25.  
  26. $fruit_array = array(
  27.     'apple'     =>  'Apple',
  28.     'orange'    =>  'Orange',
  29.     'pear'      =>  'Pear',
  30.     'banana'    =>  'Banana',
  31.     'cherry'    =>  'Cherry',
  32.     'kiwi'      =>  'Kiwi',
  33.     'lemon'     =>  'Lemon',
  34.     'lime'      =>  'Lime',
  35.     'tangerine' =>  'Tangerine',
  36. );
  37.  
  38. // rendering with QF renderer engine and template system
  39. $form->addElement('header', null, 'Advanced Multiple Select: custom layout ');
  40.  
  41. $ams =& $form->addElement('advmultiselect', 'fruit', null, $fruit_array,
  42.                            array('size' => 5,
  43.                                  'class' => 'pool', 'style' => 'width:300px;'
  44.                                 )
  45. );
  46. $ams->setLabel(array('Fruit:', 'Available', 'Selected'));
  47. $ams->setButtonAttributes('add',    array('value' => 'Add >>',
  48.                                            'class' => 'inputCommand'
  49. ));
  50. $ams->setButtonAttributes('remove', array('value' => '<< Remove',
  51.                                            'class' => 'inputCommand'
  52. ));
  53. $template = '
  54. <table{class}>
  55. <!-- BEGIN label_2 --><tr><th align="center">{label_2}</th><!-- END label_2 -->
  56. <!-- BEGIN label_3 --><th align="center">{label_3}</th></tr><!-- END label_3 -->
  57. <tr>
  58.   <td>{unselected}</td>
  59.   <td>{selected}</td>
  60. </tr>
  61. <tr>
  62.   <td align="center">{add}</td>
  63.   <td align="center">{remove}</td>
  64. </tr>
  65. </table>';
  66. $ams->setElementTemplate($template);
  67.  
  68. if (isset($_POST['fruit'])) {
  69.     $form->setDefaults(array('fruit' => $_POST['fruit']));
  70. }
  71.  
  72. $form->addElement('submit', 'send', 'Send');
  73.  
  74. ?>
  75. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  76.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  77. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  78. <head>
  79. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  80. <title>HTML_QuickForm::advMultiSelect custom example 1</title>
  81. <style type="text/css">
  82. <!--
  83. body {
  84.   background-color: #FFF;
  85.   font-family: Verdana, Arial, helvetica;
  86.   font-size: 10pt;
  87. }
  88.  
  89. table.pool {
  90.   border: 0;
  91.   background-color: lightyellow;
  92. }
  93. table.pool th {
  94.   font-size: 80%;
  95.   font-style: italic;
  96.   text-align: center;
  97. }
  98. table.pool select {
  99.   background-color: lightblue;
  100. }
  101.  
  102. .inputCommand {
  103.     background-color: #d0d0d0;
  104.     border: 1px solid #7B7B88;
  105.     width: 7em;
  106.     margin-bottom: 2px;
  107. }
  108.  -->
  109. </style>
  110. <?php echo $ams->getElementJs(false); ?>
  111. </head>
  112. <body>
  113. <?php
  114. if ($form->validate()) {
  115.     $clean = $form->getSubmitValues();
  116.  
  117.     echo '<pre>';
  118.     print_r($clean);
  119.     echo '</pre>';
  120. }
  121. $form->display();
  122. ?>
  123. </body>
  124. </html>
HTML_QuickForm_advmultiselect : La Référence v 1.4.0 : 9 Juin 2007
Précédent  Niveau supérieur  Suivant
Chapitre 9. Exemples  Sommaire  Sélections avancées