PageTabs

From $1

No headers

/**
 * 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>

Tags: (Edit tags)

No tags

Attach file or image

Files (0)

Images 0
No images to display in the gallery.

Comments (0)

You must login to post a comment.

Disclaimer: Vespa Labs contains information that is VERY likely to wreck your scooter and possibly yourself both intentionally (i.e. gaining more peformance while sacrificing reliability + safety) and unintentionally (i.e. misleading or incorrect information). Vespa Labs is only a wiki and intended as a dumping ground for information and not as a properly reviewed source. The same disclaimers that wikipedia.org use apply to Vespa Labs. The short version is use information at your own risk, both information on the main wiki and in the user areas are intended to be used only as "thought provoking" for someone that knows what they are doing. If you try to implement a "thought" Vespa Labs is not reponsible and if something goes wrong we hope that you live and update the offending information with corrections to warn others.

Vespa Labs is an international site and therefore may contain information that is not road legal in some countries/states and may also invalidate insurance policies. Treat all information as experimental and for "race use only" (i.e. not for road use - even if it is implied or explicitly stated). Refer to and adhere to your local road and legal rules, as well as the manufacturers recommendations.

PageTabs

From $1

Table of contents

Table of contents

Recent pages

PageTabs

From $1

Table of contents

Table of contents