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;"> コンテンツ1<br /> My Favorite: <input type="checkbox" name="myFavorite" /><br /> <br /> <input id="novelInput" type="button" value="すべてのジャンルに反映する" /> </div> <div id="essay" title="エッセー" style="padding:10px;"> コンテンツ2<br /> My Favorite: <input type="checkbox" name="myFavorite" /><br /> <br /> <input type="button" value="すべてのジャンルに反映する" /> </div> <div id="economy" title="経済" style="padding:10px;"> コンテンツ3<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;"> コンテンツ1<br /> My Favorite: <input type="checkbox" name="myFavorite" /><br /> <br /> <input type="button" onclick="alert('test');" value="すべてのジャンルに反映する" /> </div> <div title="エッセー" style="padding:10px;"> コンテンツ2<br /> My Favorite: <input type="checkbox" name="myFavorite" /><br /> <br /> <input type="button" onclick="alert('test');" value="すべてのジャンルに反映する" /> </div> <div title="経済" style="padding:10px;"> コンテンツ3<br /> My Favorite: <input type="checkbox" name="myFavorite" /><br /> <br /> <input type="button" onclick="alert('test');" value="すべてのジャンルに反映する" /> </div> <div title="情報" style="padding:10px;"> コンテンツ3<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;"> コンテンツ1<br /> My Favorite: <input type="checkbox" name="myFavorite" /><br /> <br /> <input type="button" onclick="alert('test');" value="すべてのジャンルに反映する" /> </div> <div title="文芸" style="padding:10px;"> コンテンツ2<br /> My Favorite: <input type="checkbox" name="myFavorite" /><br /> <br /> <input type="button" onclick="alert('test');" value="すべてのジャンルに反映する" /> </div> <div title="スポーツ" style="padding:10px;"> コンテンツ3<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"> コンテンツ1<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>
サンプルのダウンロード