空間を最大限に使いトップページの画像をタブで切り替える。

今回、書くのは、
トップページに複数の作品を乗せたいときに、
スクロールさせず、画面上部に配置したタブを
切り替えることにより、表示させるものを
切り替えるjQueryを作成します。

分かりにくいので、実行を結果をご覧ください。

サンプルコードの実行結果はこちら

画面上部の「Work」を押すとアニメーションをつけて
表示される文字列が切り替わるのは確認できます。

style.css

    *{margin:0;padding:0;}
    html{font-family: "Ropa Sans", 
        "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;}
    a{  color:black;
        text-decoration:none;}
    ul{list-style-type:none;}
    .clearfix:before,
    .clearfix:after{content:" "; display: table; }
    .clearfix:after{clear: both; }
    
    .secWork h2{
        float:left;
        font-size:24px;}

    .secWork{
        position:relative;
        width:960px;
        margin:0 auto;}

    header.secHeader{
        position: relative;
        line-height:64px;}
    /* 
        .tabHighlight表示を絶対位置で表示するために
        その親要素のであるdiv要素に適用するCSS
    */
    .secHeader > .inner{
        margin:auto;
        width:1000px;
        position:relative;}

    .navTabs{
        box-shadow: inset 1px 0 white;
        border-left: 1px solid #c0c0c0;
        float:right;
        letter-spacing:1px;
    }
    .navTabs li{
        border-right:1px solid #d0d0d0;
        float: left;
        position: relative;
        /*
            下記の「.tabHighlight」classの
            上に表示するようにz-indexを設定する。
        */
        z-index:2;}

    .navTabs a{
        width:120px;
        display:block;
        text-align:center;
        position:relative;}
    .ui-tabs-active a {
        color:#ffffff;
    }

    .tabHighlight{
        background-color:#303030;
        width:120px;
        position:absolute;
        height:100%;}

    /*
        吹き出し上のオブジェクトに適用するスタイル
    */
    .tabHighlight:after{
        /*
        javaScriptにて、leftプロパティの値を
        変更するので、position:absoluteを指定する。
        */
        position:absolute;
        width:37px;
        height:19px;
        bottom:-19px;
        /*
        読み込んだ吹き出しの画像「▼」の表示位置を調整
        */
        left:50%;
        margin-left:-18px;
        z-index:10;
        background:url(img/sprites.png) no-repeat 0 0;
        content:"";}

    .secBody{
        height:480px;
        position: relative;
    }

*{margin:0;padding:0;}

html{font-family: "Ropa Sans",

"Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;}

a{ color:black;

text-decoration:none;}

ul{list-style-type:none;}

.clearfix:before,

.clearfix:after{content:" "; display: table; }

.clearfix:after{clear: both; }

.secWork h2{

float:left;

font-size:24px;}

.secWork{

position:relative;

width:960px;

margin:0 auto;}

header.secHeader{

position: relative;

line-height:64px;}

.tabHighlight表示を絶対位置で表示するために

その親要素のであるdiv要素に適用するCSS

.secHeader > .inner{

margin:auto;

width:1000px;

position:relative;}

.navTabs{

box-shadow: inset 1px 0 white;

border-left: 1px solid #c0c0c0;

float:right;

letter-spacing:1px;

}

.navTabs li{

border-right:1px solid #d0d0d0;

float: left;

position: relative;

下記の「.tabHighlight」classの

上に表示するようにz-indexを設定する。

z-index:2;}

.navTabs a{

width:120px;

display:block;

text-align:center;

position:relative;}

.ui-tabs-active a {

color:#ffffff;

}

.tabHighlight{

background-color:#303030;

width:120px;

position:absolute;

height:100%;}

吹き出し上のオブジェクトに適用するスタイル

.tabHighlight:after{

javaScriptにて、leftプロパティの値を

変更するので、position:absoluteを指定する。

position:absolute;

width:37px;

height:19px;

bottom:-19px;

読み込んだ吹き出しの画像「▼」の表示位置を調整

left:50%;

margin-left:-18px;

z-index:10;

background:url(img/sprites.png) no-repeat 0 0;

content:"";}

.secBody{

height:480px;

position: relative;

}

index.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>複数のパネルを使いコンテンツを切り替える</title>
   
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/ui/jquery-ui.js"></script>    
    
    <link rel="stylesheet" href="style.css">
    <script src="js/manyTabs2.js"></script>

</head>
<body>
<section class="secWork" id="work">
    <header class="secHeader">
        <div class="inner clearfix">
            <h2>Welcome!</h2>
            <ul class="navTabs">
                <li><a href="#work01">Work01</a></li>
                <li><a href="#work02">Work02</a></li>
                <li><a href="#work03">Work03</a></li>
                <li><a href="#work04">Work04</a></li>
                <li><a href="#work05">Work05</a></li>
            </ul>
            <span class="tabHighlight"></span>
        </div>
    </header>
    <div class="secBody">
        <section class="tabPanel" id="work01">
            <p>作品１　サンプルテキスト</p>
        </section>
        <section class="tabPanel" id="work02">
            <p>作品２　サンプルテキスト</p>
        </section>
        <section class="tabPanel" id="work03">
            <p>作品３　サンプルテキスト</p>
        </section>
        <section class="tabPanel" id="work04">
            <p>作品４　サンプルテキスト</p>
        </section>
        <section class="tabPanel" id="work05">
            <p>作品５　サンプルテキスト</p>
        </section>
    </div>
</section>    
</body>
</html>

<!doctype html>

<html>

<head>

<title>複数のパネルを使いコンテンツを切り替える</title>

</head>

<body>

<h2>Welcome!</h2>

</ul>

</div>

</header>

<p>作品１　サンプルテキスト</p>

</section>

<p>作品２　サンプルテキスト</p>

</section>

<p>作品３　サンプルテキスト</p>

</section>

<p>作品４　サンプルテキスト</p>

</section>

<p>作品５　サンプルテキスト</p>

</section>

</div>

</section>

</body>

</html>

manyTabs2.js

$(function(){
    $(".secWork").each(function(){
        
        
        var
        /*
        div class="secWork"で囲んだ範囲を
        jQueryオブジェクトとして扱う
        */
        $container = $(this),
        
        /*
        ブラウザ上部に表示されるタブのリスト
        */
        $tabList   = $container.find(".navTabs li"),
        
        /*
        選択中のタブを表す。
        */
        $highlight = $container.find(".tabHighlight");
        
        /*
        jQueryUiTabsを実行する
        指定されたjQueryオブジェクト(今回は.secwork)から
        id属性を持ったパネルと、それらにリンクしたa要素を抽出し、
        タブとして動作刷るための設定を行います。
        */
        $container.tabs({
            
            //非表示にするときのアニメーションにかける時間
            hide:{ duration: 300 },
            //表示にするときのアニメーションかける時間
            show:{ duration: 200 },
            
            /*
                読み込み時のハイライトの位置を調整
                create:＊＊＊　の＊＊＊には
                スクリプトが読み込まれてタブが押せるように
                なったとき(有効になったとき)の処理を書く
            */
            create: moveHighlight,
            /*
                タブ選択時のハイライトの位置を調整
                activate:＊＊＊　の＊＊＊には
                新しいタブがクリックされたときに
                実行する処理を書く            
            */
            activate: moveHighlight
            /*
                いずれの場合も今回は、
                moveHighlight関数を呼び出します。
            */
        });
        
        /*
            引数event:
            jQuery UI Tabs独自のイベントオブジェクトですが、
            今回は使いません。
        
            引数ui:
            イベントが発生したように係る情報を保持している
            オブジェクトです。
            create　の場合はui.tabs,
            activateの場合は、ui.newTabで
            当該タブのjQueryオブジェクトを取得する出来ます。
        */
        function moveHighlight(event,ui){
            
            //変数宣言
            var　
            
            /*
                「||」は論理和演算子といいます。(javaScriptの演算子です。)
                最初に「||」の左項のui.newTabを見て、
                jQueryオブジェクトが存在すれば格納し、
                存在しない場合は右項のui.tabを格納する処理です。
            */
            $newTab = ui.newTab || ui.tab,

            /*
                ハイライトが選択中のタブときっちり
                重なる必要があるので、
                下記のようにposition()メソッドを使い
                かつleftプロパティをさらに使い、位置を
                特定して変数leftに格納する。
            */
            left = $newTab.position().left;
            
            /*
                animateメソッドでハイライトを移動させている。
            */
            $highlight.animate({
                left: left
            },400,"easeOutExpo");
        }
    });
});

$(function(){

$(".secWork").each(function(){

var

div class="secWork"で囲んだ範囲を

jQueryオブジェクトとして扱う

$container = $(this),

ブラウザ上部に表示されるタブのリスト

$tabList = $container.find(".navTabs li"),

選択中のタブを表す。

$highlight = $container.find(".tabHighlight");

jQueryUiTabsを実行する

指定されたjQueryオブジェクト(今回は.secwork)から

id属性を持ったパネルと、それらにリンクしたa要素を抽出し、

タブとして動作刷るための設定を行います。

$container.tabs({

//非表示にするときのアニメーションにかける時間

hide:{ duration: 300 },

//表示にするときのアニメーションかける時間

show:{ duration: 200 },

読み込み時のハイライトの位置を調整

create:＊＊＊　の＊＊＊には

スクリプトが読み込まれてタブが押せるように

なったとき(有効になったとき)の処理を書く

create: moveHighlight,

タブ選択時のハイライトの位置を調整

activate:＊＊＊　の＊＊＊には

新しいタブがクリックされたときに

実行する処理を書く

activate: moveHighlight

いずれの場合も今回は、

moveHighlight関数を呼び出します。

});

引数event:

jQuery UI Tabs独自のイベントオブジェクトですが、

今回は使いません。

引数ui:

イベントが発生したように係る情報を保持している

オブジェクトです。

create　の場合はui.tabs,

activateの場合は、ui.newTabで

当該タブのjQueryオブジェクトを取得する出来ます。

function moveHighlight(event,ui){

//変数宣言

var　

「||」は論理和演算子といいます。(javaScriptの演算子です。)

最初に「||」の左項のui.newTabを見て、

jQueryオブジェクトが存在すれば格納し、

存在しない場合は右項のui.tabを格納する処理です。

$newTab = ui.newTab || ui.tab,

ハイライトが選択中のタブときっちり

重なる必要があるので、

下記のようにposition()メソッドを使い

かつleftプロパティをさらに使い、位置を

特定して変数leftに格納する。

left = $newTab.position().left;

animateメソッドでハイライトを移動させている。

$highlight.animate({

left: left

},400,"easeOutExpo");

}

});

position()とoffset()の違いって？？？

position()メソッドはoffset()と同じように、
「要素の位置を取得するメソッド」で、
topプロパティ(上からの距離)、leftプロパティ(左からの距離)を
保持しています。

以前のスティッキーヘッダーの記事で出てきた
offset()メソッドの違いは下記の通りです。

１．offset()メソッドは、ドキュメントを基準にした位置を返す
２．position()メソッドは、positionプロパティの値が
　　static以外(fixed,absolute,relative)である直前の
　　祖先要素を基準にした位置を返す。