Monday, June 11, 2012

Alloy UI tabs and grid

Alloy UI tabs along with AUI layout

Today I want to share with you the tabs that can be created using Alloy UI 1.5.4 tabs component. I know that the demos are available when you download the latest version of the  alloy UI: http://alloyui.com/latest/alloy-latest.zip.

I had a hard time finding AUI 1.5.4 release AUI library which is compatible with Liferay 6.1 Release.
The difference is I created vertical tabs using AUI tab component. I will add the exact code later but the logic is use the grid that  gets added when you add the aui.js file on to your page.
use aui-30 in left div along with display:block and add aui-70 in right div with display as inline-block. don't forget to bind both of them in aui-100 div. This will give flexible grid structure can help in building responsive layout. With the classic theme added in the page for tabs; it will show up vertically. You've to customize few styles by overriding few CSS into your custom one.

Here you will achieve the vertical tabs via ally UI (AUI 1.5). A good reference link if you're novice to AUI: http://www.liferay.com/web/nathan.cavanaugh/blog/-/blogs/alloyui-working-with-elements-and-events

Please respond if you find it helpful.