So a first for 2018. I needed a tab control for I don’t want constant scrolling down. This is what I have done so far. It may need some code tweaking, but it does work. I hope I can get this written correctly, otherwise I made need to make a sample site some day. I do still need to see to get a ‘animate’ on the click.
So first the result this time. I have three tabs. The first is details with some text
The second is photos with gallery
The third is a leaflet map
I trimmed the images a bit, but you get the point. Functions in this tab:
- Hover changes the text color to the same as ‘active’
- Click changes the color of the selected tab
- The map is only initiated once.
Here are the steps I have done to make it.
Step 1: Create the elements.
-
text elements for the tab headers ‘details’, ‘photos’, ‘route’. Set the first to your active color and the others a different color
-
a hidden element ‘map made’ set to no (this is optional offcourse’
-
a hidden element with the name of the first tab element header ‘#txtDetail’
-
a line element under the headers
-
a text element with the details (content of tab 1). you can have this visible
-
a gallery element hidden and collapsed
-
a html element for the map (optional) hidden and collapsed
Step 2: Add events
Each tab header is going to need to get events. My naming was fairly straight forward like this. When you add an event the code will be added.
Step 3: Code the hover functions
Now is the tricky bit. We are going to need to add some code. The code is repeatable so I’ll only describe it once for the events above.
export function onInDetail(event, $w) {
const tmpValue = $w("#txtDetail").text;
$w("#txtDetail").html = "<h1 style='font-size: 18px;'><span style='font-size: 18px; color: #ECE7CF;'>" + tmpValue + "</span>";
}
The ‘onInDetail’ is actually the ‘hover’. So you fetch the text value and then assign new html to the element. Note the ‘h1’ with the font-size, and then the ‘span’ with size and color. The header is because I used that as text element. This may be different. Best is to look in chrome developer tools inspect element. See bellow.
Here you see the div of the tab header with in it a ‘h1’ and a ‘span’. You need to add those again, hence my code above. Remember to change the color to your hover color. Other options are possible too see here for style on text.
When you leave the text again, you need to revert the style
export function onOutDetail(event, $w) {
const tmpValue = $w("#txtDetail").text;
$w("#txtDetail").html = "<h1 style='font-size: 18px;'><span style='font-size: 18px; color: #9BA08A;'>" + tmpValue + "</span>";
const tmpActive = $w("#tmpActive").text;
const tmpActiveValue = $w(tmpActive).text;
$w(tmpActive).html = "<h1 style='font-size: 18px;'><span style='font-size: 18px; color: #ECE7CF;'>" + tmpActiveValue + "</span>";
}
Again I fetch the text value and then assign new html value to it. This should match the starting point. The next part is important. Remember my ‘active’ tab is a different color. So you need to set that, just in case you hovered over the active one. Into ‘tmpActive’ the value of the hidden element containing the active element name is placed. Then into ‘tmpActiveValue’ the current text value is placed. Next you assign the ‘active’ layout to that element.
Step 4: Code the click functions
Again this will be repeated, so only the ‘onClickDetails’ is described.
export function onClickDetail(event, $w) {
$w("#galleryTrail").collapse();
$w("#galleryTrail").hide();
$w("#htmlRoute").collapse();
$w("#htmlRoute").hide();
$w("#txtDetails").expand();
$w("#txtDetails").show();
const tmpActive = $w("#tmpActive").text;
const tmpActiveValue = $w(tmpActive).text;
$w(tmpActive).html = "<h1 style='font-size: 18px;'><span style='font-size: 18px; color: #9BA08A;'>" + tmpActiveValue + "</span>";
$w("#tmpActive").text = "#txtDetail";
}
First, I collapse and hide the other tabs, perhaps this can be done with checking the collapsed state, but I didn’t do that yet. Then I expand and show the clicked tab. I always do that after the hiding, so the other click functions will be a different sequence.
Then because you clicked a tab, you want to set that hidden field, and reset the layout of the previous active tab. So I fetch the hidden element name again and from it the text. I reset the previous active tab style and then fill the hidden element text field with the new active element name.
Oh, the hidden element ‘mapMade’ is used for initing the map when you click on that tab. i also do that with the gallery. This way they aren’t loaded when the page is loaded.
Give me a few hours to finish some stuff and then I’ll let you know my site where this is all used. Then you have a live sample.