zoukankan      html  css  js  c++  java
  • 如何利用mui实现底部选择器(含日期选择器)?

    1.第一步:

    项目中应该引入相应的css和js文件,相关文件可到mui官网查询。

     <link rel="stylesheet" type="text/css" href="../base/css/mui.min.css" />
     <link rel="stylesheet" type="text/css" href="../base/css/mui.picker.min.css" />
     <link rel="stylesheet" type="text/css" href="../base/css/mui.dtpicker.css" />
    <script type="text/javascript" src="../base/js/mui.min.js"></script>
    <script type="text/javascript" src="../base/js/mui.picker.min.js"></script>
    <script type="text/javascript" src="../base/js/mui.dtpicker.js"></script>

    2、编写普通选择器的代码

      // 交友目的 
        $('.hobby_option').click(function () {
            var picker = new mui.PopPicker();
            picker.setData([{
                value: '1',
                text: '兴趣交友'
            }, {
                value: '2',
                text: '谈恋爱'
            }, {
                value: '3',
                text: '结婚对象'
            }, {
                value: '4',
                text: '其他'
            }]);
         //这里代表被选中的元素 picker.show(
    function (selectItems) { $(".hobby_option").val(selectItems[0].text) }) })

    3、编写日期选择器的代码

      // 弹框选项4 生日
        $('.birth_option').click(function () {
            var dtpicker = new mui.DtPicker(
                {
                    type: "date", //设置日历初始视图模式
                    beginDate: new Date(1950, 04, 25), //设置开始日期
                    endDate: new Date() //设置开始日期
                }
            );
            dtpicker.show(function (selectItems) {
                $(".birth_option").val(selectItems.text)
            })
    
        })

    The end!

  • 相关阅读:
    迭代器在LinkedList上的删除
    java多线程:CopyOnWriteArrayList
    vs中代码编译通过,但还是有红色波浪线
    vs中项目属性配置
    TortoiseGit安装与配置
    DC(device context)
    weak_ptr 使用
    C++ 中shared_ptr循环引用计数问题
    for_each与lambda表达式联合使用
    new 和 make_shared 在内存上的区别
  • 原文地址:https://www.cnblogs.com/teamemory/p/8534435.html
Copyright © 2011-2022 走看看