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

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.