Loading, please wait...

ARTDESIGN GROUP BUTTONS

EXAMPLES

Overwrite settings for all children elements

<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-button-options="FullBlue">
    <a href="#" data-ad-group-buttons-current="current">Button 1</a>
    <a href="#">Button 2</a>
    <a href="#">Button 3</a>
</div>

Frequently overwriting settings for all children elements

<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-button-options="FullBlue, InnerShadow">
    <a href="#" data-ad-group-buttons-current="current">Button 1</a>
    <a href="#">Button 2</a>
    <a href="#">Button 3</a>
</div>

Overwrite settings for a specific child 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" data-ad-group-buttons-button-options="FullBlue">Button 1</a>
    <a href="#">Button 2</a>
    <a href="#">Button 3</a>
</div>

Frequently overwriting settings for a specific child 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" data-ad-group-buttons-button-options="FullBlue, InnerShadow">Button 1</a>
    <a href="#">Button 2</a>
    <a href="#">Button 3</a>
</div>

Group Buttons with icons

<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" data-ad-group-buttons-icon="icon-home">Button 1</a>
    <a href="#" data-ad-group-buttons-icon="icon-info">Button 2</a>
    <a href="#" data-ad-group-buttons-icon="icon-attach">Button 3</a>
</div>

External switching (Active) - Div

This is Div 1
This is Div 2
This is Div 3
Active Div 1
Active Div 2
Active Div 3
<div data-plugin-ad-group-buttons="ad-group-buttons" data-ad-group-buttons-selector="div" data-ad-group-buttons-switch="switch">
    <div id="Div1" data-ad-group-buttons-current="current">This is Div 1</div>
    <div id="Div2">This is Div 2</div>
    <div id="Div3">This is Div 3</div>
</div>
<script type="text/javascript">
    function ActiveDiv1() {
        $("#Div1").attr("data-ad-group-buttons-current", "current");
    }
    function ActiveDiv2() {
        $("#Div2").attr("data-ad-group-buttons-current", "current");
    }
    function ActiveDiv3() {
        $("#Div3").attr("data-ad-group-buttons-current", "current");
    }
</script>

External switching (Active) - Link

Active Link 1
Active Link 2
Active Link 3
<div data-plugin-ad-group-buttons="ad-group-buttons" data-ad-group-buttons-selector="link" data-ad-group-buttons-switch="switch">
    <a href="#" id="Link1" data-ad-group-buttons-current="current">This is Link 1</a>
    <a href="#" id="Link2">This is Link 2</a>
    <a href="#" id="Link3">This is Link 3</a>
</div>
<script type="text/javascript">
    function ActiveLink1() {
        $("#Link1").attr("data-ad-group-buttons-current", "current");
    }
    function ActiveLink2() {
        $("#Link2").attr("data-ad-group-buttons-current", "current");
    }
    function ActiveLink3() {
        $("#Link3").attr("data-ad-group-buttons-current", "current");
    }
</script>

External switching (Active) - Select

Active Select 1
Active Select 2
Active Select 3
<select data-plugin-ad-group-buttons="ad-group-buttons" data-ad-group-buttons-selector="select">
    <option value="Select1" id="Select1" selected="selected">This is Select 1</option>
    <option value="Select2" id="Select2">This is Select 2</option>
    <option value="Select3" id="Select3">This is Select 3</option>
</select>
<script type="text/javascript">
    function ActiveSelect1() {
        $("#Select1").attr("data-ad-group-buttons-current", "current");
        // or
        $("#Select1").attr("selected", "selected");
    }
    function ActiveSelect2() {
        $("#Select2").attr("data-ad-group-buttons-current", "current");
        // or
        $("#Select2").attr("selected", "selected");
    }
    function ActiveSelect3() {
        $("#Select3").attr("data-ad-group-buttons-current", "current");
        // or
        $("#Select3").attr("selected", "selected");
    }
</script>

External switching (Active) - Radio

Active Radio 1
Active Radio 2
Active Radio 3
<div data-plugin-ad-group-buttons="ad-group-buttons" data-ad-group-buttons-selector="radio">
    <input type="radio" name="Radio" id="Radio1" value="Radio 1" data-ad-group-buttons-label="This is Radio" checked="checked"/>
    <input type="radio" name="Radio" id="Radio2" value="Radio 2" data-ad-group-buttons-label="This is Radio 2"/>
    <input type="radio" name="Radio" id="Radio3" value="Radio 3" data-ad-group-buttons-label="This is Radio 3"/>
