CSS3 PIE.htc で書くタブ

CSS3 PIE.htc を使用した Tab を、もっと汎用的にしたいと思いました。

・タブ全体は、id属性でなく、固定名class属性を指定した <div class="tabBox">　という絶対の約束、
・タブの ul は、固定名class属性を指定した <ul class="tabs">
・タブの li は、独自の属性でタブの順番を、、<li data-pietabid="1">
・タブのコンテンツは、<div class="tab-content"></div>

という約束にして、コンテンツのロード中は、spin.js でロード中を示す。

http://css3pie.com/　の Tab デモページのような CSS を用意して、ＨＴＭＬは以下のとおり。。

<div class="tabBox">
   <ul class="tabs">
      <li data-pietabid="1"><a href="#">Tab One</a></li>
      <li data-pietabid="2"><a href="#">Tab Two</a></li>
      <li data-pietabid="3"><a href="#">Tab Three</a></li>
   </ul>
   <div class="tab-content"></div>
</div>


tabpie.js　という名前で jQuery ソースを用意します。

$(function(){
/**
 * tabPieSetting(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-pietabid=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);
      }
   });
};
});


HTMLのヘッダタグは、以下のようにタブの設定を書きます。

<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/spin.min.js"></script>
<script type="text/javascript" src="js/tabpie.js"></script>
<script type="text/javascript">
$(function(){
   tabPieSetting(["sub/one.html", "sub/two.html", "sub/three.html"], "<h1>Page Load Error!</h1>");
});
</script>


<link rel="stylesheet" type="text/css" href="tabpie.css">
として、書くCSS は、以下のとおり。。。

@CHARSET "UTF-8";

.tabBox .tabs {
   margin: 0;
   padding: 0 10px;
   overflow: hidden;
   margin-bottom: -1px;
   height: 2.25em;
}
.tabBox .tabs li {
   float: left;
   list-style: none;
   margin: 0;
   padding: .25em .25em 0;
   height: 2em;
   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: 2em;
   line-height: 2em;
   -webkit-border-radius: 8px 8px 0 0;
   -moz-border-radius: 8px 8px 0 0;
   border-radius: 8px 8px 0 0;
   background: #eeeeee;
   border: 1px solid #cccccc;
   border-bottom: 0;
   padding: 0 10px;
   color: #000000;
   text-decoration: none;
 behavior: url(PIE.htc);
}
.tabBox .tabs .selected a {
   background: #ffffff;
   -webkit-box-shadow: #cccccc 0 0 .25em;
   -moz-box-shadow: #cccccc 0 0 .25em;
   box-shadow: #cccccc 0 0 .25em;
}
.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%);
}
.tabBox .tab-content {
   clear: left;
   position: relative;
   z-index: 2;
   padding: 2em 1em;
   border: 1px solid #cccccc;
   background: #ffffff;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   -webkit-box-shadow: #cccccc 0 0 .25em;
   -moz-box-shadow: #cccccc 0 0 .25em;
   box-shadow: #cccccc 0 0 .25em;
   behavior: url(PIE.htc);
}