0

jQuery の学習を始めたばかりで、基本的なレイアウトと UI プラグインのいくつかが機能するようになりました。ただし、次のような構文を使用してカスタム ウィジェットを作成したいと思います。

var objs = [
            {name: 'obj1', prop1: 'val1', prop2: 'val2'},
            {name: 'obj2', prop1: 'val3', prop2: 'val4'},
            {name: 'obj3', prop1: 'val5', prop2: 'val6'},
           ];

$(document).ready(function(){
  myList = $('#divlist').mywidget(objs);
});

このコードは、「divlist」という名前の div 内にドラッグ可能なオブジェクトのリストを作成します。ここでの問題は、リスト項目を構成する html/formatting をウィジェットによって生成し、親コンテナーに動的に追加する必要があることです。これは、事前に html に存在しないためです。

私が見たすべてのjQueryチュートリアルは、既存のhtmlで動作し、それを再フォーマット/移動/スタイルするだけです. どうすればこれを行うことができるかについて誰にもアイデアがありますか?

4

1 に答える 1

1

JavaScript / jQueryでその場で新しい要素（div、spans、tablesなど）を作成する方法を知りたいと思いますか？もしそうなら、いくつかの方法があります。

ドキュメントオブジェクトで作成します。

var my_new_element = document.createElement("div");
// Then feed it to jQuery so you can work with it.
$(my_new_element);

または、jQueryを使用して作成します。

var my_new_element = $('<div>');

ソリューションでは、JSONオブジェクトの配列をループして各divを作成し、それらを親コンテナーに追加する必要があります。例：

var parent_div = '#divlist';
for (var i = 0; i < objs.length; i++) {
  // Feed it straight to jQuery so it's easier to work with.
  var widget_member = $(document.createElement('div'));

  // Make it draggable.
  widget_member.draggable();

  // Append to the parent div.
  $(parent_div).append(widget_member);
}
于 2012-05-07T21:23:41.190 に答える