594 строки
23 KiB
HTML
594 строки
23 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
|
|
<title>Essential JS 1 : Inline Form on Local data</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta charset="utf-8" />
|
|
<link href="../content/bootstrap.min.css" rel="stylesheet" />
|
|
<link href="../content/ejthemes/default-theme/ej.widgets.all.min.css" rel="stylesheet" />
|
|
<link href="../content/default.css" rel="stylesheet" />
|
|
<link href="../content/default-responsive.css" rel="stylesheet" />
|
|
<link href="../content/ejthemes/responsive-css/ej.responsive.css" rel="stylesheet" />
|
|
<!--[if lt IE 9]>
|
|
<script src="../scripts/jquery-1.11.3.min.js"></script>
|
|
<![endif]-->
|
|
<!--[if gte IE 9]><!-->
|
|
<script src="../scripts/jquery-3.4.1.min.js"></script>
|
|
<!--<![endif]-->
|
|
<script src="../scripts/jquery.easing.1.3.min.js"></script>
|
|
<script src="../scripts/jquery.validate.min.js"></script>
|
|
<script src="../scripts/jquery.validate.unobtrusive.min.js"></script>
|
|
<script src="../scripts/jsondata.min.js"></script>
|
|
<script src="../scripts/jsrender.min.js"></script>
|
|
<script src="../scripts/ej.web.all.min.js" type="text/javascript"></script>
|
|
<script src="../scripts/properties.js" type="text/javascript"></script>
|
|
|
|
</head>
|
|
<body>
|
|
<div class="content-container-fluid">
|
|
<div class="row">
|
|
<div class="cols-sample-area">
|
|
<div id="layout1" style= "position: absolute" >
|
|
<div class="frame" >
|
|
<div id="control" >
|
|
<label for="title1">Manual Calculation</label>
|
|
<table class="sample" style="margin:auto">
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<div class="col-md-3">
|
|
A
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="col-md-3">
|
|
<input type="text" class = "angleTxt" id="txtBoxA"/>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<label for="labA"></label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="emptyDiv">
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="col-md-3">
|
|
B
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="col-md-3">
|
|
<input id="txtBoxB" class = "angleTxt" type="text" value="" />
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<label for="labB"></label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="emptyDiv">
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="col-md-3">
|
|
C
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="col-md-3">
|
|
<input id="txtBoxC" class = "angleTxt" type="text" value="" />
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<label for="labC"></label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="emptyDiv">
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="col-md-3">
|
|
D
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="col-md-3">
|
|
<input id="txtBoxD" class = "angleTxt" type="text" value="" />
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<label for="labD"></label>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="emptyDiv">
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td></td>
|
|
<td>
|
|
<div class="row">
|
|
<button id="lt1Button1" class="e-btn buttonstyle1" value="Calculate">Calculate</button>
|
|
</div>
|
|
</td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="emptyDiv">
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td></td>
|
|
<td>
|
|
<div class="row">
|
|
<button id="lt1Button2" class="e-btn buttonstyle1" value="Show Formula">Show Formula</button>
|
|
</div>
|
|
</td>
|
|
<td></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="layout3" style ="position: absolute" >
|
|
<div class="frame" >
|
|
<div id="control" >
|
|
<label for="title3"></label></br>
|
|
<table class="sample" >
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
Enter an angle and press the Compute button.
|
|
</td>
|
|
<td>
|
|
<div class="row">
|
|
<button id="lt3Button1" class="e-btn buttonstyle1" value="Compute">Compute</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="emptyDiv">
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Angle in Degrees.
|
|
</td>
|
|
<td>
|
|
<input id="Angle" class = "angleTxt" type="text" value="" />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="emptyDiv">
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Sine of angle
|
|
</td>
|
|
<td>
|
|
<input id="sinTB" class = "angleTxt" type="text" value="" />
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="emptyDiv">
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
Cosine of angle
|
|
</td>
|
|
<td>
|
|
<input id="cosTB" class = "angleTxt" type="text" value="" />
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="sampleProperties">
|
|
<div class="prop-grid">
|
|
<div class="row">
|
|
<button id="Button1" class="e-btn inputbtn" value="Manual Calculation">Manual Calculation</button>
|
|
</div>
|
|
<div class="emptyDiv">
|
|
</div>
|
|
<div class="row">
|
|
<button id="Button2" class="e-btn inputbtn" value="Auto Calculation">Auto Calculation</button>
|
|
</div>
|
|
<div class="emptyDiv">
|
|
</div>
|
|
<div class="row">
|
|
<button id="Button3" class="e-btn inputbtn" value="Angle Calculation">Angle Calculation</button>
|
|
</div>
|
|
<div class="emptyDiv">
|
|
</div>
|
|
<div class="row">
|
|
<button id="Button4" class="e-btn inputbtn" value="Auto Angle Calculation">Auto Angle Calculation</button>
|
|
</div>
|
|
<!--<div class="row">
|
|
<div class="col-md-3">
|
|
<input id="Button5" type="button" value="Algebraic Expression" />
|
|
</div>
|
|
</div></br>-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
$(function () {
|
|
|
|
//$("input:button").ejButton({
|
|
// click: function (args) {
|
|
// if (document.activeElement.value == "Calculate") {
|
|
|
|
|
|
|
|
// }
|
|
// else if (document.activeElement.value == "Show Formula") {
|
|
|
|
|
|
|
|
// }
|
|
// else if (document.activeElement.value == "Manual Calculation")
|
|
// {
|
|
|
|
|
|
// }
|
|
// else if (document.activeElement.value == "Auto Calculation") {
|
|
|
|
|
|
// }
|
|
// else if (document.activeElement.value == "Angle Calculation") {
|
|
|
|
// }
|
|
// else if (document.activeElement.value == "Auto Angle Calculation") {
|
|
|
|
// }
|
|
// else if (document.activeElement.value == "Manual Calculation") {
|
|
|
|
// }
|
|
// else if (document.activeElement.value == "Algebraic Expression") {
|
|
|
|
// }
|
|
|
|
// }
|
|
//});
|
|
|
|
|
|
});
|
|
var isAuto = false;
|
|
$("#Button1").click(function () {
|
|
$("label[for='title1']").html("Manual Calculation");
|
|
calculator.setAutoCalc(false);
|
|
isAuto = false;
|
|
var div = document.getElementById('layout1');
|
|
div.style.visibility = 'visible';
|
|
|
|
|
|
div = document.getElementById('layout3');
|
|
div.style.visibility = 'hidden';
|
|
|
|
|
|
//div = document.getElementById('layout5');
|
|
//div.style.visibility = 'hidden';
|
|
});
|
|
|
|
$("#Button2").click(function () {
|
|
$("label[for='title1']").html("Auto Calculation");
|
|
|
|
isAuto = true;
|
|
document.getElementById("txtBoxA").value = "12";
|
|
document.getElementById("txtBoxB").value = "3";;
|
|
document.getElementById("txtBoxC").value = "= [A] + 2 * [B]";
|
|
|
|
var calculator = new CalcQuick();
|
|
|
|
calculator.setKeyValue("A", document.getElementById("txtBoxA").value);
|
|
calculator.setKeyValue("B", document.getElementById("txtBoxB").value);
|
|
calculator.setKeyValue("C", document.getElementById("txtBoxC").value);
|
|
|
|
|
|
calculator.setValueSetEventHandler(valueSet);
|
|
calculator.setAutoCalc(true);
|
|
calculator.refreshAllCalculations();
|
|
|
|
var div = document.getElementById('layout1');
|
|
div.style.visibility = 'visible';
|
|
|
|
div = document.getElementById('layout3');
|
|
div.style.visibility = 'hidden';
|
|
|
|
|
|
//div = document.getElementById('layout5');
|
|
//div.style.visibility = 'hidden';
|
|
});
|
|
|
|
$("#Button3").click(function () {
|
|
enableAngleCalc();
|
|
isAuto = false;
|
|
$("label[for='title3']").html("Angle Calculation");
|
|
var div = document.getElementById('layout1');
|
|
div.style.visibility = 'hidden';
|
|
|
|
div = document.getElementById('layout3');
|
|
div.style.visibility = 'visible';
|
|
|
|
//div = document.getElementById('layout5');
|
|
//div.style.visibility = 'hidden';
|
|
});
|
|
|
|
$("#Button4").click(function () {
|
|
enableAutoAngleCalc();
|
|
isAuto = true;
|
|
$("label[for='title3']").html("Auto Angle Calculation");
|
|
var div = document.getElementById('layout1');
|
|
div.style.visibility = 'hidden';
|
|
|
|
div = document.getElementById('layout3');
|
|
div.style.visibility = 'visible';
|
|
|
|
|
|
//div = document.getElementById('layout5');
|
|
//div.style.visibility = 'hidden';
|
|
|
|
});
|
|
|
|
$("#Button5").click(function () {
|
|
$("label[for='title1']").html("Manual Calculation");
|
|
var div = document.getElementById('layout1');
|
|
div.style.visibility = 'hidden';
|
|
|
|
|
|
div = document.getElementById('layout3');
|
|
div.style.visibility = 'hidden';
|
|
|
|
div = document.getElementById('layout5');
|
|
div.style.visibility = 'visible';
|
|
|
|
});
|
|
|
|
|
|
$("#lt1Button1").click(function () {
|
|
calculator.setKeyValue("A", document.getElementById("txtBoxA").value);
|
|
calculator.setKeyValue("B", document.getElementById("txtBoxB").value);
|
|
calculator.setKeyValue("C", document.getElementById("txtBoxC").value);
|
|
calculator.setKeyValue("D", document.getElementById("txtBoxD").value);
|
|
|
|
calculator.setDirty();
|
|
|
|
document.getElementById("txtBoxA").value = calculator.getKeyValue("A")
|
|
document.getElementById("txtBoxB").value = calculator.getKeyValue("B");
|
|
document.getElementById("txtBoxC").value = calculator.getKeyValue("C");
|
|
document.getElementById("txtBoxD").value = calculator.getKeyValue("D");
|
|
});
|
|
|
|
$("#lt1Button2").click(function () {
|
|
|
|
document.getElementById("txtBoxA").value = calculator.getFormula("A")
|
|
document.getElementById("txtBoxB").value = calculator.getFormula("B");
|
|
document.getElementById("txtBoxC").value = calculator.getFormula("C");
|
|
document.getElementById("txtBoxD").value = calculator.getFormula("D");
|
|
});
|
|
|
|
$("label[for='title1']").html("Manual Calculation");
|
|
|
|
function selectChange(sender) {
|
|
|
|
var dropdown = $('#txtBoxA').data("ejDropDownList");
|
|
var selectedName = dropdown.getValue();
|
|
var value = calcObj.getNamedRanges().getItem(selectedName);
|
|
document.getElementById("cellRange").value = value;
|
|
|
|
}
|
|
|
|
$("#sampleProperties").ejPropertiesPanel();
|
|
|
|
$(".e-ejinputtext").val("");
|
|
$(".e-ejinputtext").outerWidth(100);
|
|
|
|
var calculator = new CalcQuick();
|
|
|
|
$("#sampleProperties").ejPropertiesPanel();
|
|
|
|
function valueSet(event, data) {
|
|
|
|
switch (data._id) {
|
|
case "A":
|
|
document.getElementById("txtBoxA").value = calculator.getKeyValue("A");
|
|
break;
|
|
case "B":
|
|
document.getElementById("txtBoxB").value = calculator.getKeyValue("B")
|
|
break;
|
|
case "C":
|
|
document.getElementById("txtBoxC").value = calculator.getKeyValue("C")
|
|
break;
|
|
case "D":
|
|
document.getElementById("txtBoxD").value = calculator.getKeyValue("D")
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
|
|
|
|
document.getElementById("txtBoxA").value = "12";
|
|
document.getElementById("txtBoxB").value = "3";;
|
|
document.getElementById("txtBoxC").value = "= [A] + 2 * [B]";
|
|
|
|
calculator.setKeyValue("A", document.getElementById("txtBoxA").value);
|
|
calculator.setKeyValue("B", document.getElementById("txtBoxB").value);
|
|
calculator.setKeyValue("C", document.getElementById("txtBoxC").value);
|
|
|
|
|
|
calculator.setValueSetEventHandler(valueSet);
|
|
|
|
$("label[for='labC']").html("= [A] + 2 * [B]");
|
|
|
|
|
|
$("#txtBoxA").focusout(function () {
|
|
if(isAuto)
|
|
calculator.setAutoCalc(true);
|
|
calculator.setKeyValue("A", document.getElementById("txtBoxA").value);
|
|
$("label[for='labA']").html(calculator.getFormula("A"));
|
|
|
|
});
|
|
|
|
$("#txtBoxB").focusout(function () {
|
|
if(isAuto)
|
|
calculator.setAutoCalc(true);
|
|
calculator.setKeyValue("B", document.getElementById("txtBoxB").value);
|
|
$("label[for='labB']").html(calculator.getFormula("B"));
|
|
|
|
});
|
|
|
|
$("#txtBoxC").focusout(function () {
|
|
if(isAuto)
|
|
calculator.setAutoCalc(true);
|
|
calculator.setKeyValue("C", document.getElementById("txtBoxC").value);
|
|
$("label[for='labC']").html(calculator.getFormula("C"));
|
|
|
|
});
|
|
$("#txtBoxD").focusout(function () {
|
|
if(isAuto)
|
|
calculator.setAutoCalc(true);
|
|
calculator.setKeyValue("D", document.getElementById("txtBoxD").value);
|
|
$("label[for='labD']").html(calculator.getFormula("D"));
|
|
|
|
});
|
|
|
|
$("#Button1").click();
|
|
var anglecalcQuick;
|
|
|
|
|
|
|
|
function enableAngleCalc() {
|
|
|
|
document.getElementById("Angle").value = "30";
|
|
document.getElementById("cosTB").value = "= cos([Angle] * pi() / 180) ";
|
|
document.getElementById("sinTB").value = "= sin([Angle] * pi() / 180) ";
|
|
|
|
anglecalcQuick = new CalcQuick();
|
|
}
|
|
|
|
function enableAutoAngleCalc() {
|
|
|
|
document.getElementById("Angle").value = "30";
|
|
document.getElementById("cosTB").value = "= cos( [Angle] * pi() / 180) ";
|
|
document.getElementById("sinTB").value = "= sin([Angle] * pi() / 180) ";
|
|
|
|
anglecalcQuick = new CalcQuick();
|
|
var ctrls = [document.getElementById("Angle"),
|
|
document.getElementById("cosTB"),
|
|
document.getElementById("sinTB")
|
|
];
|
|
anglecalcQuick.registerControlArray(ctrls);
|
|
|
|
anglecalcQuick.refreshAllCalculations();
|
|
}
|
|
|
|
$("#lt3Button1").click(function () {
|
|
|
|
|
|
anglecalcQuick.setKeyValue("Angle", document.getElementById("Angle").value);
|
|
anglecalcQuick.setKeyValue("cosTB", document.getElementById("cosTB").value);
|
|
anglecalcQuick.setKeyValue("sinTB", document.getElementById("sinTB").value);
|
|
|
|
anglecalcQuick.setDirty();
|
|
|
|
document.getElementById("Angle").value = anglecalcQuick.getKeyValue("Angle")
|
|
document.getElementById("cosTB").value = anglecalcQuick.getKeyValue("cosTB");
|
|
document.getElementById("sinTB").value = anglecalcQuick.getKeyValue("sinTB");
|
|
});
|
|
|
|
|
|
</script>
|
|
<style type="text/css" class="cssStyles">
|
|
|
|
.inputbtn {
|
|
width: 170px;
|
|
}
|
|
|
|
.angleTxt{
|
|
border:solid thin;
|
|
border-color : gray;
|
|
width: 170px;
|
|
}
|
|
|
|
.buttonstyle1 {
|
|
border:solid thin;
|
|
border-color : gray;
|
|
width: 170px;
|
|
}
|
|
|
|
.calcBox {
|
|
margin-left: 0px;
|
|
margin-top: 5px;
|
|
}
|
|
.emptyDiv {
|
|
height: 5px;
|
|
}
|
|
.tdcls {
|
|
width: 200px;
|
|
}
|
|
|
|
/*.cols-sample-area {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}*/
|
|
.cols-sample-area {
|
|
position: relative;
|
|
overflow: hidden;
|
|
width: 300px;
|
|
height: 100px;
|
|
}
|
|
|
|
.cols-sample-area > div {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: transparent;
|
|
z-index: 1;
|
|
}
|
|
|
|
.cols-sample-area {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.cols-sample-area {
|
|
position: relative;
|
|
top: 0;
|
|
bottom: 0;
|
|
height: 500px;
|
|
}
|
|
</style>
|
|
</body>
|
|
</html> |