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!

  • 相关阅读:
    MYsql增删改查
    粘包问题
    模拟ssh远程执行命令
    Socket抽象层
    基于TCP协议的socket套接字编程
    TCP协议的三次握手和四次挥手
    大话OSI七层协议
    网络架构及其演变过程
    互联网和互联网的组成
    Windows安装MySQL
  • 原文地址:https://www.cnblogs.com/teamemory/p/8534435.html
Copyright © 2011-2022 走看看