Loading, please wait...

ARTDESIGN TABS

SETTINGS

Attributes

data-plugin-ad-tabs="ad-tabs"

This attribute is required in order to applied the plugin on the desired element
<div data-plugin-ad-tabs="ad-tabs">
    <div>
        <div>Tab 1</div>
        <div>Tab 2</div>
        <div>Tab 3</div>
    </div>
    <div>
        <div>Content 1</div>
        <div>Content 2</div>
        <div>Content 3</div>
    </div>
</div>

data-ad-tabs-options="Options1, Options2"

This attribute overwrites the settings of the plugin only for the specific element
<div data-plugin-ad-tabs="ad-tabs" data-ad-tabs-options="Options1, Options2">
    <div>
        <div>Tab 1</div>
        <div>Tab 2</div>
        <div>Tab 3</div>
    </div>
    <div>
        <div>Content 1</div>
        <div>Content 2</div>
        <div>Content 3</div>
    </div>
</div>

data-ad-tabs-buttons-options="Options1"

This attribute overwrites the settings of the ArtDesign Button and ArtDesign Drop Down only for the concrete element
<div data-plugin-ad-tabs="ad-tabs" data-ad-tabs-buttons-options="Options1">
    <div>
        <div>Tab 1</div>
        <div>Tab 2</div>
        <div>Tab 3</div>
    </div>
    <div>
        <div>Content 1</div>
        <div>Content 2</div>
        <div>Content 3</div>
    </div>
</div>

data-ad-tabs-icon="IconName"

This attribute adds an icon to the button and dropdown
<div data-plugin-ad-tabs="ad-tabs">
    <div>
        <div data-ad-tabs-icon="IconName">Tab 1</div>
        <div>Tab 2</div>
        <div>Tab 3</div>
    </div>
    <div>
        <div>Content 1</div>
        <div>Content 2</div>
        <div>Content 3</div>
    </div>
</div>

data-ad-tabs-status="Open"

This attribute makes the tab active
<div data-plugin-ad-tabs="ad-tabs">
    <div>
        <div data-ad-tabs-status="Open">Tab 1</div>
        <div>Tab 2</div>
        <div>Tab 3</div>
    </div>
    <div>
        <div>Content 1</div>
        <div>Content 2</div>
        <div>Content 3</div>
    </div>
</div>

data-ad-tabs-hash="Tab1"

This attribute add hash
<div data-plugin-ad-tabs="ad-tabs">
    <div>
        <div data-ad-tabs-hash="Tab1">Tab 1</div>
        <div>Tab 2</div>
        <div>Tab 3</div>
    </div>
    <div>
        <div>Content 1</div>
        <div>Content 2</div>
        <div>Content 3</div>
    </div>
</div>

Public Methods

Destroy

<script type="text/javascript">
    var Tabs = $(".ArtDesign").ArtDesignTabs();
    Tabs.Destroy();
</script>

Default Options

<script type="text/javascript">
    General: { // General settings of the element
        ClassPrefix: "Tab_" // Put ClassPrefix on the style of the element in order to prevent a conflict with other styles from external CSS file; Must be string; By default: "Tab_"
    },
    Global: { // Clobal settings of the element
        Float: "", // Positions element to the left or right; Must be string (left, right); By default: ""
        MaxWidth: "", // Set the MaxWidth of the element; Must be string (px, %, auto); By default: ""
        Width: "100%", // Set the Width; Must be string (px, %, auto); By default: "100%"
        AnimationSpeed: 350, // Set the AnimationSpeed; Must be decimal; By default: 0.4
        DefaultOpen: 0, // Set start position of the tabs; Must be integer; By default: 0
        Hash: false, // If it is true the hash property sets or returns the anchor part of a URL, including the hash sign (#); Must be boolean; By default: false
        BorderBottomElementsNull: false // If it is true it removes the bottom border; Must be boolean; By default: false
    },
    BrowserSupport: { // Settings for the browser support
        Chrome: 20, // Indicates the require minimum version of the Chrome browser; Must be integer; By default: 20
        Mozilla: 20, // Indicates the require minimum version of the Mozilla browser; Must be integer; By default: 20
        Opera: 20, // Indicates the require minimum version of the Opera browser; Must be integer; By default: 20
        Safari: 5, // Indicates the require minimum version of the Safari browser; Must be integer; By default: 5
        MSIE: 9, // Indicates the require minimum version of the MSIE browser; Must be integer; By default: 9
        MSEdge: 12 // Indicates the require minimum version of the MSEdge browser; Must be integer; By default: 12
    },
    Navigation: { // Settings for the Navigation
        Position: "Center", // Set position of the element; Must be string; By default: "Center"
        HorizontalMargin: "20px", // Set the horizontal margin of the element; Must be string (px, %, auto); By default: "20px"
        Border: { // Settings for the Border
            BorderStyle: "solid", // Set the BorderStyle; Must be String; By default: "solid"
            BorderWidth: "0 0 1px 0", // Set the BorderWidth (top, right, bottom, left); Must be String; By default: "0 0 1px 0"
            BorderRadius: "0px", // Set the BorderRadius; Must be String; By default: "0px"
            BorderColor: "#6488AA" // Set the BorderColor; Must be String; By default: "#6488AA"
        }
    },
    Content: { // Settings for the Content
        AnimationType: "Slide", // Set the animation type of the Tab's content; Must be string (Slide or Fade); By default: "Slide"
        Background: "#FCFCFC", // Set the background of the Tab's content; Must be string; By default: "#FCFCFC"
        MarginTop: 0, // Set the vertical space of the Navigation content; Must be integer; By default: 0
        Border: { // Settings for the Border
            BorderStyle: "solid", // Set the BorderStyle; Must be String; By default: "solid"
            BorderWidth: "0 1px 1px 1px", // Set the BorderWidth (top, right, bottom, left); Must be String; By default: "0 1px 1px 1px"
            BorderRadius: "0 0 6px 6px", // Set the BorderRadius (top, right, bottom, left); Must be String; By default: "0 0 6px 6px"
            BorderColor: "#6488AA" // Set the BorderColor; Must be String; By default: "#6488AA"
        },
        Padding: "20px" // Set the padding of the element; Must be string (px, %, auto); By default: "20px"
    }
</script>