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

首先上最终效果图：

一款界面看似简单的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/10return 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文件改咯，相信对于我们这些天朝精英来说肯定没什么难度。

数值选择器之mobiscroll的免费使用相关推荐

基础html交代选择器,html 选择器之基础选择器
我把CSS选择器分开成三部分,第一部分是我们常用的部分,我把他叫做基本选择器:第二部分我把他称作是属性选择器,第三部分我把他称作伪类选择器一.基础选择器 1. 通配符(*):选中所有的元素 2.元素 ...
基础选择器之通配符选择器（CSS、HTML）
基础选择器之通配符选择器(CSS.HTML) <!DOCTYPE html> <html lang="en"> <head><meta c ...
基础选择器之id选择器(CSS、HTML)
基础选择器之id选择器(CSS.HTML) <!DOCTYPE html> <html lang="en"> <head><meta ch ...
CSS基础选择器之标签选择器(CSS、HTML)
CSS基础选择器之标签选择器(CSS.HTML) <!DOCTYPE html> <html lang="en"> <head><meta ...
基础选择器之id选择器
id选择器可以为标有特定id的HTML元素指定特定样式. HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义. #id名{属性1:属性值1:.... } 例如 ...
file input 移动端选择文件夹_免费 |《MNN For Swift》移动端机器学习实战课程
自 2019 年 4 月在 Github 开源以来,淘系技术部-端智能团队自研的 MNN 推理引擎,因为其高性能.易用性以及优秀兼容性受到不少开发者的支持和喜爱.我们也把这份支持化作不断前进的动力,仅 ...
微商城分销系统的怎么选择_有没有免费开源支持多端的_OctShop
说到微商城分销系统,经常刷微信朋友圈,微信群的朋友并不陌生,最初从卖红枣的,面膜的,发展到后来卖厨房用纸的,服装的.一批批微商城分销的链接,一张张的二维码名片充斥着朋友圈,很多朋友对此感到不甚厌烦的同 ...
移动端选择插件mobiscroll的使用demo
一开始是弄个日期选择的插件,网上看到这个mobiscroll这个插件,然后各种下各种找demo,最后自己研究了一天下面把自己项目的demo拔出来分享给大家(以及文件下载),多多海涵,如果大家看了我的这 ...
深入学习jQuery选择器系列第四篇——过滤选择器之属性选择器
前面的话属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,对应于CSS中的属性选择器.属性过滤选择器可分为简单属性选择器.具体属性选择器和条件属性选择器三种.本文将详细该部分内容简单属性选 ...

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

数值选择器之mobiscroll的免费使用相关推荐

最新文章

热门文章