PageTabs

    Table of contents
    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>
    
    
    Tag page (Edit tags)
    • No tags
    Page statistics
    564 view(s), 1 edit(s) and 2720 character(s)

    Comments

    You must login to post a comment.

    Attach file

    Attachments