Summary

jIceTabset is a tabset jQuery plugin. Project site

Downloads

Download latest version

Example #1

Source code:

        var testTabs1 = new $.jIceTabset("#test-1 #tabTest", {
            tabWidth: 150,
            showCloseButton: false,
            onchanged: function(oldTab, newTab) {
               if (oldTab && oldTab.div)
                    $("#test-1 " + oldTab.div).hide();
               if (newTab.div)
                    $("#test-1 " + newTab.div).show();
            },
            tabs: [{
    			id: 1,
    			title: 'First tab',
                div: "#tabContent-1" 
			},{
				id: 2,
    			title: 'Second tab',
                div: "#tabContent-2" 
			},{
				id: 3,
    			title: 'Third tab',
                div: "#tabContent-3" 
			}]
        });
        

Example #2

Source code:

            var testTabs2 = new $.jIceTabset("#test-2 #tabTest", {
                tabWidth: 200,
                showCloseButton: true,
                onchanged: function(oldTab, newTab) {
                   if (oldTab && oldTab.div)
                        $("#test-2 " + oldTab.div).fadeOut("fast", function() {
                           if (newTab.div)
                            $("#test-2 " + newTab.div).fadeIn("fast");
                        
                        });
                    else if (newTab.div)
                        $("#test-2 " + newTab.div).fadeIn("fast");
                },
                onclosable: function(tab) {
                    return confirm('Do you want to close the ' + tab.title + ' tab?');
                },
                onclosed: function(tab) {
                    if (tab.div)
                        $("#test-2 " + tab.div).fadeOut("fast");
                    alert("'Closed " + tab.title + " tab");
                    
                },
                onchangeable: function(oldTab, newTab) {
                    //if (oldTab)
                    //    return confirm("Do you want to change from  " + oldTab.title + ' to ' + newTab.title + ' tab?');
                    //else
                        return true;
                },
                tabs: [{
                	title: 'First tab',
                    hint: 'First tab hint',
					id: 1,
                    icon: "images/php-icon.png",
                    div: "#tabContent-1" 
				},{
        			title: 'Second tab',
					id: 2,
                    icon: "images/html-icon.png",
                    div: "#tabContent-2" 
				},{
        			title: 'Third tab',
					id: 3,
                    icon: "images/js-icon.png",
                    div: "#tabContent-3" 
				}]
            });
            
            testTabs2.addTab({title: 'Tab 4', id: 4, icon:"images/css-icon.png", div: "#tabContent-4"});
            testTabs2.addTab({title: 'Tab 5 with loooooooooooooooong title', id: 5, div: "#tabContent-5"});
            testTabs2.addTab({title: 'Tab 6', id: 6, div: "#tabContent-6"});
            testTabs2.setTitle(testTabs2.getTabByID(2), 'Title changed from code');

            testTabs2.setActive(testTabs2.getTabByID(3));