jquery:将参数和初始函数传递给jquery prototype

时间:2016-10-12 21:36:26

标签: javascript jquery parameters chaining

我是这个网站的新手,也是jQuery的新手。

我想使用所谓的bootstrap material datetime picker,它允许您为HTML输入元素分配插件。当此元素存在onfocus事件时,选择器会唤醒并以叠加模式显示在屏幕上。从选择器中选择日期后,选择器将消失,并且HTML变量的值将设置为所选值。

我希望在没有与HTML输入变量交互的情况下显示选择器;此外,用户应该能够在不使用选择器的情况下更改HTML输入元素的值。我的问题是我无法将初始参数和函数传递给插件。

通常插件以这种方式使用:

$('#_Date_5').bootstrapMaterialDatePicker();  // this works

参数可以像这样传递

$('#_Date_5').bootstrapMaterialDatePicker(
    {
        format: '<format>',
        shortTime: false,
        minDate: null,
        maxDate: null,
        currentDate: null,
        date: true,
        time: true,
        clearButton: true,
        nowButton: true,
        switchOnClick: false,
        triggerEvent: 'focus'
    } 
);

如果我想在初始化插件时调用一个函数(让我们说_fireCalendar()),那么我可以使用以下内容:

$('#_Date_5').bootstrapMaterialDatePicker('_fireCalendar');

现在我使用临时HTML变量为选择器提供所需的初始日期时间值,并将选择器绑定到此临时变量。单击可编辑值右侧的图标符号后,应显示选择器。现在,用户可以在不使用选择器的情况下编辑值,也可以选择使用选择器。

现在我的问题 - 是否可以在初始化时传递两个一组参数一个回调函数

我已经设法通过在插件的构造函数中调用_fireCalender()来实现此目的,但是我希望能够在不修改插件本身的情况下完成此操作。

感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

好的 - 这是我的解决方案 - 讨厌(需要更改插件代码) - 但是工作:

  1. 将新的参数this.params.beforeHiding添加到插件的构造函数中。参数beforeHiding最初设置为null,可以设置为函数
  2. 调用this.params.before传递的函数隐藏在方法hide()
  3. 的末尾

    在构造函数

    this.params = {beforeHiding:null, <original parameters>}
    

    方法hide()

    if ( this.params.beforeHiding !== null ) this.params.beforeHiding();
    

    此代码将使用新功能:

    var date_interim = document.getElementById('var_interim');
    var date_original = document.getElementById('_Date_5');
    
    date_interim.value = date_original.value;
    
    $('#var_interim').bootstrapMaterialDatePicker(
    {
    format: '<format>',
    shortTime: false,
    date: true,
    time: false,
    clearButton: true,
    nowButton: true,
    switchOnClick: false,
    triggerEvent: 'focus',
    beforeHiding: function()
    {
    var date_interim = document.getElementById('var_interim');
    var date_original = document.getElementById('_Date_5');
    date_original.value = date_interim.value;
    }
    }
    );
    
    // display the picker by focussing it
    date_interim.focus();
    

    代码绑定到HTML图像标记的单击事件并使用临时变量,这是一个HTML输入字段,用户既可以手动编辑原始值,也可以从选择器中选择一个值。聚焦临时变量会在屏幕上显示选择器。