JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://dl.dropbox.com/u/22224/jsfiddle/mobiscroll.full.min.css">
<script src="http://dl.dropbox.com/u/22224/jsfiddle/mobiscroll.full.min.js"></script>
<div id="val"></div>
<div id="array"></div>
<div id="test" class="test"></div>
JavaScript
$("#test").scroller({ //ID of the div where I want the inline scroller to appear.
width: 81,// A specific width for each spinning wheel. If no width specified, width is auto sized to content.
display: "inline",// The other option is "modal". For "inline" simply create a DIV and give it an ID that matches the ID of the scroller.
showLabel: 'false',// Whether or not you want header labels for each column - boolean
mode: 'scroller',// Three modes. scroller, clickpick, and mixed
theme: 'ios',// Pre-built default styling themes for the look of the scroller. Supplied themes: 'android', 'android-ics', 'android-ics light', 'sense-ui', 'ios', 'jqm'. Custom themes are possible by prefixing any css class used in the scroller markup with the theme name, e.g.: .my-theme .dww { / My CSS / }, and set the theme option to 'my-theme'
wheels: [{ //Define custom wheels with custom values as an array.
'': {
1: '1 tab',
2: '2 tab'
},
' ': {
PO: 'PO'
},
' ': {
bid: 'bid',
daily: 'daily',
tid: 'tid'
},
' ': {
30: '30',
60: '60',
90: '90',
120: '120',
180: '180',
240: '240'
},
' ': {
11: '1',
22: '2',
33: '3',
44: '4',
55: '5'
}
}],
onChange: function(v, inst) {
$('#val').text(v);
$('#array').text(inst.temp);
}
});