• jquery weui日期选择控件添加取消按钮


    如图:

    上图是jQuery weui的时间选择控件,红框处本来应该有个“取消”按钮的,可惜偏偏没有,当用户不想选择的时候就不好处理,虽然插件提供了点击其他区域关闭的功能,但过于隐晦,不容易发现,因此本文的目的就是把这个取消按钮加上.

    直接上代码:

    大概4016行下面添加一个取消配置项,4021行下面添加取消按钮DOM结构,如下

    var defaults = {
              updateValuesOnMomentum: false,
              updateValuesOnTouchmove: true,
              rotateEffect: false,
              momentumRatio: 7,
              freeMode: false,
              // Common settings
              scrollToInput: true,
              inputReadOnly: true,
              toolbar: true,
              toolbarCloseText: '完成',
              toolbarCancelText: '取消',
              title: '请选择',
              toolbarTemplate: '<div class="toolbar">
              <div class="toolbar-inner">
              <a href="javascript:;" class="picker-button close-picker">{{closeText}}</a>
              <a href="javascript:;" class="picker-button cancel-picker">{{CancelText}}</a>
              <h1 class="title">{{title}}</h1>
              </div>
              </div>',
          };
    

      大概4434行新增配置项替换规则,如下:

    pickerHTML =
                  '<div class="' + (pickerClass) + '">' +
                      (p.params.toolbar ? p.params.toolbarTemplate.replace(/{{closeText}}/g, p.params.toolbarCloseText).replace(/{{CancelText}}/g, p.params.toolbarCancelText).replace(/{{title}}/g, p.params.title) : '') +
                      '<div class="picker-modal-inner picker-items">' +
                          colsHTML +
                          '<div class="picker-center-highlight"></div>' +
                      '</div>' +
                  '</div>';
    

      大概4607行下面添加监听取消按钮的事件,如下:

    $(document).on("click", ".cancel-picker", function() {
            var pickerToClose = $('.weui-picker-modal.weui-picker-modal-visible');
            if (pickerToClose.length > 0) {
                $.closePicker(pickerToClose);
                $(document).trigger('datepickerclose');
            }
        });
    

      注意:由于插件关闭日期弹窗的特殊做法,导致无法拿到需要输入日期的input框,从而导致无法执行点击取消按钮时清空input的值,所以这里只能暴露一个“datepickerclose”事件,在代码中自行监听这个事件,根据需要做处理,如:清空input的值(只要启动这个插件input框就自动填入日期值) 我们js中写法,如下:

    $(document).on('datepickerclose', function () {
        if($(selectorA).length > 0) {
            $(selectorA).val('');
        }
        if($(selectorB).length > 0) {
            $(selectorA).val('');
        }
    })
    

      

    虽然实现了功能但是有个体验不好的地方,插件第一次点击文本框时会自动填入日期,但执行该函数后,第二次点击文本框就不会自动填入日期,必须手动选择

    jquery.weui.css要新增样式,控制取消按钮的显示位置

    .toolbar .cancel-picker{
        left: 0;
        right: auto;
    }
    

      

  • 相关阅读:
    Java数据结构和算法——汉诺塔问题
    svn的使用
    Struts+iBatis+Spring+mysql整合开发
    Java Collection
    IOS推送功能的实现(javapns)
    [工具库]JFileDownloader工具类——多线程下载网络文件,并保存在本地
    xsl 中 foreach 的使用
    网页制作技巧24条
    js 实现 datagrid 鼠标移动时datagrid 表的该变
    How to extend ASP.NET datagrid for multiselection of data rows.
  • 原文地址:https://www.cnblogs.com/diantao/p/10531512.html
Copyright © 2020-2023  润新知