jQuery、Dojo、YUIの使えるウィジェット

Dojoではタブコンテンツに直接dojoTypeでdijit.layout.TabContainer、dijit.layout.ContentPaneを指定する。

HTMLファイル - tabs-dojo.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>TabContainer / Dojo</title>
<link rel="stylesheet" type="text/css" href="./js/dojo/dojo/resources/dojo.css" />
<link rel="stylesheet" type="text/css" href="./js/dojo/dijit/themes/dijit.css" />
<link rel="stylesheet" type="text/css" href="./js/dojo/dijit/themes/tundra/layout/TabContainer.css" />
<script type="text/javascript" src="./js/dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
<!--
    dojo.require('dijit.layout.TabContainer');
    dojo.require('dijit.layout.ContentPane');
    dojo.require('dojo.parser');
-->
</script>
</head>

<body class="tundra">

<h1>TabContainer / Dojo</h1>

<div dojoType="dijit.layout.TabContainer" id="maindiv" style="height: 100px; width: 200px">
    <div dojoType="dijit.layout.ContentPane" id="tab_1" title="タブ1">
        <p>タブ1のコンテンツ</p>
    </div>
    <div dojoType="dijit.layout.ContentPane" id="tab_2" title="タブ2" selected="true">
        <p>タブ2のコンテンツ</p>
    </div>
    <div dojoType="dijit.layout.ContentPane" id="tab_3" title="タブ3">
        <p>タブ3のコンテンツ</p>
    </div>
</div>

</body>

</html>

Firefoxでの動作イメージ

Internet Explorerでの動作イメージ