Easy UIでネストされたタブの選択状態を取得する
Easy UIのタブで選択されたタブを取得する方法を調べる。（コードの出力に「SyntaxHighlighter Evolved」なるプラグインを利用しているが、有効にならない場合があるらしい。。。）
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="/Struts2Spring/js/lib/jquery-easyui-1.3.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/Struts2Spring/js/lib/jquery-easyui-1.3.5/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<link rel="stylesheet" type="text/css" href="/Struts2Spring/css/global.css" />
<script type="text/javascript" src="/Struts2Spring/js/lib/jquery-easyui-1.3.5/jquery.min.js"></script>
<script type="text/javascript" src="/Struts2Spring/js/lib/jquery-easyui-1.3.5/jquery.easyui.min.js"></script>
</head>
<body>
「Struts2 + Spring JDBC」Sample ～ カテゴリー設定<br />
<br />
<script type="text/javascript">
<!--
// jQuery Test
// $(document.body).css('backgroundColor', '#33ff66');
$(function() {
$('#novelInput')
.click(function() {
if ($('#novel input[name="myFavorite"]').prop("checked")) {
$('#bunko-shinsyo div div input[name="myFavorite"]').prop('checked', 'checked');
} else {
$('#bunko-shinsyo div div input[name="myFavorite"]').removeAttr('checked');
}
alert($.fn.jquery);
});
$('#testButton')
.click(function() {
// 外側タブの選択状態取得
var outerSelTab = $('#outertab').tabs('getSelected');
var indexOuterTab = $('#outertab').tabs('getTabIndex',outerSelTab);
alert(indexOuterTab);
// 内側タブの選択状態取得
var innerSelTab;
var indexInnerTab;
switch (indexOuterTab) {
case 0:
innerSelTab = $('#bunko-shinsyo').tabs('getSelected');
indexInnerTab = $('#bunko-shinsyo').tabs('getTabIndex',innerSelTab);
alert(indexInnerTab);
break;
case 1:
innerSelTab = $('#tankou-bon').tabs('getSelected');
indexInnerTab = $('#tankou-bon').tabs('getTabIndex',innerSelTab);
alert(indexInnerTab);
break;
case 2:
innerSelTab = $('#comic').tabs('getSelected');
indexInnerTab = $('#comic').tabs('getTabIndex',innerSelTab);
alert(indexInnerTab);
break;
case 3:
innerSelTab = $('#magazine').tabs('getSelected');
indexInnerTab = $('#magazine').tabs('getTabIndex',innerSelTab);
alert(indexInnerTab);
break;
}
var innerSelTab = $("'#" + outerSelTab.context.name + "'").tabs('getSelected');
var indexInnerTab = $("'#" + outerSelTab.context.name + "'").tabs('getTabIndex',innerSelTab);
alert(indexInnerTab);
});
});
function setAllTabs(me) {
//$(document.body).css('backgroundColor', '#33ff66');
//$('div.easyui-tabs').css('backgroundColor', '#33ff66');
$(this).css('color', 'Red');
alert($.fn.jquery);
}
//-->
</script>
<h2>Nested Tabs</h2>
<!--
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>カテゴリーを設定してください。</div>
</div>
-->
<form action="XXXAction">
<div style="margin:10px 0;"></div>
<div id="outertab" class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:700px;height:250px">
<div name="bunko-shinsyo" title="文庫／新書" data-options="fit:true,plain:true">
<div id="bunko-shinsyo" class="easyui-tabs" data-options="fit:true,plain:true">
<div id="novel" title="小説" style="padding:10px;">
コンテンツ１<br />
My Favorite: <input type="checkbox" name="myFavorite" /><br />
<br />
<input id="novelInput" type="button" value="すべてのジャンルに反映する" />
</div>
<div id="essay" title="エッセー" style="padding:10px;">
コンテンツ２<br />
My Favorite: <input type="checkbox" name="myFavorite" /><br />
<br />
<input type="button" value="すべてのジャンルに反映する" />
</div>
<div id="economy" title="経済" style="padding:10px;">
コンテンツ３<br />
My Favorite: <input type="checkbox" name="myFavorite" /><br />
<br />
<input type="button" value="すべてのジャンルに反映する" />
</div>
</div>
</div>
<div name="tankou-bon" title="単行本" data-options="fit:true,plain:true">
<div id="tankou-bon" class="easyui-tabs" data-options="fit:true,plain:true">
<div title="小説" style="padding:10px;">
コンテンツ１<br />
My Favorite: <input type="checkbox" name="myFavorite" /><br />
<br />
<input type="button" onclick="alert('test');" value="すべてのジャンルに反映する" />
</div>
<div title="エッセー" style="padding:10px;">
コンテンツ２<br />
My Favorite: <input type="checkbox" name="myFavorite" /><br />
<br />
<input type="button" onclick="alert('test');" value="すべてのジャンルに反映する" />
</div>
<div title="経済" style="padding:10px;">
コンテンツ３<br />
My Favorite: <input type="checkbox" name="myFavorite" /><br />
<br />
<input type="button" onclick="alert('test');" value="すべてのジャンルに反映する" />
</div>
<div title="情報" style="padding:10px;">
コンテンツ３<br />
My Favorite: <input type="checkbox" name="myFavorite" /><br />
<br />
<input type="button" onclick="alert('test');" value="すべてのジャンルに反映する" />
</div>
</div>
</div>
<div name="magazine" title="雑誌" data-options="fit:true,plain:true">
<div id="magazine" class="easyui-tabs" data-options="fit:true,plain:true">
<div title="経済" style="padding:10px;">
コンテンツ１<br />
My Favorite: <input type="checkbox" name="myFavorite" /><br />
<br />
<input type="button" onclick="alert('test');" value="すべてのジャンルに反映する" />
</div>
<div title="文芸" style="padding:10px;">
コンテンツ２<br />
My Favorite: <input type="checkbox" name="myFavorite" /><br />
<br />
<input type="button" onclick="alert('test');" value="すべてのジャンルに反映する" />
</div>
<div title="スポーツ" style="padding:10px;">
コンテンツ３<br />
My Favorite: <input type="checkbox" name="myFavorite" /><br />
<br />
<input type="button" onclick="alert('test');" value="すべてのジャンルに反映する" />
</div>
</div>
</div>
<div name="comic" title="コミック" data-options="fit:true,plain:true">
コンテンツ１<br />
</div>
</div>
</form>
<br />
<br />
<!-- 入力バインディングのテスト：オブジェクトのメンバーをActionに渡す -->
<form action="/Struts2Spring/sample/setBookCategory" method="post">
タイトル：<input type="text" name="book.title" /><br />
著者：<input type="text" name="book.author" /><br />
カテゴリー：<input type="text" name="book.categoryName" /><br />
カテゴリー区分：
<select name="book.categoryId">
<option value="1">小説</option>
<option value="2" selected="selected">エッセー</option>
<option value="3">詩</option>
</select>
<br />
<input type="submit" value="test submit" />
</form>
<form action="/Struts2Spring/sample/setBookCategory" method="post">
<input type="button" onclick="JavaScript:location.href='/Struts2Spring/'" value="戻る" /><br />
<br />
<input id="testButton" type="button" value="testxx" />
</form>
</body>
</html>
サンプルのダウンロード