liferay-ui-tabs navigation programatically

[Víctor Sáez, geändert vor 7 Jahren.]

I am using the <liferay-ui: tabs for navigation between tabs in a portlet:

<portlet:actionURL name="changeTab" var="changeTabURL"></portlet:actionURL>
<aui:form action="<%= changeTabURL %>" name="fm">
<liferay-ui:tabs
names="uno,dos"
param="tab"
refresh="false"
tabsValues="uno,dos"
type="tabs" value="<%=currentTab %>">

<liferay-ui:section>
<%@ include file="/html/miportlet/uno.jsp"%>
</liferay-ui:section>
<liferay-ui:section>
<%@ include file="/html/miportlet/dos.jsp"%>
</liferay-ui:tabs>


What I am trying to achieve is to navigate between tabs programmatically and prevent users belonging clicking on the tabs, change to another.
I managed to implement a navigation between tabs with buttons "Next" and "Previous", making requests to a portlet that extends from the MVCPortlet class and modifying the "currentTab" property, but what I do not get is to make the user can do click on the tab. To try browsing through the tabs I tried the following code:

var nodeListTabs = A.all('.tab');
console.log(nodeListTabs);

var nodeNum =0;
nodeListTabs.each(function() {

var currentNode = this;

console.log(currentNode);
currentNode.on('click',function(event){
console.log('evento : ');
console.log(event);

event.stopPropagation();
return false;
});

});

The above code is executed as I can see console messages but does not prevent this navigation.

Please someone could give me some idea. Thank you very much in advance

[James Hinkey, geändert vor 7 Jahren.]

Hi Victor,

Can you clarify the behavior you're implementing?

Please confirm whether these characteristics reflect the behavior you want:

• Tab navigation done by buttons Next and Previous
• Turn off the ability to navigate tabs by clicking on them

Thanks,
Jim

[Víctor Sáez, geändert vor 7 Jahren.]

Yes. This is exactly what I would like to do.

[Nate Cavanaugh, geändert vor 7 Jahren.]

Hi Victor,
I believe you should be able to do this by listening for the showTab event on the Liferay object.

For instance, something like this would work:

Liferay.on('showTab', function(event) {
event.preventDefault();
});

That would of course prevent *any* tab from switching. But on the event object, you have the following properties you can use to decide which tabs you want to use:

• id
• names
• namespace
• selectedIndex
• tabItem
• tabSection

Also, you would need to add an onClick attribute to your <liferay-ui:tabs> with something like:

<liferay-ui:tabs onClick="AUI().Lang.emptyFn" ... />

Hopefully that works, but let us know

Thanks Victor,

[Víctor Sáez, geändert vor 7 Jahren.]

Thank you very much. That works for me.