Loading, please wait...

ARTDESIGN GROUP BUTTONS

SETTINGS

Attributes

data-plugin-ad-group-buttons="ad-group-buttons"

This attribute is required in order to applied the plugin on the desired element
<div data-plugin-ad-group-buttons="ad-group-buttons" data-ad-group-buttons-selector="link" data-ad-group-buttons-switch="switch">
    <a href="#" data-ad-group-buttons-current="current">This is Link 1</a>
    <a href="#">This is Link 2</a>
    <a href="#">This is Link 3</a>
</div>

data-ad-group-buttons-selector="div"

data-ad-group-buttons-selector="link"

data-ad-group-buttons-selector="select"

data-ad-group-buttons-selector="radio"

data-ad-group-buttons-selector="checkbox"

This attribute specifies the type of the elements
    <div data-plugin-ad-group-buttons="ad-group-buttons" data-ad-group-buttons-selector="div" data-ad-group-buttons-switch="switch">
        <div data-ad-group-buttons-current="current">This is Div 1</div>
        <div>This is Div 2</div>
        <div>This is Div 3</div>
    </div>
    <div data-plugin-ad-group-buttons="ad-group-buttons" data-ad-group-buttons-selector="link" data-ad-group-buttons-switch="switch">
        <a href="#" data-ad-group-buttons-current="current">This is Link 1</a>
        <a href="#">This is Link 2</a>
        <a href="#">This is Link 3</a>
    </div>
    <select data-plugin-ad-group-buttons="ad-group-buttons" data-ad-group-buttons-selector="select">
        <option value="Select1" selected="selected">This is Select 1</option>
        <option value="Select2">This is Select 2</option>
        <option value="Select3">This is Select 3</option>
    </select>
    <div data-plugin-ad-group-buttons="ad-group-buttons" data-ad-group-buttons-selector="radio" >
        <input type="radio" name="Radio" value="Radio 1" data-ad-group-buttons-label="This is Radio 1" checked="checked"/>
        <input type="radio" name="Radio" value="Radio 2" data-ad-group-buttons-label="This is Radio 2"/>
        <input type="radio" name="Radio" value="Radio 3" data-ad-group-buttons-label="This is Radio 3"/>
    </div>
    <div data-plugin-ad-group-buttons="ad-group-buttons" data-ad-group-buttons-selector="checkbox">
        <input type="checkbox" name="CheckBox" value="CheckBox 1" data-ad-group-buttons-label="This is CheckBox 1" checked="checked"/>
        <input type="checkbox" name="CheckBox" value="CheckBox 2" data-ad-group-buttons-label="This is CheckBox 2"/>
        <input type="checkbox" name="CheckBox" value="CheckBox 3" data-ad-group-buttons-label="This is CheckBox 3"/>
    </div>

data-ad-group-buttons-options="FullBlue, InnerShadow"

This attribute overwrites the settings of the plugin only for the specific element
<div data-plugin-ad-group-buttons="ad-group-buttons" data-ad-group-buttons-selector="link" data-ad-group-buttons-switch="switch" data-ad-group-buttons-options="FullBlue, InnerShadow">
        <a href="#" data-ad-group-buttons-current="current">This is Link 1</a>
        <a href="#">This is Link 2</a>
        <a href="#">This is Link 3</a>
    </div>

data-ad-group-buttons-button-options="FullBlue, InnerShadow"

This attribute overwrites the settings of the ArtDesign Button only for the concrete element
<div data-plugin-ad-group-buttons="ad-group-buttons" data-ad-group-buttons-selector="link" data-ad-group-buttons-switch="switch">
    <a href="#" data-ad-group-buttons-current="current">This is Link 1</a>
    <a href="#" data-ad-group-buttons-button-options="FullBlue, InnerShadow">This is Link 2</a>
    <a href="#">This is Link 3</a>
</div>

data-ad-group-buttons-icon="icon-info"

This attribute adds an icon to the button
<div data-plugin-ad-group-buttons="ad-group-buttons" data-ad-group-buttons-selector="link" data-ad-group-buttons-switch="switch">
    <a href="#" data-ad-group-buttons-current="current">This is Link 1</a>
    <a href="#" data-ad-group-buttons-icon="icon-info">This is Link 2</a>
    <a href="#">This is Link 3</a>
</div>

data-ad-group-buttons-switch="switch"

