Loading, please wait...

ARTDESIGN DROP DOWN BUTTONS

Description

ArtDesign Drop Down Buttons is a JavaScript PlugIn, which transform into a group of buttons/drop down these web elements: div, link, select, radio, checkbox. This plugin also upgrade the functionality of the ArtDesign Button, ArtDesign Group Buttons, ArtDesign Drop Down
Full support of all advanced Web browsers
Full style control only with JavaScript, without using CSS
Full style control - Size (width, height), Margin and Padding, Background (background color, gradient), Shadow (outer, inner), Border (width, color, radius), Text and Icon (font, size, color)
10 predefined styles
Set the style with attribute
Set multiple styles to one element, and each of them overwrites the previous
Opportunity to set a multiple styles to one element, each of them overwrites the previous
Integration with ArtDesign Icons and ArtDesign Scroll Bar
Switching mode (Active / Inactive)
Disable mode
Hover / Click Animations
Listening for Click Events
Listening for External Changes (Active / Inactive, Enabled / Disabled)
Listening for Attribute Changes
Public Methods: Destroy

Demo

Resize to switch mode

This is Div 1
This is Div 2
This is Div 3
This is Div 4

HTML

<div class="ArtDesign">
    <div data-plugin-ad-drop-down-buttons="ad-drop-down-buttons" data-ad-drop-down-buttons-selector="div">
        <div data-ad-drop-down-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-drop-down-buttons="ad-drop-down-buttons" data-ad-drop-down-buttons-selector="link">
        <a href="#" data-ad-drop-down-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-drop-down-buttons="ad-drop-down-buttons" data-ad-drop-down-buttons-selector="select">
        <option value="Select1" 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-drop-down-buttons="ad-drop-down-buttons" data-ad-drop-down-buttons-selector="radio">
        <input type="radio" name="Radio" value="Radio 1" data-ad-drop-down-buttons-label="This is Radio 1"/>
        <input type="radio" name="Radio" value="Radio 2" data-ad-drop-down-buttons-label="This is Radio 2" checked="checked"/>
        <input type="radio" name="Radio" value="Radio 3" data-ad-drop-down-buttons-label="This is Radio 3"/>
    </div>
    <div data-plugin-ad-drop-down-buttons="ad-drop-down-buttons" data-ad-drop-down-buttons-selector="checkbox">
        <input type="checkbox" name="CheckBox" value="CheckBox 1" data-ad-drop-down-buttons-label="This is CheckBox 1" checked="checked"/>
        <input type="checkbox" name="CheckBox" value="CheckBox 2" data-ad-drop-down-buttons-label="This is CheckBox 2"/>
        <input type="checkbox" name="CheckBox" value="CheckBox 3" data-ad-drop-down-buttons-label="This is CheckBox 3"/>
    </div>
</div>

JavaScript

<script type="text/javascript">
    $(document).ready(function() {
        $(".ArtDesign").ArtDesignDropDownButtons();
    });
</script>