jkefel is an extended version of the native joomla tab/slider.

If you need help let me know through the contact form.

If you use jkefel, please post a rating and a review at the Joomla! Extensions Directory.

Description

provides an extended version of the native joomla tab/slider script by allowing:

  • panel (tab or slider) persistence, i.e. coming back to the same page would render with the most recently active panel as open
  • direct addressing of panels from external pages
  • ajax loading of panels content and are either refreshed every time the panel is visited or is fetched once only
  • load specific modules (addressed by their ids) into a panel position
  • while loading external content you will be able to choose how to place fetched content: by prepending, appending or replacing to existing content
  • all features are controlled globally from the plugin parameter setting and individual tabs are modified through their own options
  • and of course, you can place as many tabs as you want on the same page and with varying UI:s (i.e. sliders or tabs) and also with varying options
  • reuses Joomla! backend styles which can be easily modified by accessing the included css file
Download
  • jkefel-1.4.0.zip  
  • Supports 1.5 - 2.5 versions of Joomla!
  • jkefel vertical tab replacement css file  Unzip and rename the file to jkefel.css and place it in plugins/content/jkefel replacing existing one, and note that this will replace all tabs globally on your site that uses jkefel. This was kindly provided by a user and if it works out well with all relevant browsers I will make provision for this in next update of jkefel. So please do kindly report back to me with your results.

Demo
Click here to go to the demo page
Usage

Syntax

{jkefel options}content of first tab{/jkefel}
{jkefel options}content of second tab{/jkefelend}

Options

option namedescriptionavailable valuesdefault
kefelidset in the first tab, id of the pane, is normally autogenerated by pluginauto generated
kefeluiset in the first tab, determines the interface generated as tabs or sliderstabs, sliderstabs
persistset in the first tab, determines if tab should be persistedtrue, falsetrue
idset in each tab as id for each individual tabauto generated
urlremote fetching and placed in existing panel according to the pos option
refreshdetermines if panel should be refreshed each time panel is accessedtrue, falsetrue
freqAllows you to have a remotely fetched panel to be updated with provided frequency. Frequency must be provided in seconds.
onsuccessfunction to be triggered once url content is fetched and is placed in the dom. Given function will be passed the dom element containing the fetched content
titletitle of the panel handlerTab X
modindicates module (with module id, which can be found in the right-most column of the module manager) to be loaded
pos

determines the position of fetched external content, where the fetched content is placed according to one of the values:

  • prepend = fetched content is placed before any existing content
  • append = fetched content is placed after any existing content
  • replace = fetched content replaces existing content
prepend, append, replaceappend
initial

Ability to have a certain panel opened when loading by adding ex. initial=[3] which will open the 3rd panel counting from start and 1.

As of version 1.2 in sliders we are able to open several sliders at the same time by calling ex. initial=[3,5,7] which will open tab 3, 5 and 7 intially.

1 up to total number of panels

1 (tab)

all closed (slider)

singleIn sliders the default behavior allows multiple panels to be opened at the same time. If you want to allow only one panel at a time to be opened use this option.true,1,false,0false,0

FAQ

FAQ

The name

kefel (without the j in jkefel) is an amharic (official language in Ethiopia) word which means separate/compartment, which I hope this utility can help to keep your content within your page as...

Roadmap
  1. Tab navigation with ability to scroll in tabs. We will thus be able to have more tabs than what the allowed width permits to.
  2. Choose tab opener to be mouseover or click
  3. Links within tabs enabled to fetch through ajax calls, without tearing current page (useful ex. for presentation of result sets...)
  4. Provide a module version which will require the plugin
  5. By request from several users we will be adding ability to fetch contents from various content components and of course from com_content
  6. Joomla! 1.6 compatibility, basically the code base is still the same but some minor changes will be required
  7. Provide varying styles for tabs and slides
Known issues
Currently none
Change log
* -> Security Fix # -> Bug Fix + -> Addition ^ -> Change - -> Removed ! -> Note

