• 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;
    }
    

      

  • 相关阅读:
    新浪微盘又是一个给力的产品啊,
    InfoQ: 百度数据库架构演变与设计
    列式数据库——Sybase IQ
    MapR初体验 淘宝共享数据平台 tbdata.org
    IBM正式发布新一代zEnterprise大型机(组图) 大型机,IBM,BladeCenter,美国,纽约 TechWeb News
    1TB is equal to the number of how many GB? 1PB equal to is equal to the number of TB? 1EB PB? | PCfault.com
    Cassandra vs HBase | WhyNosql
    The Hadoop Community Effect
    雅虎剥离开源软件平台 Hadoop ,与风投新建 Hortonworks 公司 品味雅虎
    RowOriented Database 、ColumnOriented Database 、KeyValue Store Database 、DocumentOriented Database
  • 原文地址:https://www.cnblogs.com/diantao/p/10531512.html
Copyright © 2020-2023  润新知