1.0.0 • Published 9 years ago
artdesign-window-content v1.0.0
#ArtDesignWindowContent (v1.0.0)
##jQuery PlugIn to load Ul > Li content in responsive window
- ArtDesignWindowContent is a jQuery PlugIn to load Ul > Li content in window
- Responsive
- Support pixels (px) and percents (%) for width and height
- Support full width and full height - 100%
- Class prefix to prevent conflict with classes from other CSS files
- Full style control with JS - no need CSS: width, height, border, icons, colors etc
- Navigation buttons with ToolTip
- Full navigation control
- Full control of the position of all elements
- Support images with different dimensions for background
- Automatic resizing and centering of images for background
- Keys press listening
- Mouse wheel listening
- Multiple instances
Full instructions, Examples and Download - www.artdesign-jquery.com/ArtDesignWindowContent
###Instruction
####Load files
#####First method
Define a required files in file
Resources/JavaScript/ArtDesign/ArtDesignFilesLoader/ArtDesignFilesLoader.js
window.ArtDesignFilesLoader.RequiredResources([ "JavaScript/ArtDesign/ArtDesignIcons/ArtDesignIcons.css", "JavaScript/Browser/Browser.js", "JavaScript/ColorAnimation/ColorAnimation.js", "JavaScript/Easing/Easing.js", "JavaScript/MouseWheel/MouseWheel.js", "JavaScript/ArtDesign/ArtDesignIcons/ArtDesignIconsCode.js", "JavaScript/ArtDesign/ArtDesignIcons/ArtDesignIcons.js", "JavaScript/ArtDesign/ArtDesignToolTip/ArtDesignToolTip.js", "JavaScript/ArtDesign/ArtDesignWindowContent/ArtDesignWindowContentSettings.js", "JavaScript/ArtDesign/ArtDesignWindowContent/ArtDesignWindowContent.js" ]);
Load
Resources/JavaScript/ArtDesign/ArtDesignFilesLoader/ArtDesignFilesLoader.js?BasePath=Resources/
with paramBasePath
wereBasePath
is path to folderResources
.<script type="text/javascript" src="Resources/JavaScript/ArtDesign/ArtDesignFilesLoader/ArtDesignFilesLoader.js?BasePath=Resources/"></script>
Then initialize a PlugIn with function
window.ArtDesignFilesLoader.Ready()
.window.ArtDesignFilesLoader.Ready(function() { $("#ArtDesignWindowContent").ArtDesignWindowContent(); });
#####Second method
Load all the necessary files to run a PlugIn.
<link rel="stylesheet" href="JavaScript/ArtDesign/ArtDesignIcons/ArtDesignIcons.css"> <script type="text/javascript" src="JavaScript/jQuery/jQuery.js"></script> <script type="text/javascript" src="JavaScript/Browser/Browser.js"></script> <script type="text/javascript" src="JavaScript/ColorAnimation/ColorAnimation.js"></script> <script type="text/javascript" src="JavaScript/Easing/Easing.js"></script> <script type="text/javascript" src="JavaScript/MouseWheel/MouseWheel.js"></script> <script type="text/javascript" src="JavaScript/ArtDesign/ArtDesignIcons/ArtDesignIconsCode.js"></script> <script type="text/javascript" src="JavaScript/ArtDesign/ArtDesignIcons/ArtDesignIcons.js"></script> <script type="text/javascript" src="JavaScript/ArtDesign/ArtDesignToolTip/ArtDesignToolTip.js"></script> <script type="text/javascript" src="JavaScript/ArtDesign/ArtDesignWindowContent/ArtDesignWindowContentSettings.js"></script> <script type="text/javascript" src="JavaScript/ArtDesign/ArtDesignWindowContent/ArtDesignWindowContent.js"></script>
Then initialize a PlugIn.
$(document).ready(function() { $("#ArtDesignWindowContent").ArtDesignWindowContent(); }
####SetUp web elements
#####ArtDesignToolTip
Create
ul
>li
.<ul id="ArtDesignWindowContent"> <li> <ul> <li>Content 1, Sub content 1</li> <li>Content 1, Sub Content 2</li> <li>Content 1, Sub Content 3</li> </ul> </li> <li> <ul> <li>Content 2, Sub content 1</li> <li>Content 2, Sub Content 2</li> </ul> </li> <li>Content 3</li> </ul>
1.0.0
9 years ago