数值选择器之mobiscroll的免费使用

最新推荐文章于 2019-07-09 17:45:19 发布

蓝色黄昏

最新推荐文章于 2019-07-09 17:45:19 发布

阅读量796

点赞数 1

分类专栏：前端 mobiscroll 文章标签： mobiscroll

本文链接：https://blog.csdn.net/m0_38002193/article/details/82661366

版权

前端同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

mobiscroll

1 篇文章 0 订阅

订阅专栏

首先上最终效果图：

一款界面看似简单的mobiscroll选择器，官网是需要收费的，网罗周遭资料和自己研究修改js源文件得到，在此提供所需的两个文件，自行根据需求修改，不需要任何费用，当然jquery文件就自行下载了，链接：https://pan.baidu.com/s/1-Fnhn6Fz-HuMc1ltAu1wIA 密码：383b。

忘了说还需要前端代码配合调用，贴一版：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />

		<title>兼容PC和移动设备</title>
	</head>
	<link rel="stylesheet" type="text/css" href="mobiscroll-2.13.2.full.min.css" />
	<!--此处ul为选择范围容器，存放选择内容-->
	<ul id="sex-list" style="display: none">
	</ul>

	<body>
		<li id="sex">
			<div class="mbase-menu-title">数字选择</div>
		</li>
		<script src="js/jquery.min.js"></script>
		<script src="mobiscroll-2.13.2.full.min.js"></script>
		<script type="text/javascript">
			
			function addnum() {
				for(var i = 1; i < 100; i++) {
					$("#sex-list").append(" <li>" + i + "</li>");
				}
			};
			$(function() {
				addnum();
				$("#sex").click(function() {
					var that = this;
					$("#sex-list").mobiscroll().treelist({
						theme: "android-ics",
						lang: "zh",
						display: 'bottom',
						inputClass: 'tmp',
						headerText: '总数量',
						onSelect: function(valueText) {
							var m = $(this).find("li").eq(valueText).html();
						}
					});
					$("input[id^=sex-list]").focus();
				});
			})
		</script>
		<center>
		</center>
	</body>

</html>

这是测试的时候写的，而在项目上面我则是把数值存放容器和触发事件用一个控件：

<input class="input_text" style="" id="zsl" type="text" name="title" onkeyup="value=value.replace(/[^\d]/g,'')" value="1" />

当然，前端js代码就相应修改：

$(function () {
    addnum();
    //总数量的选择
    $("#zsl").click(function () {
       
        var that = this;
        $("#zsl").mobiscroll().treelist({
            theme: "android-ics",
            lang: "zh",
            display: 'bottom',
            inputClass: 'input_text',
            headerText: '总数量',
            onSelect: function (valueText) {
                var m = $(this).find("li").eq(valueText).html();
            }
        });
        $("input[id^=zsl]").focus();
        //$("#zsl_dummy").css("border", "1px solid red");
    });
    AddClick();
  

});

我说一下这西洋插件的原理：在前端界面显示你所写的触发控件，在click之时他的源js会隐藏你写的控件，自动生成一个input控件，选择的内容会存放显示在新生成的控件上面，如果你要取出input值，它的ID命名规则就是:你自己写的控件的ID值+"_dummy",比如我上面自己写的控件input的ID值为zsl,那我如果要取出我所选择的数值，我就要用$("#zsl_dummy").val()才能取出，如果要修改input显示的默认值，除了在自己写的控件上默认值外，还需要为新生成的控件默认，那就需要在mobiscroll源js文件修改了，我已经做了标记，你可以在js代码里搜索以下文本：

  //此处设置新增input的默认属性--tim--2018/09/10
			return a("#" + x).remove(), s.showInput && (p = a('<input type="text" id="' + x + '" value="'+((x.indexOf("shul1")>-1)?1:0)+'" class="' + s.inputClass + '" placeholder="' + (s.placeholder || "") + '" readonly />').insertBefore(w), s.anchor = p, c.attachShow(p)), s.wheelArray || w.hide().closest(".ui-field-contain").trigger("create"), {

也可以搜索“_dummy”文本，只有两处，自行查看就应该找得到。

然后控件样式的话就自己到源css文件改咯，相信对于我们这些天朝精英来说肯定没什么难度。

蓝色黄昏

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
数值选择器之mobiscroll的免费使用

首先上最终效果图：一款界面看似简单的mobiscroll选择器，官网是需要收费的，网罗周遭资料和自己研究修改js源文件得到，在此提供所需的两个文件，自行根据需求修改，不需要任何费用，当然jquery文件就自行下载了，链接：https://pan.baidu.com/s/1-Fnhn6Fz-HuMc1ltAu1wIA 密码：383b。忘了说还需要前端代码配合调用，贴一版：...
复制链接

扫一扫