iOS Style Wheel Picker In jQuery - Simple Wheel
File Size: | 13.1 KB |
---|---|
Views Total: | 2398 |
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:
- iOS Style Spinner In JavaScript – SpinnerPickerJs
- iOS Style Picker View In Vanilla JavaScript – mobileSelect.js
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.