- 締切済み
a9のサイトの仕組み
http://a9.com/hoge で Book Results Search History を押すとページ内で結果が開くと思います。 これはどういう技術を使っているのでしょうか？ 簡単なサンプルソースなどを含めて教えてくださるとうれしいです。 よろしくお願いします。
- kunitada
- お礼率0% (0/7)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- dayowl
- ベストアンサー率56% (84/148)
a9サイトをちらっと見ただけなので、そこで使われているJavascriptがどんなものなのか？ということまでは分からないのですが、動作としてはこんな感じなんじゃないかな？と思いました。 要は、右端にシートタブのようなものがあって、タブをクリックすると開いたように見えるってことですよね？ すごくシンプルな考え方なんですが、「ただ３列のテーブルがあって、それぞれの幅を変えるだけで良いのではないかな」と思いました。 ご期待通りのものかどうかは、全く自信無しなんですが、一応ご参考までに。 ここから↓ <html> <head><title></title> <style type="text/css"> <!-- #main { position:absolute;top:50;left:10; } //--> </style> <script language="javascript"> <!--// function chageView(w1, w2, w3) { var out = "<table border=1 width=100%>"; out += "<tr>"; out += "<td width=" + w1 + "%>第1のスペース<br><br><br><br><br><br><br><br><br><br></td>"; out += "<td width=" + w2 + "%><a href=\"javascript:chageView()\">Book Results</a></td>"; out += "<td width=" + w3 + "%><a href=\"javascript:chageView()\">Search History</a></td>"; out += "</tr>"; out += "</table>"; document.all("main").innerHTML = out; } //--> </script> </head> <body> <span ID="main"> <table border=1> <tr> <td width=80%> 第１のスペース<br><br><br><br><br><br><br><br><br><br> </td> <td width=10%> <a href="javascript:chageView(50, 40, 10)">Book Results</a> </td> <td width=10%> <a href="javascript:chageView(40, 30, 30)">Search History</a> </td> </tr> </table> </span> </body> </html> ↑ここまでをindex.htmlとして保存してIEで開いてみてみてください。 このソースはIEのみの対応なので、ネットスケープ対応にするにはブラウザ判別して document.all("main").innerHTML = out; ではなくて document.getElementById("main").innerHTML = out; としてやるような処置が必要です。