2011-01-29 / v1.3

+ Supports 1.6, 1.5 and with various mootools versions

# Remaining issues with direct addressing of panels are solved

+ Panels can now be triggered with mouseovers by simply adding to the pane parameters trigger=[mouseover]

2011-01-15 / v1.2.8

# Direct addressing of panels had some js issues

# Replacing of core jtabs.js is done only when jkefel actually is called and never otherwise

# Proper jkefel parsing where regex is abandoned for own automata algor. with better accuracy and performance

# The jkefel parameters refresh and loaded (indicating where a remote page was already loaded into panel or not) was not playing well together and remote pages were always loaded

2010-11-05 / v1.2.7

# IE7 layout improvement

2010-11-01 / v1.2.6

# Proper loading of Mootools 1.1 options

+ Improved CSS selector in jkefel.css avoiding collision with other extensions using Joomla! native sliders/tabs.

2010-11-01 / v1.2.5

# Fix in version 1.2.4 missed to take care of Mootools 1.2.* compatibility which is now fixed.

2010-10-31 / v1.2.4

# The default behavior of sliders allows to have multiple panels open. Have added the option single=[true] so that we can restrict opening to only single panels.

2010-10-31 / v1.2.3

# The initial slider option failed to work when more than one slider was present. Fixed!

2010-10-28 / v1.2.2

# System plugin is enabled by default now.

2010-10-25 / v1.2.1

# Replacement of the core tab script was missing certain conditions which is now corrected.

# Note in help file is added that system plugin needs to be enabled in order to be able to have jkefel active in other parts than contents.

2010-10-21 / v1.2

+ Remotely fetched panels can now be autoupdated with certain given frequency

+ Multiple sliders can be opened during page load

# jkefel module loading was hindered in scenarios where content events were note fired. We now use correctly system plugins to handle that.

# various other minor bugfixes are addressed. Still remaining is the issue of sliders with remotely loaded panels which doesn't adjust panel height according to loaded content. Will be addressed for next release.

2010-09-26 / v1.1

+ Plugin code in module position is handled properly, so although we don't yet have a jkefel module (let me reassure you this is in the making...) you could simply create a custom module and put into the module a jkefel plugin code.

+ Ability to have a certain panel opened when loading by adding ex. initial=[3] which will open the 3rd panel counting from start and 1.

^ Even less load. Tab related JavaScript code was loaded even though we only had sliders in page. We have now shaved off this tiny overweight.

2010-08-30 / v1.0

Note: 1.0 Release (a more feature rich version (and definitely without bloat) is due end of this week)

2010-08-22 / v1.0beta4

# Now mootools 1.1* and 1.2.* compatible

# Modules to be loaded through mod are only required to be published and doesn't either have to be attached to a menu

(Once again thanks goes to Robin that found the various issues addressed in this release)

2010-08-17 / v1.0beta3

# Including tabs in the last tab of all available tabs was rendering double of all last set of tabs due to parsing error. (thanks to user Rubin for discovering the issue)

2010-08-17 / v1.0beta2

+ Ability to include tabs and sliders recursively in each other. Additional worthy mention is that since Joomla! native JTabs mootools class doesn't support recursively contained tabs I was forced to make the update of it and remove the automatically included version with the updated one, all taken care of by the plugin. (thanks to user Rustam for his patience in testing this version)

+ An additional plugin option called tracker allowing you to turn off the hash tags appearing when clicking on a tab header. Those links are normally used to address a tab directly. But I have understood that some users don't want them to appear, so you are now able to turn them off.

2010-06-28 / v1.0beta

Initial beta release


Attribution
  • jkefel is based on Joomla!s own tabs/sliders script with styling taken from the backend template and therefore we are all grateful for those contributions on which this is based

betolo is a CSS/JS file merging, minimization and compression utility.

