寝太郎の江戸風呂。ね！

[PR]

2024/04/24 (Wed.)

topicPath - HTMLに追加する要素を作成

前回の「目次データから上位のトピックを探す。」では、目次データからトピックパスに表示するデータを取得する方法を説明しました。 そこでは、次のようなオブジェクトを要素とする配列が得られました。

[
 {id:'content22',     title:'内容22',parent:'subcontents2'},
 {id:'subcontents2',  title:'目次２',parent:'home'},
 {id:'home', title:'目次',parent:'contents'}
]

title 属性の値をリンクテキストとし、id 属性の値をリンク先にすれば、ページ内リンクが作成できます。

順番を逆にしないと、パスになりません。 まず、これをやりましょう。

上の配列を"paths"という変数で参照することにしましょう。 配列ですので、reverse() メソッドで順番が反転します。

paths.reverse();

上位から下位へと並ぶ順番に変わりました。

[
 {id:'home', title:'目次',parent:'contents'},
 {id:'subcontents2',  title:'目次２',parent:'home'},
 {id:'content22',     title:'内容22',parent:'subcontents2'}
]

この順番で、A 要素を生成します。

 for(var i=0;i

'topicPath'という id 要素を持つ要素内に、順番にハイパーリンクが追加されます。


また、このハイパーリンクがクリックされた時は、"changePage" という関数が起動されると記述されています。


この"changePage" という関数は、クリック後に表示すべき要素を取得するための関数です。A 要素の href 属性の値から、id を取得して、表示すべき要素を特定します。次のソースでは、表示すべき要素を グローバル変数 content で参照させます。

function changePage(e){
  content=document.getElementById(
　  this.href.match(/#(.+)/)[1]
  );
}


PR
					

					
										
																				
					
2011/03/24 (Thu.)
												Trackback()
																		Comment(0)
												JavaScript
					
				

topicPath - 目次データから上位のトピックを探す。

前回の「topicPath - 目次データの取得」の記事では、topicPath 用の HTML の構造とそこから目次データを取得する方法について説明しました。

今回は、その目次データから、上位のトピックを探す方法についてです。

前回の記事では、各トピックの目次データが次のようなオブジェクトになっていることを説明しました。

そして、 ID が「subcontents2」の親の ID が「home」ということもわかります。

すなわち、ID を投入して、親の IDを取得して その属するオブジェクトを配列に加えます。取得した親の ID をまた投入して、親の IDを取得して さらに配列に加えます。それを繰り返して最後に「home」を ID とするオブジェクトを配列に加えたら終わりです。

つまり、結果を引数に再度入れる再帰的な関数を１つ作ればいいということ。
この関数を　searchAncestor としましょう。
また、上記のような目次データを arr とし、オブジェクトを格納する配列を paths とすると、次のように記述できます。
というように　結果配列を初期化した上で

を実行すれば、paths の内容は次のようになります。

2011/02/15 (Tue.) Trackback() Comment(0) JavaScript

topicPath - 目次データの取得

前回の「トピックパス/TopicPath」の記事では、topicPath を紹介しました。今後、何回かに分けて、そのスクリプトの考え方を説明します。今回は、基礎となる「
目次データの取得」についてです。

■ topicPath を利用するHTMLの構造

topicPath を利用する場合、HTMLの構造を次のように構成する必要があります。
(リスト中の#は、それに続く名前を id属性とする要素を意味します）

#topicPath
#contents
  ul(#home)
   li>a(href:#subcontents1)
   li>a(href:#subcontents2)
   li>a(href:#content)
  ul(#subcontents1)
   li>a(href:#subcontents11)
   li>a(href:#subcontents12)
   li>a(href:#content1)
  ul(#subcontents2)
   li>a(href:#contents21)
   li>a(href:#contents22)
  #content
  #content1
  #content21
  #content22

#topicPathは、トピックパスを表示する領域です。
#contentsは、目次とトピックをないようとする領域です。

■ 目次データの取得
HTMLが上記のような構造ならば、これから目次データを取得することは簡単です。
すなわち、#contents の中の UL要素の中にある A要素に着目します。

A要素は、リンク先の id 属性を href 属性に持っています。そして、その innerHTML は、リンク先のタイトルと通常、一致します。これで、id と title を項目に持つレコードが作成できます。

さらに、このレコードに、親の idを持たせれば、親子関係も保持するレコードになります。

topicPath では、このレコードの１行をオブジェクトとして把握します。すなわち、次のようなスタイルです。

{id:id,title:title,parent:parentId}

topicPath は、このオブジェクトを要素として、「目次データ」配列に格納します。
そして、この「目次データ」配列を基礎データとして、トピックパスを作成します。

次回は、「目次データ」から親子関係を遡って、先祖を探す方法を説明します。

2011/02/04 (Fri.) Trackback() Comment(0) JavaScript

トピックパス/TopicPath

「トピックパス」とは、トピックがツリー状の上下関係を持っている場合に、現在表示されているトピックに至る経路を示すものです。パンくずリスト（breadcrumb list）という方が馴染み深いが、ここで紹介する「トピックパス」のナビゲーションは、1つの文書の中のトピックのみを対象とするので、あえて一般的なイメージの強い呼び方を避けました。

パンくずリスト（breadcrumb list）は、ウェブサイト内におけるウェブページの位置ををハイパーリンクで示すので、SEO（検索エンジン対策）に有効とされています。SEO（検索エンジン対策）のことを考えれば、検索エンジンが読み取りにくい JavaScript でパンくずリスト（breadcrumb list）を作成するのは適当ではないでしょう。

しかし、すべてのウェブページが他人に見てもらうことを目的としているわけではありません。中には、自分のためだけのメモ、身内だけのリファレンスを目的としているものもあります。今回、紹介する「トピックパス」は、そのような閉鎖的なページを作成する時に便利なツールだと思っています。

サンプルファイルをアップロードしましたので、イメージは、そちらで掴んで下さい。
■　topicPath,html

この「topicPath,html」は、ウェブページを アイフォン/ iphone 風に表示するツールである　"iUI"
のスクリプトとCSSに影響を受けて作成しています。

次回以降、「topicPath,html」の基本的な考え方やベースとなるスクリプトに説明したいと思います。

2011/01/29 (Sat.) Trackback() Comment(0) JavaScript

星の度数グラフ：スターチャート　★★★

評価ポイントを表現するのに、星マーク「★」の数で表示することがあります。これをJavaScriptで実現しましょう。スターチャート(star chart)とでも呼べばいいのでしょうか。Google Visualization でいえば、Stuff Chart に似たものですが、WEB検索で簡単に見つからなかったので、自作することにしました。

仕組みは簡単です。引数で受け取った数字の数だけ、「★」を生成して、指定された要素に追加するというものです。

小数点部分については、「★」の大きさを縮小させて表現することにしました。

インプットボックスに数字を入れて、ボタンを押すと、そのだけ星マーク「★」が表示されます。

Star Chart

ソースコード

neta.starchart=function(r,c){
 c.innerHTML='';
 var n=Math.floor(r);
 var m=Math.floor(Math.sqrt((r-n)*10000))
 for(var i=0;i<n;i++){
  var s=document.createElement('span');
  s.innerHTML='★';
  c.appendChild(s);
 }
 if(m){
  var s=document.createElement('span');
  s.innerHTML='★';
  s.style.fontSize=m+'%';
  c.appendChild(s);
 }
}
neta.addListener(function(){
 document.getElementById('btn110105').onclick=function(){
  var v=document.getElementById('inp110105').value-0;
  neta.starchart(v,document.getElementById('c110105'))
 }
});

2011/01/05 (Wed.) Trackback() Comment(0) JavaScript