zoukankan      html  css  js  c++  java
  • Framework 7 日历插件改成Picker 模式

    Framework 7 里面的日历插件默认的2种模式:

    1.文本框

    2.直接展示

    如下图:

    更多例子点这里

    而我的需求如下图:

     

    点击小图标再弹出日历,选择某个日期,隐藏日历弹层。

    实现步骤:

    1.写小图标的HTML:

    2.写浮动的HTML:

     

    这里设置 z-index:13500 是为了让它显示在后面的半透明背景层上面。具体原因可查看:Framework 7 之 给Picker Modal 添加半透明背景

    3.实现点击小图标显示日历:

    function addZero(n){
        //如果当前返回的值小于10,则给它添加一个0
        return n<10 ? "0"+n : ""+n;
    }
    
    var pickerDate = myApp.calendar({
        value: [new Date()], //初始化日期,日历展开时第一次显示的日期
        container: '.js_date_container',
        monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        dayNamesShort: ['日', '一', '二', '三', '四', '五', '六'],
        closeOnSelect: true, //选中之后自动关闭
        onDayClick: function (p, dayContainer, year, month, day) {
            window.location.href = "/mobile/account/feedback/someday.htm?day=" + year + addZero(month) + addZero(day)
        }
    });
    
    $$(".picker-date").on('open', function () {
        $(".modal-overlay").addClass("modal-overlay-visible");
    });
    
    $$(".picker-date").on('close', function () {
        $(".modal-overlay").removeClass("modal-overlay-visible");
    });
    
    function closeConsumeModal() {
        myApp.closeModal('.picker-date');
        $(".modal-overlay").removeClass("modal-overlay-visible");
    }
    //点击半透明背景层隐藏浮层
    $(".modal-overlay").click(function () { 
        closeConsumeModal();
    });

     按照上面来应该没啥问题了~如有错误,欢迎指正~

  • 相关阅读:
    简单排序(冒泡、选择、插入)
    配置Tomcat数据源
    使用spring的邮件发送功能
    安装Tomcat
    Spring-MongoDB简单操作
    cisco ASA ios升级或恢复
    ASA 用TFTP 备份配置方法
    DELL MD3200i存储控制器解锁方法
    IBM ServerGuide引导盘全系列下载网址
    ASA5520远程配置 telnet,ssh
  • 原文地址:https://www.cnblogs.com/sese/p/9057303.html
Copyright © 2011-2022 走看看