Loading, please wait...

ARTDESIGN INPUT

SETTINGS

Attributes

data-plugin-ad-input="ad-input"

This attribute is required in order to applied the plugin on the desired element
<input type="text" data-plugin-ad-input="ad-input">

data-ad-input-options="OuterShadow, FullBlue"

This attribute overwrites the settings of the plugin only for the concrete element
<input type="text" data-plugin-ad-input="ad-input" data-ad-input-options="OuterShadow, FullBlue">

data-ad-input-icon="icon-info"

This attribute adds an icon to the button
<input type="text" data-plugin-ad-input="ad-input" data-ad-input-icon="icon-info">

disabled="disabled"

This attribute activates disable mode
<input type="text" data-plugin-ad-input="ad-input" disabled="disabled">

Public Methods

Destroy

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

Default Options

<script type="text/javascript">
    General: { // General settings of the element
        ClassPrefix: "Inp_" // 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: "Inp_"
    },
    Global: { // Global settings of the element
        MaxWidth: "800px", // Set the MaxWidth of the element; Must be string (px, %, auto); By default: "800px"
        Width: "100%", // Set the Width; Must be string (px, %, auto); By default: "100%"
        Height: "35px", // Set the Height; Must be string (px, %, auto); By default: "35px"
        Margin: "0 10px 10px 0", // Set the Margin (top, right, bottom, left); Must be String; By default: "0 10px 10px 0"
        PaddingTop: "8px", // Set the top padding of the element; Must be string (px, %, auto); By default: "8px"
        PaddingLeft: "20px", // Set the left padding of the element; Must be string (px, %, auto); By default: "20px"
        PaddingRight: "20px", // Set the right padding of the element; Must be string (px, %, auto); By default: "20px"
        Float: "", // Positions element to the left or right; Must be string (left, right); By default: ""
        Cursor: "text", // Set Cursor style on CSS; Must be string; By default: "text"
        CursorDisabled: "not-allowed", // Set Cursor style on CSS while it is on the disabled mode; Must be string; By default: "not-allowed"
        OpacityDisabled: 0.8, // Set the opacity of the element while it is on the disabled mode; Must be decimal; By default: 0.8
        AnimationSpeed: 0.4, // Set the AnimationSpeed; Must be decimal; By default: 0.4
        ZIndex: 1 // It specifies the stack order of an elements; Must be integer or string (auto, initial, inherit); By default: 1
    },
    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
    },
    MainBackground: { // Setting for the MainBackground colors animation
        Animation: false, // If it is true, it sets the following settings for MainBackground colors animation; normal, hover and click; By default: false
        Normal: {
            BackgroundColor: "transparent" // Normal background color without gradient; By default: "transparent"
        },
        Hover: {
            BackgroundColor: "transparent" // Hover background color without gradient; By default: "transparent"
        },
        Click: {
            BackgroundColor: "transparent" // Hover background color without gradient; By default: "transparent"
        }
    },
    Text: { // Settings of the text of the element
        Animation: true, // If it is true, it sets the following settings for Text animation; By default: true
        FontFamily: "sans-serif", // Set the FontFamily property which specifies the font for an element; Must be serif, sans-serif or monospace; By default: "sans-serif"
        FontSize: "14px", // Set the size of the font; Must be string; By default: "14px"
        FontWeight: "normal", // Set the weight of the font; Must be string (normal, bold, bolder, lighter, number, initial, inherit); By default: "normal"
        FontStyle: "normal", // Set the style of the font; Must be string (normal, italic, oblique, initial, inherit); By default: "normal"
        LineHeight: "",
        TextAlign: "left", // Set the text-align property which specifies the horizontal alignment of text in an element; Must the string (left, right, center, justify, initial, inherit); By default: "left"
        Normal: {
            Color: "#719AC1" // Normal color; By default: "#719AC1"
        },
        Hover: {
            Color: "#52708C" // Hover color without gradient; By default: "#52708C"
        },
        Click: {
            Color: "#52708C" // Click color; By default: "#52708C"
        }
    },
    Icon: { // Setting for the Icon
        Animation: true, // If it is true, it sets the following settings for Icon animation; By default: true
        Width: "24px", // Set the Width; Must be string (px, %, auto); By default: "24px"
        Position: "Left", // Set the position of the element; Must be string (Left or Right); By default: "Left"
        FontSize: "16px", // Set the size of the font; Must be string; By default: "16px"
        PaddingHorizontal: "5px", // Set the horizontal padding of the element; Must be string (px, %, auto); By default: "5px"
        PaddingTop: "8px", // Set the top padding of the element; Must be string (px, %, auto); By default: "8px"
        Normal: {
            Color: "#719AC1" // Normal color; By default: "#719AC1"
        },
        Hover: {
            Color: "#52708C" // Hover color without gradient; By default: "#52708C"
        },
        Click: {
            Color: "#52708C" // Click color; By default: "#52708C"
        }
    },
    Background: { //Settings for the background animation of the element
        Animation: false, // If it is true, it sets the following settings for Background animation; By default: false
        Normal: { // background setting for Normal mode(for different browsers)
            BackgroundColor: "transparent",
            MozLinearGradient: "-moz-linear-gradient(top, rgba(transparent) 0%, rgba(transparent) 100%)",
            WebkitGradient: "-webkit-gradient(left top, left bottom, color-stop(0%, rgba(transparent)), color-stop(100%, rgba(transparent)))",
            WebkitLinearGradient: "-webkit-linear-gradient(top, rgba(transparent) 0%, rgba(transparent) 100%)",
            OLinearGradient: "-o-linear-gradient(top, rgba(transparent) 0%, rgba(transparent) 100%)",
            MSLinearGradient: "-ms-linear-gradient(top, rgba(transparent) 0%, rgba(transparent) 100%)",
            LinearGradient: "linear-gradient(to bottom, rgba(transparent) 0%, rgba(transparent) 100%)",
            FilterGradient: "progid:DXImageTransform.Microsoft.gradient(startColorstr='transparent', endColorstr='transparent', GradientType=0)"
        },
        Hover: { // background setting for Hover mode(for different browsers)
            BackgroundColor: "transparent",
            MozLinearGradient: "-moz-linear-gradient(top, rgba(transparent) 0%, rgba(transparent) 100%)",
            WebkitGradient: "-webkit-gradient(left top, left bottom, color-stop(0%, rgba(transparent)), color-stop(100%, rgba(transparent)))",
            WebkitLinearGradient: "-webkit-linear-gradient(top, rgba(transparent) 0%, rgba(transparent) 100%)",
            OLinearGradient: "-o-linear-gradient(top, rgba(transparent) 0%, rgba(transparent) 100%)",
            MSLinearGradient: "-ms-linear-gradient(top, rgba(transparent) 0%, rgba(transparent) 100%)",
            LinearGradient: "linear-gradient(to bottom, rgba(transparent) 0%, rgba(transparent) 100%)",
            FilterGradient: "progid:DXImageTransform.Microsoft.gradient(startColorstr='transparent', endColorstr='transparent', GradientType=0)"
        },
        Click: { // background setting for Click mode(for different browsers)
            BackgroundColor: "transparent",
            MozLinearGradient: "-moz-linear-gradient(top, rgba(transparent) 0%, rgba(transparent) 100%)",
            WebkitGradient: "-webkit-gradient(left top, left bottom, color-stop(0%, rgba(transparent)), color-stop(100%, rgba(transparent)))",
            WebkitLinearGradient: "-webkit-linear-gradient(top, rgba(transparent) 0%, rgba(transparent) 100%)",
            OLinearGradient: "-o-linear-gradient(top, rgba(transparent) 0%, rgba(transparent) 100%)",
            MSLinearGradient: "-ms-linear-gradient(top, rgba(transparent) 0%, rgba(transparent) 100%)",
            LinearGradient: "linear-gradient(to bottom, rgba(transparent) 0%, rgba(transparent) 100%)",
            FilterGradient: "progid:DXImageTransform.Microsoft.gradient(startColorstr='transparent', endColorstr='transparent', GradientType=0)"
        }
    },
    Shadow: { // Settings for the Shadow of the element
        Outer: { // Setting for the outer shadow of the element
            Animation: false, // If it is true it sets the following settings for normal, hover and click; By default: false
            Normal: {
                Shadow: "0px 0px 0px 0px rgba(0, 0, 0, 0)"
            },
            Hover: {
                Shadow: "0px 0px 0px 0px rgba(0, 0, 0, 0)"
            },
            Click: {
                Shadow: "0px 0px 0px 0px rgba(0, 0, 0, 0)"
            }
        },
        Inner: { // Setting for the inner shadow of the element
            Animation: false, // If it is true it sets the following settings for normal, hover and click; By default: false
            Normal: {
                Shadow: "inset 0px 0px 0px 0px rgba(0, 0, 0, 0)"
            },
            Hover: {
                Shadow: "inset 0px 0px 0px 0px rgba(0, 0, 0, 0)"
            },
            Click: {
                Shadow: "inset 0px 0px 0px 0px rgba(0, 0, 0, 0)"
            }
        }
    },
    Border: { // Settings for the animation of the Border
        Animation: true, // If it is true it set the following settings for normal, hover and click; By Default: true
        BorderStyle: "solid", // Set the BorderStyle; Must be String; By default: "solid"
        Normal: { // Settings for Normal BorderStyle animation
            BorderWidth: "1px", // Set the BorderWidth; Must be String; By default: "1px"
            BorderRadius: "0px", // Set the BorderRadius; Must be String; By default: "0px"
            BorderRadiusInner: "0px", // Set the BorderRadiusInner; Must be String; By default: "0px"
            BorderColor: "#719AC1" // Set the BorderColor; Must be String; By default: "#719AC1"
        },
        Hover: { // Settings for Hover BorderStyle animation
            BorderWidth: "1px", // Set the BorderWidth; Must be String; By default: "1px"
            BorderRadius: "0px", // Set the BorderRadius; Must be String; By default: "0px"
            BorderRadiusInner: "0px", // Set the BorderRadiusInner; Must be String; By default: "0px"
            BorderColor: "#52708C" // Set the BorderColor; Must be String; By default: "#52708C"
        },
        Click: { // Settings for Click BorderStyle animation
            BorderWidth: "1px", // Set the BorderWidth; Must be String; By default: "1px"
            BorderRadius: "0px", // Set the BorderRadius; Must be String; By default: "0px"
            BorderRadiusInner: "0px", // Set the BorderRadiusInner; Must be String; By default: "0px"
            BorderColor: "#52708C" // Set the BorderColor; Must be String; By default: "#52708C"
        }
    },
    WaterMark: { // Settings for Water Mark
        Left: -4, // Set Left position; Must be integer; By default: -4
        Top: 0, // Set Top position; Must be integer; By default: 0
        FallBack: false
    }
</script>