jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
112 lines (105 loc) • 5.76 kB
HTML
<html lang="en">
<head>
<title id='Description'>Docking Layout Typescript Example.</title>
<meta name="description" content="The DockingLayout represents a widget which allows you to easily create IDE-like layout for your web pages. The DockingLayout Typescript definitions allow you to do that even easier than before." />
<!-- 1. Load references -->
<script src="../../../scripts/jquery-1.11.1.min.js"></script>
<script src="../../../jqwidgets/jqxcore.js"></script>
<script src="../../../jqwidgets/jqxribbon.js"></script>
<script src="../../../jqwidgets/jqxwindow.js"></script>
<script src="../../../jqwidgets/jqxlayout.js"></script>
<script src="../../../jqwidgets/jqxdockinglayout.js"></script>
<script src="../../../jqwidgets/jqxtree.js"></script>
<script src="typescript-dockinglayout.js"></script>
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<!-- 2. Create initialization -->
<script>
$(document).ready(function () {
createDockingLayout('#jqxDockingLayout', '#solutionExplorerTree');
});
</script>
</head>
<!-- 3. Display the application -->
<body>
<div class="example-description">
Docking Layout Typescript Example.
</div>
<div id="jqxDockingLayout">
<!--The panel content divs can have a flat structure-->
<!--autoHideGroup-->
<div data-container="ToolboxPanel">
List of tools
</div>
<div data-container="HelpPanel">
Help topics
</div>
<!--documentGroup-->
<div data-container="Document1Panel">
Document 1 content
</div>
<div data-container="Document2Panel">
Document 2 content
</div>
<!--bottom tabbedGroup-->
<div data-container="ErrorListPanel">
List of errors
</div>
<!--right tabbedGroup-->
<div data-container="SolutionExplorerPanel">
<div id="solutionExplorerTree" style="border: none;">
</div>
</div>
<div data-container="PropertiesPanel">
List of properties
</div>
<!--floatGroup-->
<div data-container="OutputPanel">
<div style="font-family: Consolas;">
<p>
Themes installation complete.
</p>
<p>
List of installed stylesheet files. Include at least one stylesheet Theme file and
the images folder:
</p>
<ul>
<li>
styles/jqx.base.css: Stylesheet for the base Theme. The jqx.base.css file should
be always included in your project.
</li>
<li>styles/jqx.arctic.css: Stylesheet for the Arctic Theme</li>
<li>styles/jqx.web.css: Stylesheet for the Web Theme</li>
<li>styles/jqx.bootstrap.css: Stylesheet for the Bootstrap Theme</li>
<li>styles/jqx.classic.css: Stylesheet for the Classic Theme</li>
<li>styles/jqx.darkblue.css: Stylesheet for the DarkBlue Theme</li>
<li>styles/jqx.energyblue.css: Stylesheet for the EnergyBlue Theme</li>
<li>styles/jqx.shinyblack.css: Stylesheet for the ShinyBlack Theme</li>
<li>styles/jqx.office.css: Stylesheet for the Office Theme</li>
<li>styles/jqx.metro.css: Stylesheet for the Metro Theme</li>
<li>styles/jqx.metrodark.css: Stylesheet for the Metro Dark Theme</li>
<li>styles/jqx.orange.css: Stylesheet for the Orange Theme</li>
<li>styles/jqx.summer.css: Stylesheet for the Summer Theme</li>
<li>styles/jqx.black.css: Stylesheet for the Black Theme</li>
<li>styles/jqx.fresh.css: Stylesheet for the Fresh Theme</li>
<li>styles/jqx.highcontrast.css: Stylesheet for the HighContrast Theme</li>
<li>styles/jqx.blackberry.css: Stylesheet for the Blackberry Theme</li>
<li>styles/jqx.android.css: Stylesheet for the Android Theme</li>
<li>styles/jqx.mobile.css: Stylesheet for the Mobile Theme</li>
<li>styles/jqx.windowsphone.css: Stylesheet for the Windows Phone Theme</li>
<li>styles/jqx.ui-darkness.css: Stylesheet for the UI Darkness Theme</li>
<li>styles/jqx.ui-lightness.css: Stylesheet for the UI Lightness Theme</li>
<li>styles/jqx.ui-le-frog.css: Stylesheet for the UI Le Frog Theme</li>
<li>styles/jqx.ui-overcast.css: Stylesheet for the UI Overcast Theme</li>
<li>styles/jqx.ui-redmond.css: Stylesheet for the UI Redmond Theme</li>
<li>styles/jqx.ui-smoothness.css: Stylesheet for the UI Smoothness Theme</li>
<li>styles/jqx.ui-start.css: Stylesheet for the UI Start Theme</li>
<li>styles/jqx.ui-sunny.css: Stylesheet for the UI Sunny Theme</li>
<li>styles/images: contains images referenced in the stylesheet files</li>
</ul>
</div>
</div>
</div>
</body>
</html>