Posted By

Neener54 on 11/02/11


Tagged

jquery tabs


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

spee66


jQuery Fieldset tabs with buttons


 / Published in: jQuery
 

This is inspired by jQuery autotabs plugin by Keywan Ghadami. I've made a few changes to allow for more versatility and to add button navigation.

  1. /*!
  2.  * forked from:
  3.  * Copyright (c) 2010 Keywan Ghadami (ibson.com)
  4.  * jQuery autotabs Plugin
  5.  *
  6.  * Dual licensed under the MIT and GPL licenses:
  7.  * http://www.opensource.org/licenses/mit-license.php
  8.  * http://www.gnu.org/licenses/gpl.html
  9.  */
  10. (function($j){
  11. $j.fn.fieldset_tabs = function(options){
  12. return this.each(function() {
  13. var tabs = $j(this);
  14. var $jul = $j('<ul></ul>');
  15. tabs.prepend($jul);
  16. tabs.find('fieldset').each(function(i){
  17. var title = $j(this).find('legend').text();
  18. $j(this).find('legend').remove();
  19. var id = 'tab_' + i;
  20. $j(this).attr('id', id);
  21. $jul.append('<li><a href="#'+ id + '">'+title +'</a></li>');
  22. });
  23. var $jtabs = tabs.tabs();
  24. $j('.ui-tabs-panel').each(function(h){
  25. var tsize = $j('.ui-tabs-panel').size() - 1;
  26. var height = $j(this).height();
  27. if (h != 0){
  28. prev = h -1;
  29. $j(this).append("<button type='button' style='float:left;clear:both;margin-top:"+height+"px;' class='prev-tab mover' data-pos='"+ prev + "'><span class='icon leftarrow'></span>Prev</button>")
  30. }
  31. if (h != tsize){
  32. next = h + 1;
  33. $j(this).append("<button type='button' style='float:right;margin-top:"+height+"px;' class='next-tab mover' data-pos='"+ next + "'>Next <span class='icon rightarrow'></span></button>")
  34. }
  35. });
  36. $j('.next-tab, .prev-tab').live('click', function(){
  37. $jtabs.tabs('select', $j(this).data('pos'));
  38. return false;
  39. });
  40. return tabs.tabs();
  41.  
  42. });
  43. }
  44. })(jQuery);

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: sam12 on September 15, 2018

I have free solutions for your query. All windows queries can be solved here like how to fix sound problems in windows 10 for all pcs.

You need to login to post a comment.