dojox/mobile/ValuePicker

Authors: Yoshiroh Kamiyama
Developers:Yoshiroh Kamiyama
since:V1.8

Introduction

ValuePicker is a widget for selecting values. The values can be selected by using the Plus or Minus buttons, or by entering the value directly into the input field. This type of value picker is typically seen on Android devices.

ValuePicker.png

Examples

Declarative example

require([
    "dojox/mobile/parser",
    "dojox/mobile/ValuePicker"
]);
<div id="view1" data-dojo-type="dojox/mobile/View" selected="true">
    <h1 data-dojo-type="dojox/mobile/Heading">Custom ValuePicker</h1>
    <div id="spin1" data-dojo-type="dojox/mobile/ValuePicker">
     <div data-dojo-type="dojox/mobile/ValuePickerSlot"
         labels="['A','B','C','D','E','F','G','H','I','J','K']"
         style="text-align:center;width:40px;"></div>
     <div data-dojo-type="dojox/mobile/ValuePickerSlot"
         labelFrom="3000" labelTo="3100"
         style="width:70px;"></div>
     <div data-dojo-type="dojox/mobile/ValuePickerSlot"
         labelFrom="0" labelTo="9"
         style="width:50px;"></div>
     <div data-dojo-type="dojox/mobile/ValuePickerSlot"
         labels="['pt','px','cm']"
         style="width:50px;"></div>
    </div>
</div>

Programmatic example

require([
    "dojo/ready",
    "dijit/registry",
    "dojox/mobile/ValuePicker",
    "dojox/mobile/ValuePickerSlot",
    "dojox/mobile/parser"
], function(ready, registry, ValuePicker, ValuePickerSlot){
  ready(function(){
    var view = registry.byId("view1");
    var widget = new ValuePicker({id:"spin1"});
    widget.placeAt(view.containerNode);
    widget.startup();
    var slot1 = new ValuePickerSlot({
      labels:['A','B','C','D','E','F','G','H','I','J','K','L','M',
              'N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
      style:{textAlign:"center", width:"40px"}});
    widget.addChild(slot1);

    var slot2 = new ValuePickerSlot({labelFrom:3000, labelTo:3100, style:{width:"70px"}});
    widget.addChild(slot2);

    var slot3 = new ValuePickerSlot({labelFrom:0, labelTo:9, style:{width:"30px"}});
    widget.addChild(slot3);

    var slot4 = new ValuePickerSlot({labels:['pt','px','cm'], style:{width:"50px"}});
    widget.addChild(slot4);
  });
});