Tabs - Concept Demo

[paulmitchell1989]

Hello! I've seen on the concept demo tabs used for a noticeboard.

I was wondering if the same could be achived for embedding Frog 3 pages. At the moment there are separate pages for attendance, merits, grades etc and ideally I'd like to put them all in one page neatly organised by tabs. If this is possible please could someone tell me how to recreate tabs as shown in the concept demo?

Thank you in advance

Paul

[Graham Quince]

Hi @paulmitchell1989

I've not written a tutorial on the Concept-demo tabs as it's a little complex to get all the UUIDs for the html.  It's quite easy to get wrong and quite hard to spot what's gone wrong.  That said, I'm quite happy to install the site on your platform and help tailor it to suit your needs.  The tabs use the nested page widgets, so you can have whatever content you like each page.

Graham

[paulmitchell1989]

1 minute ago, Graham Quince said:

Hi @paulmitchell1989

I've not written a tutorial on the Concept-demo tabs as it's a little complex to get all the UUIDs for the html.  It's quite easy to get wrong and quite hard to spot what's gone wrong.  That said, I'm quite happy to install the site on your platform and help tailor it to suit your needs.  The tabs use the nested page widgets, so you can have whatever content you like each page.

Graham

Hi @Graham Quince

That would be wonderful thank you! Shall I email you saying where I would like the tabbed page to go?

Paul

[Graham Quince]

Yes please.

[Graham Quince]

Hi @paulmitchell1989,

When I looked at the site you'd created, I realised that using the Nested Page widgets, you'd be loading a lot of content, only to then hide of it on the tabs.  So instead, I've tweaked the code to load an iframe on click:

This first HTML widget is the styling and layout code:

<style>
.notice-tabs {
    float: left;
}

.notice-tab {
    display: inline-block;
    min-width:65px;
    height:27px;
    text-align:center;
    border: 1px solid #cccccc;
    border-width: 1px 1px 0 1px;
    border-radius:5px;
    border-bottom-right-radius:0px;
    border-bottom-left-radius:0px;
    margin: 0px;
    padding: 5px;
    padding-top:10px;
    cursor: pointer;
    min-width: 20px;
    font-size:10pt;
}

.notice-tab {
   
    background: #0497da; /* Old browsers */
    background: -moz-linear-gradient(top,  #0497da 0%, #0064cd 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #0497da 0%,#0064cd 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #0497da 0%,#0064cd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0497da', endColorstr='#0064cd',GradientType=0 ); /* IE6-9 */
    color:#FFFFFF;
}

.notice-tab.active {
    background: #FFFFFF;
    color:#000000;
}
</style>
<div class="notice-tabs">
    <div class="notice-tab active" data-year="0">Attendance</div>
    <div class="notice-tab" data-year="1">Merits and Cards</div>
    <div class="notice-tab" data-year="2">Grades</div>
    <div class="notice-tab" data-year="3">Subject Overview</div>
    <div class="notice-tab" data-year="4">Contact Teachers</div>
</div>

This second HTML widget is the jQuery which contains the clicking:

<script>
var $sitesElement = $('.ui-os-main-window:first, .ui-dialog.focused, dashboard-0').find('.sites_core'),
    noticesUuid = {},
    $widgets = $sitesElement.find('div.sites_widget'),
    $iframe = $("<iframe>", {
                id: Frog.Utilities.generateSimpleId(),
                width: '100%',
                height:'1200px'
              }
    ),
    hideAllShowOne = function(yearGroup) {
        $sitesElement.find('.notice-tab').removeClass("active"); // remove the active class from all DIV
        $sitesElement.find('.notice-tab[data-year=' + yearGroup + ']').addClass("active"); // add the active class to the selected DIV
        $iframe.attr('src',noticesUuid[yearGroup]);
    };

    
noticesUuid[0] = "YOURSCHOOL/index.phtml?d=623515";
noticesUuid[1] = "YOURSCHOOL/index.phtml?d=623537";
noticesUuid[2] = "YOURSCHOOL/index.phtml?d=623530";
noticesUuid[3] = "YOURSCHOOL/index.phtml?d=623546";
noticesUuid[4] = "YOURSCHOOL/index.phtml?d=623525";

hideAllShowOne(0);

$sitesElement.find('.notice-tab[data-year]').bind('click', function(ev) {
    hideAllShowOne($(this).data('year'));
});
    
this.element.append($iframe);
</script>

 

[paulmitchell1989]

@Graham Quince Thank you so so much! Can I buy you a drink (or several?)

[Graham Quince]

No drink necessary, but I'll take a shout out on Twitter for #frogeducation if you use it

 

 

[ann]

HI 

Is it possible for you to create something I can use along the lines of the image below. It is a frog3 page (as I'm sure you'll recognise)  which I have embedded in FrogLearn as I can't recreate the layout . Would it be possible to create it as a site in it's own right that I can then duplicate and use for other information?

Thanks

Ann

 

[ann]