ArtDesignUI (7127 lines code, 730 options) is a jQuery library for style control web elements (button, input, textarea, radio, checkbox, tabs, layout, icons) that include 9 jQuery PlugIns (All In One):
1. ArtDesignButton
2. ArtDesignInput
3. ArtDesignTextArea
4. ArtDesignRadio
5. ArtDesignCheckBox
6. ArtDesignSelect
7. ArtDesignTabs
8. ArtDesignLayout
9. ArtDesignIcons
Support IE7 or above and all major browsers (Chrome, Firefox, Opera, Safari etc)
Easy install
All elements are responsive
Skin support
Class prefix to prevent conflict with classes from other CSS files
Full style control with JS – no need CSS: width, height, margin, padding, border, gradient, shadow, animation, icons, fonts, colors etc
Overwrite options and Multiple overwrite options
Multiple instances
Also support install with bower and npm:
bower install artdesign-ui
npm install artdesign-ui
Download: https://github.com/wdbrown/artdesign-ui
Demonstration:
Plugin homepage:
Implementation:
LOAD FILES:
First method:
Load ArtDesignUI/ArtDesignUI.js?BasePath=ArtDesignUI/ with param BasePath were BasePath is path to folder ArtDesignUI:
<head>
<script type="text/javascript" src="ArtDesignUI/ArtDesignUI.js?BasePath=ArtDesignUI/"></script>
</head>Then initialize PlugIns with function window.ArtDesignUI.Ready():
window.ArtDesignUI.Ready(function() {
$("body").ArtDesignButton();
$("body").ArtDesignInput();
$("body").ArtDesignTextArea();
$("body").ArtDesignRadio();
$("body").ArtDesignCheckBox();
$("body").ArtDesignSelect();
$("body").ArtDesignTabs();
$("body").ArtDesignLayout();
$("body").ArtDesignIcons();
});Second method:
Load all the necessary files to run Plugins:
<head>
<link rel="stylesheet" href="ArtDesignUI/ArtDesignUIPlugIns/ArtDesignIcons/ArtDesignIcons.css">
<link rel="stylesheet" href="ArtDesignUI/ArtDesignUIPlugIns/ExternalPlugIns/JScrollPane/JScrollPane.css">
<script type="text/javascript" src="ArtDesignUI/JQuery/JQuery.js"></script>
<script type="text/javascript" src="ArtDesignUI/ExternalPlugIns/Browser/Browser.js"></script>
<script type="text/javascript" src="ArtDesignUI/ExternalPlugIns/ShadowAnimation/ShadowAnimation.js"></script>
<script type="text/javascript" src="ArtDesignUI/ExternalPlugIns/ColorAnimation/ColorAnimation.js"></script>
<script type="text/javascript" src="ArtDesignUI/ExternalPlugIns/WaterMark/WaterMark.js"></script>
<script type="text/javascript" src="ArtDesignUI/ExternalPlugIns/Mask/Mask.js"></script>
<script type="text/javascript" src="ArtDesignUI/ExternalPlugIns/JScrollPane/MouseWheel.js"></script>
<script type="text/javascript" src="ArtDesignUI/ExternalPlugIns/JScrollPane/JScrollPane.js"></script>
<script type="text/javascript" src="ArtDesignUI/ExternalPlugIns/AutoSize/AutoSize.js"></script>
<script type="text/javascript" src="ArtDesignUI/ArtDesignUIPlugIns/Settings/Settings.js"></script>
<script type="text/javascript" src="ArtDesignUI/ArtDesignUIPlugIns/ArtDesignIcons/ArtDesignIconsCode.js"></script>
<script type="text/javascript" src="ArtDesignUI/ArtDesignUIPlugIns/ArtDesignIcons/ArtDesignIcons.js"></script>
<script type="text/javascript" src="ArtDesignUI/ArtDesignUIPlugIns/ArtDesignButton/ArtDesignButton.js"></script>
<script type="text/javascript" src="ArtDesignUI/ArtDesignUIPlugIns/ArtDesignInput/ArtDesignInput.js"></script>
<script type="text/javascript" src="ArtDesignUI/ArtDesignUIPlugIns/ArtDesignTextArea/ArtDesignTextArea.js"></script>
<script type="text/javascript" src="ArtDesignUI/ArtDesignUIPlugIns/ArtDesignRadio/ArtDesignRadio.js"></script>
<script type="text/javascript" src="ArtDesignUI/ArtDesignUIPlugIns/ArtDesignCheckBox/ArtDesignCheckBox.js"></script>
<script type="text/javascript" src="ArtDesignUI/ArtDesignUIPlugIns/ArtDesignSelect/ArtDesignSelect.js"></script>
<script type="text/javascript" src="ArtDesignUI/ArtDesignUIPlugIns/ArtDesignTabs/ArtDesignTabs.js"></script>
<script type="text/javascript" src="ArtDesignUI/ArtDesignUIPlugIns/ArtDesignLayout/ArtDesignLayout.js"></script>
</head>Then initialize PlugIns:
$(document).ready(function() {
$("body").ArtDesignButton();
$("body").ArtDesignInput();
$("body").ArtDesignTextArea();
$("body").ArtDesignRadio();
$("body").ArtDesignCheckBox();
$("body").ArtDesignSelect();
$("body").ArtDesignTabs();
$("body").ArtDesignLayout();
$("body").ArtDesignIcons();
});SETUP WEB ELEMENTS:
For ArtDesignButton:
<a href="#" data-plugin-ad-button="ad-button">Button</a>
<--! or -->
<button data-plugin-ad-button="ad-button">Button</button>For ArtDesignInput:
<input type="text" data-plugin-ad-input="ad-input">For ArtDesignTextArea:
<textarea rows="4" cols="50" data-plugin-ad-text-area="ad-text-area"></textarea>For ArtDesignRadio:
<div data-plugin-ad-radio="ad-radio">
<input type="radio" name="Radio" id="Radio1" value="Radio1" data-ad-radio-label="Radio 1" checked="checked"/>
<input type="radio" name="Radio" id="Radio2" value="Radio2" data-ad-radio-label="Radio 2"/>
<input type="radio" name="Radio" id="Radio3" value="Radio3" data-ad-radio-label="Radio 3"/>
</div>For ArtDesignCheckBox:
<div data-plugin-ad-check-box="ad-check-box">
<input type="checkbox" name="CheckBox" id="CheckBox1" value="CheckBox1" data-ad-check-box-label="CheckBox 1" checked="checked"/>
<input type="checkbox" name="CheckBox" id="CheckBox2" value="CheckBox2" data-ad-check-box-label="CheckBox 2"/>
<input type="checkbox" name="CheckBox" id="CheckBox3" value="CheckBox3" data-ad-check-box-label="CheckBox 3"/>
</div>For ArtDesignSelect:
<select data-plugin-ad-select="ad-select">
<option value="Select1" selected="selected">Select 1</option>
<option value="Select2">Select 2</option>
<option value="Select3">Select 3</option>
</select>For ArtDesignTabs:
<div data-plugin-ad-tabs="ad-tabs" class="Example">
<div>
<div>Tab 1</div>
<div>Tab 2</div>
<div>Tab 3</div>
</div>
<div>
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
</div>
</div>For ArtDesignIcons:
<div>
<span class="icon-NAME-ICON"></span>
</div>Options:
Screenshots:
