jQuery Girl
  1. jQuery Girl
  3. Développer un widget kendo ui personnalisé
Intereting Posts
Règles conditionnelles sur les champs basés sur jQuery.validator.addMethod boucle table html en utilisant jquery et for loop appliquer window.hostname href pour image? Ne traduisez PAS textarea par jQuery.translator, comment? Plusieurs entrées utilisant chacune typeahead.js avec différentes sources peuvent-elles être consolidées? Jquery autocomplete .NET WebMethod Fusionner les méthodes de deux objects ayant les mêmes propriétés dans un tableau pour chaque propriété Appelez l’action JSF via jQuery ajax SVG déplaçable à l’aide de JQuery et Jquery-svg Lignes de sum jQuery ajoutant toutes les cellules jquery selecteurs vitesse Comment puis-je changer une case à cocher pour un bouton radio utilisant jQuery? Liaison de jquery-multifile à un formulaire chargé dynamicment Comment puis-je faire en sorte que les colonnes figées jqgrid fonctionnent avec Word Wrap? Empêcher XSS dans jQuery html ()

Développer un widget kendo ui personnalisé

Comment puis-je développer un widget personnalisé se comportant comme suit:

http://jsfiddle.net/anilca/u2HF7/

Voici ma lecture de démarrage, mais je n’ai pas trouvé comment définir les modèles de listes déroulantes et les associer par des événements de modification. 

(function($) { var kendo = window.kendo, ui = kendo.ui, Widget = ui.Widget; var Editable = Widget.extend({ init: function(element, options) { var that = this; Widget.fn.init.call(this, element, options); that._create(); }, options: { name: "Editable", value: " ", editable: false }, _create: function() { var that = this; // create dropdowns from templates and append them to DOM }, _templates: { dropDown: "?" } }); ui.plugin(Editable); })(jQuery);

Après le blog que vous avez lié, faites simplement ce qu’il a fait – définissez vos modèles, puis créez les menus déroulants dans votre fonction _create() . Il n’est pas nécessaire d’utiliser la fonction kendo.template() dans chaque liste déroulante, car elle ne lie pas les objects aussi bien que vous le pensez. Au lieu de cela, la clé consiste à utiliser kendo.bind() et à transmettre les options tant que modèle de vue.

Voici un exemple de travail JsBin. 

 // listen for doc ready because this is js bin and my code is not really "in" the HTML // where I can control it. $(function() { // wrap the widget in a closure. Not necessary in doc ready, but a good practice (function($) { var kendo = window.kendo, ui = kendo.ui, Widget = ui.Widget, periods = [{ text: "PERIOD: YEAR", value: "YEAR" }, { text: "PERIOD: QUARTER", value: "QUARTER" }], quarters = [{ text: "1. Quarter", value: 1 }, { text: "2. Quarter", value: 2 }, { text: "3. Quarter", value: 3 }, { text: "4. Quarter", value: 4 }], years = [2011, 2012, 2013, 2014]; var LinkedDropDowns = Widget.extend({ init: function(element, options) { var that = this; Widget.fn.init.call(that, element, options); that._create(); }, options: { name: "LinkedDropDowns", period: "YEAR", periods: periods, year: 2011, years: years, yearVisible: true, quarter: 1, quarters: quarters, quarterVisible: false, onPeriodChange: function(e) { switch(e.sender.value()) { case "YEAR": this.set("yearVisible", true); this.set("quarterVisible", false); break; case "QUARTER": this.set("yearVisible", true); this.set("quarterVisible", true); break; default: break; } }, onYearChange: function(e) { alert(e.sender.value()); }, onQuarterChange: function(e) { alert(e.sender.value()); } }, _create: function() { var that = this; // create dropdowns from templates and append them to DOM that.periodDropDown = $(that._templates.periodDropDown); that.yearDropDown = $(that._templates.yearDropDown); that.quarterDropDown = $(that._templates.quarterDropDown); // append all elements to the DOM that.element.append(that.periodDropDown) .append(that.yearDropDown) .append(that.quarterDropDown); kendo.bind(that.element, that.options); }, _templates: { periodDropDown: "", yearDropDown: "", quarterDropDown: "" } }); ui.plugin(LinkedDropDowns); })(jQuery); $('#dropdowns').kendoLinkedDropDowns(); });