2011-01-11 21 views
1

Dojoは、Dijit.form要素のイベントハンドラとデフォルトオプションなどをDOMに挿入する際に便利な機能があるようです。例えばjQuery UI要素とDojo(Dijit)フォーム要素

、道場: 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スライダーは伝統的にDOM要素に適用され、既に存在します。

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

は私が 'プログラムで' を作成できるようにする必要があります新しいSliders(および他のフォーム要素)が、jQueryの構造とどのように達成できるのか分かりません。たぶん私はここに何かを明らかに不足しています....

MTIA

答えて

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

jQueryのは、同様のイベント登録があります。

それは

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

同じ「クラス」を共有し、DOMに挿入されているすべての要素を使用することで行う方法そのイベントが自動的にフックアップする必要があります。

完全かつ包括的なリファレンスのための使用http://www.jqapi.com ...そうだね

0

は、jQueryUIのウィジェットは、すでにDOMに存在する要素に取り組みます。

私はと信じています jQueryUIはあなたのような機能を持っています。しかし、自分自身を模倣するのは簡単です。新しいコンテンツを読み込んだら、新しいHTMLにslider関数を適用するだけです。あなたは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を使ったことがないが、私はこれを考えますあなたが話しているシナリオのタイプです。

関連する問題