PageTabs

/**
 * Page Tabs Control
 * @TODO guerrics: overflowing tabs
 *
 * @param array pages - array of pages (default: map.values(page.subpages))
 * @param str tab - name of the selected tab (default: __request.args.tab)
 */
var pages = $pages ?? map.values(page.subpages);
let pages = [ (p is str) ? wiki.getpage(p) : p foreach var p in pages];
var selectedTab = $tab ?? __request.args.tab;

// find the active tab page
var activeTab = [ tabpage foreach var tabpage in pages where tabpage.name == selectedTab ][0];

// no selected tab found, use first tab
if (!activeTab) {
    let activeTab = pages[0];
}

<html>
<head>
<style type="text/css">"
.mt-page-tabs ul.mt-tabs {
    margin: 0;
    padding: 0 0 0 10px;

    border-bottom: 1px solid #777;
    line-height: normal;
}
.mt-page-tabs li.mt-tab {
    display: inline;
    margin: 0 4px;

    list-style: none;
}

.mt-page-tabs li.mt-tab a,
.mt-page-tabs li.mt-tab a:visited {
    display: inline-block;
    /* set tab dimensions */
    padding: 4px 14px;

    text-decoration: none;
    color: #000;
    border: solid 1px #777;
    border-bottom: none;
    background-color: #fff;
}

.mt-page-tabs li.mt-tab.ui-state-active a {
    position: relative;
    top: 1px;
    background-color: #dfdfdf;
    background: -moz-linear-gradient(center top , #ddd, #fff) repeat scroll 0 0 transparent;
    background: -webkit-gradient(
        linear, left top, left bottom, color-stop(0.00, #ddd), color-stop(1.00, #fff)
    );
    filter: progid:DXImageTransform.Microsoft.gradient(
        enabled='true',startColorstr=#ffdddddd,endColorstr=#ffffffff
    );
}

.mt-page-tabs .mt-page-tabs-content {
    margin-top: 10px;
}
"</style>
</head>

<body>
    <div class="mt-page-tabs">
        <ul class="mt-tabs">
            foreach(var tabpage in pages) {
                <li class=("mt-tab" .. (tabpage.name == activeTab.name ? " ui-state-active" : ""))>
                    <a href=(page.uri & {tab: tabpage.name})>
                        tabpage.title ?? "#" .. (__count + 1)
                    </a>
                </li>
            }
        </ul>
        <div class=("mt-page-tabs-content" .. (#pages > 0 ? "" : " ui-state-empty"))>
            if (activeTab) {
                var contents = activeTab.contents;
                if (contents) {
                    contents;
                } else {
                    wiki.page(activeTab.path);
                }
            }
        </div>
    </div>
</body>
</html>

タグ (タグ編集)

No tags

ここへのリンク

ファイル 0

画像やファイルを添付

画像 0
ギャラリーに表示すべき画像はありません。

あなたはコメントを投稿するにはログインしなければなりません。

PageTabs

目次

ファイル 0

目次