</div>
<script type="text/javascript">
    function ActiveRadio1() {
        $find("#Radio1").attr("data-ad-group-buttons-current", "current");
        // or
        $find("#Radio1").attr("checked", "checked");
    }
    function ActiveRadio2() {
        $("#Radio2").attr("data-ad-group-buttons-current", "current");
        // or
        $("#Radio2").attr("checked", "checked");
    }
    function ActiveRadio3() {
        $("#Radio3").attr("data-ad-group-buttons-current", "current");
        // or
        $("#Radio3").attr("checked", "checked");
    }
</script>

External switching (Active/Inactive) - CheckBox

Active Check Box 1
InActive Check Box 1
Active Check Box 2
InActive Check Box 2
Active Check Box 3
InActive Check Box 3
<div data-plugin-ad-group-buttons="ad-group-buttons" data-ad-group-buttons-selector="checkbox">
    <input type="checkbox" name="CheckBox" id="CheckBox1" value="CheckBox 1" data-ad-group-buttons-label="This is CheckBox" checked="checked"/>
    <input type="checkbox" name="CheckBox" id="CheckBox2" value="CheckBox 2" data-ad-group-buttons-label="This is CheckBox 2"/>
    <input type="checkbox" name="CheckBox" id="CheckBox3" value="CheckBox 3" data-ad-group-buttons-label="This is CheckBox 3"/>
</div>
<script type="text/javascript">
    function ActiveCheckBox1() {
        $("#CheckBox1").attr("data-ad-group-buttons-current", "current");
        // or
        $("#CheckBox1").attr("checked", "checked");
    }
    function ActiveCheckBox2() {
        $("#CheckBox2").attr("data-ad-group-buttons-current", "current");
        // or
        $("#CheckBox2").attr("checked", "checked");
    }
    function ActiveCheckBox3() {
        $("#CheckBox3").attr("data-ad-group-buttons-current", "current");
        // or
        $("#CheckBox3").attr("checked", "checked");
    }
    function InActiveCheckBox1() {
        $("#CheckBox1").removeAttr("data-ad-group-buttons-current");
        // or
        $("#CheckBox1").removeAttr("checked");
    }
    function InActiveCheckBox2() {
        $("#CheckBox2").removeAttr("data-ad-group-buttons-current");
        // or
        $("#CheckBox2").removeAttr("checked");
    }
    function InActiveCheckBox3() {
        $("#CheckBox3").removeAttr("data-ad-group-buttons-current");
        // or
        $("#CheckBox3").removeAttr("checked");
    }
</script>

Disable mode - all children elements

<div data-plugin-ad-group-buttons="ad-group-buttons" data-ad-group-buttons-selector="link" data-ad-group-buttons-switch="switch" disabled="disabled">
    <a href="#" data-ad-group-buttons-current="current">Button 1</a>
    <a href="#">Button 2</a>
    <a href="#">Button 3</a>
</div>

External switching (Enable / Disable) - all children elements

Enable All
Disable All
<div data-plugin-ad-group-buttons="ad-group-buttons" data-ad-group-buttons-selector="link" data-ad-group-buttons-switch="switch" id="DisableAll">
    <a href="#" data-ad-group-buttons-current="current">Button 1</a>
    <a href="#">Button 2</a>
    <a href="#">Button 3</a>
</div>
<script type="text/javascript">
    function EnableAll() {
        $("#DisableAll").removeAttr("disabled");
    }
    function DisableAll() {
        $("#DisableAll").attr("disabled", "disabled");
    }
</script>

Disable mode - specific child 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">Button 1</a>
    <a href="#" disabled="disabled">Button 2</a>
    <a href="#">Button 3</a>
</div>

External switching (Enable / Disable) - specific child element

Enable Button 2
Disable Button 2
<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">Button 1</a>
    <a href="#" id="Disable">Button 2</a>
    <a href="#">Button 3</a>
</div>
<script type="text/javascript">
    function Enable() {
        $("#Disable").removeAttr("disabled");
    }
    function Disable() {
        $("#Disable").attr("disabled", "disabled");
    }
</script>

Click event

<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">Button 1</a>
    <a href="#" onclick="alert('Button Clicked!');">Click Me</a>
    <a href="#">Button 3</a>
</div>