This attribute activate switching mode (Active/Inactive) - for Div and Link
<div data-plugin-ad-group-buttons="ad-group-buttons" data-ad-group-buttons-selector="link" data-ad-group-buttons-switch="switch">
    <a href="#" data-ad-group-buttons-current="current">This is Link 1</a>
    <a href="#">This is Link 2</a>
    <a href="#">This is Link 3</a>
</div>

data-ad-group-buttons-current="current"

This attribute makes the button active - for all types (Div, Link, Select, Radio, CheckBox)
<div data-plugin-ad-group-buttons="ad-group-buttons" data-ad-group-buttons-selector="link" data-ad-group-buttons-switch="switch">
    <a href="#" data-ad-group-buttons-current="current">This is Link 1</a>
    <a href="#">This is Link 2</a>
    <a href="#">This is Link 3</a>
</div>

selected="selected"

This attribute makes the button active for Select
<select data-plugin-ad-group-buttons="ad-group-buttons" data-ad-group-buttons-selector="select">
    <option value="Select1" selected="selected">This is Select 1</option>
    <option value="Select2">This is Select 2</option>
    <option value="Select3">This is Select 3</option>
</select>

checked="checked"

This attribute makes the button active for Radio and CheckBox
<div data-plugin-ad-group-buttons="ad-group-buttons" data-ad-group-buttons-selector="radio" >
    <input type="radio" name="Radio" value="Radio 1" data-ad-group-buttons-label="This is Radio 1" checked="checked"/>
    <input type="radio" name="Radio" value="Radio 2" data-ad-group-buttons-label="This is Radio 2"/>
    <input type="radio" name="Radio" value="Radio 3" data-ad-group-buttons-label="This is Radio 3"/>
</div>
    <div data-plugin-ad-group-buttons="ad-group-buttons" data-ad-group-buttons-selector="checkbox">
    <input type="checkbox" name="CheckBox" value="CheckBox 1" data-ad-group-buttons-label="This is CheckBox 1" checked="checked"/>
    <input type="checkbox" name="CheckBox" value="CheckBox 2" data-ad-group-buttons-label="This is CheckBox 2"/>
    <input type="checkbox" name="CheckBox" value="CheckBox 3" data-ad-group-buttons-label="This is CheckBox 3"/>
</div>

data-ad-group-buttons-label="Label"

This attribute set label for Radio and CheckBox
<div data-plugin-ad-group-buttons="ad-group-buttons" data-ad-group-buttons-selector="radio" >
    <input type="radio" name="Radio" value="Radio 1" data-ad-group-buttons-label="This is Radio 1" checked="checked"/>
    <input type="radio" name="Radio" value="Radio 2" data-ad-group-buttons-label="This is Radio 2"/>
    <input type="radio" name="Radio" value="Radio 3" data-ad-group-buttons-label="This is Radio 3"/>
</div>
    <div data-plugin-ad-group-buttons="ad-group-buttons" data-ad-group-buttons-selector="checkbox">
    <input type="checkbox" name="CheckBox" value="CheckBox 1" data-ad-group-buttons-label="This is CheckBox 1" checked="checked"/>
    <input type="checkbox" name="CheckBox" value="CheckBox 2" data-ad-group-buttons-label="This is CheckBox 2"/>
    <input type="checkbox" name="CheckBox" value="CheckBox 3" data-ad-group-buttons-label="This is CheckBox 3"/>
</div>

disabled="disabled"

This attribute activivates Disable mode
<div data-plugin-ad-group-buttons="ad-group-buttons" data-ad-group-buttons-selector="link" data-ad-group-buttons-switch="switch">
    <a href="#" data-ad-group-buttons-current="current">This is Link 1</a>
    <a href="#" disabled="disabled">This is Link 2</a>
    <a href="#">This is Link 3</a>
</div>

Public Methods

Destroy

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

Default Options

<script type="text/javascript">
    General: { // General settings of the element
        ClassPrefix: "GB_" // 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: "GB_"
    },
    Global: { // Global settings of the element
        MainWrap: true, // MainWrap is used to wrap the bottons in a div; By default: true
        Margin: 0, // Set the Margin (top, right, bottom, left); Must be String; By default: 0
        MarginElements: "-1px 0 0 -1px", // Set the MarginElements (top, right, bottom, left); Must be String; By default: "-1px 0 0 -1px"
        Float: "" // Positions element to the left or right; Must be String (left, right); By default: ""
    },
    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
    }
</script>