埋め込みのJavascript（大井！）

Question

さてさて...私は、それ自体がJavaScriptのファイルに表示されるHTMLブロックに適用されるいくつかのjavascriptのコードを記述しようとしています。それは完全な混乱です。

[new Date(1942,01,01), , '<div onclick="this.nextSibling.style.display=\'block\'; this.style.display=\'none\'"><img src="img/content/michenerCenterThumb.jpg" style="cursor:pointer" /></div><div style="display:none"><iframe width="200" height="165" src="http://www.youtube.com/embed/in7IUzjN3pY?rel=0" frameborder="0" allowfullscreen></iframe>'], 

[編集]私はここにありますタイムライン、使用しています：http://links.sourceforge.net/#timelineをここにサンプルがあります。タイムラインを構築する部分は、このサンプルのように、エントリを追加する必要が：HTMLで

data.addRows([ 
     [new Date(2010,7,23), , 'Conversation<br>' + 
     '<img src="img/comments-icon.png" style="width:32px; height:32px;">'], 
     [new Date(2010,7,23,23,0,0), , 'Mail from boss<br>' + 
     '<img src="img/mail-icon.png" style="width:32px; height:32px;">'], 
     [new Date(2010,7,24,16,0,0), , 'Report'], 
     [new Date(2010,7,26), new Date(2010,8,2), 'Traject A'],  
     [new Date(2010,7,28), , 'Memo<br>' + 
     '<img src="img/notes-edit-icon.png" style="width:48px; height:48px;">'], 
     [new Date(2010,7,29), , 'Phone call<br>' + 
     '<img src="img/Hardware-Mobile-Phone-icon.png" style="width:32px; height:32px;">'], 
     [new Date(2010,7,31), new Date(2010,8,3), 'Traject B'],  
     [new Date(2010,8,4,12,0,0), , 'Report<br>' + 
     '<img src="img/attachment-icon.png" style="width:32px; height:32px;">'] 
    ]); 

を、私は等のjqueryのUI、highsliderを、実装したいが、これは私の上記の例のような（汚い非常に速くなります。 ）この場合、「正しいことをやっている」とは何ですか？私はよりエレガントな解決策を考え出した

おかげで、

ベン

Answer 1

は...近い、私は適切なコーディングを構成するものに、願っています。各要素のHTMLは、現在のHTMLページに書かれています。私は、配列内の各アイテム・クラスを挿入するカスタムのgetElementsByClassNameを使用してこれを読み取ります。この配列は、タイムラインに値を設定します。

HTML：

<div class="item" date="1956,1,1" enddate="1967,1,1"> 
Some Content  
</div> 

とJavaScript：

var items = getElementsByClassName("item"); 
    for (var x = 0; x < items.length; x++) { 
     var date = items[x].getAttribute("date"); 
     var enddate = items[x].getAttribute("enddate"); 
     var html = items[x].innerHTML; 
      if (!enddate) { 
       items[x]=[new Date(date), enddate, html]; 
      } else {   
       items[x]=[new Date(date), new Date(enddate), html]; 
      } 
     } 

    data.addColumn('datetime', 'start'); 
    data.addColumn('datetime', 'end'); 
    data.addColumn('string', 'content'); 

    data.addRows(items); 

あなたがここにカスタムのgetElementsByClassNameを見つけることができます。http://code.google.com/p/getelementsbyclassname/