「サイト内、自動切換えタブ機能付きのページ」

締切済

質問者：raryrary
質問日時：2010/07/27 22:28
回答数：2件

「サイト内、自動切換えタブ機能付きのページ」

http://www.au.kddi.com/
上記のサイトのTOP（index）の左カラムにある、
一定時間ごとにタブが切り替わる（この場合はアコーディオン風ですが）機能を
つけてみたいのですが、解説していただけるサイト、または教えてgoo上にて
お教えくださいませんか。

具体的には、ウェブコンテンツの一部のエリアに、5秒ごとにタブがくるくる切り替わる
ニュース一覧を設けたいです。
あるときは企業情報のタブとその内容が表示されたり、
またあるときは芸能ニュースのタブとその内容が表示されたりと自動切り替わり。

さらにはその各タブ内のリストはデータベースから日付順にソートして引っ張ってくる。

そんなことがやりたいです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： fujillin
回答日時：2010/07/29 14:24

タブの切替えとクリック対応のサンプルです。

素で書くと長くなるので、jqueryを利用しています。
HTMLの整合性とかのチェックはほとんどしていませんので、あくまで雰囲気としてのサンプルです。
コンテンツを読込むのは、最初にサーバ側でセットして出力するか、ajaxで読込むなどご自由に。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
ul#tabs {list-style:none;padding:0;margin:0;cursor:pointer;}
ul#tabs li {width:5em;float:left;margin-right:3px;text-align:center;border:1px solid #888;background-color:#ddd;}
div#content {clear:both; position:relative;top:-1px;border:1px solid #888;z-index:-5;}
div#content, div#content div.tab {width:500px;height:300px;background-color:#fff;}
div#content div.tab {overflow:auto;}
ul#tabs li.active {font-weight:bold;background-color:#fff;border-bottom:1px solid #fff;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4. …
<script type="text/javascript">
$(function(){
var active="active",interval=5000;
var index=0, timerId=null;
var tabs=$("#tabs > li"), content=$("#content > div");

//初期設定
tabs.each(function(){$(this).removeClass(active);});
content.hide();
tabs.eq(0).addClass(active);
content.eq(0).show();

//クリック処理
tabs.click(function(){
if($(this).hasClass("active")) return;
if(timerId) clearInterval(timerId),timerId=null;
change(tabs.index(this));
setTimer();
});

setTimer();
//タイマー設定
function setTimer(){
timerId=setTimeout(timeProcess,interval);
}

//表示切替え
function timeProcess(){
change((index +1)%tabs.length);
timerId=setTimeout(arguments.callee,interval);
}

//タブ表示
function change(t_index){
tabs.eq(index).removeClass(active);
tabs.eq(t_index).addClass(active);
content.eq(index).stop(true, true).hide();
index=t_index;
content.eq(index).show("slow");
}
});
</script>
</head>

<body>
<ul id="tabs">
<li>tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div id="content">
<div class="tab">content1</div>
<div class="tab">content2</div>
<div class="tab">content3</div>
</div>
</body>

この回答への補足

サンプルまでいただいてありがとうございます。
只今実装、編集をしていますので理解できましたら
再度あらためて御礼いたします。

補足日時：2010/08/03 12:51

通報する

- 0
- 件

通報する

No.1

回答者： yyr446
回答日時：2010/07/28 09:55

　ご希望の機能のやり方を、ずばりとそのまま解説してくれるサイトを

見つけるのはたいへんでしょう。
　全体の流れを考えてみて、どんな機能が必要か、どんな順序で実行すれば
よいか等、まず概要の設計っぽいのを考えてみましょう。
　機能ごとにやり方を探せば、容易に解決策が見えてきます。

「データベースから引っ張ってくる」の部分は難関です。javascriptには
データベースをアクセスする機能がないので、どうしても別途サーバー側
のプログラムを作る必要があります。

　変わりに、YahooとかGoogleの検索APIサービスを使って、特定カテゴリー
のニュースや情報を取得し、javascriptのAJAXの機能で動的なコンテンツ
を生成できます。

　タブメニューとかアコーディオンとかAJAXを組み合わせて、タイマ－で
コントロールすれば、そんなに困難じゃなさそうです。

　全部をフルスクラッチでコーディングするよりは、jQuery等のフレームワーク
ライブラリーを使いつつ、タブメニューとかアコーディオンとかポップアップ
とか、目的にあったパーツを探して、組み上げるといった流れがよいかも。

　最初から全部を一度に作り上げようとせず、機能ごとに部分部分作っていくの
が懸命です。