首页>>表单>>jQuery移动端滑动刻度尺选择值(2020-05-28)

jQuery移动端滑动刻度尺选择值

jQuery移动端滑动刻度尺选择值
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="page" data-page='profile1'>  
  2.     <div class="page-main">  
  3.         <input type="hidden" name="first_screen" value="30##150##50">  
  4.         <div class="row">  
  5.             <label for="" class="label">您的年龄 <span class="number age-num" initial-value="12" value="30">30</span><span class="letter">岁</span></label>  
  6.             <div class="ruler ruler-age">  
  7.                 <div class="main" value="-1">  
  8.                     <ul data-initial='true'>  
  9.                         <li><span class="num">18</span></li>  
  10.                         <li><span class="num">19</span></li>  
  11.                         <li><span class="num">20</span></li>  
  12.                         <li><span class="num">21</span></li>  
  13.                         <li><span class="num">22</span></li>  
  14.                         <li><span class="num">23</span></li>  
  15.                         <li><span class="num">24</span></li>  
  16.                         <li><span class="num">25</span></li>  
  17.                         <li><span class="num">26</span></li>  
  18.                         <li><span class="num">27</span></li>  
  19.                         <li><span class="num">28</span></li>  
  20.                         <li><span class="num">29</span></li>  
  21.                         <li><span class="num">30</span></li>  
  22.                         <li><span class="num">31</span></li>  
  23.                         <li><span class="num">32</span></li>  
  24.                         <li><span class="num">33</span></li>  
  25.                         <li><span class="num">34</span></li>  
  26.                         <li><span class="num">35</span></li>  
  27.                         <li><span class="num">36</span></li>  
  28.                         <li><span class="num">37</span></li>  
  29.                         <li><span class="num">38</span></li>  
  30.                         <li><span class="num">39</span></li>  
  31.                         <li><span class="num">40</span></li>  
  32.                         <li><span class="num">41</span></li>  
  33.                         <li><span class="num">42</span></li>  
  34.                         <li><span class="num">43</span></li>  
  35.                         <li><span class="num">44</span></li>  
  36.                         <li><span class="num">45</span></li>  
  37.                         <li><span class="num">46</span></li>  
  38.                         <li><span class="num">47</span></li>  
  39.                         <li><span class="num">48</span></li>  
  40.                         <li><span class="num">49</span></li>  
  41.                         <li><span class="num">50</span></li>  
  42.                     </ul>  
  43.                 </div>  
  44.                 <div class="arrow"></div>  
  45.             </div>  
  46.         </div>  
  47.   
  48.         <div class="row">  
  49.             <label for="" class="label">您的身高 <span class="number height-num" initial-value="10" value="150">150</span><span class="letter">cm</span></label>  
  50.             <div class="ruler ruler-height">  
  51.                 <div class="main" value="-1">  
  52.                     <ul data-initial='true'>  
  53.                         <li><span class="num">140</span></li>  
  54.                         <li><span class="num">150</span></li>  
  55.                         <li><span class="num">160</span></li>  
  56.                         <li><span class="num">170</span></li>  
  57.                         <li><span class="num">180</span></li>  
  58.                         <li><span class="num">190</span></li>  
  59.                         <li><span class="num">200</span></li>  
  60.                     </ul>  
  61.                 </div>  
  62.                 <div class="arrow"></div>  
  63.             </div>  
  64.         </div>  
  65.   
  66.         <div class="row">  
  67.             <label for="" class="label">您的体重 <span class="number width-num" initial-value="8" value="50">50</span><span class="letter">kg</span></label>  
  68.             <div class="ruler ruler-weight">  
  69.                 <div class="main" value="0">  
  70.                     <ul data-initial='true'>  
  71.                         <li><span class="num">30</span></li>  
  72.                         <li><span class="num">35</span></li>  
  73.                         <li><span class="num">40</span></li>  
  74.                         <li><span class="num">45</span></li>  
  75.                         <li><span class="num">50</span></li>  
  76.                         <li><span class="num">55</span></li>  
  77.                         <li><span class="num">60</span></li>  
  78.                         <li><span class="num">65</span></li>  
  79.                         <li><span class="num">70</span></li>  
  80.                         <li><span class="num">75</span></li>  
  81.                         <li><span class="num">80</span></li>  
  82.                         <li><span class="num">85</span></li>  
  83.                         <li><span class="num">90</span></li>  
  84.                         <li><span class="num">95</span></li>  
  85.                         <li><span class="num">100</span></li>  
  86.                     </ul>  
  87.                 </div>  
  88.                 <div class="arrow"></div>  
  89.             </div>  
  90.         </div>  
  91.     </div>  
  92. </div>  

 


原文地址:http://www.freejs.net/article_biaodan_868.html