TopJavaScriptjQuery > 2011年4月
2011年4月19日

jQuery UI Tabsで作ったタブのフォーカスをはずす方法

April 19,2011 2:22 AM
Tag:[, ]
Permalink

jQuery UI Tabsで作ったタブをクリックしたときに、タブのフォーカスをはずす方法です。jQuery UI Tabsについては「jQuery UI Tabsを使ってタブを実装する」を参照してください。

1.問題点

jQuery UI Tabsで作ったタブをクリックすると、フォーカスがあたったまま(=クリックしたとき点線が表示)になる場合があり、美しくありません。

下の例では真ん中の「WordPrerssプラグイン」のタブをクリックした状態なのですが、フォーカスがあたっているのでどれが選択されているのかよく分からない状態になってしまってます。

フォーカスがあたった状態

これを次のようにフォーカスを外して、選択したタブがきれいに表示されるように修正します。

フォーカスをはずした状態

2.対処方法

jQuery UI Tabs用の(X)HTMLマークアップが次のようになっている場合、

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">First</a></li>
    <li><a href="#tabs-2">Second</a></li>
    <li><a href="#tabs-3">Third</a></li>
  </ul>
  <div id="tabs-1">aaa</div>
  <div id="tabs-2">bbb</div>
  <div id="tabs-3">ccc</div>
</div>

ul要素にid属性またはclass属性を追加し、

<div id="tabs">
  <ul id="tab">
    <li><a href="#tabs-1">First</a></li>
    <li><a href="#tabs-2">Second</a></li>
    <li><a href="#tabs-3">Third</a></li>
  </ul>
  <div id="tabs-1">aaa</div>
  <div id="tabs-2">bbb</div>
  <div id="tabs-3">ccc</div>
</div>


タブを表示するページに次のJavaScriptを設定します。

<script type="text/javascript">
$('#tab a').click(function(){
    this.blur();
});
</script>

この対処はjQuery UI Tabsのサンプルコードの流用です。

Comments [2] | Trackbacks [0]
2011年4月 1日

jQuery UI Tabsを使ってタブを実装する

April 1,2011 3:33 AM
Tag:[]
Permalink

jQuery UI Tabsを使ってタブを実装する方法を紹介します。

本当は4月1日は毎年エイプリルフールネタをエントリーしているのですが、今年は自粛します。

1.サンプル

以下に簡単なサンプルを用意しましたのでご覧ください。

サンプル
jQuery UI Tabsのサンプルページ

2.jQuery UI Tabsのダウンロード

jQuery UIのページの「Download」をクリック。

jQuery UIのページ

「Deselect all components」をクリックして、すべてのチェックを外します。

Deselect all components

「Widgets」の「Tabs」をチェック。

Widgets

右側にある「design a custom theme」をクリック。

design a custom theme

「Theme Roller」でテーマを選択します。「Roll Your Own」タブではすべてを自分でカスタマイズできますが、最初は「Gallery」タブから決まったデザインを選択して、jQuery UIとテーマの対応の感触をつかんだ方がいいでしょう。

Theme Roller

ここでは「Start」を選択してみます。カレンダーの部分をクリックすると、ページ右側のサンプルにテーマが反映されます。

「Start」を選択

タブを「Roll Your Own」に戻すと、「Start」のデザインが反映された状態になっているので(「abc」という部分のデザインが変わっています)、この状態で「Download theme」をクリック。

Download theme

これで前のページに戻ります。「Theme」に「Start」が選択されていることがわかります。あとはバージョン(本エントリー時点では1.8.11)を選択して「Download」をクリック。

Download

3.jQuery UI Tabsの設定

ダウンロードしたアーカイブを展開し、展開したままのディレクトリ構成でindex.htmlにアクセスすればサンプルが表示されます。

サンプル

実際に利用するのはjsフォルダと選択したテーマのCSSが入っているcssフォルダです。

head要素に次のように設定します。ダウンロードしたアーカイブにはjquery-1.5.1.min.jsが同梱されていますが、ここでは1.4.2を使ってみます。

<link rel="stylesheet" href="css/start/jquery-ui-1.8.11.custom.css" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.11.custom.min.js"></script>
<script type="text/javascript">
$(function(){
    $('#tabs').tabs();
});
</script>

タブのマークアップは次のようになります。タブとコンテンツの対応は、li要素→a要素のhref属性に、対応するid属性値をフラグメント形式(#...)で設定すればOKです。

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">First</a></li>
    <li><a href="#tabs-2">Second</a></li>
    <li><a href="#tabs-3">Third</a></li>
  </ul>
  <div id="tabs-1">aaa</div>
  <div id="tabs-2">bbb</div>
  <div id="tabs-3">ccc</div>
</div>

フラグメント指定以外に、通常のページリンクにすればAjaxでページを読み込んでくれるというスグレモノです。

<div id="tabs">
  <ul>
    <li><a href="aaa.html">First</a></li>
    <li><a href="bbb.html">Second</a></li>
    <li><a href="ccc.hmtl">Third</a></li>
  </ul>
</div>

デザインは、一番外側のdiv要素に「id="tabs"」を記述することでテーマが反映されます。実際には次のようにclass属性が設定されます。

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
  <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
    <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">First</a></li>
    <li class="ui-state-default ui-corner-top"><a href="#tabs-2">Second</a></li>
    <li class="ui-state-default ui-corner-top"><a href="#tabs-3">Third</a></li>
  </ul>
  <div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">aaa</div>
  <div id="tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">bbb</div>
  <div id="tabs-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">ccc</div>
</div>

4.起動オプション

jQuery UI Tabsには豊富な起動オプションが用意されています。ここではいくつかのオプションを紹介します。

指定した番号のタブを選択状態にする(番号は0から開始)

$('#tabs').tabs({
    selected: 2
});

選択状態のタブをクリックするとコンテンツを折りたたむようにする

$('#tabs').tabs({
    collapsible: true
});

クッキーに保存する(jQuery Cookieプラグインとの併用が必要)

$('#tabs').tabs({
    cookie: { expires: 30 }
});

タブの切り替えをアニメーションにする(「height: 'toggle'」はタブ切り替え時に縦方向もアニメーション化)

$('#tabs').tabs({
    fx: { height: 'toggle', opacity: 'toggle', duration: 300 }
});

Ajaxで読み込んだページをキャッシュする

$('#tabs').tabs({
    cache: true
});

タブの切り替えを禁止する

$('#tabs').tabs({
    disabled: true
});

複数のオプションを指定するには、次のように設定します。

$('#tabs').tabs({
    selected: 2,
    fx: { height: 'toggle', opacity: 'toggle', duration: 300 }
});

5.その他

上記で紹介した以外に、jQuery UI Tabsには各種のイベントやメソッドが用意されています。詳しくはjQuery UI Tabsのドキュメントを参照してください。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3