Features:(Ref: developer.yahoo.com/performance/rules.html, webpagetest.org)

    * merging is done either by including all files in the page or by merging only those by you explicitly listed files. files not included in the merging can also benefit from being served through jbetolo by being compressed (many popular shared hosting services doesn't enable the apache gzip/deflate module thus this or similar setups are practically the only way to go about if you want to serve a compressed version of your external resources), minifed and sent with correct http headers
    * both merged and non-merged files are minified and compressed
    * control if merged or non-merged files should be compressed/minifed
    * files are sent with correct http headers, including the expires and cache-control max-age header as set by you
    * prevent a file from being sent to the client by deleting it from the page
    * load files in a certain order
    * exclude certain components from being processed
    * inject jquery.noconflict in the presence of jquery, achieving seemless presence of both mootools and jquery in the same page
    * move js to the bottom of the page (before end of body) or to the header
    * move inline js codes, either to the bottom of the page or to header, and encapsulating the codes in a domready event), a not well tested feature, and presumably depending highly on the extensions you employ and your willingness to hack those non-disciplined extensions

Notes:

    * best optimization result is achieved only by having a certain level of familiarity with the various extensions you are employing and how they use/missuse various JS libraies available, most commonly mootools and jQuery. Having a mix of mootools, jQuery (sometimes several version of it) and maybe additional JS libraries is something that will inevitably heart performance, and not the least might give rise to various JS conflicts and errors.
    * a conflicting expiry/cache-control is not favorable to your efforts, so please assure that .htaccess settings doesn't conflict with your settings in jbetolo
    * gzip requires php's zlib compression
    * in order to have the resulting page cached pls. do order jbetolo right before the cache plugin
    * in case of performance issues please switch the minimization off, although this shouldn't be an issue on a site where external JS and CSS files are relatively static, as cases are mostly.

Future enhancements:

   1. re-generate/serve only mode so that regardless file changes jbetolo keeps on serving last known good compilation
   2. Minifcation is slow, luckily need not to be done that often, any better solution? Tried yui's, Dojo's, JSMin and so far JSMin+ is best at it, albeit with little less packing, but their explanation (http://crisp.tweakblogs.net/blog/1665/a-new-javascript-minifier-jsmin+.html) of the case is fair, thus the included option in jbetolo.
   3. If this ever will be possible with the wild way of various extensions spotting out their JS code, try to better understand how JS codes can be moved to the bottom so that the already implemented ability to do so can be utilized and include some guidelines
   4. External files, ex. resources from various CDN:s, are currently left untouched. Need to investigate if there is any other desirable way of handling those?
   5. Current aggregation is monolithic, i.e. we always try to aggregate and send as much as we can in single files and rely on the browser caching mechanism, the question is if there is better way of doing the aggregation, ex. start with certain aggregation, get it cached, and send only incremental files. This obviously introduces a certain amount of complication and an overhead that we might not care to introduce as our goal is optimization. Anyway, I will, given time experiment and see where it takes...
   6. Have read that another extension creats image sprites and also related css file and ultimately replaces images in the page, sounds crazy to me how that can be automated with the kinda various manual considerations that I have faced doing sprites, but sounds exciting enough to investigate and see if it can be incorporated.
   7. Investigate and see if jbetolo can assist with shelving of to a cookie-less domain, http://developer.yahoo.com/performance/rules.html#cookie_free

Attribution where its due:

    * jbetolo started as an adaptation of the excellent CssJsCompress by joomlatags.org
    * JS minimization is done with jsminplus (Tino Zijdel < This e-mail address is being protected from spambots. You need JavaScript enabled to view it >)
    * CSS minimization is done with Compress CSS (Stephen Clay < This e-mail address is being protected from spambots. You need JavaScript enabled to view it >)

Comments and suggestions are most welcome to This e-mail address is being protected from spambots. You need JavaScript enabled to view it .

betolo in amharic (official language in Ethiopia) means quickly, which I hope this utility will be able to serve your resouce files.