先日、PIE.htc 使用で書くタブを書きましたが、Google Chrome では、htcコンポーネントを
動作させる behavior の記述は無効なので、
PIE.htc を使用しないものに書き直したものをここに書きます。
【HTML記述について】
・タブ全体は、id属性でなく、固定名class属性を指定した <div class="tabBox"> という絶対の約束、
・タブの ul は、固定名class属性を指定した <ul class="tabs">
・タブの li は、独自の属性でタブの順番を、、<li data-tabid="1">
・タブのコンテンツは、<div class="tab-content"></div>
<div class="tabBox">
<ul class="tabs">
<li data-tabid="1"><a href="#">Tab One</a></li>
<li data-tabid="2"><a href="#">Tab Two</a></li>
<li data-tabid="3"><a href="#">Tab Three</a></li>
</ul>
<div class="tab-content">
</div>
</div>
【jQuery で指定】 以下の仕様の関数
/**
* tabSetting(urls, errorHtml)
* @param urls ロードするURLの配列、
* @param errorHtml ロード失敗時のエラーコンテンツ
*/
で呼び出し。。。
<script type="text/javascript">
$(function(){
tabSetting(["sub/one.html", "sub/two.html", "sub/three.html"], "<h1>Page Load Error!</h1>");
});
</script>
【CSS の記述】
@CHARSET "UTF-8";
.tabBox .tabs {
margin: 0;
padding: 0 10px;
overflow: hidden;
margin-bottom: -1px;
height: 36px;
}
.tabBox .tabs li {
float: left;
list-style: none;
margin: 0;
padding: 4px 5px 0px 5px; /* [上][右][下][左] */
height: 32px;
overflow: hidden;
position: relative;
z-index: 1;
border-bottom: 1px solid #ffffff;
}
.tabBox .tabs li.selected {
z-index: 3; /* 重なり順序 */
}
.tabBox .tabs a {
float: left;
height: 32px;
line-height: 32px;
padding: 0 10px 0 10px;
color: #000000;
text-decoration: none;
background-color: #e0e0e0;
border: 1px solid #707070;
/* 角丸 */
border-top-right-radius: 8px;
border-top-left-radius: 8px;
/* シャドウ */
-webkit-box-shadow: #707070 0px 0px 4px 0px;
-moz-box-shadow: #707070 0px 0px 4px 0px;
box-shadow: #707070 0px 0px 4px 0px;
}
.tabBox .tabs .selected a {
background-color: #ffffff;
border-top: 4px solid #ff0000;
border-bottom: 0;
}
.tabBox .tabs a:hover {
background: -webkit-gradient(linear, 0 0, 0 70%, from(#eeeeff), to(#ffffff));
background: -webkit-linear-gradient(#eeeeff, #ffffff 70%);
background: -moz-linear-gradient(#eeeeff, #ffffff 70%);
background: -ms-linear-gradient(#eeeeff, #ffffff 70%);
background: -o-linear-gradient(#eeeeff, #ffffff 70%);
background: linear-gradient(#eeeeff, #ffffff 70%);
-pie-background: linear-gradient(#eeeeff, #ffffff 70%);
border-top: 4px solid #ff0099;
}
.tabBox .tab-content {
width: 400px;
height: 200px;
clear: left;
position: relative;
z-index: 2; /* 重なり順序 */
padding: 32px 16px 32px 16px; /* [上][右][下][左] */
border: 1px solid #707070;
background-color: #ffffff;
/* 角丸の場合は活かす */
border-top-color: #ffffff; /* background-color と合わせる */
/* 角丸 */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
/* シャドウ */
-webkit-box-shadow: #707070 1px 0px 4px 1px;
-moz-box-shadow: #707070 1px 0px 4px 1px;
box-shadow: #707070 1px 0px 4px 1px;
}
【JavaScript 関数】
$(function(){
/**
* tabSetting(urls, errorHtml)
* @param urls ロードするURLの配列、
* @param errorHtml ロード失敗時のエラーコンテンツ
*/
tabPieSetting = function(urls, errorHtml){
var spinner = new Spinner({top: '30px', left: '30px', length: 6, lines: 12 });
$('div[class=tab-content]').append(spinner.spin().el);
$('ul[class=tabs]').children().each(function(i, obj){
$(obj).click(function(){
if (!$(this).hasClass('selected')){
$('div[class=tab-content]').children().remove();
$('div[class=tab-content]').append(spinner.spin().el);
$('ul[class=tabs]').children().each(function(j, o){
$(o).removeAttr('class');
});
$(this).attr('class', 'selected');
$('div[class=tab-content]').load(urls[$(this).data("pietabid") - 1], function(data, status, xmlHttpRequest){
if (status=="error"){
$('div[class=tab-content]').children().remove();
$('div[class=tab-content]').html(errorHtml);
}
});
}
});
});
$('li[data-tabid=1]').addClass("selected");
$('div[class=tab-content]').load(urls[0], function(data, status, xmlHttpRequest){
if (status=="error"){
$('div[class=tab-content]').children().remove();
$('div[class=tab-content]').html(errorHtml);
}
});
};
});
CSSを調整して、、
角丸、シャドウの例、、
角丸を使わない例、