自已開發完美的觸摸屏網頁版仿app彈窗型滾動列表選擇器/日期選擇器

手機端網頁版app在使用下拉列表時，傳統的下拉列表使用起來體驗非常不好，一般做的稍好一點的交互功能界面都不會直接使用下拉列表，所以app的原生下拉列表都是彈窗列表選擇，網頁型app從使用體驗上來當然也應該做成那樣，前段時間在開發網頁版app時就遇到這種需求，不僅是日期選擇器，數據列表、變量列表選擇等等下拉列表型需求都需要，網上找來找去只找到一款比較好的mobiscroll，不過下載比較麻煩，感覺比較奇怪的是jquery.mobile、jeasyui.mobile都沒有提供這種控件，不知道為什么？雖然我不是專做前端開發，不過幾乎全能型的我覺的不難開發吧，在家熬了一夜試了幾種方法終於找到一種幾乎完美的方法！在后來的使用中不斷完善，現在公開提供給廣大程序員。先看看效果圖：

 

 

由於這控件的滾動是使用div原生滾動方法，觸摸屏使用時可以有慣性滾動效果，也實現了鼠標可以操作，不過沒有實現慣性滾動效果。由於此控件主要是面向觸摸屏的，所以嘛觸摸屏完美就好了，我也懶的弄鼠標版的特效了。此控件已封裝成jquery插件，沒有邊框，100%寬，使用很方便，比如套入彈窗后就是上圖效果。

代碼使用方法如下：

          $("#scrollbox").EasyScrollBox({
              fontSize: 32,
              fontFamily: '',
              color: '#000',
              lineHeight: 1.5,
              spaceRows: 2,
              value: '4',
              data: data1,
              textFiled: 'txt',
              valueFiled: 'id',
              onSelected: function (index, value) {
                  $("#Text1").val(value);
              }
          });

使用彈窗完整的使用方法代碼如下，效果就是上圖的樣子：

<!-- ui-dialog -->

<div id="dialog" class="easyui-dialog" style="padding:20px 6px;width:80%;" data-options="inline:true,modal:true,closed:true,title:'設置數值'">
	<div id="scrollbox"></div>
    <div class="dialog-button">
				<a href="javascript:void(0)" class="easyui-linkbutton" style="width:100%;height:35px" onclick="$('#dialog').dialog('close')">確 定</a>
	</div>
</div>


  <script type="text/javascript">

      $(function () {
         //對象型數據
          var data = [];
          for (var i = 0; i < 100; i++) {
              var m = {};
              m.id = i;
              m.txt = "數據" + i;
              data.push(m);
          }

          $("#dialog").dialog();
          // Link to open the dialog
          $("#dialog-link").click(function (event) {
              $("#dialog").dialog("open").dialog('center');
              //重新賦值
              $("#scrollbox").EasyScrollBox({
                  fontSize: 32,
                  fontFamily: '',
                  color: '#000',
                  lineHeight: 1.5,
                  spaceRows: 2,
                  value: '4',
                  data: data,
                  textFiled: 'txt',
                  valueFiled: 'id',
                  onSelected: function (index, value) {
                      $("#Text1").val(value.id);
                  }
              });

              event.preventDefault();
          });

      });
  </script> 

　　

也可以這么用：

 

          //字符串數據
          var data1 = [];
          for (var i = 0; i < 100; i++) {
              data1.push(i);
          }
          $("#scrollbox").EasyScrollBox({
              fontSize: 32,
              fontFamily: '',
              color: '#000',
              lineHeight: 1.5,
              spaceRows: 2,
              value: '4',
              data: data1,
              onSelected: function (index, value) {
                  $("#Text1").val(value);
              }
          });
          $("#dialog-link1").click(function (event) {
              $("#dialog").dialog("open").dialog('center');
              event.preventDefault();
          });

　如果想要一點三維效果，直接加樣式即可：

#cover_top_EasyScrollBox{ 
background: -ms-linear-gradient(top, #000000,  #ccc);        /* IE 10 */
background:-moz-linear-gradient(top,#000000,#ccc);/*火狐*/ 
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#000000), to(#ccc));/*谷歌*/ 
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#ccc));      /* Safari 4-5, Chrome 1-9*/
background: -webkit-linear-gradient(top, #000000, #ccc);   /*Safari5.1 Chrome 10+*/
background: -o-linear-gradient(top, #000000, #ccc);  /*Opera 11.10+*/
} 
#cover_bottom_EasyScrollBox{ 
background: -ms-linear-gradient(top, #ccc,  #000000);        /* IE 10 */
background:-moz-linear-gradient(top,#ccc,#0000ff);/*火狐*/ 
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#ccc), to(#000000));/*谷歌*/ 
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccc), to(#000000));      /* Safari 4-5, Chrome 1-9*/
background: -webkit-linear-gradient(top, #ccc, #000000);   /*Safari5.1 Chrome 10+*/
background: -o-linear-gradient(top, #ccc, #000000);  /*Opera 11.10+*/
} 

　　

 

使用非常簡單，必須引用的框架jquery.min.js，我的框架控件：EasyScrollBox.js。

 演示例子全代碼文件：

 http://files.cnblogs.com/files/easywebfactory/EasyScrollBox_demo.rar