Tuesday, 18 October 2011 01:00

Creating Tabbed Content in K2 Items

Written by 
Rate this item
(8 votes)

Sometime you may need to display data within your content using a tabbed layout form.

This can easily be done using a great, free download from No Number called Tabber.

Once you have downloaded, then install just like any other Joomla! extension. This plugin is enabled during installation.
Please make sure you bookmark their documents pages too, so that you have access to the syntax required, but it so easy using the following code.
Take a look at the plugin in the Plugins Manager as it does have some parameters you can play with. 

{ tab Tab Title 1 } Your text... { tab Tab Title 2 } Your text... { /tabs }

Using that code as an example, simply paste that into your K2 item. Please note, when you paste it, it may transfer some formatting from the site, so in your WYSIWYG editor, view the source and paste it their so that it strips any styling. Please also remove the blank space after "{" and before "}".

Let put that in to action.

Tab Title 1

Your text...

Tab Title 2

Your text...

OK, so now you have some tabs in your item, lets push it a stage further and display K2 item content in those tabs.

Again, we are going to use a plugin from No Number, this time, Articles Anywhere.  Installation is as simple as before and again, there are some parameters that can be adjusted, but I have left the default settings in place.

This time, we drop in the Articles Anywhere syntax for K2 Items in place of the text we used before, which is as simple as { article k2:nnn } Please remove the blank space after "{" and before "}" and change nnn to the K2 Item ID number for the item you wish to display. 

K2 Item 1


Modules are lightweight and flexible extensions used for page rendering. These modules are often...


Custom read more!


K2 Item 2


Joomla makes extensive use of the Model-View-Controller design pattern. A standard OOP design pattern that separates different logical functions into different classes to improve the maintainability of the software.

When Joomla is started to process a request from a user, such as a GET for a particular page, or a POST containing form data, one of the first things that Joomla does is to analyse the URL to determine which component will be responsible for processing the request, and hand control over to that component.

If the component has been designed according to the MVC pattern, it will pass control to the controller. The controller is responsible for analysing the request and determining which model(s) will be needed to satisfy the request, and which view should be used to return the results back to the user.

The model encapsulates the data used by the component. In most cases this data will come from a database, either the Joomla database, or some external database, but it is also possible for the model to obtain data from other sources, such as via a web services API running on another server. The model is also responsible for updating the database where appropriate. The purpose of the model is to isolate the controller and view from the details of how data is obtained or amended.

The view is responsible for generating the output that gets sent to the browser by the component. It calls on the model for any information it needs and formats it appropriately. For example, a list of data items pulled from the model could be wrapped into an HTML table by the view.

Since Joomla is designed to be highly modular, the output from the component is generally only part of the complete web page that the user will ultimately see. Once the view has generated the output the component hands control back to the Joomla framework which then loads and executes the template. The template combines the output from the component, and any modules that are active on the current page, so that it can be delivered to the browser as a single page.

To provide additional power and flexibility to web designers, who may only be concerned with creating new designs rather than manipulating the underlying code, Joomla splits the traditional view into a separate view and layout. The view pulls data from the model, as in a traditional MVC pattern, but then simply makes that data available to the layout, which is responsible for formatting the data for presentation to the user. The advantage of having this split is that the Joomla template system provides a simple mechanism for layouts to be overridden in the template. These layout overrides (often called "template overrides" because they form part of the template, although actually it is the layout that is being overridden) are bundled with the template and give the template designer complete control over all the output from the Joomla core and any installed third-party extensions that comply with the MVC design pattern.

Reference: http://docs.joomla.org/Glossary


K2 Item 2


The main visual tool that shows a list of the Categories defined on the Joomla web site.


Now the smart thing is, tab 1 has some additional syntax so that it shows the title,  100 characters of text and then a custom read more.
Full details can be found in the plugin parameters on in the No Number documents. 

{ tab K2 Item 1 } { article k2:nnn } { title } { text:50 } { readmore:Custom read more! }  { /article }

Thats it all done.

Play and enjoy.

Read 139270 times Last modified on Saturday, 29 March 2014 06:54