2017-10-06 72 views
2

我正在使用很多Kendo UI窗口。有什么方法可以在全球范围内以某种方式指定默认值?或者,也许更现实的版本,我可以创建一些父母预定义的值,然后只是覆盖我需要改变的值?全局设置Kendo UI窗口值

例如,我想同样的错误行为,并为所有窗口的模态参数,所以我想这样做:

$("#parentWindow").kendoWindow({ 
    modal: true, 
    error: function() { 
      this.close(); 
      new Notification().error(); 
    } 
}); 

然后使用父窗口为新基地窗户:

$("#newWindow").kendoWindow({ 
    title: "This window should have the options (modal and error) of the parentWindow",  
}).??getTheRestOfTheValuesFromParent()??; 

或重写一些参数:

$("#newWindow2").kendoWindow({ 
    modal: false, 
    title: "A window with overwritten modal parameter",  
}).??getTheRestOfTheValuesFromParent()??; 

是它在某种程度上可能为了达到这个目的,有没有可能像C#继承一样? 也许这是一个愚蠢的问题,但我不熟悉JS。

回答

5

我强烈建议您创建自己的包装代码覆盖所有 - 或者至少是那些更复杂的 - 剑道小部件。我的团队多年来一直在使用kendo进行一切项目,我们的结果非常积极。主要目的是你需要:全球行为。如果在您的项目上编码了千个窗口之后,您需要将它们全部更改,只需更改包装器即可。这只是一个简单的jQuery功能:

$.fn.MyWindow = function(options) { 
    var $target = $(this); 
    var widget = { 
     _defaultOptions: { 
      actions: ["Minimize", "Maximize", "Close"], 
      visible: false, 
      width: 400, 
      height: 400, 
      modal: true 
     }, 
     _options: options || {}, 
     _target: $target, 
     _widget: null, 

     _init: function() { 
      this._manageOptions(); 
      this._createWidget(); 

      return this; 
     }, 

     _manageOptions: function() { 
      // Here you can perform some validations like displaying an error when a parameter is missing or whatever 
      this._options = $.extend(this._options, this._defaultOptions); 
     }, 

     _createWidget: function() { 
      this._widget = this._target.kendoWindow(this._options).data("kendoWindow"); 

      // Create here some behaviours that the widget doesn't haves, like closing the window when user click the black overlay 
      if (this._options.closeOnOverlayClick) { 
       $('body').off('click', '.k-overlay').on('click', '.k-overlay', function() { 
        this._widget.close(); 
       }.bind(this)); 
      } 
     }, 

     Show: function(center) { 
      if (center) { 
       this._widget.center(); 
      } 

      this._widget.open(); 
     } 
    }; 

    return widget._init(); 
}; 

var wnd = $("#wnd").MyWindow({ 
    title: "My first window", 
    closeOnOverlayClick: true // Your own parameter 
}); 

// Now you work with your own functions: 
wnd.Show(true); 

Demo

有这么多的自定义,你自己喜欢的活动 - 其中一些剑道的部件并不富人 - 等。

+1

谢谢你,它看起来非常有用 –

3

我只想补充一点,有一篇文章(here)有关创建自定义剑道部件,其中您可以找到更多关于可能实施的不同场景的具体信息。

+1

我知道有一些官方包装一个小部件,但我不记得在哪里可以找到它。好文章。 – DontVoteMeDown

+0

绝对有用,非常感谢,但由于有特定的代码,我宁愿接受第一个答案。 –

3

Ι有一个像你的情况与剑道窗口,剑道网格和剑道dropdownlists。为此,我为所有元素创建了HtmlHelpers,并在需要时调用它们。既然你使用的是kendo asp.net-mvc,我会推荐这样看。

public static WindowBuilder GlobalKendoWindow(this HtmlHelper helper) 
    { 
     return helper.Kendo().Window() 
      .Draggable() 
      .Animation(true) 
      .Visible(false) 
      .AutoFocus(true) 
      .Modal(true) 
      .Scrollable(true) 
      .HtmlAttributes(new { @class = "atn-modal-container" }) 
      .Actions(actions => actions.Minimize().Close()) 
      .Deferred(); 
    } 

,呈现在我的HTML这样的

@(Html.GlobalKendoWindow() 
    .Name("addCandidateDialog") 
    .Title(Html.GetResource(cps, "AddCandidateDialogTitle")) 
    .LoadContentFrom("AddCandidate", "Candidate") 
    .Events(events => events.Open("athena.addCandidacy.onAddCandidateOpen").Close("athena.addCandidacy.onAddCandidateClose")) 
) 
+1

看起来不错,但我们现在更喜欢JS语法,因为我们需要一些在这个Kendo MVC版本中设置困难(或者不可能)的行为。感谢您的建议,希望有一天我会使用它。 –