掲示板
liferay-ui-tabs navigation programatically
7年前 に Víctor Sáez によって更新されました。
liferay-ui-tabs navigation programatically
New Member 投稿: 9 参加年月日: 15/03/10 最新の投稿
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
<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
7年前 に James Hinkey によって更新されました。
RE: liferay-ui-tabs navigation programatically
Junior Member 投稿: 62 参加年月日: 11/02/15 最新の投稿
Hi Victor,
Can you clarify the behavior you're implementing?
Please confirm whether these characteristics reflect the behavior you want:
Thanks,
Jim
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
7年前 に Víctor Sáez によって更新されました。
RE: liferay-ui-tabs navigation programatically
New Member 投稿: 9 参加年月日: 15/03/10 最新の投稿
Yes. This is exactly what I would like to do.
7年前 に Nate Cavanaugh によって更新されました。
RE: liferay-ui-tabs navigation programatically
Junior Member 投稿: 94 参加年月日: 06/11/27 最新の投稿
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:
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:
Also, you would need to add an onClick attribute to your <liferay-ui:tabs> with something like:
Hopefully that works, but let us know
Thanks 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,
7年前 に Víctor Sáez によって更新されました。
RE: liferay-ui-tabs navigation programatically
New Member 投稿: 9 参加年月日: 15/03/10 最新の投稿
Thank you very much. That works for me.