Bonjour,

Je bosse actuellement sur un projet ou on utilise JQuery.
Et je demandais comment réaliser un champ input de ce type :

Oui je sais! Je suis trop fort en graphisme

Si vous avez une idée de comment réaliser un tel élément, je suis preneur

J'ai cherché sur le net avant de poser ma question...
Mais tout ce que j'ai trouvé c'est ça :
http://davidwalsh.name/input-incrementer
Et c'est pas top du tout

Merci d'avance !

<input type="text" value="0" id="inc" />
<img src="up.jpg" alt="+" onclick="incInput(1);" />
<img src="down.jpg" alt="-" onclick="incInput(-1);" />

<script type="text/javascript">
	function incInput(i) {
		var value = parseInt(document.getElementById('inc').value, 10);
		value += i;
		
		document.getElementById('inc').value = value;
	}
</script>

Et après tu te démerdes coté CSS.

hmm tout simplement

Bon le coté CSS je vais voir ce que je peux faire.

Merci en tout cas pour ta proposition.

Pense à mettre ton sujet en résolu !

Hmm
Je le mettrais en résolu si j'arrive à faire précisément ce que je veux

Surtout que je génère mes formulaires avec Zend_Form (Zend Framework), ce qui complique un peu la tache

Mais si je trouve je ferais comme pour chaque topic que j'ouvre, je donnerais le code que j'ai pondu

Bon c'est un peu à la sauvage, et seuls ceux qui savent faire du PHP5 et se servir de Zend Framework sauront lire ce qui suit, mais bon j'ai promis de donner mon code, alors voilà :

<?php
require_once 'Zend/Form/Decorator/Abstract.php';

class forms_decorators_PlanifSpinner extends Zend_Form_Decorator_Abstract
{

 
    public function render($content)
    {
        $element = $this->getElement();
        if (!$element instanceof Zend_Form_Element) {
            return $content;
        }
        if (null === $element->getView()) {
            return $content;
        }
		
        $name = $element->getName();
        $id = $element->getId();
        
        // On récupère la vue
        $view = $element->getView();
        // On récupère la valeur
        $value = $element->getValue();
       
       $disable = false; // à voir
       $escape = false;// à voir
       $label_attribs  = $element->getAttribs();
		        
        $form_xhtml = '';
        // formCheckbox($name, $value, $attribs, $options)
        $form_xhtml .= '<table cellpadding="0" cellspacing="0" border="0"><tr>';

            // is it disabled?
            $disabled = '';
            if (true === $disable) {
                $disabled = ' disabled="disabled"';
            } else {
                $disabled = ' disabled="disabled"';
            }
        $fc = Zend_Controller_Front::getInstance();
            
        $size = ' size="'.'2'.'"';
		$posX = strpos($element->getLabel(),":X:");
		$checkedRadio = (! empty($value))?' checked="checked"':'';
        $form_xhtml .= '<td width="50px"><input type="radio" id="rad_xjs" '.$checkedRadio.' name="rad_xjours" value="' . $element->getLabel() . '"/></td><td><label'
                    . ' for="' . $id . '">'
                    . substr($element->getLabel(),0,$posX)
                    . '</label></td><td>'
                    . '<table cellpadding="0" margin="0" cellspacing="0" border="0">'
					. '<tr>'
                    . '<td rowspan="2"><input type="text"' 
                    . ' name="' . $name . '"' . $size
                    . ' id="' . $id . '"' //. $disabled
                    . ' value="' . $view->escape($value) . '"' 
                    . ' onclick="javascript:document.getElementById(\'rad_xjs\').checked=true"'
                    . '/></td>'
                    . '<td><img src="'.$fc->getBaseUrl().'/css/images/menu-expanded-top.png" onclick="javascript:document.getElementById(\''.$id.'\').value=Math.min(31, 1+document.getElementById(\''.$id.'\').value++);document.getElementById(\'rad_xjs\').checked=true;" style="font-size:7px;margin:0;padding:0;" /></td>'
					. '</tr>'
					. '<tr>'
					. '<td><img src="'.$fc->getBaseUrl().'/css/images/menu-expanded.png" onclick="javascript:document.getElementById(\''.$id.'\').value=Math.max(1, document.getElementById(\''.$id.'\').value-1);document.getElementById(\'rad_xjs\').checked=true;" style="font-size:7px;margin:0;padding:0;" /></td>'
					. '</tr>'
					. '</table><td>'
                    . '<label'
                    . ' for="' . $id . '">'
                    . substr($element->getLabel(),$posX+3)
                    . '</label></td>';
		$messageString = "";
    	if(in_array("isEmpty", $element->getErrors()))
        {
        	$messageString = '<div class="errors">Ce champ ne doit pas être vide</div>';
        }       
        $form_xhtml .= '</tr></table>' . $messageString;
 
        switch ($this->getPlacement()) {
            case (self::PREPEND):
                return $form_xhtml . $content;
            case (self::APPEND):
            default:
                return $content . $form_xhtml;
        }
    }
}