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