﻿
/*
Tabs 頁籤
2011/06/30 Danny Create

<style>
.idTabs a.selected { color: red }
</style>
<div>
	<ul class=idTabs>
		<li><a href=#Tab1>頁籤1</a></li>
		<li><a href=#Tab2>頁籤2</a></li>
		<li><a href=#Tab3>頁籤3</a></li>
	</ul>
	<div id=Tab1>內容1</div>
	<div id=Tab2><span>沒有資料</span></div>
	<div id=Tab3>內容3</div>
</div>
*/


// 輪播 Tabs, 會略過沒資料的(沒資料指內容以 <span></span> 包住)
function fnTabStart($box) {
    if ($box.data('tTabs')) return;
    var $ul = $box.children('.idTabs');
    var $Tabs = $ul.data('$Tabs');
    if (!$Tabs) {
        $Tabs = $();
        // 整理有內容的 Tabs
        $ul.children('li').each(function() {
            var $div = $($(this).children('a').attr('href'));
            if ($div.length && !$div.children('span').length)
                $Tabs = $Tabs.add(this);
        });
        $ul.data('$Tabs', $Tabs)
    }
    if ($Tabs.length>1)
        $box.data('tTabs',setInterval(function(){fnTabNext($ul);}, 5000));
}
// 輪播切換下一個 Tabs
function fnTabNext($ul) {
    var $cli = $ul.children(':has(a.selected)');
    var $Tabs = $ul.data('$Tabs')
    for (var i=0; i<$Tabs.length; i++) {
        if ($Tabs.eq(i).index() > $cli.index()) {
            $Tabs.eq(i).click();
            return;
        }
    }
    $Tabs.eq(0).click();
}

$(function() {
    // Tabs 滑鼠移入移出的輪播控制跟起始
    $('ul.idTabs').parent().hover(
        function() {
            clearInterval($(this).data('tTabs'));
            $(this).data('tTabs',0);
        }, function () {
            fnTabStart($(this));
        }
    ).each(function() {
        fnTabStart($(this));
    });
    // Tabs
    $('ul.idTabs li').click(function() {
        var $this = $(this);
        if ($this.find('.selected').length) return false;
        var $cd = $($this.find('a').attr('href'));
        var $pd = $($this.siblings().find('a.selected').attr('href'));
        // 保留最高高度
        var ch = $cd.height();
        var ph = ($pd.height() || 0);
        if (!ch || ph > ch) $cd.height(ph);
        // 切換 Tab
        $this.find('a').addClass('selected').end().siblings().find('a.selected').removeClass('selected');
        $cd.stop(true, true).fadeIn('fast').siblings(':gt(1)').hide();
        return false;
    }).eq(0).click().end().find('a').focus(function() {
        this.blur();
    });
});

