Easy UIでネストされたタブの選択状態を取得する

Posted by admin on 2014年1月12日 in 未分類 |
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:&nbsp;&nbsp;<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:&nbsp;&nbsp;<input type="checkbox" name="myFavorite" /><br />
          <br />
          <input type="button" value="すべてのジャンルに反映する" />
        </div>
        <div id="economy"  title="経済" style="padding:10px;">
          コンテンツ3<br />
          My Favorite:&nbsp;&nbsp;<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:&nbsp;&nbsp;<input type="checkbox" name="myFavorite" /><br />
          <br />
          <input type="button" onclick="alert('test');" value="すべてのジャンルに反映する" />
        </div>
        <div title="エッセー" style="padding:10px;">
          コンテンツ2<br />
          My Favorite:&nbsp;&nbsp;<input type="checkbox" name="myFavorite" /><br />
          <br />
          <input type="button" onclick="alert('test');" value="すべてのジャンルに反映する" />
        </div>
        <div title="経済" style="padding:10px;">
          コンテンツ3<br />
          My Favorite:&nbsp;&nbsp;<input type="checkbox" name="myFavorite" /><br />
          <br />
          <input type="button" onclick="alert('test');" value="すべてのジャンルに反映する" />
        </div>
        <div title="情報" style="padding:10px;">
          コンテンツ3<br />
          My Favorite:&nbsp;&nbsp;<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:&nbsp;&nbsp;<input type="checkbox" name="myFavorite" /><br />
          <br />
          <input type="button" onclick="alert('test');" value="すべてのジャンルに反映する" />
        </div>
        <div title="文芸" style="padding:10px;">
          コンテンツ2<br />
          My Favorite:&nbsp;&nbsp;<input type="checkbox" name="myFavorite" /><br />
          <br />
          <input type="button" onclick="alert('test');" value="すべてのジャンルに反映する" />
        </div>
        <div title="スポーツ" style="padding:10px;">
          コンテンツ3<br />
          My Favorite:&nbsp;&nbsp;<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>



サンプルのダウンロード

Comments are closed. Would you like to contact the author directly?

Copyright © 2013-2018 ソフトウェアをめぐる冒険 All rights reserved.
This site is using the Desk Mess Mirrored theme, v2.2, from BuyNowShop.com.