artdesign-window-content

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 param BasePath were BasePath is path to folder Resources.

<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>