iOS Style Wheel Picker In jQuery - Simple Wheel

iOS Style Wheel Picker In jQuery - Simple Wheel
File Size: 13.1 KB
Views Total: 29
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

A simple and lightweight wheel picker plugin that enables the user to select a value from a scrolling list just like the picker component in iOS.

See Also:

How to use it:

1. Include jQuery library and the Simple Wheel plugin's files on the page.

<!-- jQuery -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<!-- Simple Wheel Plugin -->
<link rel="stylesheet" href="/path/to/css/simple-wheel.min.css" />
<script src="/path/to/js/simple-wheel.min.js"></script>

2. Create a single wheel picker from an HTML unordered list.

<div id="single" class="simple-wheel">
  <ul>
    <li>JavaScript</li>
    <li>HTML</li>
    <li>CSS</li>
    <li>Ruby</li>
    <li>Golang</li>
    <li>PHP</li>
    <li>Python</li>
  </ul>
</div>
__SW__.selectListItemForIndex({
  wheel: 'single',
  index: 3, // select the 4th item on page load
});

3. Fire an event when you pick a value.

<div id="result_single">
  selected: <span></span>
</div>
__SW__.selectListItemForIndex({
  wheel: 'single',
  fireEventSelect: true
});
const single_wheel = document.getElementById('single');
single_wheel.addEventListener("select", function(e){
  selectedItem = __SW__.getIndexAndValOfSelectedListItem(e.target);
  $('#result_single span').text(`[${selectedItem.index}] ${selectedItem.value}`);
});

4. Create a double wheel picker. Ideal for date or time picker.

<div id="group" class="simple-wheel-group">
  <div id="hour" class="simple-wheel">
    <ul>
      <li>0</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li class="selected">10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li>20</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
    </ul>
  </div>
  <div id="separator" class="simple-wheel-separator">:</div>
  <div id="minute" class="simple-wheel">
    <ul>
      <li>00</li>
      <li>10</li>
      <li>20</li>
      <li class="selected">30</li>
      <li>40</li>
      <li>50</li>
    </ul>
  </div>
</div>
<div id="result_hour">
  selected hour: <span></span>
</div>
<div id="result_minute">
  selected minute: <span></span>
</div>
$('#group .simple-wheel').on('select',function(e){
  selectedItem = __SW__.getIndexAndValOfSelectedListItem(e.target);
  const id = e.target.id
  const text = `[${selectedItem.index}] ${selectedItem.value}`;
  $(`#result_${id} span`).text(text);
});

5. Create an automatic wheel picker. Ideal for a digtal clock.

<div id="clock" class="simple-wheel-group">
  <div id="c_hour" class="simple-wheel">
    <ul>
      <li>0</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li>20</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
    </ul>
  </div>
  <div class="simple-wheel-separator">h</div>
  <div id="c_min" class="simple-wheel">
    <ul>
      <li>00</li>
      <li>01</li>
      <li>02</li>
      <li>03</li>
      <li>04</li>
      <li>05</li>
      <li>06</li>
      <li>07</li>
      <li>08</li>
      <li>09</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li>20</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
      <li>24</li>
      <li>25</li>
      <li>26</li>
      <li>27</li>
      <li>28</li>
      <li>29</li>
      <li>30</li>
      <li>31</li>
      <li>32</li>
      <li>33</li>
      <li>34</li>
      <li>35</li>
      <li>36</li>
      <li>37</li>
      <li>38</li>
      <li>39</li>
      <li>40</li>
      <li>41</li>
      <li>42</li>
      <li>43</li>
      <li>44</li>
      <li>45</li>
      <li>46</li>
      <li>47</li>
      <li>48</li>
      <li>49</li>
      <li>50</li>
      <li>51</li>
      <li>52</li>
      <li>53</li>
      <li>54</li>
      <li>55</li>
      <li>56</li>
      <li>57</li>
      <li>58</li>
      <li>59</li>
    </ul>
  </div>
  <div class="simple-wheel-separator">m</div>
  <div id="c_sec" class="simple-wheel">
    <ul>
      <li>00</li>
      <li>01</li>
      <li>02</li>
      <li>03</li>
      <li>04</li>
      <li>05</li>
      <li>06</li>
      <li>07</li>
      <li>08</li>
      <li>09</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li>20</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
      <li>24</li>
      <li>25</li>
      <li>26</li>
      <li>27</li>
      <li>28</li>
      <li>29</li>
      <li>30</li>
      <li>31</li>
      <li>32</li>
      <li>33</li>
      <li>34</li>
      <li>35</li>
      <li>36</li>
      <li>37</li>
      <li>38</li>
      <li>39</li>
      <li>40</li>
      <li>41</li>
      <li>42</li>
      <li>43</li>
      <li>44</li>
      <li>45</li>
      <li>46</li>
      <li>47</li>
      <li>48</li>
      <li>49</li>
      <li>50</li>
      <li>51</li>
      <li>52</li>
      <li>53</li>
      <li>54</li>
      <li>55</li>
      <li>56</li>
      <li>57</li>
      <li>58</li>
      <li>59</li>
    </ul>
  </div>
  <div class="simple-wheel-separator">s</div>
</div>
const clock_intv = setInterval(clock_adjust, 1000);
const clock_adjust = function(){
      const now = new Date();
      const hour = now.getHours();
      const min  = now.getMinutes();
      const sec  = now.getSeconds();

      __SW__.selectListItemForIndex({
        index: hour, 
        wheel: 'c_hour', 
        animate_dur: 1000, 
        fireEventSelect: false
      });
      __SW__.selectListItemForIndex({
        index: min, 
        wheel: 'c_min', 
        animate_dur: 1000, 
        fireEventSelect: false
      });
      __SW__.selectListItemForIndex({
        index: sec, 
        wheel: 'c_sec', 
        animate_dur: 300, 
        fireEventSelect:f alse
      });
}

This awesome jQuery plugin is developed by MKOSAKA. For more Advanced Usages, please check the demo page or visit the official website.