移动端选择插件mobiscroll的使用demo

最新推荐文章于 2024-08-11 18:18:18 发布

叫我梁大侠

最新推荐文章于 2024-08-11 18:18:18 发布

阅读量3.8w

点赞数 8

分类专栏：技术交流文章标签： mobiscroll 日期选择插件移动端插件文本选择插件

本文链接：https://blog.csdn.net/enjoy_gw/article/details/52779852

版权

本文介绍了移动端插件mobiscroll的使用，包括日期选择和文本选择的demo。通过HTML和JS代码展示其功能，如日期选择器和treelist，适合于需要强大选择功能的场景。提供了相关代码示例和资源下载链接。

摘要由CSDN通过智能技术生成

一开始是弄个日期选择的插件，网上看到这个mobiscroll这个插件，然后各种下各种找demo，最后自己研究了一天下面把自己项目的demo拔出来分享给大家（以及文件下载），多多海涵，如果大家看了我的这文章有更好的写法还望赐教~

首先是常用的日期使用：

HTML部分：

<li id="birthday">
    <div class="mbase-menu-title">生日</div>
    <div
        class="mbase-menu-txt">未设置</div>
    <div class="clear"></div>
</li>

JS部分：

$("#birthday").mobiscroll().date({
            theme: "android-ics",
            lang: "zh",
            display: 'bottom',
            dateFormat: 'yy-mm-dd', //返回结果格式化为年月格式
            // wheels:[], 设置此属性可以只显示年月，此处演示，就用下面的onBeforeShow方法,另外也可以用treelist去实现
            //onBeforeShow: function (inst) { inst.settings.wheels[0].length>2?inst.settings.wheels[0].pop():null; }, //弹掉“日”滚轮
            headerText: function (valueText) { //自定义弹出框头部格式
                array = valueText.split('-');
                return array[0] + "年" + array[1] + "月" + array[2] + "日";
            },
            onSelect: function (valueText, inst) {
                $(this).find(".mbase-menu-txt").html(valueText);
                /*$.post("inc/person.org.php", {apart: "resume_base", birthday: valueText}, function (result) {
                    if (result == 'ok') {
                        $(this).find(".mbase-menu-txt").html(valueText);
                    }
                    else {
                        error('网络繁忙，请您稍后再试');
                    }
                });*/ 这是后端入库部分
            }
        });

这上门就是这个插件用在日期选择的部分，比较简单，查查api就知道了。这是效果图

下面的是treelist的，这个可用在比如选择文本项的时候，就因为这点我才觉得它真的够强大：

单项选择文本的

HTML部分：

<li id="sex">
            <div class="mbase-menu-title">性别</div>
            <div class="mbase-menu-txt">未设置</div>
            <div class="clear"></div>
 </li>

<ul id="sex-list" style="display: none">
    <li>先生</li>
    <li>女士</li>
</ul>

JS部分：

$("#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();
                    /*$.post("inc/person.org.php", {apart: "resume_base", sex: m}, function (result) {
                        if (result == 'ok') {
                            $(that).find(".mbase-menu-txt").html(m);
                        }
                        else {
                            error('网络繁忙，请您稍后再试');
                        }
                    });*/后端入库部分
                }
            });
            $("input[id^=sex-list]").focus();
        });

这里我说明下由于我的项目结构比较例外，所以我才这样写的，官方的demo是直接

$("#sex-list").mobiscroll().treelist({..})

这因情况而异，后面那段<pre name="code" class="javascript">$("input[id^=sex-list]").focus();

这里可能会问怎么回事啊，我也不知道怎么回事，只是我发现只要调用<pre name="code" class="javascript"><pre name="code" class="javascript">mobiscroll().treelist 的元素会自动变成input，然后弹出让你选择，这里我的项目结构为了美观，预算我设置了个inputClass:'tmp'

这个tmp就是样式名，属性就一个透明度为0(<pre style="background-color:#272822;color:#f8f8f2;font-family:'Consolas';font-size:12.0pt;"><span style="color:#f92672;">input</span>.<span style="color:#a6e22e;">tmp</span>{
    <span style="color:#66d9ef;"><em>opacity</em></span>: <span style="color:#ae81ff;">0</span>;
}

)，这样就遮丑了。还有一点要注意的就是

valueText 这个参数在treelist方法里面是返回当前选择的第几个元素li的值。

下面这个是两列选择的：

HTML部分：

<li id="current-area">
            <div class="mbase-menu-title">现所在地</div>
            <div class="mbase-menu-txt">未设置</div>
            <div class="clear"></div>
</li>

<ul id="education-list" style="display: none">
            <li data-value="72">初中</li>
            <li data-value="73">高中</li>
            <li data-value="74">中技</li>
            <li data-value="75">中专</li>
            <li data-value="76">大专</li>
            <li data-value="77">本科</li>
            <li data-value="78">硕士</li>
            <li data-value="79">MBA/EMBA</li>
            <li data-value="80">博士</li>
            <li data-value="81">博士后</li>
    </ul>
<ul id="current-area-list" style="display: none">
           <li><div data-value="2">北京</div>
       <ul>
                     <li data-value="36">东城</li>
                     <li data-value="37">西城</li>
                     <li data-value="38">崇文</li>
                     <li data-value="39">宣武</li>
                     <li data-value="40">朝阳</li>
                     <li data-value="41">丰台</li>
                     <li data-value="42">石景山</li>
                     <li data-value="43">海淀</li>
                     <li data-value="44">门头沟</li>
                     <li data-value="45">房山</li>
                     <li data-value="46">通州</li>
                     <li data-value="47">顺义</li>
                     <li data-value="48">昌平</li>
                     <li data-value="49">大兴</li>
                     <li data-value="50">平谷</li>
                     <li data-value="51">怀柔</li>
                     <li data-value="52">密云</li>
                     <li data-value="53">延庆</li>
                  </ul>
       </li>
           <li><div data-value="3">天津</div>
       <ul>
                     <li data-value="54">和平</li>
                     <li data-value="55">河东</li>
                     <li data-value="56">河西</li>
                     <li data-value="57">南开</li>
                     <li data-value="58">红桥</li>
                     <li data-value="59">塘沽</li>
                     <li data-value="60">汉沽</li>
                     <li data-value="61">大港</li>
                     <li data-value="62">东丽</li>
                     <li data-value="63">西青</li>
                     <li data-value="64">津南</li>
                     <li data-value="65">北辰</li>
                     <li data-value="66"> 宁河</li>
                     <li data-value="67">武清</li>
                     <li data-value="68">静海</li>
                     <li data-value="69">宝坻</li>