開発メモ

開発用のメモです。

CMSデザイナー x Bootstrap でタブレイアウト

<?xml version="1.0" encoding="UTF-8" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
    <xsl:output method="html" encoding="EUC-JP" omit-xml-declaration="yes" />
    <xsl:template match="/entrylist">
        <div role="tabpanel">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <xsl:for-each select="entry">
                    <li role="presentation" >
                        <a href="#tab1_{@id}" aria-controls="tab1_{@id}" role="tab" data-toggle="tab">
                            <xsl:value-of select="title" disable-output-escaping="yes" />
                        </a>
                    </li>
                </xsl:for-each>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
                <xsl:for-each select="entry">
                    <div role="tabpanel" class="tab-pane active" id="tab1_{@id}">
                        <xsl:value-of select="content" disable-output-escaping="yes" />
                    </div>
                </xsl:for-each>
            </div>
        </div>
        <script>
            $(document).ready(function(){
                $(".nav-tabs li a:first").tab("show");
            });
        </script>
    </xsl:template>
</xsl:stylesheet>
Twitter: @asahina_alice