Movable Type Templates

Movable Type Templatesネタ

カテゴリ x jQuery UI Tabs

カテゴリの一階層目をタブにするテンプレート

あらかじめjQuery UIをincludeしておく
Widgetで以下のようなテンプレートを作成する

<mt:IfArchiveTypeEnabled archive_type="Category">
<div class="widget-archive widget-archive-category widget">
    <h3 class="widget-header">Category</h3>
    <div class="widget-content">
        <div id="widget-archive-category-tabs">
            <mt:TopLevelCategories>
            <mt:SubCatIsFirst>
            <ul>
            </mt:SubCatIsFirst>
                <mt:Unless tag="CategoryCount">
                <li><a href="#tabs-category-<$mt:CategoryID$>"><$mt:CategoryLabel$></a></li>
                </mt:Unless>
            <mt:SubCatIsLast>
            </ul>
            </mt:SubCatIsLast>
            </mt:TopLevelCategories>
            <mt:TopLevelCategories>
                <mt:Unless tag="CategoryCount">
                    <div id="tabs-category-<$mt:CategoryID$>">
                        <$mt:SubCatsRecurse$>
                    </div>
                <mt:Else>
                    <mt:SubCatIsFirst>
                    <ul>
                    </mt:SubCatIsFirst>
                        <li class="category-item">
                            <a href="<$mt:CategoryArchiveLink$>"<mt:If tag="CategoryDescription"> title="<$mt:CategoryDescription remove_html="1" encode_html="1"$>"</mt:If>><$mt:CategoryLabel$></a>
                            <span class="asset-itemcount">(<$mt:CategoryCount$>)</span>
                            <$mt:SubCatsRecurse$>
                        </li>
                    <mt:SubCatIsLast>
                    </ul>
                    </mt:SubCatIsLast>
                </mt:Unless>
            </mt:TopLevelCategories>
        </div>
    </div>
</div>
<script type="text/javascript">
(function($) {
    $(document).ready(function(){
        $('#widget-archive-category-tabs').tabs({ selected:0 });
    });
})(jQuery);
</script>
</mt:IfArchiveTypeEnabled>

あわせて読みたいWidget

1. Widgetで以下のようなテンプレートを作成する

<MTSetVar name="use_awasete_widget" value="1">
<div class="widget-awasete widget">
   <h3 class="widget-header"><a href="http://awasete.com/">awasete yomitai</a></h3>
   <div class="widget-content"><ul id="awasete-blog-list"><li class="awasete_loading">LOADING...</li></ul></div>
   <div class="widget-footer">powered by <a href="http://awasete.com/show.phtml?u=<$MTBlogURL encode_url="1" $>">awasate.com</a></div>
</div>

2. フッターテンプレートあたりに以下を追加

<MTIf name="use_awasete_widget">
<script type="text/javascript">
function awasete_yomitai(blogs) {
        // var blogs = [{titile:,url:,favicon:,more:},...];
        var el = document.getElementById('awasete-blog-list');
        if (el) {
                var max = 10, a = [], len = Math.min(max,blogs.length);
                for (var i=0; i<len; i++) {
                        var b = blogs[i];
                        a.push('<li style="background:transparent url('+b.favicon+') no-repeat left"><a href='+b.url+'>'+b.title+'<\/a><\/li>');
                }
                el.innerHTML = a.join(**);
        }
}
</script>
<script type="text/javascript" src="http://api.awasete.com/showjson.phtml?u=<$MTBlogURL encode_url="1"$>"></script>
</MTIf>

3. cssに下記を追加

/* awasete */
ul#awasete-blog-list { list-style: none; }
ul#awasete-blog-list li { text-align:left; padding-left:20px; }
.awasete_loading { background: url(images/loading.gif) no-repeat left center; line-height:16px; padding-left:20px; }
.widget-awasete .widget-content{ margin-bottom:5px; }
.widget-awasete .widget-footer { text-align:right; }