人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

アメリカ版ヤフーの個人ツールの部分ですが、JavaScriptでHTMLがびよーんと変化し各ツールが出て来るのですが、どのように制御しているのでしょうか?

●質問者: akide
●カテゴリ:ウェブ制作
✍キーワード:HTML JavaScript アメリカ ヤフー
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● dreamworks
●23ポイント

http://www.geocities.co.jp/Milkyway-Vega/9133/menyu1.html

こんなのでしょうか。

Menu1 Menu2 Menu3の所をクリックしてみてください。

メニューが出てきます。

◎質問者からの返答

回答ありがとう御座います。

欲を言えば、びろーんと出てくれば尚ありがたいです。


2 ● theninja007
●23ポイント

Ajax(エイジャックス)という技術です。

AjaxとはAsynchronous Javascript and XMLの略です。

IT用語辞典に簡単な説明があります。

http://e-words.jp/w/Ajax.html


Ajaxは、GoogleがGmailやGoogle MapsやGoogle Calendarにふんだんに取り入れたことで、最近注目を集めている技術です。

下記のサイトに詳しい説明が記載されています。

http://antipop.gs/docs/translations/ajax.html

◎質問者からの返答

返信おそくなりました。

説明ありがとうございます。


3 ● susie-t
●22ポイント

Ajaxはほぼ関係ないかと。。。>2の方

1の方の回答に機能を追加してみました。Netscape等でも動作させるためにはidのほかname属性も指定する必要があります。(ただ、個人的な好みを言うと、同一ドキュメント上でIDが重複してるのはかなり抵抗があります・・・。)

<html>
<head>
<title></title>
<style>
<!--
div{
 margin:20px;
 padding:10px;
}
#parent{
 background-color:blue;
 width:2000px;
 height:2000px;
 color:black;
}
#child1{
 background-color:yellow;
 width:200px;
 height:200px;
}
#child2{
 background-color:red;
 width:200px;
 height:200px;
}
td{
 border:solid blue 2px;
 height:100px;
 width:150px;
}
a{
 color:red;
}
-->
</style>

<script language="JavaScript">
<!--
flag = new Array();
tid = new Array();

function tree(num){
 var max;
 var tree_list;
 if(document.all){
 tree_list = document.all.item("tree");
 }else{
 tree_list = document.getElementsByName("tree");
 }
 var style = tree_list[num].style;
 if(flag[num] != null &amp;&amp; flag[num] == 1){
 flag[num] = 0;
 if(tid[num]) clearTimeout(tid[num]);
 tid[num] = setInterval(hide, 10);//増やすと隠蔽時のスピードが下がる
 }
 else{
 style.visibility = 'hidden';
 style.overflow = 'hidden';
 style.position = 'absolute';
 style.display = 'block';
 var tmp = style.height;
 style.height = '';
 max = tree_list[num].offsetHeight;
 if(tmp == '' || parseInt(tmp) == 0){
 style.height = '1px';
 }else{
 style.height = tmp;
 }
 style.visibility = '';
 style.position = '';
 flag[num] = 1;
 if(tid[num]) clearTimeout(tid[num]);
 tid[num] = setInterval(show, 10);//増やすと表示時のスピードが下がる
 }
 
 function show(){
 var height = parseInt(style.height);
 height += 2;//増やすと表示時のスピードが上がる
 if(height >= max){
 height = max;
 clearTimeout(tid[num]);
 }
 style.height = height + 'px';
 }

 function hide(){
 var height = parseInt(style.height);
 height -= 2;//増やすと隠蔽時のスピードが上がる
 if(height <= 1){
 style.display = 'none';
 clearTimeout(tid[num]);
 }
 style.height = height + 'px';
 }
}
//-->
</script>
</head>
<body>
 <!-- MENU 1の設定 -->

<SPAN onclick="tree(0)" style="cursor:hand">MENU 1</SPAN><BR>
 <font color="blue" id="tree" name="tree" style={display:none;}><font size=-1>
 ┣ <a href="リンク先URL">MENU1-1</a><BR>
 ┣ <a href="リンク先URL">MENU1-2</a><BR>
 ┗ <a href="リンク先URL">MENU1-3</a><BR>
</FONT></FONT>

 <!-- MENU 2の設定 -->
<BR>
<SPAN onclick="tree(1)" style="cursor:hand">MENU 2</SPAN><BR>
 <font color="blue" id="tree" name="tree" style={display:none;}><font size=-1>
 ┣ <a href="リンク先URL">MENU2-1</a><BR>
 ┣ <a href="リンク先URL">MENU2-2</a><BR>
 ┗ <a href="リンク先URL">MENU2-3</a><BR>
</FONT></FONT>

 <!-- MENU 3の設定 -->
<BR>
<SPAN onclick="tree(2)" style="cursor:hand">MENU 3</SPAN><BR>
 <font color="blue" id="tree" name="tree" style={display:none;}><font size=-1>
 ┣ <a href="リンク先URL">MENU3-1</a><BR>
 ┣ <a href="リンク先URL">MENU3-2</a><BR>
 ┗ <a href="リンク先URL">MENU3-3</a><BR>
</FONT></FONT></head>
</body>
</html>

参考になれば幸いです。

ダミーURL:http://q.hatena.ne.jp/

◎質問者からの返答

回答ありがとうございます。

サンプルでエラーがでてしまいます、、、、


4 ● susie-t
●22ポイント

すみません、51行目の「&amp;&amp;」を「||」に変更してください。(検索かければ見つかると思います。なんでこんなことに・・・;;)

ダミーURL:http://q.hatena.ne.jp/

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