iOS Style Wheel Picker In jQuery - Simple Wheel
| File Size: | 13.1 KB |
|---|---|
| Views Total: | 2962 |
| 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.
