Self-developed Perfect touch screen Web copy app pop-up scroll list selector/date Selector

Mobile web App in the use of the drop-down list, the traditional drop-down list to use the experience is very bad, generally do a little better interactive interface will not directly use the drop-down list, so the app's native drop-down list is the pop-up list selection, Web-based app from the experience should certainly be made that way, Some time ago in the development of Web version of the app encountered this demand, not only the date selector, data list, variable list selection, and so on drop-down list-type needs, online find to find only a better mobiscroll, but download more trouble, It feels strange that jquery.mobile and jeasyui.mobile do not provide this kind of control, do not know why? Although I do not specialize in front-end development, but almost all-round I think it is not difficult to develop it, stayed at home for a night try several ways to finally find an almost perfect method! In the subsequent use of continuous improvement, now publicly available to the vast number of programmers. First Look at:

Because the scroll of this control is using the div native scrolling method, the touch screen can have the inertia scrolling effect, but also realizes the mouse can operate, but does not realize the inertia scrolling effect. Because this control is mainly for touch screen, so the touch screen is perfect, I also lazy mouse version of the special effects. This control has been encapsulated into a jquery plug-in, no border, 100% wide, easy to use, such as after the pop-up window is the effect.

Here's how to use the code:

1234567891011121314

$("#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);    }});

Use the full use of pop-up code as follows, the effect is like:

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647

<!-- 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() {         //对象型数据          vardata = [];          for(vari = 0; i < 100; i++) {              varm = {};              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>

　　

You can also use this:

123456789101112131415161718192021

//字符串数据vardata1 = [];for (vari = 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();});

If you want a 1.3-dimensional effect, add the style directly:

12345678910111213141516

#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+*/}

　　

Demo example full code file:

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

Self-developed Perfect touch screen Web copy app pop-up scroll list selector/date Selector