jQuery UI元素vs Dojo(Dijit)表单元素

时间:2011-01-11 00:23:50

标签: jquery jquery-ui jquery-plugins dojo

Dojo似乎有一个有用的功能,它可以为Dijit.form元素设置事件处理程序和默认选项等,因为它将它插入到DOM中。

例如,Dojo: var slider = new dijit.form.HorizontalSlider({ name: sliderContainerId+'_slider', value: sliderValue, minimum: sliderMax, maximum: sliderMin,
onChange: function(value){ // some event handling logic } }, sliderContainerId);

但是,jQuery UI Slider传统上应用于已经存在的DOM元素:

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

我需要能够“以编程方式”创建新的Sliders(和其他表单元素),但我不确定如何通过jQuery的结构方式实现这一点?也许我错过了一些明显的东西......

MTIA

3 个答案:

答案 0 :(得分:2)

JQuery有类似的事件注册。

这样做的方法是使用

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

插入到共享相同“类”的dom中的任何元素都会自动将其事件连接起来。

使用http://www.jqapi.com获取完整而全面的参考资料......

答案 1 :(得分:1)

jQuery绝对允许您动态创建新元素。 $("<div>").appendTo(".wrapper")将创建一个新的div元素并将其添加到具有id包装器的元素中。在一个更大的例子中:

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

答案 2 :(得分:0)

你是对的,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,但我认为这是你所谈论的场景类型。