Dynamic Tabs Interface Builder - jQuery oyotabset

oyotabset is a jQuery-based dynamic tabs UI builder, it provides an easy way to create tabbed content that looks just like the tabs in your browser.

How to use it:

1. Download the plugin and include the oyotabset.js script after jQuery.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/oyotabset.js"></script>

2. Create a new tabset instance. Available parameters:

• tabs: Number of tabs
• tabWidth: Tab width
• tabHeight: Tab height
• tabLineWidth: Width of tab line
• tabIndent: Tab indent
• tabOverlap: Tab overlap
• pageHeight: Page height

// oyoTabset(tabs = 8, tabWidth = 100, tabHeight = 50, tabLineWidth = 2, tabIndent = 25, tabOverlap = 0, pageHeight = 200);
var tabset = new oyoTabset(8, 150, 50, 2, 50, 50);

3. Set the text to be displayed in the tabs.

// Static Text
tabset.setText("oYoSoftware");

// Auto Text (Alphabet)
tabset.setAutoText("Alphabet");

// Auto Text (Numeric)
tabset.setAutoText("Numeric", 10, 0, 100);

4. Append your own content to the tabs.

var tabs = $(".oyotab", tabset).length;
for (var i = 0; i < tabs; i++) {
  var page = tabset.getPage(i);
  // append the content to the Tab 1
  if (i === 0) {
    $(page).append(YourContent);
  }
}

5. Append the tabs UI to your page.

$("body").append(tabset);

6. Set the hover mode.

tabset.setHoverMode("mixed", {
  lineColor: "red"
});

// OR
tabset.setHoverMode("line");

7. Set the font size.

// setFont(fontSize, color, lineWidth, lineColor)
tabset.setFont(24, "", 1, "black");

8. Change the background & line colors:

tabset.changeBackgroundColor("pink");
tabset.changeLineColor("black");

9. Reset all settings:

tabset.resetTabSettings();

10. Change the page height:

tabset.changePageHeight(300);

---

This awesome jQuery plugin is developed by oyosoftware. For more Advanced Usages, please check the demo page or visit the official website.