Choose Demo
Date & Time Calendar Range Select Numpad Color Listview Menustrip Rating Image Treelist Distance Speed Temperature Mass Force Timespan Timer Number Demo Apps
Mobiscroll
Mobiscroll Dark
iOS
iOS Classic
Android Holo
Android Holo Light
jQuery Mobile
Android
Bootstrap
Windows Phone
Windows Phone Light
Sense UI
Sense
Sense Dark
Inline
Modal
Bubble
Top
Bottom
English
Cestina
Chinese
Deutsch
English (UK)
Español
Français
Italiano
Japanese
Magyar
Nederlands
Norsk
Polski
Português Europeu
Pt. Brasileiro
Româna
Slovencina
Svenska
Türkçe
Русский
Русский (UA)
فارسی
No Device
iPhone
Android
Windows Phone
Blackberry
iPad Mini
Start FREE 15 Day Trial
Image / Image Only
What to do next?
Try the image in Your App
See demo on your phone

HTML

Copy to Clipboard
<ul id="demo" style="display:none">
    <li data-val="1">
      <img src="http://mobiscroll.com/content/img/fruit-1.png" />
    </li>
    <li data-val="2">
      <img src="http://mobiscroll.com/content/img/fruit-2.png" />
    </li>
    <li data-val="3">
      <img src="http://mobiscroll.com/content/img/fruit-3.png" />
    </li>
    <li data-val="4">
      <img src="http://mobiscroll.com/content/img/fruit-4.png" />
    </li>
    <li data-val="5">
      <img src="http://mobiscroll.com/content/img/fruit-5.png" />
    </li>
    <li data-val="6">
      <img src="http://mobiscroll.com/content/img/fruit-1.png" />
    </li>
    <li data-val="7">
      <img src="http://mobiscroll.com/content/img/fruit-2.png" />
    </li>
    <li data-val="8">
      <img src="http://mobiscroll.com/content/img/fruit-3.png" />
    </li>
    <li data-val="9">
      <img src="http://mobiscroll.com/content/img/fruit-4.png" />
    </li>
    <li data-val="10">
      <img src="http://mobiscroll.com/content/img/fruit-5.png" />
    </li>
    <li data-val="11">
      <img src="http://mobiscroll.com/content/img/fruit-1.png" />
    </li>
    <li data-val="12">
      <img src="http://mobiscroll.com/content/img/fruit-2.png" />
    </li>
    <li data-val="13">
      <img src="http://mobiscroll.com/content/img/fruit-3.png" />
    </li>
    <li data-val="14">
      <img src="http://mobiscroll.com/content/img/fruit-4.png" />
    </li>
    <li data-val="15">
      <img src="http://mobiscroll.com/content/img/fruit-5.png" />
    </li>
    <li data-val="16">
      <img src="http://mobiscroll.com/content/img/fruit-1.png" />
    </li>
    <li data-val="17">
      <img src="http://mobiscroll.com/content/img/fruit-2.png" />
    </li>
    <li data-val="18">
      <img src="http://mobiscroll.com/content/img/fruit-3.png" />
    </li>
    <li data-val="19">
      <img src="http://mobiscroll.com/content/img/fruit-4.png" />
    </li>
    <li data-val="20">
      <img src="http://mobiscroll.com/content/img/fruit-5.png" />
    </li>
</ul>

<button id="clear">Clear</button>
<button id="show">Show</button>

Javascript

Copy to Clipboard
$(function(){
    $('#demo').mobiscroll().image({
        theme: 'default',
        accent: ' ',
        lang: ' ',
        display: 'modal',
        animate: ' ',
        mode: 'scroller',
        labels: ['Select Favorite Fruit'],
        placeholder: 'Please Select ...',
        fixedWidth: 200,
        enhance: true
    });    

    $('#show').click(function(){
        $('#demo').mobiscroll('show');
        return false;
    });

    $('#clear').click(function () {
        $('#demo' + '_dummy').val('');
        return false;
    });    
});