jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
158 lines (146 loc) • 8.29 kB
HTML
<html lang="en">
<head>
<title id='Description'>TypeScript ShowCaseDemo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<!-- Styles -->
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.dark.css" type="text/css" />
<link href="app/style.css" rel="stylesheet" />
<!-- jQuery Library -->
<script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.js"></script>
<!-- Bootstrap Libraries -->
<link href="../../../styles/bootstrap.min.css" rel="stylesheet" />
<link href="../../../styles/bootstrap-theme.min.css" rel="stylesheet" />
<script src="../../../scripts/bootstrap.min.js"></script>
<!-- jQWidgets Libraries -->
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdraw.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxchart.core.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcombobox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script>
<!-- Init App -->
<script src="app/app.min.js"></script>
</head>
<body style="overflow: initial;">
<div id="personalSalesHeader" class="headerband">
<div class="sampleheader container">
<div id="personalSales">
<div id="header" class="col-xs-12">
<div class="headerTitle">
<span class="glyphicon glyphicon-piggy-bank seticon" aria-hidden="true"></span>
<span>Personal Sales</span>
<div id="jqxDropDownList"></div>
</div>
</div>
</div>
</div>
</div>
<!-- CONTENT container -->
<div class="samplecontainer container">
<div class="row personpresent">
<div id="tablePurchase" class="col-md-6 pull-left purchase">
<div class="inittable">
<table class="purchase">
<tbody>
<tr>
<td class="total-amt sideborder">
<p class="total-text"></p>
<p class="total-val"></p>
</td>
<td class="orders-amt sideborder">
<p class="orders-val"></p>
<p class="orders-text"></p>
</td>
<td class="amount-amt">
<p class="amount-val"></p>
<p class="amount-text"></p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="person" class="col-md-5"></div>
<div style="clear: both;"></div>
<div id="content">
<div class="row container">
<!-- Start Grid Content -->
<div class="row">
<div id="controlPanel" class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<p class="label col-xs-6 col-sm-6" style="display: inline-block;">Personal Sales Grid</p>
<div id="controlPanelSettings" class="col-xs-6 col-sm-6">
<div id="jqxComboBox" style="display: inline-block;"></div>
</div>
</div>
</div>
<div class="row gridcontent">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div id="jqxGrid"></div>
</div>
</div>
<!-- Start Chart Content -->
<div class="row chartcontent">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="chartsection">
<div id="pin" class="sectionname">
<div>
<p class="label chartLabel">Personal Sales Chart</p>
</div>
</div>
<div class="sectionbody">
<div class="row">
<div class="col-md-8">
<div id="jqxChart" style="width: 100%; height: 370px;"></div>
</div>
<div class="col-md-3">
<div class="amountcontent">
<table cellspacing="10">
<tbody>
<tr>
<td class="big-value">
<p class="big-value-text">
Biggest Amount
</p>
<p class="big-value-amt"></p>
</td>
</tr>
<tr>
<td class="small-value">
<p class="small-value-text">
Smallest Amount
</p>
<p class="small-value-amt"></p>
</td>
</tr>
<tr>
<td class="avg-value">
<p class="avg-value-text">
Average Amount
</p>
<p class="avg-value-amt"></p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>