1
\$\begingroup\$

A plugin I'm writing that will have essentially be a tabbed popup. However, I feel like the method I use to remove tabs is completely unwieldy.

    (function($) {
        var methods = {
            init: function(option) {
    			this.data("tabs", {});
    			this.data("currentTab", {});
    			methods.setupPopup(this);
    			return this;
    		}
    		setupPopup: function (popup) { 
    		   tabs = popup.find(".popupTabs .tab");
    		   tabs.each(function(i, tab){
    				$name = $(tab).data("tabTarget");
    				popup.data("tabs")[$name] = {
    					tabSelector : $(tab).get(0),
    					tab : $(popup).find("[data-tab-name='" + $(tab).data("tabTarget") + "']").get(0)
    				}
    				$(tab).zIndex( tabs.length - i)
    			})
    			popup.data("currentTab", popup.data("tabs")[Object.keys(popup.data("tabs"))[0]])
		        popup.on( 'click',".tab", function(){
			      targetTab = popup.data("tabs")[$(this).data("tabTarget")]	
			      $(popup.data("currentTab").tab).removeClass('active');
			      $(popup.data("currentTab").tabSelector).removeClass('active');
			 	  $(targetTab.tabSelector).addClass("active");
			      $(targetTab.tab).addClass("active");
		          popup.data("currentTab", targetTab)	  
		        })
    			methods.setupTabs(popup, popup.find(".popupTab"))
    		},		
    		setupTabs : function (popup, tabs){
    			tabs.each(function(i, tab) {
    				btns = $(tab).find('.popupBtn');
    				btns.each(function(i, btn) {
    					$(btn).on("click", function(){
    						methods.removeTab(popup, tab);
    					});
    				});
    			});
    
    		},
    		removeTab : function (popup, tab){
    			$(popup.data("currentTab").tab).remove();
    			$(popup.data("currentTab").tabSelector).remove();
    			delete popup.data("tabs")[Object.keys(popup.data("tabs"))[0]]
    			popup.data("currentTab", popup.data("tabs")[Object.keys(popup.data("tabs"))[0]])
    			$(popup.data("currentTab").tab).addClass("active");
    			$(popup.data("currentTab").tabSelector).addClass("active");
    		}
        }
        $.fn.PopupTabs = function(method) {
          if (methods[method]) {
               return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
           } else if (typeof method === 'object' || !method) {
               return methods.init.apply(this, arguments);
           } else {
                $.error('Method ' + method + ' does not exist on jQuery.Test');
            }
        };
    })(jQuery);
    <div class="popupWrapper">
    	<div class="popupTabs">
    		<div class="tab active" data-tab-target="foo"></div>
    		<div class="tab" data-tab-target="bar"></div>
    	</div>
    	<div class="popupBody" >
    		<div class="popupTab active" data-tab-name="foo">
    			<div class="tabBody">
    				<p>This is my content for my first tab</p>
    			</div>
    			<div class="tabButtons">
    				<div class="popupButton btnDefault">Click to close</div>
    			</div>
    		</div>
    		<div class="popupTab" data-tab-name="bar">
    			<div class="tabBody">
    				<p>this is my content for my second tab</p>
    			</div>
    			<div class="tabButtons">
    				<div class="popupButton btnDefault">Click to close</div>
    			</div>
    		</div>
         </div>
    </div>

As you can see, I added the tabs to an object structure so I could call them by name and get both the tab as well as the associated tabBody to act on (i.e. make active, remove, etc.) yet this structure is somewhat hard to work with, especially when I want to remove a tab and automatically call on the next one to make it active.

\$\endgroup\$
  • \$\begingroup\$ Could you kindly attach an image to show how the tabbbed popup look like. \$\endgroup\$ – Siobhan Aug 10 '16 at 9:20
  • \$\begingroup\$ doesn't look like your code is working the way it should? \$\endgroup\$ – Malachi Aug 10 '16 at 19:49
  • \$\begingroup\$ @Malachi Oh I didn't realize the last edit someone turned it into a snippet. It is missing some relevant initialization code for that to work and some pieces have been redacted fro brevity. I'll take care of it when I get home. As well as providing an example of what it'd look like. \$\endgroup\$ – DasBeasto Aug 10 '16 at 19:53
  • \$\begingroup\$ @DasBeasto, make sure that the code you have posted is the actual code, otherwise it may be off-topic \$\endgroup\$ – Malachi Aug 11 '16 at 13:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.