自已开垦完美的触摸屏网页版仿app弹窗型滚动列表选拔器/日期选用器

选拔弹窗完整的施用形式代码如下,效果便是上航海用体育场合的规范:

 

手提式有线电话机端网页版app在动用下拉列表时,古板的下拉列表使用起来体验十二分倒霉,一般做的稍好一些的竞相效率分界面都不会一向动用下拉列表,所以app的原生下拉列表都以弹窗列表选取,网页型app从使用体验上来当然也相应做成那样,近日在支付网页版app时就碰到这种须要,不仅仅是日期选择器,数据列表、变量列表选用等等下拉列表型要求都亟需,互联网找来找去只找到一款比较好的mobiscroll,不过下载相比较麻烦,感到相比奇怪的是jquery.mobile、jeasyui.mobile都未曾提供这种控件,不亮堂为什么?尽管自身不是专做前端开荒,不过差不离全能型的小编觉的轻松开辟吧,在家熬了一夜试了两种艺术终于找到一种大约周到的主意!在后来的应用中不断完善,以后公然提需求周边技术员。先看看效果图:

自已支付完美的触摸屏网页版仿app弹窗型滚动列表接纳器/日期选择器,app弹窗

手提式有线电话机端网页版app在接纳下拉列表时,守旧的下拉列表使用起来体验十二分不好,一般做的稍好一些的并行功用界面都不会向来利用下拉列表,所以app的原生下拉列表都以弹窗列表选用,网页型app从使用体验上来当然也相应做成这样,这两日在支付网页版app时就超过这种要求,不仅仅是日期采用器,数据列表、变量列表选拔等等下拉列表型必要都亟需,互连网找来找去只找到一款相比好的mobiscroll,不过下载比较坚苦,以为比较奇异的是jquery.mobile、jeasyui.mobile都未曾提供这种控件,不精通为啥?就算自个儿不是专做前端开荒,可是大致全能型的作者觉的轻易开采吧,在家熬了一夜试了二种形式终于找到一种大概全盘的点子!在新生的应用中不断完善,现在精晓提供给附近技术员。先看看效果图:

澳门新萄京8522 1 澳门新萄京8522 2

 

是因为那控件的轮转是行使div原生滚动方法,触摸屏使用时方可有惯性滚动效应,也促成了鼠标能够操作,可是尚未兑现惯性滚动作效果应。由于此控件首借使面向触摸屏的,所以嘛触摸屏完美就好了,笔者也懒的弄鼠标版的特效了。此控件已打包成jquery插件,未有边框,百分之百宽,使用很便利,举例套入弹窗后就是上海体育地方效果。

代码应用办法如下:

          $("#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">          //字符串数据
          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+*/
} 

  澳门新萄京8522 3

 

 演示例子全代码文件:

 

手提式有线电电话机端网页版app在选拔下拉列表时,古板的下拉列表使用起…

你也许感兴趣的稿子:

  • 简短美貌的js弹窗可大肆拖拽且包容大多数浏览器
  • 纯js的右下角弹窗实例
  • JS实现一遍性弹窗的章程【刷新后不弹出】
  • JS+CSS3构建酷炫的弹窗效果
  • js调用父框架函数与弹窗调用父页面函数的简练方法
  • 有关vue.js弹窗组件的知识点总计
  • 澳门新萄京8522,JavaScript贯彻广告弹窗效果
  • 简述JS浏览器的二种弹窗

是因为那控件的滚动是运用div原生滚动方法,触摸屏使用时方可有惯性滚动作效果应,也完毕了鼠标能够操作,不过并没有落到实处惯性滚动作效果应。由于此控件主假若面向触摸屏的,所以嘛触摸屏完美就好了,作者也懒的弄鼠标版的特效了。此控件已打包成jquery插件,未有边框,百分之百宽,使用很有利,举个例子套入弹窗后正是上海教室效果。

 

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

 演示例子全代码文件:

动用弹窗完整的采用办法代码如下,效果就是上海图书馆的标准:

鉴于那控件的轮转是运用div原生滚动方法,触摸屏使用时能够有惯性滚动作效果应,也兑现了鼠标可以操作,可是未有完结惯性滚动效应。由于此控件主要是面向触摸屏的,所以嘛触摸屏完美就好了,小编也懒的弄鼠标版的特效了。此控件已打包成jquery插件,没有边框,百分之百宽,使用很方便,比方套入弹窗后正是上海教室效果。

 如若想要一点三维职能,直接加样式就可以:

 假若想要一点三个维度功用,间接加样式就可以:

手提式有线电话机端网页版app在选择下拉列表时,守旧的下拉列表使用起来体验十三分倒霉,一般做的稍好一些的相互功能分界面都不会直接采取下拉列表,所以app的原生下拉列表都是弹窗列表采用,网页型app从利用体验上来当然也应该做成那样,那二日在开采网页版app时就碰见这种需求,不仅仅是日期选用器,数据列表、变量列表选取等等下拉列表型须求都亟需,网络找来找去只找到一款相比较好的mobiscroll,但是下载相比较费心,感到相比较奇怪的是jquery.mobile、jeasyui.mobile都未有提供这种控件,不晓得怎么?即使作者不是专做前端开辟,可是差不离全能型的小编觉的简易开垦吧,在家熬了一夜试了二种方式终于找到一种大概全盘的秘技!在后来的利用中不断完善,以往掌握提须求相近程序猿。

<!-- 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> 

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图