Loading, please wait...

ARTDESIGN DROP DOWN BUTTONS

SETTINGS

Attributes

data-plugin-ad-drop-down-buttons="ad-drop-down-buttons"

This attribute is required in order to applied the plugin on the desired element
<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">Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
</div>

data-ad-drop-down-buttons-selector="div"

data-ad-drop-down-buttons-selector="link"

data-ad-drop-down-buttons-selector="select"

data-ad-drop-down-buttons-selector="radio"

data-ad-drop-down-buttons-selector="checkbox"

This attribute specifies the type of the elements
<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" 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>

data-ad-drop-down-buttons-options="InnerShadow, Blue"

This attribute overwrites the settings of the plugin only for the specific element
<div data-plugin-ad-drop-down-buttons="ad-drop-down-buttons" data-ad-drop-down-buttons-selector="div" data-ad-drop-down-buttons-options="InnerShadow, Blue">
    <div data-ad-drop-down-buttons-current="current">Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
</div>

data-ad-drop-down-buttons-icon="icon-info"

This attribute adds an icon to the button / drop down
<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" data-ad-drop-down-buttons-icon="icon-info">Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
</div>

data-ad-drop-down-buttons-current="current"

This attribute makes the element active - for all types (Div, Link, Select, Radio, CheckBox)
<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">Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
</div>

disabled="disabled"

This attribute activates the Disable mode
<div data-plugin-ad-drop-down-buttons="ad-drop-down-buttons" data-ad-drop-down-buttons-selector="div" disabled="disabled">
    <div data-ad-drop-down-buttons-current="current">Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
</div>
<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">Div 1</div>
    <div disabled="disabled">Div 2</div>
    <div>Div 3</div>
</div>

Public Methods

Destroy

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

Default Options

<script type="text/javascript">
    General: { // General settings of the element
        ClassPrefix: "DDB_", // 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: "DDB_"
        DestroyGroupButtonsAndDropDown: true // Destroy method; Must be boolean; By default: true
    },
    Global: { // Global settings of the element
        Margin: "0 5px 10px 0" // Set the Margin (top, right, bottom, left); Must be String; By default: "0 0 10px 0"
    },
    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
    },
    DropDownExternalPlugInOptions: {
        Global: { // Setting for the DropDown PlugIn
            MaxWidth: "", // Set the MaxWidth of the element; Must be string (px, %, auto); By default: ""
            MainWrap: false // If it is true it wrap all elements into div; By Default: true
        }
    }
</script>