QTYBox demo

QTYBox testing sandbox

by tnyari

HTML

<script src="https://raw.github.com/tnyari/QTYBox/master/Source/qtybox.js"></script>
<b>Simple quantity box</b></br>

<div class="QTYBox">
  <label for="quantity_1">Quantity:</label>
  <input type="text" name="quantity_1" id="quantity_1" />
</div>
</br></br>
<b>Event</b>
</br>
<div class="QTYBox">
  <label for="quantity_2">Quantity:</label>
  <input type="text" name="quantity_2" id="quantity_2" />
</div>
</br></br>

<b>Styling</b>
</br>
<div class="QTYBox2">
  <label for="quantity_3">Quantity:</label>
  <input type="text" name="quantity_3" id="quantity_3" />
</div>
</br></br>
<div class="QTYBox3">
  <label for="quantity_4">Quantity:</label>
  <input type="text" name="quantity_4" id="quantity_4" />
</div>
</br></br>
<b>Create with JS</b>
</br>
<div id="container"></div>
</br></br>

<b>Your birthdate</b>
</br>
<div id="date-container"></div>

CSS

.QTYBox{ 
      float:left; 
      margin-left:5px;
   }
   
   .QTYBox input{ 
      float:left; 
      width:20px;
      height:18px;
      -moz-border-radius: 3px 0px 0px 3px; 
      -webkit-border-radius: 3px 0px 0px 3px;
      border-radius: 3px 0px 0px 3px; 
      -moz-background-clip: padding; 
      -webkit-background-clip: padding-box; 
      background-clip: padding-box;
      border:1px solid #CCC; 
      text-align:right;
      font-family: Arial,Helvetica,sans-serif;
      font-size: 12px;
      vertical-align: middle;
   }     
   
    
   
   .QTYBox .arrowcontainer{ 
       float:left; 
       width:15px; 
       height:18px; 
       background-color:#F2F2F2;   
       border: 1px solid #D5D5D5;
       border-left:none;
       -moz-border-radius: 0px 3px 3px 0px!important; 
       -webkit-border-radius: 0px 3px 3px 0px!important;
       border-radius: 0px 3px 3px 0px!important; 
       -moz-background-clip: padding; 
       -webkit-background-clip: padding-box; 
       background-clip: padding-box;
   }
   
   .QTYBox .arrowcontainer div { 
      cursor:pointer; 
      width:15px; 
      height:9px;
   }
   
   .QTYBox .up,.QTYBox .down,.QTYBox .up_h,.QTYBox .down_h,.QTYBox .up_c,.QTYBox .down_c{background-image:...

JavaScript

new QTYBox('quantity_1');

new QTYBox('quantity_2',{
            onChange: function(qtybox){
                alert('You changed!');
            },
            onIncrase:function(qtybox){
                alert('You clicked Incrase');
            },
            onDecrase:function(qtybox){
                alert('You clicked Decrase');
            }    
                
        });

new QTYBox('quantity_3');

new QTYBox('quantity_4',{place:'before'});

for (i=1;i<6;i=i+1){
        $('container').appendChild(new QTYBox('qty_'+i,{initValue:i,incValue:i,minValue:i,maxValue:i*10} ));    
    
}



var date = new Date();
        $('date-container').appendChild(new QTYBox('date-select-year',{initValue:date.get('year'),incValue:1,minValue:date.get('year')-90,maxValue:date.get('year')} ));
        $('date-container').appendChild(new QTYBox('date-select-month',{initValue:date.get('month'),incValue:1,minValue:1,maxValue:12} ));
        $('date-container').appendChild(new QTYBox('date-select-day',{initValue:date.get('day'),incValue:1,minValue:1,maxValue:31} ));