Элемент jQuery UI против элемента формы Dojo (Dijit)

Question

Кажется, что Dojo имеет полезную функцию в том, что оно может устанавливать обработчики событий, параметры по умолчанию и т. Д. Для элементов Dijit.form при вставке его в DOM.

Например, Dojo: var slider = new dijit.form.HorizontalSlider({ name: sliderContainerId+'_slider', value: sliderValue, minimum: sliderMax, maximum: sliderMin,<br> onChange: function(value){ // some event handling logic } }, sliderContainerId);

Однако слайдер пользовательского интерфейса jQuery традиционно применяется к уже существующим элементам DOM:

$( sliderContainerId ).slider({ value:100, min: 0, max: 500, step: 50, slide: function( event, ui ) { $( "#amount" ).val( "$" + ui.value ); } });

Мне нужно иметь возможность «программно» создавать новые ползунки (и другие элементы формы), но я не уверен, как этого можно добиться с помощью структуры jQuery?Может быть, я упускаю что-то очевидное здесь ...

MTIA

Answer 1

JQuery имеет похожую регистрацию событий.

Способ сделать это - использовать

$('.class').live(eventname, eventhandler);

Любой элемент, который вставлен в DOM, который разделяет тот же самый "класс",его событие подключается автоматически.

используйте http://www.jqapi.com для полной и полной справки ...

Answer 2

jQuery абсолютно позволит вам создавать новые элементы на лету. $("<div>").appendTo(".wrapper") создаст новый элемент div и добавит его к элементу с помощью id wrapper. В большем примере:

$("<div>").appendTo('.wrapper').slider({
    value:100, min: 0, max: 500, step: 50,
    slide: function( event, ui ) { $( "#amount" ).val( "$" + ui.value ); }
});

Answer 3

Вы правы, виджеты jQueryUI работают с элементами, которые уже существуют в DOM.

Я не считаю, jQueryUI имеет такую ​​функциональность, которую вы описываете.Впрочем, достаточно легко подражать себе.После загрузки нового контента вы просто примените функцию slider к новому html.Предполагая, что вы делаете это на ready и в обратном вызове AJAX или подобном, я бы разделил этот код инициализации на его собственную функцию, которую вы можете вызывать из нескольких мест:

$(document).ready(function() {
    initializeSlider("#slider_div");
});

function initializeSlider(selector) {
    $(selector).slider({ 
        value:100, 
        min: 0, 
        max: 500, 
        step: 50, 
        slide: function(event, ui) { 
          $("#amount").val("$" + ui.value); 
        } 
    });         
}  

/* later on, when you insert new content, call initializeSlider again */

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
      $("body").append(data.content); // append new html to the DOM.
      initializeSlider("#new_slider_element");
  }
});

Я никогда не использовал Dojo,но я думаю, что это тот тип сценария, о котором вы говорите.