jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
129 lines (116 loc) • 6.72 kB
HTML
<html lang="en">
<head>
<title id="Description">In jqxComplexInput, the real and imaginary parts of the complex number can also be displayed in the exponential, scientific and engineering notations. </title>
<meta charset="UTF-8" />
<meta name="description" content="In jqxComplexInput, the real and imaginary parts of the complex number can also be displayed in the exponential, scientific and engineering notations." />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<script type="text/javascript" src="../../../scripts/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxexpander.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcomplexinput.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#jqxComplexInput").jqxComplexInput({ width: 250, height: 25, decimalNotation: "exponential", value: "330000 - 200i", spinButtons: true });
$("#settingsExpander").jqxExpander({ width: 400, height: 375, toggleMode: "none", showArrow: false });
$("#notationsList").jqxDropDownList({ source: ["decimal", "exponential", "scientific", "engineering"], selectedIndex: 1, width: '200px', height: '25px', autoDropDownHeight: true });
$("button").jqxButton({ width: 175 });
$("#notationsList").on("change", function (event) {
var args = event.args;
if (args) {
var label = args.item.label;
if (label === "decimal") {
label = "default";
}
$("#jqxComplexInput").jqxComplexInput({ decimalNotation: label });
}
});
// real part
$("#getRealDecimal").click(function () {
var decimalValue = $("#jqxComplexInput").jqxComplexInput("getReal");
alert("Decimal value: " + decimalValue);
});
$("#getRealExponential").click(function () {
var exponentialValue = $("#jqxComplexInput").jqxComplexInput("getDecimalNotation", "real", "exponential");
alert("Exponential notation: " + exponentialValue);
});
$("#getRealScientific").click(function () {
var scientificValue = $("#jqxComplexInput").jqxComplexInput("getDecimalNotation", "real", "scientific");
alert("Scientific notation: " + scientificValue);
});
$("#getRealEngineering").click(function () {
var engineeringValue = $("#jqxComplexInput").jqxComplexInput("getDecimalNotation", "real", "engineering");
alert("Engineering notation: " + engineeringValue);
});
// imaginary part
$("#getImaginaryDecimal").click(function () {
var decimalValue = $("#jqxComplexInput").jqxComplexInput("getImaginary");
alert("Decimal value: " + decimalValue);
});
$("#getImaginaryExponential").click(function () {
var exponentialValue = $("#jqxComplexInput").jqxComplexInput("getDecimalNotation", "imaginary", "exponential");
alert("Exponential notation: " + exponentialValue);
});
$("#getImaginaryScientific").click(function () {
var scientificValue = $("#jqxComplexInput").jqxComplexInput("getDecimalNotation", "imaginary", "scientific");
alert("Scientific notation: " + scientificValue);
});
$("#getImaginaryEngineering").click(function () {
var engineeringValue = $("#jqxComplexInput").jqxComplexInput("getDecimalNotation", "imaginary", "engineering");
alert("Engineering notation: " + engineeringValue);
});
});
</script>
</head>
<body>
<div id="jqxComplexInput" style="float: left;">
<input type="text" />
<div>
</div>
</div>
<div id="settingsExpander" style="float: left; margin-left: 50px;">
<div>
jqxComplexInput Notation Settings</div>
<div style="padding-left: 15px;">
<h4>
Choose notation:</h4>
<div id="notationsList" style="margin-top: 20px;">
</div>
<div style="margin-top: 20px;">
<h4>
Real part</h4>
<button id="getRealDecimal">
Get decimal value</button>
<button id="getRealExponential" style="margin-left: 5px;">
Get exponential notation</button><br />
<br />
<button id="getRealScientific">
Get scientific notation</button>
<button id="getRealEngineering" style="margin-left: 5px;">
Get engineering notation</button></div>
<div style="margin-top: 20px;">
<h4>
Imaginary part</h4>
<button id="getImaginaryDecimal">
Get decimal value</button>
<button id="getImaginaryExponential" style="margin-left: 5px;">
Get exponential notation</button><br />
<br />
<button id="getImaginaryScientific">
Get scientific notation</button>
<button id="getImaginaryEngineering" style="margin-left: 5px;">
Get engineering notation</button></div>
</div>
</div>
<div style="position: absolute; bottom: 5px; right: 5px;">
<a href="https://www.jqwidgets.com/" alt="https://www.jqwidgets.com/"><img alt="https://www.jqwidgets.com/" title="https://www.jqwidgets.com/" src="https://www.jqwidgets.com/wp-content/design/i/logo-jqwidgets.png"/></a>
</div>
</body>
</html>