v20.1.0.47
This commit is contained in:
SyncfusionBuild
Родитель
b95316a7e5
Коммит
6987e266c2
|
|
@ -77,4 +77,4 @@ To use the Syncfusion Essential JS 1 samples, Syncfusion license key should be r
|
|||
|
||||
* To renew the subscription, click [here](https://www.syncfusion.com/sales/products?utm_source=github&utm_medium=listing) or contact our sales team at <salessupport@syncfusion.com>.
|
||||
|
||||
<p>Copyright © 2001-2022 Syncfusion, Inc. Updated on 2022-04-04 at precisely 15:24:54 EST.</p>
|
||||
<p>Copyright © 2001-2022 Syncfusion, Inc. Updated on 2022-04-04 at precisely 15:40:02 EST.</p>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,181 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Sparkline</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<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 id="sparkline" class="row">
|
||||
<div class="cols-sample-area">
|
||||
<table style="width:100%;">
|
||||
<tr>
|
||||
<td align ="center"><i>Mean Working Hours for year</i></td>
|
||||
<td>
|
||||
<div id="line" style="width:170px;"></div>
|
||||
</td>
|
||||
<tr>
|
||||
<td align="center"><i>Revenue Status</i></td>
|
||||
<td>
|
||||
<div id="column" style="height:100px;width:150px"></div>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center"><i>Project Status Tracing</i></td>
|
||||
<td>
|
||||
<div id="area" style="height:100px;width:150px"></div>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center"><i>Profit Comparison for each months</i></td>
|
||||
<td>
|
||||
<div id="winloss" style="height:100px;width:150px"></div>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center"><i>Expenditure for a year</i></td>
|
||||
|
||||
<td>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<div id="pie1" style="height:40px;width:40px"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div id="pie2" style="height:40px;width:40px"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div id="pie3" style="height:40px;width:40px"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div id="pie4" style="height:40px;width:40px"></div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center">Q1</td>
|
||||
<td align="center"> Q2</td>
|
||||
<td align="center"> Q3</td>
|
||||
<td align="center"> Q4</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
if (!!window.SVGSVGElement) {
|
||||
$("#sparkline").css('visibility', 'visible');
|
||||
$("#line").ejSparkline({
|
||||
dataSource: [12, 14, 11, 12, 11, 15, 12, 10, 11, 12, 15, 13, 12, 11, 10, 13, 15, 12, 14, 16, 14, 12, 11],
|
||||
tooltip: {
|
||||
visible: true,
|
||||
font: {
|
||||
size: "12px",
|
||||
}
|
||||
},
|
||||
type: "line",
|
||||
size: { height: 40, width: 170 },
|
||||
});
|
||||
$("#column").ejSparkline({
|
||||
dataSource: [2, 6, -1, 1, 12, 5, -2, 7, -3, 5, 8, 10, ],
|
||||
negativePointColor: "red",
|
||||
highPointColor: "blue",
|
||||
tooltip: {
|
||||
visible: true,
|
||||
font: {
|
||||
size: "12px",
|
||||
}
|
||||
},
|
||||
type: "column",
|
||||
size: { height: 100, width: 150 },
|
||||
});
|
||||
$("#area").ejSparkline({
|
||||
dataSource: [12, -10, 11, 8, 17, 6, 2, -17, 13, -6, 8, 10, ],
|
||||
markerSettings: { visible: true },
|
||||
highPointColor: "blue",
|
||||
lowPointColor: "orange",
|
||||
type: "area",
|
||||
opacity: 0.5,
|
||||
tooltip: {
|
||||
visible: true,
|
||||
font: {
|
||||
size: "12px",
|
||||
}
|
||||
},
|
||||
size: { height: 100, width: 150 },
|
||||
});
|
||||
$("#winloss").ejSparkline({
|
||||
dataSource: [12, 15, -11, 13, 17, 0, -12, 17, 13, -15, 8, 10, ],
|
||||
type: "winloss",
|
||||
size: { height: 100, width: 150 },
|
||||
});
|
||||
$("#pie1").ejSparkline({
|
||||
dataSource: [4, 6, 7],
|
||||
type: "pie",
|
||||
tooltip: {
|
||||
visible: true,
|
||||
font: {
|
||||
size: "12px",
|
||||
}
|
||||
},
|
||||
size: { height: 40, width: 40 },
|
||||
});
|
||||
$("#pie2").ejSparkline({
|
||||
dataSource: [8, 9, 1, ],
|
||||
type: "pie",
|
||||
tooltip: {
|
||||
visible: true,
|
||||
font: {
|
||||
size: "12px",
|
||||
}
|
||||
},
|
||||
size: { height: 40, width: 40 },
|
||||
});
|
||||
$("#pie3").ejSparkline({
|
||||
dataSource: [2, 3, 5],
|
||||
type: "pie",
|
||||
tooltip: {
|
||||
visible: true,
|
||||
font: {
|
||||
size: "12px",
|
||||
}
|
||||
},
|
||||
size: { height: 40, width: 40 },
|
||||
});
|
||||
$("#pie4").ejSparkline({
|
||||
dataSource: [10, 12, 11],
|
||||
type: "pie",
|
||||
tooltip: {
|
||||
visible: true,
|
||||
font: {
|
||||
size: "12px",
|
||||
}
|
||||
},
|
||||
size: { height: 40, width: 40 },
|
||||
});
|
||||
} else {
|
||||
$("#sparkline").css('visibility', 'hidden');
|
||||
alert("Sparkline will not be supported in IE Version < 9");
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Essential JS 1 : Sparkline Integrated with Grid</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.web.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/jsonspark.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 id="sparkline" class="row">
|
||||
<div class="cols-sample-area">
|
||||
<script type="text/x-jsrender" id="columnTemplate1">
|
||||
<span id="spkline{{:EmployeeID}}" />
|
||||
</script>
|
||||
<script type="text/x-jsrender" id="columnTemplate3">
|
||||
<span id="spkarea{{:EmployeeID}}" />
|
||||
</script>
|
||||
<script type="text/x-jsrender" id="columnTemplate4">
|
||||
<span id="spkwl{{:EmployeeID}}" />
|
||||
</script>
|
||||
<div id="Grid"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
if (!!window.SVGSVGElement) {
|
||||
$("#sparkline").css('visibility', 'visible');
|
||||
$("#Grid").ejGrid({
|
||||
dataSource: ej.DataManager(window.gridData).executeLocal(ej.Query().take(50)),
|
||||
allowSelection: false,
|
||||
allowScrolling: true,
|
||||
scrollSettings: { height: 400 },
|
||||
enableRowHover: false,
|
||||
columns: [
|
||||
|
||||
{ field: "EmployeeID", headerText: "ID", textAlign: ej.TextAlign.Right, width: 50 },
|
||||
{ field: "CustomerID", headerText: "Customer ID", width: 90 },
|
||||
{ field: "OrderDate", headerText: "Order Date", width: 90, format: "{0:MM/dd/yyyy}", textAlign: ej.TextAlign.Right },
|
||||
{ field: "ShipCountry", headerText: "Ship Country", width: 80 },
|
||||
{ headerText: "Tax per annum", height: 50, template: true, templateID: "#columnTemplate1", textAlign: "center" },
|
||||
{ headerText: "One Day Index", height: 50, template: true, templateID: "#columnTemplate3", textAlign: "center" },
|
||||
{ headerText: "Year GR", height: 50, template: true, templateID: "#columnTemplate4", textAlign: "center" },
|
||||
|
||||
],
|
||||
create: "render",
|
||||
actionComplete: "render"
|
||||
});
|
||||
}
|
||||
else {
|
||||
$("#sparkline").css('visibility', 'hidden');
|
||||
alert("Sparkline will not be supported in IE Version < 9");
|
||||
}
|
||||
});
|
||||
function render(args) {
|
||||
for (var i = 0; i < 51; i++) {
|
||||
$("#spkline" + i).ejSparkline({ size: { height: 50, width: 150 } });
|
||||
$("#spkarea" + i).ejSparkline({ type: "column", size: { height: 50, width: 150 } });
|
||||
$("#spkwl" + i).ejSparkline({ dataSource: winloss(), type: "winloss", size: { height: 50, width: 150 } });
|
||||
}
|
||||
if (args.type == "create")
|
||||
this.getScrollObject().refresh();
|
||||
}
|
||||
function winloss() {
|
||||
var windata = [], r;
|
||||
for (var i = 1; i <= 12; i++) {
|
||||
r = Math.random();
|
||||
if (r <= 0.2)
|
||||
windata.push(-Math.random() * 10);
|
||||
else
|
||||
windata.push(Math.random() * 10);
|
||||
}
|
||||
return windata;
|
||||
}
|
||||
</script>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.rowcell {
|
||||
font-size: 15px !important;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,132 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Essential JS 1 : KO</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet" />
|
||||
<link href="../content/ejthemes/default-theme/ej.web.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" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<script src="../scripts/knockout.min.js"></script>
|
||||
<script src="../scripts/ej.web.all.min.js"></script>
|
||||
<script src="../scripts/ej.widget.ko.min.js"></script>
|
||||
<script src="../scripts/properties.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content-container-fluid">
|
||||
<div id="sparkline" class="row">
|
||||
<div class="cols-sample-area">
|
||||
<table style="width:100%;height:325px">
|
||||
|
||||
<tr>
|
||||
<td align="center"><i>Revenue Status</i></td>
|
||||
<td>
|
||||
<div id="column" style="height:100px;width:150px" data-bind="ejSparkline:{dataSource:cdata, enableAnimation:false, rangeBandSettings : { color:rangeColor, startRange:value, endRange:value2 }, width:strokeWidth,tooltip:{visible:false},type:ctype,size:{height:cheight,width:cwidth},lowPointColor:low,negativePointColor:negativeColor,highPointColor:colorValue}"></div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-3" style="width: 70px; margin-top: 10px">
|
||||
HighColor:
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<input id="custom1" data-bind="ejColorPicker: { value: colorValue, modelType: modelType, opacityValue: opacity }" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3" style="width: 70px; margin-top: 10px">
|
||||
LowColor:
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<input id="custom" data-bind="ejColorPicker: { value: low, modelType: modelType, opacityValue: opacity }" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3" style="width: 70px; margin-top: 10px">
|
||||
StartRange:
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<input type="text" id="txtValue" value="" data-bind="ejNumericTextbox: { value: value,minValue:-3,maxValue:12 }" style="width: 110px" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3" style="width: 70px; margin-top: 10px">
|
||||
EndRange:
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<input type="text" id="txtValue" value="" data-bind="ejNumericTextbox: { value: value2,minValue:-3,maxValue:12 }" style="width: 110px" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var cdata = [2, 6, -1, 1, 12, 5, -2, 7, -3, 5, 8, 10, ],
|
||||
strokeWidth = 0.4,
|
||||
negativeColor = "red",
|
||||
highColor = "blue",
|
||||
ctype = "column",
|
||||
cheight = 100,
|
||||
cwidth = 150,
|
||||
colorValue = "#ff14ae",
|
||||
low = "#138808",
|
||||
opacity = "100",
|
||||
modelType = "picker",
|
||||
value = -2,
|
||||
value2 = 4,
|
||||
rangeColor = "#712002",
|
||||
width = "100%";
|
||||
window.viewModel = {
|
||||
cdata: ko.observable(cdata),
|
||||
ctype: ko.observable(ctype),
|
||||
strokeWidth: ko.observable(strokeWidth),
|
||||
negativeColor: ko.observable(negativeColor),
|
||||
highColor: ko.observable(highColor),
|
||||
colorValue: ko.observable(colorValue),
|
||||
low: ko.observable(low),
|
||||
cheight: ko.observable(cheight),
|
||||
cwidth: ko.observable(cwidth),
|
||||
opacity: ko.observable(opacity),
|
||||
modelType: ko.observable(modelType),
|
||||
value: ko.observable(5),
|
||||
value2: ko.observable(7),
|
||||
width: ko.observable(width),
|
||||
rangeColor: ko.observable(rangeColor),
|
||||
};
|
||||
$(function () {
|
||||
if (!!window.SVGSVGElement) {
|
||||
$("#sparkline").css('visibility','visible');
|
||||
ko.applyBindings(viewModel);
|
||||
}
|
||||
else {
|
||||
$("#sparkline").css('visibility','hidden');
|
||||
alert("Sparkline will not be supported in IE Version < 9");
|
||||
}
|
||||
});
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
</script>
|
||||
<style>
|
||||
.e-waitpopup-pane {
|
||||
background-color: transparent;
|
||||
}
|
||||
.content-container-fluid
|
||||
{
|
||||
margin-top:16px
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,177 @@
|
|||
<%@ WebHandler Language="C#" Class="StartDevServer" %>
|
||||
|
||||
using System;
|
||||
using System.Web;
|
||||
using System.IO;
|
||||
using System.Data;
|
||||
using System.Configuration;
|
||||
using System.Web.Security;
|
||||
using System.Web.UI;
|
||||
using System.Web.UI.WebControls;
|
||||
using System.Web.UI.WebControls.WebParts;
|
||||
using System.Web.UI.HtmlControls;
|
||||
using System.Diagnostics;
|
||||
using Microsoft.Win32;
|
||||
using System.Globalization;
|
||||
using System.Collections;
|
||||
using System.Threading;
|
||||
|
||||
public class StartDevServer : IHttpHandler
|
||||
{
|
||||
public void ProcessRequest(HttpContext context)
|
||||
{
|
||||
DirectoryInfo webFolder, installedFolder;
|
||||
string productPath, versionFolder = "", jsFolder = "";
|
||||
try
|
||||
{
|
||||
|
||||
webFolder = new DirectoryInfo(context.Request.PhysicalApplicationPath).Parent;
|
||||
while (webFolder.Name.ToLower() != "javascript")
|
||||
{
|
||||
if (webFolder.Parent.Name.ToLower() == "javascript")
|
||||
{
|
||||
versionFolder = webFolder.Name;
|
||||
jsFolder = webFolder.Parent.Name;
|
||||
}
|
||||
webFolder = webFolder.Parent;
|
||||
}
|
||||
installedFolder = webFolder.Parent;
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
throw new Exception(string.Format("Exception while tracking 'Web' folder -{0}", ex.Message));
|
||||
}
|
||||
|
||||
if (context.Request.QueryString["product"] == null && context.Request.QueryString["product"] == null)
|
||||
throw new Exception("Requirred Query string [product] to handle the request.");
|
||||
|
||||
if (context.Request.QueryString["path"] == null && context.Request.QueryString["path"] == null)
|
||||
productPath = @"JavaScript\\ionic1 app\\desktop\\www";
|
||||
else
|
||||
{
|
||||
productPath = jsFolder + "\\" + versionFolder + "\\" + context.Request.QueryString["path"];
|
||||
}
|
||||
string path = Path.Combine(installedFolder.FullName, productPath);
|
||||
string productname = context.Request.QueryString["product"].ToString().ToLower();
|
||||
if (!Directory.Exists(path))
|
||||
{
|
||||
context.Response.Write(string.Format("//js.syncfusion.com/demos/", productname));
|
||||
}
|
||||
else
|
||||
{
|
||||
DirectoryInfo productFolder = new DirectoryInfo(path);
|
||||
|
||||
string port = null;
|
||||
string physicalPath = string.Format("{0}", productFolder.FullName);
|
||||
string prefixURL = string.Empty;//.Format("mvcsamplebrowser/{0}", productFolder.Name);
|
||||
|
||||
try
|
||||
{
|
||||
CassiniWebServer.StartVersionWebServer(physicalPath, prefixURL, out port);
|
||||
|
||||
context.Response.Write(string.Format("//localhost:{0}", port));
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
throw new Exception(string.Format("Error: Unable to start Webserver.web.exe, Message:{0}", ex.Message));
|
||||
}
|
||||
}
|
||||
}
|
||||
public bool IsReusable
|
||||
{
|
||||
get
|
||||
{
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
public class CassiniWebServer
|
||||
{
|
||||
const string iisExpressExename = "iisexpress.exe";
|
||||
const string webServer40ExeName = "WebDev.WebServer40.EXE";
|
||||
const string webServerExeName = "WebDev.WebServer.EXE";
|
||||
const string Netfx20PathRegKeyName = "Software\\Microsoft\\.NETFramework";
|
||||
const string Netfx20PathRegValueName = "InstallRoot";
|
||||
const string SharedFolderPathRegKeyName = "Software\\Microsoft\\Shared Tools";
|
||||
const string SharedFolderPathRegValueName = "SharedFilesDir";
|
||||
|
||||
#region Public Methods
|
||||
public static void StartVersionWebServer(string path, string vDirName, out string port)
|
||||
{
|
||||
string iisExpressPath = string.Format("{0}\\{1}", GetIISExpressPath(), iisExpressExename);
|
||||
if (File.Exists(iisExpressPath))
|
||||
{
|
||||
StartWebServer(iisExpressPath, path, vDirName, out port, true);
|
||||
}
|
||||
else
|
||||
{
|
||||
string WebserverPath = string.Format("{0}\\{1}", GetWebServerDir(), webServer40ExeName);
|
||||
if (File.Exists(WebserverPath))
|
||||
{
|
||||
StartWebServer(WebserverPath, path, vDirName, out port, false);
|
||||
}
|
||||
else
|
||||
{
|
||||
throw new NullReferenceException("Unable to locate WebDev.WebServer.EXE");
|
||||
}
|
||||
}
|
||||
}
|
||||
private static string GetIISExpressPath()
|
||||
{
|
||||
string programFilesFolder = Environment.GetEnvironmentVariable("PROGRAMFILES");
|
||||
return programFilesFolder + @"\IIS Express";
|
||||
}
|
||||
private static string GetWebServerDir()
|
||||
{
|
||||
string webServerDir = string.Empty;
|
||||
string programFiles = Environment.GetFolderPath(Environment.SpecialFolder.ProgramFiles);
|
||||
webServerDir = programFiles + @"\Common Files\Microsoft Shared\DevServer\11.0";
|
||||
|
||||
if (!Directory.Exists(webServerDir))
|
||||
{
|
||||
webServerDir = programFiles + @"\Microsoft Shared\DevServer\11.0";
|
||||
|
||||
if (!Directory.Exists(webServerDir))
|
||||
{
|
||||
webServerDir = programFiles + @"\Common Files\Microsoft Shared\DevServer\10.0";
|
||||
|
||||
if (!Directory.Exists(webServerDir))
|
||||
{
|
||||
webServerDir = programFiles + @"\Microsoft Shared\DevServer\10.0";
|
||||
|
||||
if (!Directory.Exists(webServerDir)) webServerDir = string.Empty;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return webServerDir;
|
||||
}
|
||||
#endregion
|
||||
|
||||
#region Private methods
|
||||
private static void StartWebServer(string WebserverPath, string samplepath, string vDirName, out string port, bool isIISExpress)
|
||||
{
|
||||
string commandArgs = string.Empty;
|
||||
|
||||
Random r = new Random();
|
||||
port = r.Next(10000, 65534).ToString();
|
||||
|
||||
//grab the original path
|
||||
commandArgs += " /path:\"" + samplepath + "\"";
|
||||
commandArgs += " /port:";
|
||||
commandArgs += port;
|
||||
if (!isIISExpress) commandArgs += " /vpath:/" + vDirName;
|
||||
|
||||
Process mDOSProcess = new Process();
|
||||
mDOSProcess.StartInfo.FileName = WebserverPath;
|
||||
mDOSProcess.StartInfo.Arguments = commandArgs;
|
||||
|
||||
//if you dont want to see the dos black screen
|
||||
mDOSProcess.StartInfo.CreateNoWindow = true;
|
||||
mDOSProcess.StartInfo.UseShellExecute = false;
|
||||
|
||||
//now start the process
|
||||
mDOSProcess.Start();
|
||||
}
|
||||
#endregion
|
||||
}
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<script src="../scripts/ej.web.all.min.js" type="text/javascript"></script>
|
||||
<script src="../scripts/properties.js" type="text/javascript"></script>
|
||||
<script src="../scripts/Sunburst_Data.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area">
|
||||
<div id="container">
|
||||
</div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Enable Animation
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<input type="checkbox" checked="checked" id="enable" onchange="visible()" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 10px 0;">
|
||||
<div class="col-md-3">
|
||||
Animation Type
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<select name="selectIndex" autocomplete="off" id="animationtype" style="width:100px;">
|
||||
<option value="0" selected>Rotation</option>
|
||||
<option value="1">FadeIn</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function(){
|
||||
var data = window.animation_DataSource;
|
||||
$("#container").ejSunburstChart({
|
||||
dataSource: data ,
|
||||
enableAnimation: true,
|
||||
valueMemberPath: "Population",
|
||||
levels: [
|
||||
{ groupMemberPath: "Continent" },
|
||||
{ groupMemberPath: "Country" },
|
||||
{ groupMemberPath: "State" }
|
||||
],
|
||||
dataLabelSettings:{visible:true},
|
||||
tooltip:{visible:true},
|
||||
innerRadius: 0.2,
|
||||
size: {height: "600" },
|
||||
title: { text: "Population Details" },
|
||||
legend: { visible:true, position: "top" },
|
||||
load: "loadSunBurstTheme",
|
||||
});
|
||||
});
|
||||
|
||||
function visible()
|
||||
{
|
||||
var sunburst = $("#container").ejSunburstChart("instance");
|
||||
if ($("#enable").is(":checked"))
|
||||
sunburst.model.enableAnimation = true;
|
||||
else {
|
||||
sunburst.model.enableAnimation = false;
|
||||
}
|
||||
sunburst.redraw();
|
||||
}
|
||||
|
||||
function animationTypeChanged(sender)
|
||||
{
|
||||
var option = sender.selectedText;
|
||||
var sunburst = $("#container").ejSunburstChart("instance");
|
||||
switch (option) {
|
||||
case 'Rotation':
|
||||
sunburst.model.animationType = 'rotation';
|
||||
break;
|
||||
case 'FadeIn':
|
||||
sunburst.model.animationType = 'fadeIn';
|
||||
break;
|
||||
}
|
||||
sunburst.redraw();
|
||||
|
||||
}
|
||||
|
||||
$("#animationtype").ejDropDownList({ "change": "animationTypeChanged", width: "100px",selectedItemIndex:0 });
|
||||
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,218 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<script src="../scripts/ej.web.all.min.js" type="text/javascript"></script>
|
||||
<script src="../scripts/properties.js" type="text/javascript"></script>
|
||||
<script src="../scripts/Sunburst_Data.js" type="text/javascript"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area">
|
||||
<div id="container">
|
||||
</div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Start Angle
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div id="startAngle">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
End Angle
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div id="endAngle">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Outer Radius
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div id="outerRadius">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Inner Radius
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div id="innerRadius">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 10px 0;">
|
||||
<div class="col-md-3">
|
||||
Label Overflow Mode
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<select name="selectIndex" autocomplete="off" id="overflow" style="width:100px;">
|
||||
<option value="0" selected>Trim</option>
|
||||
<option value="1">Hide</option>
|
||||
<option value="2">None</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 10px 0;">
|
||||
<div class="col-md-3">
|
||||
Label Rotation Mode
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<select name="selectIndex" autocomplete="off" id="rotation" style="width:100px;">
|
||||
<option value="0" selected>Angle</option>
|
||||
<option value="1">Normal</option>
|
||||
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function(){
|
||||
$("#container").ejSunburstChart({
|
||||
dataSource: default_DataSource,
|
||||
valueMemberPath: "EmployeesCount",
|
||||
levels: [
|
||||
{ groupMemberPath: "Country" },
|
||||
{ groupMemberPath: "JobDescription" },
|
||||
{ groupMemberPath: "JobGroup" },
|
||||
{ groupMemberPath: "JobRole" }
|
||||
],
|
||||
dataLabelSettings:{visible:true},
|
||||
tooltip: { visible: true},
|
||||
innerRadius: 0.2,
|
||||
size: { height: "600" },
|
||||
title: { text: "Employees Count" },
|
||||
legend: { visible:true, position: "top" },
|
||||
load: "loadSunBurstTheme",
|
||||
});
|
||||
|
||||
var sunburst = $("#container").ejSunburstChart("instance");
|
||||
var startAngle = sunburst.model.startAngle;
|
||||
var endAngle = sunburst.model.endAngle;
|
||||
var outer = sunburst.model.radius;
|
||||
var inner = sunburst.model.innerRadius;
|
||||
|
||||
$("#startAngle").ejSlider({
|
||||
sliderType: ej.SliderType.MinRange,
|
||||
height: 12,
|
||||
width:100,
|
||||
value: startAngle,
|
||||
minValue:0,
|
||||
maxValue: 360,
|
||||
change: "onchange",
|
||||
slide: "onchange"
|
||||
});
|
||||
|
||||
$("#endAngle").ejSlider({
|
||||
sliderType: ej.SliderType.MinRange,
|
||||
height: 12,
|
||||
width:100,
|
||||
value: endAngle,
|
||||
minValue:0,
|
||||
maxValue: 360,
|
||||
change: "onchange",
|
||||
slide: "onchange"
|
||||
});
|
||||
|
||||
$("#outerRadius").ejSlider({
|
||||
sliderType: ej.SliderType.MinRange,
|
||||
height: 12,
|
||||
width:100,
|
||||
value: outer,
|
||||
minValue:0,
|
||||
maxValue: 1,
|
||||
incrementStep: 0.1,
|
||||
change: "onchange",
|
||||
slide: "onchange"
|
||||
});
|
||||
|
||||
$("#innerRadius").ejSlider({
|
||||
sliderType: ej.SliderType.MinRange,
|
||||
height: 12,
|
||||
width:100,
|
||||
value: inner,
|
||||
minValue:0,
|
||||
maxValue: 1,
|
||||
incrementStep:0.1,
|
||||
change: "onchange",
|
||||
slide: "onchange"
|
||||
});
|
||||
});
|
||||
|
||||
function onchange(args) {
|
||||
var sunburst = $("#container").ejSunburstChart("instance");
|
||||
if (args.id == "startAngle")
|
||||
sunburst.model.startAngle = args.value;
|
||||
else if (args.id == "endAngle")
|
||||
sunburst.model.endAngle = args.value;
|
||||
else if (args.id == "outerRadius")
|
||||
sunburst.model.radius = args.value;
|
||||
else if (args.id == "innerRadius")
|
||||
sunburst.model.innerRadius = args.value;
|
||||
sunburst.redraw();
|
||||
}
|
||||
|
||||
function labelOverFlowModeChanged(sender)
|
||||
{
|
||||
var option = sender.selectedText;
|
||||
var sunburst = $("#container").ejSunburstChart("instance");
|
||||
switch (option) {
|
||||
case 'Trim':
|
||||
sunburst.model.dataLabelSettings.labelOverflowMode = 'trim';
|
||||
break;
|
||||
case 'Hide':
|
||||
sunburst.model.dataLabelSettings.labelOverflowMode = 'hide';
|
||||
break;
|
||||
case 'None':
|
||||
sunburst.model.dataLabelSettings.labelOverflowMode = 'none';
|
||||
break;
|
||||
}
|
||||
sunburst.redraw();
|
||||
}
|
||||
|
||||
$("#overflow").ejDropDownList({ "change": "labelOverFlowModeChanged", width: "100px",selectedItemIndex:0 });
|
||||
|
||||
function labelRotationModeChanged(sender)
|
||||
{
|
||||
var option = sender.selectedText;
|
||||
var sunburst = $("#container").ejSunburstChart("instance");
|
||||
switch (option) {
|
||||
case 'Angle':
|
||||
sunburst.model.dataLabelSettings.labelRotationMode = 'angle';
|
||||
break;
|
||||
case 'Normal':
|
||||
sunburst.model.dataLabelSettings.labelRotationMode = 'normal';
|
||||
break;
|
||||
}
|
||||
sunburst.redraw();
|
||||
}
|
||||
$("#rotation").ejDropDownList({ "change": "labelRotationModeChanged", width: "100px",selectedItemIndex:0 });
|
||||
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,166 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<script src="../scripts/ej.web.all.min.js" type="text/javascript"></script>
|
||||
<script src="../scripts/properties.js" type="text/javascript"></script>
|
||||
<script src="../scripts/Sunburst_Data.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area">
|
||||
<div id="container">
|
||||
</div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Enable Highlight
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<input type="checkbox" checked="checked" id="high" onchange="highLight()" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 10px 0;">
|
||||
<div class="col-md-3">
|
||||
Hightlight Mode
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<select name="selectIndex" autocomplete="off" id="highlightType" style="width:100px;">
|
||||
<option value="0" selected>Point</option>
|
||||
<option value="1">All</option>
|
||||
<option value="2">Child</option>
|
||||
<option value="3">Parent</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Enable Selection
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<input type="checkbox" checked="checked" id="select" onchange="selection()" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 10px 0;">
|
||||
<div class="col-md-3">
|
||||
Selection Mode
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<select name="selectIndex" autocomplete="off" id="selectionType" style="width:100px;">
|
||||
<option value="0" selected>Point</option>
|
||||
<option value="1">All</option>
|
||||
<option value="2">Child</option>
|
||||
<option value="3">Parent</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(function(){
|
||||
$("#container").ejSunburstChart({
|
||||
dataSource: animation_DataSource ,
|
||||
valueMemberPath: "Population",
|
||||
levels: [
|
||||
{ groupMemberPath: "Continent" },
|
||||
{ groupMemberPath: "Country" },
|
||||
{ groupMemberPath: "State" }
|
||||
],
|
||||
dataLabelSettings:{visible:true},
|
||||
startAngle:90,
|
||||
innerRadius: 0.2,
|
||||
highlightSettings: {enable: true},
|
||||
selectionSettings: {enable: true},
|
||||
size: { height: "600" },
|
||||
title: { text: "Population Details" },
|
||||
legend: { visible:true, position: "top" },
|
||||
load: "loadSunBurstTheme",
|
||||
});
|
||||
});
|
||||
|
||||
function highLight()
|
||||
{
|
||||
var sunburst = $("#container").ejSunburstChart("instance");
|
||||
if ($("#high").is(":checked"))
|
||||
sunburst.model.highlightSettings.enable = true;
|
||||
else {
|
||||
sunburst.model.highlightSettings.enable = false;
|
||||
}
|
||||
sunburst.redraw();
|
||||
}
|
||||
|
||||
function highlightModeChanged(sender)
|
||||
{
|
||||
var option = sender.selectedText;
|
||||
var sunburst = $("#container").ejSunburstChart("instance");
|
||||
switch (option) {
|
||||
case 'Point':
|
||||
sunburst.model.highlightSettings.mode = 'point';
|
||||
break;
|
||||
case 'All':
|
||||
sunburst.model.highlightSettings.mode = 'all';
|
||||
break;
|
||||
case 'Child':
|
||||
sunburst.model.highlightSettings.mode = 'child';
|
||||
break;
|
||||
case 'Parent':
|
||||
sunburst.model.highlightSettings.mode = 'parent';
|
||||
break;
|
||||
}
|
||||
sunburst.redraw();
|
||||
}
|
||||
$("#highlightType").ejDropDownList({ "change": "highlightModeChanged", width: "100px",selectedItemIndex:0 });
|
||||
|
||||
function selection()
|
||||
{
|
||||
var sunburst = $("#container").ejSunburstChart("instance");
|
||||
if ($("#select").is(":checked"))
|
||||
sunburst.model.selectionSettings.enable = true;
|
||||
else {
|
||||
sunburst.model.selectionSettings.enable = false;
|
||||
}
|
||||
sunburst.redraw();
|
||||
}
|
||||
|
||||
function selectionModeChanged(sender)
|
||||
{
|
||||
var option = sender.selectedText;
|
||||
var sunburst = $("#container").ejSunburstChart("instance");
|
||||
switch (option) {
|
||||
case 'Point':
|
||||
sunburst.model.selectionSettings.mode = 'point';
|
||||
break;
|
||||
case 'All':
|
||||
sunburst.model.selectionSettings.mode = 'all';
|
||||
break;
|
||||
case 'Child':
|
||||
sunburst.model.selectionSettings.mode = 'child';
|
||||
break;
|
||||
case 'Parent':
|
||||
sunburst.model.selectionSettings.mode = 'parent';
|
||||
break;
|
||||
}
|
||||
sunburst.redraw();
|
||||
|
||||
}
|
||||
$("#selectionType").ejDropDownList({ "change": "selectionModeChanged", width: "100px",selectedItemIndex:0 });
|
||||
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<script src="../scripts/ej.web.all.min.js" type="text/javascript"></script>
|
||||
<script src="../scripts/properties.js" type="text/javascript"></script>
|
||||
<script src="../scripts/Sunburst_Data.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area">
|
||||
<div id="container">
|
||||
</div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Enable Zooming
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<input type="checkbox" checked="checked" id="zooming" onchange="zooming()" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$("#container").ejSunburstChart({
|
||||
dataSource: default_DataSource,
|
||||
palette: ["#002e4d", "#005c99", "#008ae6", "#33adff", "#80ccff"],
|
||||
valueMemberPath: "EmployeesCount",
|
||||
levels: [
|
||||
{ groupMemberPath: "Country" },
|
||||
{ groupMemberPath: "JobDescription" },
|
||||
{ groupMemberPath: "JobGroup" },
|
||||
{ groupMemberPath: "JobRole" }
|
||||
],
|
||||
dataLabelSettings: { visible: true },
|
||||
tooltip: { visible: true},
|
||||
innerRadius: 0.2,
|
||||
title: { text: "Employees Count" },
|
||||
size: { height: "600" },
|
||||
enableAnimation: true,
|
||||
zoomSettings: { enable: true },
|
||||
load: "loadSunBurstTheme",
|
||||
});
|
||||
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
|
||||
function zooming()
|
||||
{
|
||||
var sunburst = $("#container").ejSunburstChart("instance");
|
||||
if ($("#zooming").is(":checked"))
|
||||
sunburst.model.zoomSettings.enable = true;
|
||||
else {
|
||||
sunburst.model.zoomSettings.enable = false;
|
||||
}
|
||||
sunburst.redraw();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<?xml version="1.0"?>
|
||||
<configuration>
|
||||
<system.web>
|
||||
<compilation debug="true"/>
|
||||
</system.web>
|
||||
<system.webServer>
|
||||
<validation validateIntegratedModeConfiguration="false" />
|
||||
<modules runAllManagedModulesForAllRequests="true" />
|
||||
<httpRedirect enabled="false" />
|
||||
<staticContent>
|
||||
<remove fileExtension=".woff" />
|
||||
<!-- In case IIS already has this mime type -->
|
||||
<mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
|
||||
</staticContent>
|
||||
</system.webServer>
|
||||
</configuration>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Essential JS 1 : Accordion - Ajax Content Load</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet" />
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<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="ajaxAccordion" class="control_frame">
|
||||
<h3>
|
||||
<a href="../content/samplecontent/mvccontent.html">Model–view–controller (MVC)</a>
|
||||
</h3>
|
||||
<div>
|
||||
</div>
|
||||
<h3>
|
||||
<a href="../content/samplecontent/wpfcontent.html"></a>WPF
|
||||
</h3>
|
||||
<div>
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">WCF</a>
|
||||
</h3>
|
||||
<div>
|
||||
<p>
|
||||
WCF is a tool often used to implement and deploy a service-oriented architecture (SOA).
|
||||
It is designed using service-oriented architecture principles to support distributed computing where services have remote consumers.
|
||||
Clients can consume multiple services; services can be consumed by multiple clients. Services are loosely coupled to each other.
|
||||
Services typically have a WSDL interface (Web Services Description Language) that any WCF client can use to consume the service, regardless of which platform the service is hosted on.
|
||||
WCF implements many advanced Web services (WS) standards such as WS-Addressing, WS-ReliableMessaging and WS-Security.
|
||||
With the release of .NET Framework 4.0, WCF also provides RSS Syndication Services, WS-Discovery, routing and better support for REST services.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" class="jsScript">
|
||||
$(function () {
|
||||
// declaration
|
||||
$("#ajaxAccordion").ejAccordion();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Essential JS 1: Accordion - Default Functionalities</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet" />
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<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="basicAccordion" class="control_frame">
|
||||
<h3>
|
||||
<a href="#">Inbox</a>
|
||||
</h3>
|
||||
<div>
|
||||
<div class="emp-list">
|
||||
<img src="../content/images/Employees/3.png" alt="employee" />
|
||||
<div class="time-panel">7:30</div>
|
||||
<b class="headername">Catriona</b><br />
|
||||
All WinRT controls are optimized for touch, supporting common gestures: zooming, panning, selecting, double-tapping, rotating, resizing.
|
||||
</div>
|
||||
<div class="emp-list">
|
||||
<img src="../content/images/Employees/6.png" alt="employee" />
|
||||
<div class="time-panel">5:33</div>
|
||||
<b class="headername">John Linden</b><br />
|
||||
All the components in the ASP.NET MVC have been built from the ground up with performance in mind and are extremely lightweight.
|
||||
</div>
|
||||
<div class="emp-list">
|
||||
<img src="../content/images/Employees/8.png" alt="employee" />
|
||||
<div class="time-panel">2:10</div>
|
||||
<b class="headername">Louis</b><br />
|
||||
Big data is a broad term for data sets so large or complex that traditional data processing applications are inadequate. Challenges include analysis, capture, data curation, search, sharing, storage, transfer, visualization, querying and information privacy.
|
||||
</div>
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">Sent</a>
|
||||
</h3>
|
||||
<div>
|
||||
<div class="emp-list">
|
||||
<img src="../content/images/Employees/8.png" alt="employee" />
|
||||
<div class="time-panel">3:55</div>
|
||||
<b class="headername">Louis</b><br />
|
||||
Big data is a broad term for data sets so large or complex that traditional data processing applications are inadequate. Challenges include analysis, capture, data curation, search, sharing, storage, transfer, visualization, querying and information privacy.
|
||||
</div>
|
||||
<div class="emp-list">
|
||||
<img src="../content/images/Employees/6.png" alt="employee" />
|
||||
<div class="time-panel">6:47</div>
|
||||
<b class="headername">John Linden</b><br />
|
||||
Cloud computing, also known as 'on-demand computing', is a kind of Internet-based computing, where shared resources, data and information are provided to computers and other devices on-demand.
|
||||
</div>
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">Trash</a>
|
||||
</h3>
|
||||
<div>
|
||||
<div class="emp-list">
|
||||
<img src="../content/images/Employees/3.png" alt="employee" />
|
||||
<div class="time-panel">8:30</div>
|
||||
<b class="headername">Catriona</b><br />
|
||||
With our sophisticated support system, built from the ground up to support all type of customers, you will have a streamlined experience working with our support team.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" class="jsScript">
|
||||
$(function () {
|
||||
// declaration
|
||||
$("#basicAccordion").ejAccordion();
|
||||
});
|
||||
</script>
|
||||
<style class="cssStyles">
|
||||
#basicAccordion img {
|
||||
float: left;
|
||||
height: 40px;
|
||||
padding-right: 6px;
|
||||
}
|
||||
|
||||
.emp-list {
|
||||
border-bottom: 1px solid #BBBCBB;
|
||||
margin-bottom: 9px;
|
||||
padding-bottom: 9px;
|
||||
}
|
||||
|
||||
.emp-list:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.time-panel {
|
||||
float: right;
|
||||
color: #2382C3;
|
||||
}
|
||||
|
||||
.headername {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,161 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Essential JS 1: Accordion - Events</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet" />
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<script src="../scripts/ej.web.all.min.js" type="text/javascript"></script>
|
||||
<script src="../scripts/properties.js" type="text/javascript"></script>
|
||||
<script>
|
||||
window.sample = { name: "" };
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area">
|
||||
<div id="eventAccordion" class="control_frame">
|
||||
<h3>
|
||||
<a href="#">ASP.NET</a>
|
||||
</h3>
|
||||
<div>
|
||||
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser. ASP.NET pages use a compiled, event-driven programming model that improves performance and enables the separation of application logic and user interface.
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">ASP.NET MVC</a>
|
||||
</h3>
|
||||
<div>
|
||||
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications. The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web Forms-based applications) is integrated with existing ASP.NET features, such as master pages and membership-based authentication.
|
||||
</div>
|
||||
<h3>
|
||||
<a id="ajaxcontent">Javascript (Ajax Load)</a>
|
||||
</h3>
|
||||
<div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cols-prop-area event-tracer">
|
||||
<div>
|
||||
<div class="heading">
|
||||
<span>Event Trace</span>
|
||||
<div class="pull-right">
|
||||
<select name="selectevtprops" id="selectControls">
|
||||
<option value="beforeActivate">Before Activate</option>
|
||||
<option value="activate">Activate</option>
|
||||
<option value="beforeInactivate">Before InActivate</option>
|
||||
<option value="inActivate">InActivate</option>
|
||||
<option value="ajaxBeforeLoad">Ajax Before Load</option>
|
||||
<option value="ajaxLoad">Ajax Load</option>
|
||||
<option value="ajaxSuccess">Ajax Success</option>
|
||||
<option value="ajaxError">AjaxError</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prop-grid content">
|
||||
<div class="eventarea">
|
||||
<div class="EventLog" id="EventLog">
|
||||
</div>
|
||||
</div>
|
||||
<div class="evtbtn">
|
||||
<input type="button" class="eventclear e-btn" value="Clear" onclick="onClear()" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" class="jsScript">
|
||||
var acrdnObj;
|
||||
$(function () {
|
||||
contentUrl = window.location.hash.indexOf(window.sample.name) ? "content/samplecontent/jscontent.html" : "../content/samplecontent/jscontent.html";
|
||||
$("#ajaxcontent").attr("href", contentUrl);
|
||||
// declaration
|
||||
$("#eventAccordion").ejAccordion(
|
||||
{
|
||||
create: "onCreate",
|
||||
beforeActivate: "onBeforeActivate",
|
||||
activate: "onActivate",
|
||||
beforeInactivate: "onBeforeInActivate",
|
||||
inActivate: "onInActivate",
|
||||
ajaxBeforeLoad: "onBeforeLoad",
|
||||
ajaxLoad: "onLoad",
|
||||
ajaxSuccess: "onAjaxSuccess",
|
||||
ajaxError: "onError"
|
||||
});
|
||||
acrdnObj = $("#eventAccordion").data("ejAccordion");
|
||||
$("#selectControls").ejDropDownList(
|
||||
{
|
||||
popupShown: "adjustpopupposition",
|
||||
showCheckbox: true,
|
||||
checkAll: true,
|
||||
change: "evtpropscheckedevent"
|
||||
});
|
||||
});
|
||||
// Client side Events
|
||||
function onCreate(args) {
|
||||
jQuery.addEventLog("Accordion has been <span class='eventTitle'>created</span>.");
|
||||
}
|
||||
function onBeforeActivate(args) {
|
||||
if (!ej.isNullOrUndefined(args.activeIndex))
|
||||
jQuery.addEventLog("<span class='eventTitle'>BeforeActiveClick</span> event is fired for Index " + args.activeIndex + ".");
|
||||
}
|
||||
function onActivate(args) {
|
||||
if (!ej.isNullOrUndefined(args.activeIndex))
|
||||
jQuery.addEventLog("<span class='eventTitle'>ActiveClick</span> event is fired for Index " + args.activeIndex + ".");
|
||||
}
|
||||
function onBeforeInActivate(args) {
|
||||
if (!ej.isNullOrUndefined(args.inActiveIndex))
|
||||
jQuery.addEventLog("Index " + args.inActiveIndex + " is on <span class='eventTitle'>BeforeInActive</span>.");
|
||||
}
|
||||
function onInActivate(args) {
|
||||
if (!ej.isNullOrUndefined(args.inActiveIndex))
|
||||
jQuery.addEventLog("Index " + args.inActiveIndex + " is on <span class='eventTitle'>inActive</span>.");
|
||||
}
|
||||
function onBeforeLoad(args) {
|
||||
jQuery.addEventLog("<span class='eventTitle'>BeforeLoad</span> event is fired.");
|
||||
}
|
||||
function onLoad(args) {
|
||||
jQuery.addEventLog("Ajax content is <span class='eventTitle'>loaded</span>.");
|
||||
}
|
||||
function onAjaxSuccess(args) {
|
||||
jQuery.addEventLog("Ajax content is loaded <span class='eventTitle'>successfully</span>.");
|
||||
}
|
||||
function onError(args) {
|
||||
jQuery.addEventLog("Ajax content is loaded with an <span class='eventTitle'>error</span>.");
|
||||
}
|
||||
function onClear() {
|
||||
jQuery.clearEventLog();
|
||||
}
|
||||
// Event wire and unwire
|
||||
function evtpropscheckedevent(args) {
|
||||
if (args.isChecked) {
|
||||
switch (args.selectedValue) {
|
||||
|
||||
case "create": acrdnObj.option(args.selectedValue, "onCreate"); break;
|
||||
case "beforeActivate": acrdnObj.option(args.selectedValue, "onBeforeActivate"); break;
|
||||
case "activate": acrdnObj.option(args.selectedValue, "onActivate"); break;
|
||||
case "beforeInactivate": acrdnObj.option(args.selectedValue, "onBeforeInActivate"); break;
|
||||
case "inActivate": acrdnObj.option(args.selectedValue, "onInActivate"); break;
|
||||
case "ajaxBeforeLoad": acrdnObj.option(args.selectedValue, "onBeforeLoad"); break;
|
||||
case "ajaxLoad": acrdnObj.option(args.selectedValue, "onLoad"); break;
|
||||
case "ajaxSuccess": acrdnObj.option(args.selectedValue, "onAjaxSuccess"); break;
|
||||
case "ajaxError": acrdnObj.option(args.selectedValue, "onError"); break;
|
||||
}
|
||||
}
|
||||
else acrdnObj.option(args.selectedValue, null);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title></title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Essential Grid for ASP.NET MVC is a feature-rich control that provides extensive appearance customization options with support for grouped records. With Essential Grid for ASP.NET MVC, you can create a grid with a highly customizable look and feel. This grid is very useful for generating complex grid-based reports with rich formatting. It supports paging, sorting, grouping, filtering, and editing features. It also supports a JSON mode in which you can handle all the operations like paging and sorting. The performance of these operations in the JSON mode will be much faster than if the grid were to handle them. Essential Grid generates clean HTML in compliance with XHTML 1.0. It supports any kind of IEnumerable data source. It uses LINQ data retrieval techniques for handling data sources, and offers high performance.</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Essential JS 1: Accordion - Icons</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet" />
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<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="iconAccordion" class="control_frame">
|
||||
<h3>
|
||||
<span class="logos volkswagan"></span>
|
||||
<a href="#">Volkswagen</a>
|
||||
</h3>
|
||||
<div>
|
||||
Volkswagen is a German automobile manufacturer headquartered in Wolfsburg, Lower Saxony, Germany.
|
||||
Volkswagen is the original and top-selling marquee of the Volkswagen Group, the biggest German automaker and the third largest automaker in the world.
|
||||
</div>
|
||||
<h3>
|
||||
<span class="logos mitsubishi"></span>
|
||||
<a href="#">Mitsubishi</a>
|
||||
</h3>
|
||||
<div>
|
||||
The Mitsubishi Group is a group of autonomous Japanese multinational companies covering a range of businesses which share the Mitsubishi brand,
|
||||
trademark, and legacy.The Mitsubishi group of companies form a loose entity, the Mitsubishi Keiretsu, which is often referenced in Japanese and US media and official reports.
|
||||
</div>
|
||||
<h3>
|
||||
<span class="logos benz"></span>
|
||||
<a href="#">Mercedes-Benz</a>
|
||||
</h3>
|
||||
<div>
|
||||
Mercedes-Benz is a multinational division of the German manufacturer Daimler AG, and the brand is used for luxury automobiles, buses, coaches, and trucks.
|
||||
Mercedes-Benz is headquartered in Stuttgart, Baden-Württemberg, Germany.The name first appeared in 1926 under Daimler-Benz but traces its origins
|
||||
to Daimler-Motormen-Gesell shaft's 1901 Mercedes and to Karl Benz's 1886 Benz Patent Motorwagen, which is widely regarded as the first automobile.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" class="jsScript">
|
||||
$(function () {
|
||||
// declaration
|
||||
$("#iconAccordion").ejAccordion({
|
||||
customIcon: {
|
||||
header: "header-close",
|
||||
selectedHeader: "header-expand"
|
||||
},
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style class="cssStyles">
|
||||
#iconAccordion img {
|
||||
float: left;
|
||||
margin: -7px 1px 0 -13px;
|
||||
}
|
||||
|
||||
.header-expand {
|
||||
background-image: url(../content/images/ui-icons/ui-icons-active.png);
|
||||
background-position: -187px -60px;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
float: right !important;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.header-close {
|
||||
background-image: url(../content/images/ui-icons/ui-icons-default.png);
|
||||
background-position: -161px -60px;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
float: right !important;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
.e-acrdn-header:hover .header-expand {
|
||||
background-image: url(../content/images/ui-icons/ui-icons-active.png);
|
||||
background-position: -187px -60px;
|
||||
}
|
||||
|
||||
.e-acrdn-header:hover .header-close {
|
||||
background-image: url(../content/images/ui-icons/ui-icons-active.png);
|
||||
background-position: -161px -60px;
|
||||
}
|
||||
|
||||
.logos {
|
||||
float: left;
|
||||
height: 35px;
|
||||
margin: -6px 1px 2px -15px;
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
#iconAccordion .e-select .logos {
|
||||
background-image: url(../content/images/accordion/grey_logos.png);
|
||||
}
|
||||
|
||||
#iconAccordion .e-active .logos {
|
||||
background-image: url(../content/images/accordion/white_logos.png);
|
||||
}
|
||||
|
||||
#iconAccordion .e-select:hover div {
|
||||
background-image: url(../content/images/accordion/white_logos.png) !important;
|
||||
}
|
||||
|
||||
.logos.volkswagan {
|
||||
background-position: 0 -170px;
|
||||
}
|
||||
|
||||
.logos.mitsubishi {
|
||||
background-position: 0 -85px;
|
||||
}
|
||||
|
||||
.logos.benz {
|
||||
background-position: 0 0;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,126 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Essential JS 1: Accordion - Keyboard Navigation</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<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="KeyAccordion" class="control_frame">
|
||||
<h3>
|
||||
<a href="#">Twitter</a>
|
||||
</h3>
|
||||
<div>
|
||||
Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".
|
||||
Registered users can read and post tweets, but those who are unregistered can only read them. Users access Twitter through the website interface, SMS or mobile device app Twitter Inc. is based in San Francisco and has more than 25 offices around the world.
|
||||
Twitter was created in March 2006 by Jack Dorsey, Evan Williams, Biz Stone, and Noah Glass and launched in July 2006. The service rapidly gained worldwide popularity, with more than 100 million users posting 340 million tweets a day in 2012.The service also handled 1.6 billion search queries per day.
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">Facebook</a>
|
||||
</h3>
|
||||
<div>
|
||||
Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students.
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">WhatsApp</a>
|
||||
</h3>
|
||||
<div>
|
||||
WhatsApp Messenger is a proprietary cross-platform instant messaging client for smartphones that operates under a subscription business model. It uses the Internet to send text messages, images, video, user location and audio media messages to other users using standard cellular mobile numbers.
|
||||
As of February 2016, WhatsApp had a user base of up to one billion,[10] making it the most globally popular messaging application.
|
||||
WhatsApp Inc., based in Mountain View, California, was acquired by Facebook Inc. on February 19, 2014, for approximately US$19.3 billion.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid keyboard">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Alt + j
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Focuses the control.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Up
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Selected previous item.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Left
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Selected previous item.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Down
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Selected next item.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Right
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Selected next item.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Home
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Selected first item.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
End
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Selected last item.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" class="jsScript">
|
||||
$(function () {
|
||||
// declaration
|
||||
$("#KeyAccordion").ejAccordion();
|
||||
//Control focus key
|
||||
$(document).on("keydown", function (e) {
|
||||
if (e.altKey && e.keyCode === 74) { // j- key code.
|
||||
$("#KeyAccordion").focus();
|
||||
}
|
||||
});
|
||||
});
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,256 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Essential JS 1: Accordion - API's</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet" />
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<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="APIAccordion" class="control_frame">
|
||||
<h3>
|
||||
<a href="#">London</a>
|
||||
</h3>
|
||||
<div>
|
||||
London is one of the most popular tourist destinations in the world for a reason. A cultural and historical hub, London has an excellent public transportation system that allows visitors to see all the fantastic sights without spending a ton of money on a rental car.
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">Paris</a>
|
||||
</h3>
|
||||
<div>
|
||||
Paris, the city of lights and love - this short guide is full of ideas for how to make the most of the romanticism that oozes from every one of its beautiful corners.
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">Rome</a>
|
||||
</h3>
|
||||
<div>
|
||||
Rome is one of the world's most fascinating cities. The old adage that Rome was not built in a day — and that you won't see it in one or even in three — is true. For the intrepid traveler who can keep pace, here is a list of must-sees. But remember what the Romans say: "Even a lifetime isn't enough to see Rome."
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
Active Index
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<select name="selectIndex" class="e-ddl" id="optActiveChange">
|
||||
<option value="0">Item 0</option>
|
||||
<option value="1">Item 1</option>
|
||||
<option value="2">Item 2</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
Disable Item
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<select name="disableItem" class="e-ddl" id="optDisableChange">
|
||||
<option value="0">Item 0</option>
|
||||
<option value="1">Item 1</option>
|
||||
<option value="2">Item 2</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
Enable Item
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<select name="enableItem" class="e-ddl" id="optEnableChange">
|
||||
<option value="0">Item 0</option>
|
||||
<option value="1">Item 1</option>
|
||||
<option value="2">Item 2</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
Remove items
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<select name="enableItem" class="e-ddl" id="optRemove">
|
||||
<option value="0">Item 0</option>
|
||||
<option value="1">Item 1</option>
|
||||
<option value="2">Item 2</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
Enable / Disable All
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<input type="checkbox" id="btnEnableDisable" class="e-togglebtn" value="ShowHide" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
Show / Hide
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<input type="checkbox" id="chkShowHide" class="e-chkbox" value="ShowHide" checked="checked" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
Destroy
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<input type="checkbox" id="chkDestroy" class="e-togglebtn" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
Height Adjust Mode
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<select name="heightAdjust" class="e-ddl" id="optHeightAdjust">
|
||||
<option value="fill">Fill</option>
|
||||
<option value="content">Content</option>
|
||||
<option value="auto">Auto</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
Close button
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<input type="checkbox" id="chkCloseBtn" class="e-togglebtn" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" class="jsScript">
|
||||
var acrdnObj, optDisable, optEnable, activeObj;
|
||||
$(function () {
|
||||
// declaration
|
||||
$("#APIAccordion").ejAccordion();
|
||||
acrdnObj = $("#APIAccordion").data("ejAccordion");
|
||||
$("#chkShowHide").ejCheckBox({ "change": "onShowHide" });
|
||||
$("#btnEnableDisable").ejToggleButton({ "change": "onEnaleDisableAll", "defaultText": "Disable All", "activeText": "Enable All", "width": "120px" });
|
||||
$("#chkDestroy").ejToggleButton({ "change": "onDestoryRestore", "defaultText": "Destory", "width": "120px", "activeText": "Restore" });
|
||||
$("#optActiveChange").ejDropDownList({ "change": "onActiveChange", watermarkText: "Select", width: "120px" });
|
||||
activeObj=$("#optActiveChange").data("ejDropDownList");
|
||||
$("#optDisableChange").ejDropDownList({ "change": "onDisableChange", showCheckbox: true, watermarkText: "Select", width: "120px" });
|
||||
optDisable = $("#optDisableChange").data("ejDropDownList");
|
||||
$("#optEnableChange").ejDropDownList({ "change": "onEnableChange", watermarkText: "Select", showCheckbox: true, width: "120px" });
|
||||
optEnable = $("#optEnableChange").data("ejDropDownList");
|
||||
$("#optHeightAdjust").ejDropDownList({ "change": "onHeightAdjust", value: "content", width: "120px" });
|
||||
$("#chkCloseBtn").ejToggleButton({ "change": "onShowHideCloseBtn", "defaultText": "Show", "width": "120px", "activeText": "Hide" });
|
||||
$("#optRemove").ejDropDownList({ "select": "onRemoveChange", watermarkText: "Select", width: "120px" });
|
||||
removeObj = $("#optRemove").data('ejDropDownList');
|
||||
});
|
||||
function onEnaleDisableAll(args) {
|
||||
if (acrdnObj) {
|
||||
if (args.isChecked){
|
||||
acrdnObj.disable();
|
||||
activeObj.disable();
|
||||
optDisable.disable();
|
||||
optEnable.disable();
|
||||
}
|
||||
else{
|
||||
acrdnObj.enable();
|
||||
activeObj.enable();
|
||||
optDisable.enable();
|
||||
optEnable.enable();
|
||||
}
|
||||
}
|
||||
}
|
||||
function onDestoryRestore(args) {
|
||||
if (args.isChecked) {
|
||||
acrdnObj.destroy();
|
||||
acrdnObj = null;
|
||||
}
|
||||
else {
|
||||
$("#APIAccordion").ejAccordion();
|
||||
acrdnObj = $("#APIAccordion").data("ejAccordion");
|
||||
}
|
||||
}
|
||||
function onActiveChange(args) {
|
||||
if (acrdnObj) {
|
||||
acrdnObj.option({ selectedItemIndex: args.value });
|
||||
$("#optDisableChange").ejDropDownList("clearText");
|
||||
$("#optEnableChange").ejDropDownList("clearText");
|
||||
$("#optRemove").ejDropDownList("clearText");
|
||||
}
|
||||
}
|
||||
function onDisableChange(args) {
|
||||
var arrIndex = [], uncheck = [];
|
||||
if (args.isChecked) arrIndex.push(parseInt(args.value));
|
||||
else uncheck.push(parseInt(args.value));
|
||||
if (acrdnObj) {
|
||||
acrdnObj.disableItems(arrIndex); acrdnObj.enableItems(uncheck);
|
||||
$("#optActiveChange").ejDropDownList("clearText");
|
||||
$("#optEnableChange").ejDropDownList("clearText");
|
||||
$("#optRemove").ejDropDownList("clearText");
|
||||
|
||||
}
|
||||
}
|
||||
function onRemoveChange(args) {
|
||||
if (acrdnObj.model) {
|
||||
acrdnObj.removeItem(parseInt(args.value));
|
||||
removObj = $("#optRemove").ejDropDownList("instance");
|
||||
$(removObj.items[removObj.popupListItems.length -= 1]).remove();
|
||||
disObj = $("#optDisableChange").ejDropDownList("instance");
|
||||
$(disObj.items[disObj.popupListItems.length -= 1]).remove();
|
||||
enObj = $("#optEnableChange").ejDropDownList("instance");
|
||||
$(enObj.items[enObj.popupListItems.length -= 1]).remove();
|
||||
activeObj=$("#optActiveChange").ejDropDownList("instance");
|
||||
$(activeObj.items[activeObj.popupListItems.length -= 1]).remove();
|
||||
$("#optDisableChange").ejDropDownList("clearText");
|
||||
$("#optEnableChange").ejDropDownList("clearText");
|
||||
$("#optActiveChange").ejDropDownList("clearText");
|
||||
}
|
||||
}
|
||||
function onEnableChange(args) {
|
||||
var arrayIndex = [], uncheck = [];
|
||||
if (args.isChecked) arrayIndex.push(parseInt(args.value));
|
||||
else uncheck.push(parseInt(args.value));
|
||||
if (acrdnObj) {
|
||||
acrdnObj.enableItems(arrayIndex); acrdnObj.disableItems(uncheck);
|
||||
$("#optActiveChange").ejDropDownList("clearText");
|
||||
$("#optDisableChange").ejDropDownList("clearText");
|
||||
$("#optRemove").ejDropDownList("clearText");
|
||||
}
|
||||
}
|
||||
function onShowHide(args) {
|
||||
if (acrdnObj) {
|
||||
if (args.isChecked)
|
||||
acrdnObj.show();
|
||||
else
|
||||
acrdnObj.hide();
|
||||
}
|
||||
}
|
||||
function onHeightAdjust(args) {
|
||||
if (acrdnObj) {
|
||||
acrdnObj.element.find(">.e-content").css("height", "");
|
||||
acrdnObj.option("heightAdjustMode", args.value);
|
||||
}
|
||||
}
|
||||
function onShowHideCloseBtn(args) {
|
||||
acrdnObj && acrdnObj.option("showCloseButton", args.isChecked);
|
||||
}
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Essential JS 1: Accordion - Multiple Open</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet" />
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<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="multiAccordion" class="control_frame">
|
||||
<h3>
|
||||
<a href="#">ASP.NET</a>
|
||||
</h3>
|
||||
<div>
|
||||
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser. ASP.NET pages use a compiled, event-driven programming model that improves performance and enables the separation of application logic and user interface.
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">ASP.NET MVC</a>
|
||||
</h3>
|
||||
<div>
|
||||
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications. The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web Forms-based applications) is integrated with existing ASP.NET features, such as master pages and membership-based authentication.
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">Javascript</a>
|
||||
</h3>
|
||||
<div>
|
||||
JavaScript (JS) is an interpreted computer programming language.
|
||||
It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.More recently, however, it has become common in both game development and the creation of desktop applications.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" class="jsScript">
|
||||
$(function () {
|
||||
// declaration
|
||||
$("#multiAccordion").ejAccordion({ enableMultipleOpen: true });
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,186 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Essential JS 1: Accordion - Nested</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet" />
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<script src="../scripts/ej.web.all.min.js" type="text/javascript"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area">
|
||||
<div id="nestedAccordion" class="control_frame">
|
||||
<h3>
|
||||
<a href="#">Pizza Menu</a>
|
||||
</h3>
|
||||
<div>
|
||||
That is the reason why we offer a variety of toppings and crusts and a wide array of choices made from natural ingredients, balancing a nutritional diet with splendid taste.
|
||||
<div id="pizzaMenu" style="width: 460px; margin-top: 15px">
|
||||
<h3>
|
||||
<a href="#">GARDEN FRESH (Veg)</a>
|
||||
</h3>
|
||||
<div>
|
||||
<img src="../content/images/accordion/garden-veggie.png" alt="garden-fresh" />
|
||||
<div class="ingredients">
|
||||
Rate : $50
|
||||
<br />
|
||||
Ingredients : cheese, onions, green capsicums & tomatoes.
|
||||
</div>
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">CORN & SPINACH (Veg)</a>
|
||||
</h3>
|
||||
<div>
|
||||
<img src="../content/images/accordion/corn-and-spinach-05.png" alt="garden-fresh" />
|
||||
<div class="ingredients">
|
||||
Rate : $70
|
||||
<br />
|
||||
Ingredients : cheese, sweet corn & green capsicums.
|
||||
</div>
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">CHICKEN DELITE (Non-veg)</a>
|
||||
</h3>
|
||||
<div>
|
||||
<img src="../content/images/accordion/chicken-delite.png" alt="garden-fresh" />
|
||||
<div class="ingredients">
|
||||
Rate : $100
|
||||
<br />
|
||||
Ingredients : cheese, chicken chunks, onions & pineapple chunks.
|
||||
</div>
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">KEEMA LA JAWAB (Non-veg)</a>
|
||||
</h3>
|
||||
<div>
|
||||
<img src="../content/images/accordion/chicken-delite.png" alt="garden-fresh" />
|
||||
<div class="ingredients">
|
||||
Rate : $95
|
||||
<br />
|
||||
Ingredients : lamb keema, onions, garlic & tandoori seasoning.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">Pasta Menu</a>
|
||||
</h3>
|
||||
<div>
|
||||
Pasta cooked to perfection tossed with milk, vegetables, potatoes, poultry, 100% pure mutton, and cheese - and in creating nutritious and tasty meals to maintain good health.
|
||||
<div id="pastaMenu" style="width: 460px; margin-top: 15px">
|
||||
<h3>
|
||||
<a href="#">ZESTY MUSHROOMS AND TOMATO (Veg)</a>
|
||||
</h3>
|
||||
<div>
|
||||
<img src="../content/images/accordion/zesty-mushroons-and-tomatoes.png" alt="garden-fresh" />
|
||||
<div class="ingredients">
|
||||
Rate : $30
|
||||
<br />
|
||||
Ingredients : cheese, onions, green capsicums & tomatoes.
|
||||
</div>
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">CORN & SPINACH (Veg)</a>
|
||||
</h3>
|
||||
<div>
|
||||
<img src="../content/images/accordion/corn-and-spinach-05.png" alt="garden-fresh" />
|
||||
<div class="ingredients">
|
||||
Rate : $35
|
||||
<br />
|
||||
Ingredients : sautered spinach mix, sweet corn, parsley & mozarella cheese.
|
||||
</div>
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">BAKED CHICKEN AND CHEESE (Non-veg)</a>
|
||||
</h3>
|
||||
<div>
|
||||
<img src="../content/images/accordion/baked-chicken-and-cheese.png" alt="garden-fresh" />
|
||||
<div class="ingredients">
|
||||
Rate : $55
|
||||
<br />
|
||||
Ingredients : grilled chicken, corn and olives.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">Sandwizza Menu</a>
|
||||
</h3>
|
||||
<div>
|
||||
Sandwizza cooked to perfection tossed with bread, milk, vegetables, potatoes, poultry, 100% pure mutton, and cheese - and in creating nutritious and tasty meals to maintain good health.
|
||||
<div id="sandMenu" style="width: 460px; margin-top: 15px">
|
||||
<h3>
|
||||
<a href="#">GARDEN VEGGIE (Veg)</a>
|
||||
</h3>
|
||||
<div>
|
||||
<img src="../content/images/accordion/garden-veggie.png" alt="garden-fresh" />
|
||||
<div class="ingredients">
|
||||
Rate : $30
|
||||
<br />
|
||||
Ingredients : onions, garden-veggies & tomatoes.
|
||||
</div>
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">PANEER TIKKA (Veg)</a>
|
||||
</h3>
|
||||
<div>
|
||||
<img src="../content/images/accordion/paneer-tikka.png" alt="garden-fresh" />
|
||||
<div class="ingredients">
|
||||
Rate : $34
|
||||
<br />
|
||||
Ingredients : onions, paneer & tomatoes.
|
||||
</div>
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">CHICKEN TIKKA (Non-veg)</a>
|
||||
</h3>
|
||||
<div>
|
||||
<img src="../content/images/accordion/chicken-tikka.png" alt="garden-fresh" />
|
||||
<div class="ingredients">
|
||||
Rate : $64
|
||||
<br />
|
||||
Ingredients : onions, grilled chicken, chicken salami & tomatoes.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style class="cssStyles">
|
||||
#nestedAccordion img {
|
||||
float: left;
|
||||
margin: -5px 26px 5px 1px;
|
||||
}
|
||||
|
||||
.ingredients {
|
||||
height: 80px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script type="text/javascript" class="jsScript">
|
||||
$(function () {
|
||||
// declaration
|
||||
$("#nestedAccordion").ejAccordion();
|
||||
$("#pizzaMenu").ejAccordion({ collapsible: true });
|
||||
$("#pastaMenu").ejAccordion({ collapsible: true });
|
||||
$("#sandMenu").ejAccordion({ collapsible: true });
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Essential JS 1: Accordion - Open on Hover</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet" />
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<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="hoverAccordion" class="control_frame">
|
||||
<h3>
|
||||
<a href="#">ASP.NET</a>
|
||||
</h3>
|
||||
<div>
|
||||
Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent to a desktop or mobile browser. ASP.NET pages use a compiled, event-driven programming model that improves performance and enables the separation of application logic and user interface.
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">ASP.NET MVC</a>
|
||||
</h3>
|
||||
<div>
|
||||
The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms pattern for creating Web applications. The ASP.NET MVC framework is a lightweight, highly testable presentation framework that (as with Web Forms-based applications) is integrated with existing ASP.NET features, such as master pages and membership-based authentication.
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">Javascript</a>
|
||||
</h3>
|
||||
<div>
|
||||
JavaScript (JS) is an interpreted computer programming language.
|
||||
It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.More recently, however, it has become common in both game development and the creation of desktop applications.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" class="jsScript">
|
||||
$(function () {
|
||||
// declaration
|
||||
$("#hoverAccordion").ejAccordion({ events: "mouseover" });
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Essential JS 1: Accordion - Right To Left</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet" />
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<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="rtlAccordion" class="control_frame">
|
||||
<h3>
|
||||
<a href="#">سكريبت</a>
|
||||
</h3>
|
||||
<div>
|
||||
جافا سكريبت (JS) هو تفسير الكمبيوتر لغة البرمجة.
|
||||
تم تنفيذ أصلا كجزء من متصفحات الويب بحيث البرامج النصية من جانب العميل يمكن أن تتفاعل مع المستخدم، والسيطرة على المتصفح،
|
||||
التواصل بشكل غير متزامن، وتغيير محتوى الوثيقة التي تم عرضها. [5] وفي الآونة الأخيرة، ومع ذلك،
|
||||
أصبح من الشائع في كل من تطوير اللعبة وإنشاء تطبيقات سطح المكتب.
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">C شارب (C #)</a>
|
||||
</h3>
|
||||
<div>
|
||||
يقصد به أن تكون بسيطة وعصرية، لأغراض عامة، لغة البرمجة وجوه المنحى C #.
|
||||
ويقود فريق تطويره بواسطة Anders Hejlsberg. أحدث إصدار هو C # 5.0، والذي صدر في 15 أغسطس 2012.
|
||||
</div>
|
||||
<h3>
|
||||
<a href="#">البصرية الأساسية</a>
|
||||
</h3>
|
||||
<div>
|
||||
يتم تثبيت مترجم سطر الأوامر، VBC.EXE، كجزء من مجانية. NET الإطار SDK.
|
||||
ويشمل أيضا أحادية مترجم VB.NET سطر الأوامر. أحدث إصدار هو VB 2012، والذي صدر في 15 أغسطس 2012.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" class="jsScript">
|
||||
$(function () {
|
||||
// declaration
|
||||
$("#rtlAccordion").ejAccordion({ enableRTL: true });
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Essential JS 1 : Autocomplete AutoFill</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<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 class="frame">
|
||||
<div class="control">
|
||||
<input type="text" id="selectFlower" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
// declaration
|
||||
var flowers = [
|
||||
"Anemone Galilee", "Allium drumstick", "Artichoke thistle",
|
||||
"Boronia ", "Bouvardia", "Blue lace flower", "Bird of paradise",
|
||||
"Cone flower", "Cosmos", "Calla lily white", "Common Yarrow",
|
||||
"Dahlia", "Daffodil", "Delphinium Belladonna",
|
||||
"Eric John", "Eucalyptus seeded",
|
||||
"Freesia", "Foxtail fern", "Feverfew",
|
||||
"Godetia", "Gardenia", "Gayfeather",
|
||||
"Heather", "Hydrangea",
|
||||
"Ivy",
|
||||
"Japhette orchid",
|
||||
"Kangaroo paw yellow",
|
||||
"Lace fern", "Lumex", "Lavender",
|
||||
"Mimosa", "Moon orchid", "Ming fern",
|
||||
"Nerine",
|
||||
"Paper Reed", "Pincushion", "Phlox",
|
||||
"Queen Anne's lace",
|
||||
"Red Rover", "Rice flower", "Rose Lavanda",
|
||||
"Strawberry banksia", "Saponaria", " Sunflower Sunbright",
|
||||
"Thorow-wax", "Telstar", "Tuberose", "Tulip pink",
|
||||
"Waxflower", "Willow curly", "Watsonia"
|
||||
];
|
||||
|
||||
$('#selectFlower').ejAutocomplete({
|
||||
dataSource: flowers,
|
||||
width: "100%",
|
||||
watermarkText: "Select a flower",
|
||||
enableAutoFill: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Essential JS 1 : Autocomplete JSON binding</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<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 class="frame">
|
||||
<div class="control">
|
||||
<input type="text" id="selectState" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" class="jsScript">
|
||||
$(function () {
|
||||
// declaration
|
||||
var states = [
|
||||
{ index: "s1", countryName: "Alabama" }, { index: "s2", countryName: "Alaska" },
|
||||
{ index: "s3", countryName: "Arizona" }, { index: "s4", countryName: "Arkansas" },
|
||||
{ index: "s5", countryName: "California" }, { index: "s6", countryName: "Colorado" },
|
||||
{ index: "s7", countryName: "Connecticut" },
|
||||
{ index: "s8", countryName: "Delaware" },
|
||||
{ index: "s9", countryName: "Florida" },
|
||||
{ index: "s10", countryName: "Georgia" },
|
||||
{ index: "s11", countryName: "Hawaii" },
|
||||
{ index: "s12", countryName: "Idaho" }, { index: "s13", countryName: "Illinois" },
|
||||
{ index: "s14", countryName: "Indiana" }, { index: "s15", countryName: "Iowa" },
|
||||
{ index: "s16", countryName: "Kansas" }, { index: "s17", countryName: "Kentucky" },
|
||||
{ index: "s18", countryName: "Louisiana" }, { index: "s19", countryName: "Maine" },
|
||||
{ index: "s20", countryName: "Maryland" }, { index: "s21", countryName: "Massachusetts" },
|
||||
{ index: "s22", countryName: "Michigan" }, { index: "s23", countryName: "Montana" },
|
||||
{ index: "s24", countryName: "New Mexico" }, { index: "25", countryName: "New York" },
|
||||
{ index: "26", countryName: "North Carolina" }, { index: "s27", countryName: "Nevada" },
|
||||
{ index: "s28", countryName: "New Jersey" }, { index: "s29", countryName: "Pennsylvania" },
|
||||
{ index: "s30", countryName: "Ohio" }, { index: "s31", countryName: "Oklahoma" },
|
||||
{ index: "s32", countryName: "Oregon" },
|
||||
{ index: "s33", countryName: "Rhode Island" },
|
||||
{ index: "s34", countryName: "South Carolina" }, { index: "s35", countryName: "South Dakota" },
|
||||
{ index: "s36", countryName: "Tennessee" }, { index: "s37", countryName: "Texas" },
|
||||
{ index: "s38", countryName: "Utah" },
|
||||
{ index: "s39", countryName: "Vermont" }, { index: "s40", countryName: "Virginia" },
|
||||
{ index: "s41", countryName: "Washington" }, { index: "s42", countryName: "West Virginia" },
|
||||
{ index: "s43", countryName: "Wisconsin" }, { index: "s44", countryName: "Wyoming" }
|
||||
];
|
||||
|
||||
$('#selectState').ejAutocomplete({
|
||||
dataSource: states,
|
||||
fields: { key: "index", text: "countryName" },
|
||||
watermarkText: "Select a state",
|
||||
width: "100%"
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Essential JS 1 : Autocomplete remote data</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<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 class="frame">
|
||||
<div class="control">
|
||||
<input type="text" id="searchCustomer" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" class="jsScript">
|
||||
$(function () {
|
||||
var dataManger = ej.DataManager({
|
||||
url: window.baseurl+"Wcf/Northwind.svc/", crossDomain: true
|
||||
});
|
||||
// Query creation
|
||||
var query = ej.Query().from("Suppliers").select("SupplierID", "ContactName");
|
||||
$('#searchCustomer').ejAutocomplete({
|
||||
dataSource: dataManger,
|
||||
query: query,
|
||||
fields: { text: "ContactName", key: "SupplierID" },
|
||||
filterType: ej.filterType.StartsWith,
|
||||
watermarkText: "Search a customer",
|
||||
width: "100%"
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Essential JS 1 : Autocomplete Default</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<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 class="frame">
|
||||
<div class="control">
|
||||
<input type="text" id="selectCar" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" class="jsScript">
|
||||
$(function () {
|
||||
// declaration
|
||||
var carList = [
|
||||
"Audi S6", "Austin-Healey", "Alfa Romeo", "Aston Martin",
|
||||
"BMW 7", "Bentley Mulsanne", "Bugatti Veyron",
|
||||
"Chevrolet Camaro", "Cadillac",
|
||||
"Duesenberg J", "Dodge Sprinter",
|
||||
"Elantra", "Excavator",
|
||||
"Ford Boss 302", "Ferrari 360", "Ford Thunderbird",
|
||||
"GAZ Siber",
|
||||
"Honda S2000", "Hyundai Santro",
|
||||
"Isuzu Swift", "Infiniti Skyline",
|
||||
"Jaguar XJS",
|
||||
"Kia Sedona EX", "Koenigsegg Agera",
|
||||
"Lotus Esprit", "Lamborghini Diablo",
|
||||
"Mercedes-Benz", "Mercury Coupe", "Maruti Alto 800",
|
||||
"Nissan Qashqai",
|
||||
"Oldsmobile S98", "Opel Superboss",
|
||||
"Porsche 356", "Pontiac Sunbird",
|
||||
"Scion SRS/SC/SD", "Saab Sportcombi", "Subaru Sambar", "Suzuki Swift",
|
||||
"Triumph Spitfire", "Toyota 2000GT",
|
||||
"Volvo P1800", "Volkswagen Shirako"
|
||||
];
|
||||
|
||||
$('#selectCar').ejAutocomplete({
|
||||
width: "100%",
|
||||
watermarkText: "Select a car",
|
||||
dataSource: carList
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Essential JS 1 : Autocomplete Events</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<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 class="frame">
|
||||
<div class="control">
|
||||
<input type="text" id="selectColor" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cols-prop-area event-tracer">
|
||||
<div>
|
||||
<div class="heading">
|
||||
<span>Event Trace</span>
|
||||
<div class="pull-right">
|
||||
<select name="selectevtprops" id="selectControls">
|
||||
<option value="focusIn">Focus In</option>
|
||||
<option value="focusOut">Focus Out</option>
|
||||
<option value="select">Select</option>
|
||||
<option value="change">Change</option>
|
||||
<option value="open">Open</option>
|
||||
<option value="close">Close</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prop-grid content">
|
||||
<div class="eventarea">
|
||||
<div class="EventLog" id="EventLog">
|
||||
</div>
|
||||
</div>
|
||||
<div class="evtbtn">
|
||||
<input type="button" class="eventclear e-btn" value="Clear" onclick="onClear()" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" class="jsScript">
|
||||
var autocompleteObj;
|
||||
$(function () {
|
||||
// declaration
|
||||
var colors = [
|
||||
"AliceBlue", "AntiqueWhite", "Aqua",
|
||||
"Black", "Blue", "Brown",
|
||||
"Chocolate", "Cyan",
|
||||
"DarkBlue", "DarkGreen", "DarkRed",
|
||||
"ForestGreen", "Fuchsia", "Gold", "Gray",
|
||||
"Green", "HoneyDew", "Indigo", "Ivory",
|
||||
"Khaki", "Lavender", "LemonChiffon", "Lime",
|
||||
"Maroon", "Magenta", "Olive", "Orange", "OrangeRed",
|
||||
"Pink", "Purple", "PowderBlue", "Red",
|
||||
"RosyBrown", "RoyalBlue", "Silver", "SkyBlue",
|
||||
"SlateGray", "Tan", "Teal", "Turquoise",
|
||||
"Violet", "Wheat", "Yellow", "YellowGreen "
|
||||
];
|
||||
|
||||
$('#selectColor').ejAutocomplete({
|
||||
dataSource: colors,
|
||||
width: "100%",
|
||||
watermarkText: "Choose a color",
|
||||
focusIn: "onFocusIn",
|
||||
focusOut: "onFocusOut",
|
||||
select: "onSelect",
|
||||
create: "onCreate",
|
||||
change: "onChange",
|
||||
open: "onOpen",
|
||||
close: "onClose"
|
||||
});
|
||||
autocompleteObj = $("#selectColor").data("ejAutocomplete");
|
||||
$("#selectControls").ejDropDownList({
|
||||
popupShown: "adjustpopupposition",
|
||||
showCheckbox: true,
|
||||
checkAll: true,
|
||||
change: "evtpropscheckedevent"
|
||||
});
|
||||
});
|
||||
function evtpropscheckedevent(args) {
|
||||
if (args.isChecked) {
|
||||
switch (args.selectedValue) {
|
||||
case "focusIn": autocompleteObj.option(args.selectedValue, "onFocusIn"); break;
|
||||
case "focusOut": autocompleteObj.option(args.selectedValue, "onFocusOut"); break;
|
||||
case "select": autocompleteObj.option(args.selectedValue, "onSelect"); break;
|
||||
case "change": autocompleteObj.option(args.selectedValue, "onChange"); break;
|
||||
case "open": autocompleteObj.option(args.selectedValue, "onOpen"); break;
|
||||
case "close": autocompleteObj.option(args.selectedValue, "onClose"); break;
|
||||
}
|
||||
}
|
||||
else autocompleteObj.option(args.selectedValue, null);
|
||||
}
|
||||
// Client side Events
|
||||
function onCreate(args) {
|
||||
jQuery.addEventLog("Autocomplete has been <span class='eventTitle'>created</span>.");
|
||||
}
|
||||
function onFocusIn(args) {
|
||||
jQuery.addEventLog("Autocomplete is in <span class='eventTitle'>focus</span>. ");
|
||||
}
|
||||
function onFocusOut(args) {
|
||||
jQuery.addEventLog("Autocomplete is out of <span class='eventTitle'>focus</span>.");
|
||||
}
|
||||
function onSelect(args) {
|
||||
jQuery.addEventLog("The value '" + args.value + "' has been <span class='eventTitle'>selected</span>.");
|
||||
}
|
||||
function onChange(args) {
|
||||
jQuery.addEventLog("The value has been <span class='eventTitle'>changed</span> to '" + args.value + "'.");
|
||||
}
|
||||
function onOpen(args) {
|
||||
jQuery.addEventLog("Suggestion List has been <span class='eventTitle'>opened</span>.");
|
||||
}
|
||||
function onClose(args) {
|
||||
jQuery.addEventLog("Suggestion List has been <span class='eventTitle'>closed</span>.");
|
||||
}
|
||||
function onClear() {
|
||||
jQuery.clearEventLog();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Essential JS 1 : Autocomplete Grouping</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<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 class="frame">
|
||||
<div class="control">
|
||||
<input type="text" id="groupingCountry" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" class="jsScript">
|
||||
$(function () {
|
||||
// declaration
|
||||
var countries = [
|
||||
{ text: "Austria", category: "A" },
|
||||
{ text: "Australia", category: "A" }, { text: "Antarctica", category: "A" },
|
||||
{ text: "Bangladesh", category: "B" }, { text: "Belgium", category: "B" },
|
||||
{ text: "Brazil", category: "B" },
|
||||
{ text: "Canada", category: "C" }, { text: "China", category: "C" },
|
||||
{ text: "Cuba", category: "C" },
|
||||
{ text: "Denmark", category: "D" }, { text: "Dominica", category: "D" },
|
||||
{ text: "Europe", category: "E" }, { text: "Egypt", category: "E" },
|
||||
{ text: "England", category: "E" },
|
||||
{ text: "India", category: "I" }, { text: "Indonesia", category: "I" },
|
||||
{ text: "Ireland", category: "I" }, { text: "Italy", category: "I" },
|
||||
{ text: "France", category: "F" }, { text: "Finland", category: "F" },
|
||||
{ text: "Germany", category: "G" }, { text: "Greece", category: "G" },
|
||||
{ text: "Greenland", category: "G" }, { text: "Georgia", category: "G" },
|
||||
{ text: "Haiti", category: "H" }, { text: "Hong Kong", category: "H" },
|
||||
{ text: "Japan", category: "J" }, { text: "Jordan", category: "J" },
|
||||
{ text: "Jamaica", category: "J" }, { text: "Kenya", category: "K" },
|
||||
{ text: "Kuwait", category: "K" }, { text: "Korea", category: "K" },
|
||||
{ text: "Latvia", category: "L" }, { text: "Lebanon", category: "L" },
|
||||
{ text: "Leichenstein", category: "L" }, { text: "Malaysia", category: "M" },
|
||||
{ text: "Mexico", category: "M" }, { text: "Mozambique", category: "M" },
|
||||
{ text: "Madagascar", category: "M" }, { text: "Midway Islands", category: "M" },
|
||||
{ text: "Nepal", category: "N" }, { text: "Netherlands", category: "N" },
|
||||
{ text: "New Zealand", category: "N" }, { text: "Nigeria", category: "N" },
|
||||
{ text: "Oman", category: "O" }, { text: "Philippines", category: "P" },
|
||||
{ text: "Poland", category: "P" }, { text: "Portugal", category: "P" },
|
||||
{ text: "Qatar", category: "Q" }, { text: "Romania", category: "R" },
|
||||
{ text: "Russia", category: "R" }, { text: "Singapore", category: "S" },
|
||||
{ text: "Switzerland", category: "S" }, { text: "Sweden", category: "S" },
|
||||
{ text: "Scotland", category: "S" }, { text: "Tibet", category: "T" },
|
||||
{ text: "Turkey", category: "T" }, { text: "Ukraine", category: "U" },
|
||||
{ text: "United States", category: "U" }, { text: "Uruguay", category: "U" },
|
||||
{ text: "Vatican City", category: "V" }, { text: "Vietnam", category: "V" },
|
||||
{ text: "Western Sahara", category: "W" }, { text: "Wales", category: "W" },
|
||||
{ text: "Yemen", category: "Y" }, { text: "Yugoslavia", category: "Y" },
|
||||
{ text: "Zambia", category: "Z" }, { text: "Zimbabwe", category: "Z" }
|
||||
];
|
||||
|
||||
$('#groupingCountry').ejAutocomplete({
|
||||
dataSource: countries,
|
||||
filterType: ej.filterType.Contains,
|
||||
itemsCount: 7,
|
||||
width: "100%",
|
||||
watermarkText: "Select a country",
|
||||
fields: { groupBy: "category" },
|
||||
highlightSearch: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Essential JS 1 : Autocomplete Keyboard navigation</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<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 class="frame">
|
||||
<div class="control">
|
||||
<input type="text" id="keyboard"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid keyboard">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Alt + j
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Focuses the control
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Up
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Moves to previous item
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Down
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Moves to next item
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Enter
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Selects the focused item
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Esc
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Closes the popup
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" class="jsScript">
|
||||
$(function () {
|
||||
// declaration
|
||||
var languages = [
|
||||
"ActionScript", "AppleScript", "ASP", "BASIC", "BeanShell",
|
||||
"C", "C++", "C#", "Clojure", "COBOL", "ColdFusion", "DataFlex", "DCL",
|
||||
"Erlang", "E#", "Fortran", "F#", "Flex", "Google Apps Script", "Groovy",
|
||||
"Haskell", "Hope", "IBM HAScript",
|
||||
"Java", "JavaScript", "J#", "Lisp", "MATLAB", "Oak", "Perl", "PHP",
|
||||
"Python", "Ruby", "Scala", "Scheme", "T-SQL", "WebQL", "ZOPL"
|
||||
];
|
||||
|
||||
$('#keyboard').ejAutocomplete({
|
||||
dataSource: languages,
|
||||
width: "100%",
|
||||
watermarkText: "Choose skills",
|
||||
multiSelectMode: ej.MultiSelectMode.Delimiter,
|
||||
});
|
||||
$(document).on("keydown", function (e) {
|
||||
if (e.altKey && e.keyCode === 74) { // j- key code.
|
||||
$("#keyboard").focus();
|
||||
}
|
||||
});
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Essential JS 1 : Autocomplete - KnockOut</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<script src="../scripts/ej.web.all.min.js" type="text/javascript"></script>
|
||||
<script src="../scripts/properties.js" type="text/javascript"></script>
|
||||
<script src="../scripts/knockout.min.js" type="text/javascript"></script>
|
||||
<script src="../scripts/ej.widget.ko.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area">
|
||||
<div class="frame">
|
||||
<div class="knockbind">
|
||||
<span class="txt">Select a car</span>
|
||||
<div id="control">
|
||||
<input id="car" data-bind='ejAutocomplete: { dataSource: carList, value: carName, width: "100%" }' />
|
||||
</div>
|
||||
<div id="binding">
|
||||
<span>Your selection: <span data-bind="text: carName"></span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" class="jsScript">
|
||||
$(function () {
|
||||
var carList = [
|
||||
"Audi S6", "Austin-Healey", "Alfa Romeo", ,
|
||||
"BMW 7 ", "Bentley Mulsanne", "Bugatti Veyron",
|
||||
"Chevrolet Camaro", "Cadillac ",
|
||||
"Duesenberg J ", "Dodge Sprinter",
|
||||
"Elantra", "Excavator",
|
||||
"Ford Boss 302", "Ferrari 360", "Ford Thunderbird ",
|
||||
"GAZ Siber", "Volkswagen Shirako",
|
||||
"Honda S2000", "Hyundai Santro",
|
||||
"Isuzu Swift", "Infiniti Skyline",
|
||||
"Jaguar XJS",
|
||||
"Kia Sedona EX",
|
||||
"Lotus Esprit", "Lamborghini Diablo ",
|
||||
"Mercedes-Benz ", "Mercury Coupe", "Maruti Alto 800",
|
||||
"Nissan Qashqai", "Koenigsegg Agera",
|
||||
"Oldsmobile S98", "Opel Superboss",
|
||||
"Porsche 356 ", "Pontiac Sunbird",
|
||||
"Scion SRS/SC/SD", "Saab Sportcombi", "Subaru Sambar", "Suzuki Swift",
|
||||
"Triumph Spitfire ", "Toyota 2000GT",
|
||||
"Volvo P1800", "Aston Martin"
|
||||
];
|
||||
// declaration
|
||||
var ViewModel = function () {
|
||||
this.carName = ko.observable("Audi S6");
|
||||
this.carList = ko.observable(carList);
|
||||
};
|
||||
ko.applyBindings(new ViewModel());
|
||||
});
|
||||
</script>
|
||||
<style type="text/css">
|
||||
.input {
|
||||
height: 25px;
|
||||
text-indent: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.knockbind > div, .txt {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,112 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Essential JS 1 : Autocomplete Methods</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<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 class="frame">
|
||||
<div class="control">
|
||||
<input type="text" id="selectCountry" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-12 methods">
|
||||
<input type="checkbox" id="check21" class="e-togglebtn" />
|
||||
<label for="check21">Toggle</label>
|
||||
</div>
|
||||
<div class="col-md-12 methods">
|
||||
<input type="button" id="GetValue" value="Get value" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" class="jsScript">
|
||||
var autocomplete;
|
||||
$(function () {
|
||||
// declaration
|
||||
var countries = [
|
||||
{ text: "Algeria", key: "flag-dz" }, { text: "Argentina", key: "flag-ar" },
|
||||
{ text: "Armenia", key: "flag-am" }, { text: "Brazil", key: "flag-br" },
|
||||
{ text: "Bangladesh", key: "flag-bd" }, { text: "Canada", key: "flag-ca" },
|
||||
{ text: "Cuba", key: "flag-cu" }, { text: "China", key: "flag-cn" },
|
||||
{ text: "Denmark", key: "flag-dk" }, { text: "Estonia", key: "flag-ee" },
|
||||
{ text: "Egypt", key: "flag-eg" }, { text: "France", key: "flag-fr" },
|
||||
{ text: "Finland", key: "flag-fi" }, { text: "Greenland", key: "flag-gl" },
|
||||
{ text: "India", key: "flag-in" }, { text: "Indonesia", key: "flag-id" },
|
||||
{ text: "Malaysia", key: "flag-my" }, { text: "Mexico", key: "flag-mx" },
|
||||
{ text: "New Zealand", key: "flag-nz" }, { text: "Netherlands", key: "flag-nl" },
|
||||
{ text: "Norway", key: "flag-no" }, { text: "Portugal", key: "flag-pt" },
|
||||
{ text: "Poland", key: "flag-pl" }, { text: "Qatar", key: "flag-qa" },
|
||||
{ text: "Romania", key: "flag-ro" }, { text: "Spain", key: "flag-es" },
|
||||
{ text: "Singapore", key: "flag-sg" }, { text: "Saudi Arabia", key: "flag-sa" },
|
||||
{ text: "Thailand", key: "flag-th" }, { text: "Turkey", key: "flag-tr" },
|
||||
{ text: "Ukraine", key: "flag-ua" }, { text: "United States", key: "flag-us" },
|
||||
{ text: "Uruguay", key: "flag-uy" }, { text: "Viet Nam", key: "flag-vn" }
|
||||
];
|
||||
$('#selectCountry').ejAutocomplete({
|
||||
dataSource: countries,
|
||||
width: "100%",
|
||||
watermarkText: "Select a country",
|
||||
fields: { key: "key" }
|
||||
});
|
||||
autocomplete = $('#selectCountry').data("ejAutocomplete");
|
||||
$("#check21").ejToggleButton({
|
||||
defaultText: "Disable",
|
||||
activeText: "Enable",
|
||||
click: "changeState",
|
||||
width: "107px",
|
||||
});
|
||||
$("#GetValue").ejButton({
|
||||
width: "107px",
|
||||
click: "currentValue"
|
||||
});
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
});
|
||||
function changeState(args) {
|
||||
if (args.isChecked) autocomplete.disable();
|
||||
else autocomplete.enable();
|
||||
}
|
||||
function currentValue(args) {
|
||||
alert("Current value is : " + autocomplete.getValue());
|
||||
}
|
||||
</script>
|
||||
<style type="text/css">
|
||||
.frame span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.inputbtn {
|
||||
width: 107px;
|
||||
}
|
||||
|
||||
.prop-grid .methods {
|
||||
height: 60px;
|
||||
}
|
||||
#check21-wrapper{
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Essential JS 1 : Autocomplete Default</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<script src="../scripts/ej.web.all.min.js" type="text/javascript"></script>
|
||||
<script src="../scripts/properties.js" type="text/javascript"></script>
|
||||
<script src="../scripts/jsondata.min.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area">
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<input type="text" id="selectCar" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" class="jsScript">
|
||||
$(function () {
|
||||
$('#selectCar').ejAutocomplete({
|
||||
dataSource: window.gridData,
|
||||
fields: { key: "OrderID", text: "ShipCity" },
|
||||
highlightSearch: true,
|
||||
watermarkText: "Select a order",
|
||||
width:"100%",
|
||||
showPopupButton: true,
|
||||
multiColumnSettings:{
|
||||
stringFormat: "{0} ({3}) ({1})",
|
||||
enable:true,
|
||||
showHeader: true,
|
||||
columns: [{
|
||||
field: "CustomerID",
|
||||
headerText: "CustomerID",
|
||||
},
|
||||
{
|
||||
field: "OrderID",
|
||||
headerText: "OrderID"
|
||||
},
|
||||
{
|
||||
field: "EmployeeID",
|
||||
headerText: "EmployeeID"
|
||||
},
|
||||
{
|
||||
field: "ShipCity",
|
||||
headerText: "ShipCity"
|
||||
}
|
||||
]}
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
<style>
|
||||
.frame {
|
||||
width:60%;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Essential JS 1 : Autocomplete Multiple Values</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<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 class="frame">
|
||||
<div class="control">
|
||||
<span class="txt">Using Delimiter</span>
|
||||
<input type="text" id="delimit" />
|
||||
</div>
|
||||
<div class="control">
|
||||
<span class="txt">Using VisualMode</span>
|
||||
<input type="text" id="visualmode" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" class="jsScript">
|
||||
$(function () {
|
||||
// declaration
|
||||
var languages = [
|
||||
"ActionScript", "AppleScript", "ASP", "BASIC", "BeanShell",
|
||||
"C", "C++", "C#", "Clojure", "COBOL", "ColdFusion", "DataFlex", "DCL",
|
||||
"Erlang", "E#", "Fortran", "F#", "Flex", "Google Apps Script", "Groovy", "Haskell", "Hope", "IBM HAScript",
|
||||
"Java", "JavaScript", "J#", "Lisp", "MATLAB", "Oak", "Perl", "PHP",
|
||||
"Python", "Ruby", "Scala", "Scheme", "T-SQL", "WebQL", "ZOPL"
|
||||
];
|
||||
|
||||
$("#delimit").ejAutocomplete({
|
||||
showPopupButton: true,
|
||||
width: "100%",
|
||||
multiSelectMode: ej.MultiSelectMode.Delimiter,
|
||||
dataSource: languages
|
||||
});
|
||||
$("#visualmode").ejAutocomplete({
|
||||
showPopupButton: true,
|
||||
width: "100%",
|
||||
multiSelectMode: ej.MultiSelectMode.VisualMode,
|
||||
dataSource: languages
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.frame {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.control {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.control:first-child {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.txt {
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Essential JS 1 : Autocomplete RTL</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<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 class="frame">
|
||||
<div class="control">
|
||||
<input type="text" id="selectCar" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" class="jsScript">
|
||||
$(function () {
|
||||
// declaration
|
||||
var carList = [
|
||||
"Audi S6", "Austin-Healey", "Alfa Romeo", "Aston Martin",
|
||||
"BMW 7 ", "Bentley Mulsanne", "Bugatti Veyron",
|
||||
"Chevrolet Camaro", "Cadillac ",
|
||||
"Duesenberg J ", "Dodge Sprinter",
|
||||
"Elantra", "Excavator",
|
||||
"Ford Boss 302", "Ferrari 360", "Ford Thunderbird ",
|
||||
"GAZ Siber",
|
||||
"Honda S2000", "Hyundai Santro",
|
||||
"Isuzu Swift", "Infiniti Skyline",
|
||||
"Jaguar XJS",
|
||||
"Kia Sedona EX", "Koenigsegg Agera",
|
||||
"Lotus Esprit", "Lamborghini Diablo ",
|
||||
"Mercedes-Benz ", "Mercury Coupe", "Maruti Alto 800",
|
||||
"Nissan Qashqai",
|
||||
"Oldsmobile S98", "Opel Superboss",
|
||||
"Porsche 356 ", "Pontiac Sunbird",
|
||||
"Scion SRS/SC/SD", "Saab Sportcombi", "Subaru Sambar", "Suzuki Swift",
|
||||
"Triumph Spitfire ", "Toyota 2000GT",
|
||||
"Volvo P1800", "Volkswagen Shirako"
|
||||
];
|
||||
|
||||
$('#selectCar').ejAutocomplete({
|
||||
dataSource: carList,
|
||||
width: "100%",
|
||||
watermarkText: "Select a car",
|
||||
enableRTL: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,223 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Essential JS 1 : Autocomplete Template</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<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 class="frame">
|
||||
<div class="control">
|
||||
<input type="text" id="selectCountry" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" class="jsScript">
|
||||
var autocomplete;
|
||||
$(function () {
|
||||
// declaration
|
||||
var countries = [
|
||||
{ text: "Algeria", sprite: "flag-dz" }, { text: "Argentina", sprite: "flag-ar" },
|
||||
{ text: "Armenia", sprite: "flag-am" }, { text: "Brazil", sprite: "flag-br" },
|
||||
{ text: "Bangladesh", sprite: "flag-bd" }, { text: "Canada", sprite: "flag-ca" },
|
||||
{ text: "Cuba", sprite: "flag-cu" }, { text: "China", sprite: "flag-cn" },
|
||||
{ text: "Denmark", sprite: "flag-dk" }, { text: "Estonia", sprite: "flag-ee" },
|
||||
{ text: "Egypt", sprite: "flag-eg" }, { text: "France", sprite: "flag-fr" },
|
||||
{ text: "Finland", sprite: "flag-fi" }, { text: "Greenland", sprite: "flag-gl" },
|
||||
{ text: "India", sprite: "flag-in" }, { text: "Indonesia", sprite: "flag-id" },
|
||||
{ text: "Malaysia", sprite: "flag-my" }, { text: "Mexico", sprite: "flag-mx" },
|
||||
{ text: "New Zealand", sprite: "flag-nz" }, { text: "Netherlands", sprite: "flag-nl" },
|
||||
{ text: "Norway", sprite: "flag-no" }, { text: "Portugal", sprite: "flag-pt" },
|
||||
{ text: "Poland", sprite: "flag-pl" }, { text: "Qatar", sprite: "flag-qa" },
|
||||
{ text: "Romania", sprite: "flag-ro" }, { text: "Spain", sprite: "flag-es" },
|
||||
{ text: "Singapore", sprite: "flag-sg" }, { text: "Saudi Arabia", sprite: "flag-sa" },
|
||||
{ text: "Thailand", sprite: "flag-th" }, { text: "Turkey", sprite: "flag-tr" },
|
||||
{ text: "Ukraine", sprite: "flag-ua" }, { text: "United States", sprite: "flag-us" },
|
||||
{ text: "Uruguay", sprite: "flag-uy" }, { text: "Viet Nam", sprite: "flag-vn" },
|
||||
{ text: "Yemen", sprite: "flag-ye" }
|
||||
];
|
||||
$('#selectCountry').ejAutocomplete({
|
||||
dataSource: countries,
|
||||
width: "100%",
|
||||
watermarkText: "Select a country",
|
||||
template: '<div class="flag ${sprite}"> </div>' +
|
||||
'<div class="txt"> ${text} </div>'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style type="text/css" class="cssStyles">
|
||||
/* Sprite css for country flags */
|
||||
.flag {
|
||||
background: url("../content/images/autocomplete/flags.png") no-repeat;
|
||||
float: left;
|
||||
height: 15px;
|
||||
margin-right: 10px;
|
||||
margin-top: 3px;
|
||||
width: 25px;
|
||||
}
|
||||
|
||||
.flag.flag-am {
|
||||
background-position: -25px 0;
|
||||
}
|
||||
|
||||
.flag.flag-ar {
|
||||
background-position: -50px 0;
|
||||
}
|
||||
|
||||
.flag.flag-bd {
|
||||
background-position: -75px 0;
|
||||
}
|
||||
|
||||
.flag.flag-br {
|
||||
background-position: -100px 0;
|
||||
}
|
||||
|
||||
.flag.flag-ca {
|
||||
background-position: -125px 0;
|
||||
}
|
||||
|
||||
.flag.flag-cn {
|
||||
background-position: 0 -15px;
|
||||
}
|
||||
|
||||
.flag.flag-cu {
|
||||
background-position: -25px -15px;
|
||||
}
|
||||
|
||||
.flag.flag-dk {
|
||||
background-position: -50px -15px;
|
||||
}
|
||||
|
||||
.flag.flag-dz {
|
||||
background-position: -75px -15px;
|
||||
}
|
||||
|
||||
.flag.flag-ee {
|
||||
background-position: -100px -15px;
|
||||
}
|
||||
|
||||
.flag.flag-eg {
|
||||
background-position: -125px -15px;
|
||||
}
|
||||
|
||||
.flag.flag-es {
|
||||
background-position: 0 -30px;
|
||||
}
|
||||
|
||||
.flag.flag-fi {
|
||||
background-position: -25px -30px;
|
||||
}
|
||||
|
||||
.flag.flag-fr {
|
||||
background-position: -50px -30px;
|
||||
}
|
||||
|
||||
.flag.flag-gl {
|
||||
background-position: -75px -30px;
|
||||
}
|
||||
|
||||
.flag.flag-id {
|
||||
background-position: -100px -30px;
|
||||
}
|
||||
|
||||
.flag.flag-in {
|
||||
background-position: -125px -30px;
|
||||
}
|
||||
|
||||
.flag.flag-mx {
|
||||
background-position: 0 -45px;
|
||||
}
|
||||
|
||||
.flag.flag-my {
|
||||
background-position: -25px -45px;
|
||||
}
|
||||
|
||||
.flag.flag-nl {
|
||||
background-position: -50px -45px;
|
||||
}
|
||||
|
||||
.flag.flag-no {
|
||||
background-position: -75px -45px;
|
||||
}
|
||||
|
||||
.flag.flag-nz {
|
||||
background-position: -100px -45px;
|
||||
}
|
||||
|
||||
.flag.flag-pl {
|
||||
background-position: -125px -45px;
|
||||
}
|
||||
|
||||
.flag.flag-pt {
|
||||
background-position: 0 -60px;
|
||||
}
|
||||
|
||||
.flag.flag-qa {
|
||||
background-position: -25px -60px;
|
||||
}
|
||||
|
||||
.flag.flag-ro {
|
||||
background-position: -50px -60px;
|
||||
}
|
||||
|
||||
.flag.flag-sa {
|
||||
background-position: -75px -60px;
|
||||
}
|
||||
|
||||
.flag.flag-sg {
|
||||
background-position: -100px -60px;
|
||||
}
|
||||
|
||||
.flag.flag-th {
|
||||
background-position: -125px -60px;
|
||||
}
|
||||
|
||||
.flag.flag-tr {
|
||||
background-position: 0 -75px;
|
||||
}
|
||||
|
||||
.flag.flag-ua {
|
||||
background-position: -25px -75px;
|
||||
}
|
||||
|
||||
.flag.flag-us {
|
||||
background-position: -50px -75px;
|
||||
}
|
||||
|
||||
.flag.flag-uy {
|
||||
background-position: -75px -75px;
|
||||
}
|
||||
|
||||
.flag.flag-vn {
|
||||
background-position: -100px -75px;
|
||||
}
|
||||
|
||||
.flag.flag-ye {
|
||||
background-position: -125px -75px;
|
||||
}
|
||||
|
||||
.txt {
|
||||
display: table-cell;
|
||||
height: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../scripts/excanvas.min.js" type="text/javascript"></script>
|
||||
<title>Essential JS 1 : Barcode - Codabar</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<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="barcode" class="frame"></div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-3 aligntop" style="width: 40px">
|
||||
Text
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<input type="text" class="e-text" style="width:150px" id="textBox" value="01234567" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3" >
|
||||
<input type="button" class="e-button" style="width:200px" id="btn1" value="Update" onclick="onUpdateBarcode()" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var barcodeCtrl;
|
||||
$(function () {
|
||||
$("#barcode").ejBarcode({ text: "01234567", symbologyType: "codabar", displayText: true, quietZone: {all:30} });
|
||||
barcodeCtrl = $("#barcode").data("ejBarcode");
|
||||
});
|
||||
|
||||
function onUpdateBarcode() {
|
||||
$("#barcode").ejBarcode("option", "text", textBox.value);
|
||||
}
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
$("#btn1").ejButton({
|
||||
width: 200
|
||||
});
|
||||
</script>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.frame
|
||||
{
|
||||
width: inherit;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../scripts/excanvas.min.js" type="text/javascript"></script>
|
||||
<title>Essential JS 1 : Barcode - Code 11</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<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="barcode" class="frame"></div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-3 aligntop" style="width: 40px">
|
||||
Text
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<input type="text" class="e-text" style="width:150px" id="textBox" value="01234567" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<input type="button" class="e-button" style="width:200px" id="btn1" value="Update" onclick="onUpdateBarcode()" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var barcodeCtrl;
|
||||
$(function () {
|
||||
$("#barcode").ejBarcode({ text: "01234567", symbologyType: "code11", displayText: true, quietZone: {all:30} });
|
||||
barcodeCtrl = $("#barcode").data("ejBarcode");
|
||||
});
|
||||
|
||||
function onUpdateBarcode() {
|
||||
$("#barcode").ejBarcode("option", "text", textBox.value);
|
||||
}
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
$("#btn1").ejButton({
|
||||
width: 200
|
||||
});
|
||||
</script>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.frame
|
||||
{
|
||||
width: inherit;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../scripts/excanvas.min.js" type="text/javascript"></script>
|
||||
<title>Essential JS 1 : Barcode - Code 128 A</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<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="barcode" class="frame"></div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-3 aligntop" style="width: 40px">
|
||||
Text
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<input type="text" class="e-text" style="width:150px" id="textBox" value="SYNCFUSION" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<input type="button" class="e-button" style="width:200px" id="btn1" value="Update" onclick="onUpdateBarcode()" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var barcodeCtrl;
|
||||
$(function () {
|
||||
$("#barcode").ejBarcode({ text: "SYNCFUSION", symbologyType: "code128a", displayText: true, quietZone: {all:30} });
|
||||
barcodeCtrl = $("#barcode").data("ejBarcode");
|
||||
});
|
||||
|
||||
function onUpdateBarcode() {
|
||||
$("#barcode").ejBarcode("option", "text", textBox.value);
|
||||
}
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
$("#btn1").ejButton({
|
||||
width: 200
|
||||
});
|
||||
</script>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.frame
|
||||
{
|
||||
width: inherit;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../scripts/excanvas.min.js" type="text/javascript"></script>
|
||||
<title>Essential JS 1 : Barcode - Code 128 B</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<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="barcode" class="frame"></div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-3 aligntop" style="width: 40px">
|
||||
Text
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<input type="text" class="e-text" style="width:150px" id="textBox" value="SYNCFUSION" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<input type="button" class="e-button" style="width:200px" id="btn1" value="Update" onclick="onUpdateBarcode()" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var barcodeCtrl;
|
||||
$(function () {
|
||||
$("#barcode").ejBarcode({ text: "SYNCFUSION", symbologyType: "code128b", displayText: true, quietZone: {all:30} });
|
||||
barcodeCtrl = $("#barcode").data("ejBarcode");
|
||||
});
|
||||
|
||||
function onUpdateBarcode() {
|
||||
$("#barcode").ejBarcode("option", "text", textBox.value);
|
||||
}
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
$("#btn1").ejButton({
|
||||
width: 200
|
||||
});
|
||||
</script>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.frame
|
||||
{
|
||||
width: inherit;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../scripts/excanvas.min.js" type="text/javascript"></script>
|
||||
<title>Essential JS 1 : Barcode - Code 128 C</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<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="barcode" class="frame"></div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-3 aligntop" style="width: 40px">
|
||||
Text
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<input type="text" class="e-text" style="width:150px" id="textBox" value="01234567" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<input type="button" class="e-button" style="width:200px" id="btn1" value="Update" onclick="onUpdateBarcode()" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var barcodeCtrl;
|
||||
$(function () {
|
||||
$("#barcode").ejBarcode({ text: "01234567", symbologyType: "code128c", displayText: true, quietZone: {all:30} });
|
||||
barcodeCtrl = $("#barcode").data("ejBarcode");
|
||||
});
|
||||
|
||||
function onUpdateBarcode() {
|
||||
$("#barcode").ejBarcode("option", "text", textBox.value);
|
||||
}
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
$("#btn1").ejButton({
|
||||
width: 200
|
||||
});
|
||||
</script>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.frame
|
||||
{
|
||||
width: inherit;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../scripts/excanvas.min.js" type="text/javascript"></script>
|
||||
<title>Essential JS 1 : Barcode - Code 32</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<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="barcode" class="frame"></div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-3 aligntop" style="width: 40px">
|
||||
Text
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<input type="text" class="e-text" style="width:150px" id="textBox" value="01234567" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3" >
|
||||
<input type="button" class="e-button" style="width:200px" id="btn1" value="Update" onclick="onUpdateBarcode()" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var barcodeCtrl;
|
||||
$(function () {
|
||||
$("#barcode").ejBarcode({ text: "01234567", symbologyType: "code32", displayText: true, quietZone: {all:30} });
|
||||
barcodeCtrl = $("#barcode").data("ejBarcode");
|
||||
});
|
||||
|
||||
function onUpdateBarcode() {
|
||||
$("#barcode").ejBarcode("option", "text", textBox.value);
|
||||
}
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
$("#btn1").ejButton({
|
||||
width: 200
|
||||
});
|
||||
</script>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.frame
|
||||
{
|
||||
width: inherit;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../scripts/excanvas.min.js" type="text/javascript"></script>
|
||||
<title>Essential JS 1 : Barcode - Code 39</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<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="barcode" class="frame"></div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-3 aligntop" style="width: 40px">
|
||||
Text
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<input type="text" class="e-text" style="width:150px" id="textBox" value="SYNCFUSION" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<input type="button" class="e-button" style="width:200px" id="btn1" value="Update" onclick="onUpdateBarcode()" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var barcodeCtrl;
|
||||
$(function () {
|
||||
$("#barcode").ejBarcode({ text: "SYNCFUSION", symbologyType: "code39", displayText: true, quietZone: {all:30} });
|
||||
barcodeCtrl = $("#barcode").data("ejBarcode");
|
||||
});
|
||||
|
||||
function onUpdateBarcode() {
|
||||
$("#barcode").ejBarcode("option", "text", textBox.value);
|
||||
}
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
$("#btn1").ejButton({
|
||||
width: 200
|
||||
});
|
||||
</script>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.frame
|
||||
{
|
||||
width: inherit;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../scripts/excanvas.min.js" type="text/javascript"></script>
|
||||
<title>Essential JS 1 : Barcode - Code 39 Extended</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<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="barcode" class="frame"></div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-3 aligntop" style="width: 40px">
|
||||
Text
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<input type="text" class="e-text" style="width:150px" id="textBox" value="SYNCFUSION" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3" >
|
||||
<input type="button" class="e-button" style="width:200px" id="btn1" value="Update" onclick="onUpdateBarcode()" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var barcodeCtrl;
|
||||
$(function () {
|
||||
$("#barcode").ejBarcode({ text: "SYNCFUSION", symbologyType: "code39extended", displayText: true, quietZone: {all:30} });
|
||||
barcodeCtrl = $("#barcode").data("ejBarcode");
|
||||
});
|
||||
|
||||
function onUpdateBarcode() {
|
||||
$("#barcode").ejBarcode("option", "text", textBox.value);
|
||||
}
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
$("#btn1").ejButton({
|
||||
width: 200
|
||||
});
|
||||
</script>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.frame
|
||||
{
|
||||
width: inherit;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../scripts/excanvas.min.js" type="text/javascript"></script>
|
||||
<title>Essential JS 1 : Barcode - Code 93</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<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="barcode" class="frame"></div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-3 aligntop" style="width: 40px">
|
||||
Text
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<input type="text" class="e-text" style="width:150px" id="textBox" value="SYNCFUSION" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<input type="button" class="e-button" style="width:200px" id="btn1" value="Update" onclick="onUpdateBarcode()" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var barcodeCtrl;
|
||||
$(function () {
|
||||
$("#barcode").ejBarcode({ text: "SYNCFUSION", symbologyType: "code93", displayText: true, quietZone: {all:30} });
|
||||
barcodeCtrl = $("#barcode").data("ejBarcode");
|
||||
});
|
||||
|
||||
function onUpdateBarcode() {
|
||||
$("#barcode").ejBarcode("option", "text", textBox.value);
|
||||
}
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
$("#btn1").ejButton({
|
||||
width: 200
|
||||
});
|
||||
</script>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.frame
|
||||
{
|
||||
width: inherit;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../scripts/excanvas.min.js" type="text/javascript"></script>
|
||||
<title>Essential JS 1 : Barcode - Code 93 Extended</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<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="barcode" class="frame"></div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-3 aligntop" style="width: 40px">
|
||||
Text
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<input type="text" class="e-text" style="width:150px" id="textBox" value="SYNCFUSION" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<input type="button" class="e-button" style="width:200px" id="btn1" value="Update" onclick="onUpdateBarcode()" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var barcodeCtrl;
|
||||
$(function () {
|
||||
$("#barcode").ejBarcode({ text: "SYNCFUSION", symbologyType: "code93extended", displayText: true, quietZone: {all:30} });
|
||||
barcodeCtrl = $("#barcode").data("ejBarcode");
|
||||
});
|
||||
|
||||
function onUpdateBarcode() {
|
||||
$("#barcode").ejBarcode("option", "text", textBox.value);
|
||||
}
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
$("#btn1").ejButton({
|
||||
width: 200
|
||||
});
|
||||
</script>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.frame
|
||||
{
|
||||
width: inherit;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../scripts/excanvas.min.js" type="text/javascript"></script>
|
||||
<title>Essential JS 1 : Barcode - DataMatrix</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<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="barcode" class="frame"></div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-3 aligntop" style="width: 40px">
|
||||
Text
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<input type="text" class="e-text" style="width:150px" id="textBox" value="SYNCFUSION" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<input type="button" class="e-button" style="width:200px" id="btn1" value="Update" onclick="onUpdateBarcode()" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var barcodeCtrl;
|
||||
$(function () {
|
||||
$("#barcode").ejBarcode({ text: "SYNCFUSION", symbologyType: "datamatrix", xDimension: 8 });
|
||||
barcodeCtrl = $("#barcode").data("ejBarcode");
|
||||
});
|
||||
|
||||
function onUpdateBarcode() {
|
||||
$("#barcode").ejBarcode("option", "text", textBox.value);
|
||||
}
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
$("#btn1").ejButton({
|
||||
width: 200
|
||||
});
|
||||
</script>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.frame
|
||||
{
|
||||
width: inherit;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../scripts/excanvas.min.js" type="text/javascript"></script>
|
||||
<title>Essential JS 1 : Barcode - QR Barcode</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<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="barcode" class="frame"></div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-3 aligntop" style="width:40px">
|
||||
Text
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<input type="text" class="e-text" style="width:150px" id="textBox" value="HTTP://WWW.SYNCFUSION.COM"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<input type="button" class="e-button" style="width:200px" id="btn1" value="Update" onclick="onUpdateBarcode()" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var barcodeCtrl;
|
||||
$(function () {
|
||||
$("#barcode").ejBarcode({ text: "HTTP://WWW.SYNCFUSION.COM", symbologyType: "qrbarcode", xDimension: 8, displayText: true, });
|
||||
barcodeCtrl = $("#barcode").data("ejBarcode");
|
||||
});
|
||||
|
||||
function onUpdateBarcode() {
|
||||
$("#barcode").ejBarcode("option", "text", textBox.value);
|
||||
}
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
$("#btn1").ejButton({
|
||||
width:200
|
||||
});
|
||||
</script>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.frame
|
||||
{
|
||||
width: inherit;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../scripts/excanvas.min.js" type="text/javascript"></script>
|
||||
<title>Essential JS 1 : Barcode - EAN13</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<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="barcode" class="frame"></div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-3 aligntop" style="width: 40px">
|
||||
Text
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<input type="text" class="e-text" style="width:150px" id="textBox" value="012345678912" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3" >
|
||||
<input type="button" class="e-button" style="width:200px" id="btn1" value="Update" onclick="onUpdateBarcode()" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var barcodeCtrl;
|
||||
$(function () {
|
||||
$("#barcode").ejBarcode({ text: "012345678912", symbologyType: "ean", displayText: true, quietZone: {all:30} });
|
||||
barcodeCtrl = $("#barcode").data("ejBarcode");
|
||||
});
|
||||
|
||||
function onUpdateBarcode() {
|
||||
$("#barcode").ejBarcode({ text: textBox.value });
|
||||
}
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
$("#btn1").ejButton({
|
||||
width: 200
|
||||
});
|
||||
</script>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.frame
|
||||
{
|
||||
width: inherit;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../scripts/excanvas.min.js" type="text/javascript"></script>
|
||||
<title>Essential JS 1 : Barcode - EAN8</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<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="barcode" class="frame"></div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-3 aligntop" style="width: 40px">
|
||||
Text
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<input type="text" class="e-text" style="width:150px" id="textBox" value="1234567" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3" >
|
||||
<input type="button" class="e-button" style="width:200px" id="btn1" value="Update" onclick="onUpdateBarcode()" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var barcodeCtrl;
|
||||
$(function () {
|
||||
$("#barcode").ejBarcode({ text: "1234567", symbologyType: "ean", displayText: true, quietZone: {all:30} });
|
||||
barcodeCtrl = $("#barcode").data("ejBarcode");
|
||||
});
|
||||
|
||||
function onUpdateBarcode() {
|
||||
$("#barcode").ejBarcode({text: textBox.value});
|
||||
}
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
$("#btn1").ejButton({
|
||||
width: 200
|
||||
});
|
||||
</script>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.frame
|
||||
{
|
||||
width: inherit;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../scripts/excanvas.min.js" type="text/javascript"></script>
|
||||
<title>Essential JS 1 : Barcode - QR Barcode</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<script src="../scripts/knockout.min.js"></script>
|
||||
<script src="../scripts/ej.web.all.min.js" type="text/javascript"></script>
|
||||
<script src="../scripts/ej.widget.ko.min.js"></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="barcode" class="frame" data-bind="ejBarcode:({ text:sampletext, symbologytype: 'qrbarcode'})"></div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<br/><br/><br/>
|
||||
Text<input type="text" style="width:150px;margin-left:15px" id="textBox" data-bind="value:sampletext ,valueUpdate: 'keyup'"/>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
window.viewModel = {
|
||||
sampletext: ko.observable("syncfusion")
|
||||
};
|
||||
|
||||
$(function () {
|
||||
ko.applyBindings(viewModel);
|
||||
});
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
</script>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.frame
|
||||
{
|
||||
width: inherit;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="../scripts/excanvas.min.js" type="text/javascript"></script>
|
||||
<title>Essential JS 1 : Barcode - UpcBarcode</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<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="barcode" class="frame"></div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-3 aligntop" style="width: 40px">
|
||||
Text
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<input type="text" class="e-text" style="width:150px" id="textBox" value="01234567890" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3" >
|
||||
<input type="button" class="e-button" style="width:200px" id="btn1" value="Update" onclick="onUpdateBarcode()" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var barcodeCtrl;
|
||||
$(function () {
|
||||
$("#barcode").ejBarcode({ text: "01234567890", symbologyType: "upcbarcode", displayText: true, quietZone: {all:30} });
|
||||
barcodeCtrl = $("#barcode").data("ejBarcode");
|
||||
});
|
||||
|
||||
function onUpdateBarcode() {
|
||||
$("#barcode").ejBarcode("option", "text", textBox.value);
|
||||
}
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
$("#btn1").ejButton({
|
||||
width: 200
|
||||
});
|
||||
</script>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.frame
|
||||
{
|
||||
width: inherit;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,419 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Essential JS 1 : Bullet Graph Options</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<script src="../scripts/jsrender.min.js" type="text/javascript"></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" align="center">
|
||||
<div id="BulletGraph1">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Label Prefix
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<input type="text" id="labelprefix" autocomplete="off" onchange="AddPrefix(this)" style="width:100px; height:22px;" value="" />
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Label Suffix
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<input type="text" id="labelsuffix" autocomplete="off" onchange="AddSuffix(this)" style="width:100px; height:22px;" value="" />
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Range Stroke to Ticks
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<input type="checkbox" id="chkStrokeToTicks" class="e-chkbox" value="StrokeToTicks" />
|
||||
</div>
|
||||
|
||||
<div class="col-md-3">
|
||||
Range Stroke to Labels
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<input type="checkbox" id="chkStrokeToLabels" class="e-chkbox" value="StrokeToLabels" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Enable Animation
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<input type="checkbox" id="chkEnableAnimation" class="e-chkbox" value="EnableAnimation" />
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Featured Measure
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<div id="featureMeasuresValue"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Comparative Measure
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<div id="comparativeMeasureValue"></div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Range1 Stroke
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<input type="text" id="range1Stroke" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Range2 Stroke
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<input type="text" id="range2Stroke" />
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Range3 Stroke
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<input type="text" id="range3Stroke" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Orientation
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<input type="text" id="orientation" />
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Flow Direction
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<input type="text" id="flowDirection" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
MajorTick Stroke
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<input type="text" id="majorTickStroke" />
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
MinorTick Stroke
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<input type="text" id="minorTickStroke" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
FeatureMeasures Stroke
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<input type="text" id="featureMeasuresStroke" />
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Comparative Symbol Stroke
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<input type="text" id="comparativeSymbolStroke" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
$("#featureMeasuresValue").ejSlider({
|
||||
sliderType: ej.SliderType.MinRange,
|
||||
value: 8,
|
||||
height: 10,
|
||||
minValue: 1,
|
||||
maxValue: 9,
|
||||
width: 110,
|
||||
enableAnimation: true,
|
||||
slide: "onValuechange",
|
||||
change: "onValuechange"
|
||||
});
|
||||
|
||||
$("#comparativeMeasureValue").ejSlider({
|
||||
sliderType: ej.SliderType.MinRange,
|
||||
value: 6.7,
|
||||
height: 10,
|
||||
minValue: 1,
|
||||
maxValue: 9,
|
||||
width: 110,
|
||||
enableAnimation: true,
|
||||
slide: "onValuechange",
|
||||
change: "onValuechange"
|
||||
});
|
||||
|
||||
$("#chkStrokeToTicks").ejCheckBox({ "change": "onTickStroke" });
|
||||
$("#chkStrokeToLabels").ejCheckBox({ "change": "onLabelStroke" });
|
||||
$("#chkEnableAnimation").ejCheckBox({ "change": "onAnimateClick", checked: true });
|
||||
|
||||
$('#range1Stroke').ejDropDownList({
|
||||
dataSource: ["--Select--", "red", "yellow", "green"],
|
||||
select: "onRangeStroke1change", width: "110px", selectedItemIndex: 0, height: "22px"
|
||||
});
|
||||
|
||||
$('#range2Stroke').ejDropDownList({
|
||||
dataSource: ["--Select--", "red", "yellow", "green"],
|
||||
select: "onRangeStroke2change", width: "110px", selectedItemIndex: 0, height: "22px"
|
||||
});
|
||||
|
||||
$('#range3Stroke').ejDropDownList({
|
||||
dataSource: ["--Select--", "red", "yellow", "green"],
|
||||
select: "onRangeStroke3change", width: "110px", selectedItemIndex: 0, height: "22px"
|
||||
});
|
||||
|
||||
$('#orientation').ejDropDownList({
|
||||
dataSource: ["horizontal", "vertical"],
|
||||
select: "onOrientationchange", selectedItemIndex: 0, width: "110px", height: "22px"
|
||||
});
|
||||
|
||||
$('#flowDirection').ejDropDownList({
|
||||
dataSource: ["forward", "backward"],
|
||||
select: "onFlowDirectionchange", selectedItemIndex: 0, width: "110px", height: "22px"
|
||||
});
|
||||
|
||||
$('#majorTickStroke').ejDropDownList({
|
||||
dataSource: ["--Select--", "red", "yellow", "green"],
|
||||
select: "onMajorTickchange", width: "110px", selectedItemIndex: 0, height: "22px"
|
||||
});
|
||||
|
||||
$('#minorTickStroke').ejDropDownList({
|
||||
dataSource: ["--Select--", "red", "yellow", "green"],
|
||||
select: "onMinorTickchange", width: "110px", selectedItemIndex: 0, height: "22px"
|
||||
});
|
||||
|
||||
$('#featureMeasuresStroke').ejDropDownList({
|
||||
dataSource: ["--Select--", "red", "yellow", "green"],
|
||||
select: "onFeaturebarchange", width: "110px", selectedItemIndex: 0, height: "22px"
|
||||
});
|
||||
|
||||
$('#comparativeSymbolStroke').ejDropDownList({
|
||||
dataSource: ["--Select--", "red", "yellow", "green"],
|
||||
select: "onComparativechange", width: "110px", selectedItemIndex: 0, height: "22px"
|
||||
});
|
||||
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
});
|
||||
|
||||
$(document).ready(function () {
|
||||
orienttarg = $("#orientation").data("ejDropDownList");
|
||||
orienttarg.option({selectedItemByIndex:0});
|
||||
|
||||
flowDirect = $("#flowDirection").data("ejDropDownList");
|
||||
flowDirect.option({selectedItemByIndex:0});
|
||||
});
|
||||
|
||||
function AddPrefix(sender) {
|
||||
$("#BulletGraph1").ejBulletGraph("option", "quantitativeScaleSettings.labelSettings", { labelPrefix: sender.value });
|
||||
}
|
||||
|
||||
function AddSuffix(sender) {
|
||||
$("#BulletGraph1").ejBulletGraph("option", "quantitativeScaleSettings.labelSettings", { labelSuffix: sender.value });
|
||||
}
|
||||
|
||||
function onTickStroke(args) {
|
||||
if (args.isChecked)
|
||||
$("#BulletGraph1").ejBulletGraph("option", "applyRangeStrokeToTicks", true);
|
||||
else
|
||||
$("#BulletGraph1").ejBulletGraph("option", "applyRangeStrokeToTicks", false);
|
||||
};
|
||||
|
||||
function onLabelStroke(args) {
|
||||
if (args.isChecked)
|
||||
$("#BulletGraph1").ejBulletGraph("option", "applyRangeStrokeToLabels", true);
|
||||
else
|
||||
$("#BulletGraph1").ejBulletGraph("option", "applyRangeStrokeToLabels", false);
|
||||
}
|
||||
|
||||
function onAnimateClick(args) {
|
||||
if (args.isChecked)
|
||||
$("#BulletGraph1").ejBulletGraph("option", "enableAnimation", true);
|
||||
else
|
||||
$("#BulletGraph1").ejBulletGraph("option", "enableAnimation", false);
|
||||
}
|
||||
|
||||
function onValuechange(args) {
|
||||
var dat = $("#BulletGraph1").data("ejBulletGraph");
|
||||
if (dat) {
|
||||
if (args.id == "featureMeasuresValue")
|
||||
dat.setFeatureMeasureBarValue(0, args.value);
|
||||
else if (args.id == "comparativeMeasureValue")
|
||||
dat.setComparativeMeasureSymbol(0, args.value);
|
||||
}
|
||||
}
|
||||
|
||||
function onRangeStroke1change(args) {
|
||||
if (args.itemId != 0)
|
||||
$("#BulletGraph1").ejBulletGraph("option", "qualitativeRanges", [{ rangeStroke: args.text }]);
|
||||
}
|
||||
|
||||
function onRangeStroke2change(args) {
|
||||
if (args.itemId != 0)
|
||||
$("#BulletGraph1").ejBulletGraph("option", "qualitativeRanges", [{},{ rangeStroke: args.text }]);
|
||||
}
|
||||
|
||||
function onRangeStroke3change(args) {
|
||||
if (args.itemId != 0)
|
||||
$("#BulletGraph1").ejBulletGraph("option", "qualitativeRanges", [{}, {}, { rangeStroke: args.text }]);
|
||||
}
|
||||
|
||||
function onMajorTickchange(args) {
|
||||
if (args.itemId != 0)
|
||||
$("#BulletGraph1").ejBulletGraph("option", "quantitativeScaleSettings.majorTickSettings", { stroke: args.text });
|
||||
}
|
||||
|
||||
function onMinorTickchange(args) {
|
||||
if (args.itemId != 0)
|
||||
$("#BulletGraph1").ejBulletGraph("option", "quantitativeScaleSettings.minorTickSettings", { stroke: args.text });
|
||||
}
|
||||
|
||||
function onFeaturebarchange(args) {
|
||||
if (args.itemId != 0)
|
||||
$("#BulletGraph1").ejBulletGraph("option", "quantitativeScaleSettings.featuredMeasureSettings", { stroke: args.text });
|
||||
}
|
||||
|
||||
function onComparativechange(args) {
|
||||
if (args.itemId != 0)
|
||||
$("#BulletGraph1").ejBulletGraph("option", "quantitativeScaleSettings.comparativeMeasureSettings", { stroke: args.text });
|
||||
}
|
||||
|
||||
function onOrientationchange(args) {
|
||||
var dat = $("#BulletGraph1").data("ejBulletGraph");
|
||||
if (dat) {
|
||||
$("#BulletGraph1").ejBulletGraph("option", "orientation", args.text);
|
||||
}
|
||||
}
|
||||
|
||||
function onFlowDirectionchange(args) {
|
||||
var dat = $("#BulletGraph1").data("ejBulletGraph");
|
||||
if (dat)
|
||||
$("#BulletGraph1").ejBulletGraph("option", "flowDirection", args.text);
|
||||
}
|
||||
|
||||
$(function () {
|
||||
|
||||
$("#BulletGraph1").ejBulletGraph({
|
||||
qualitativeRangeSize: 32, load: "loadBulletTheme", height: 600, width: 600,
|
||||
quantitativeScaleLength: 475, tooltipSettings: {template: "Tooltip", visible: true}, orientation: ej.datavisualization.BulletGraph.Orientation.Horizontal,
|
||||
flowDirection: ej.datavisualization.BulletGraph.FlowDirection.Forward,
|
||||
quantitativeScaleSettings: {
|
||||
location: { x: 100, y: 200 },
|
||||
minimum: 0,
|
||||
maximum: 10,
|
||||
interval: 1,
|
||||
minorTicksPerInterval: 4,
|
||||
majorTickSettings:{
|
||||
size: 13,
|
||||
width: 1,
|
||||
stroke: 'gray'
|
||||
},
|
||||
minorTickSettings:{
|
||||
size: 5,
|
||||
width: 1,
|
||||
stroke: 'gray'
|
||||
},
|
||||
tickPosition: ej.datavisualization.BulletGraph.TickPosition.Far,
|
||||
labelSettings: {
|
||||
position: ej.datavisualization.BulletGraph.LabelPosition.Below, offset: 14, size: 10
|
||||
},
|
||||
featuredMeasureSettings: { width: 5 },
|
||||
comparativeMeasureSettings:{
|
||||
width: 5
|
||||
},
|
||||
featureMeasures: [{ value: 8, comparativeMeasureValue: 6.7, category: ""}]
|
||||
},
|
||||
qualitativeRanges: [{
|
||||
rangeEnd: 4.3
|
||||
}, {
|
||||
rangeEnd: 7.3
|
||||
}, {
|
||||
rangeEnd: 10
|
||||
}],
|
||||
captionSettings: {
|
||||
textPosition: 'left', textAlignment: 'center', padding:5, text: "Revenue YTD", font: { color: null, fontFamily: 'Segoe UI', fontStyle: ej.datavisualization.BulletGraph.FontStyle.Normal, size: '12px', fontWeight: ej.datavisualization.BulletGraph.FontWeight.Normal, opacity: 1 }, //'#707070'
|
||||
subTitle: {
|
||||
text: "$ in Thousands", textPosition: 'left', textAlignment:'center', padding:5, font: { color: null, fontFamily: 'Segoe UI', fontStyle: ej.datavisualization.BulletGraph.FontStyle.Normal, size: '12px', fontWeight: ej.datavisualization.BulletGraph.FontWeight.Normal, opacity: 1 } //'#707070'
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<div id="Tooltip" style="display:none; width:125px;padding-top: 10px;padding-bottom:10px">
|
||||
|
||||
<div align="center" style="font-weight:bold">
|
||||
Sales
|
||||
</div>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
Current
|
||||
</td>
|
||||
<td>
|
||||
: {{:currentValue}}
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Target
|
||||
</td>
|
||||
<td>
|
||||
: {{:targetValue}}
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
|
||||
</table>
|
||||
|
||||
|
||||
</div>
|
||||
<style>
|
||||
.aligntop .e-ddl .e-input {
|
||||
line-height:20px;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,186 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Essential JS 1 : Bullet Graph - Default Functionalities</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<script src="../scripts/jsrender.min.js" type="text/javascript"></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="BulletGraph1"></div>
|
||||
</div>
|
||||
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Direction
|
||||
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<select autocomplete="off" onchange="BulletFlow(this)">
|
||||
<option value="forward">Forward</option>
|
||||
<option value="backward">Backward</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Orientation
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<select autocomplete="off" onchange="BulletOrientation(this)">
|
||||
<option value="horizontal">Horizontal</option>
|
||||
<option value="vertical">Vertical</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Tick Position
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<select autocomplete="off" onchange="BulletTickPos(this)">
|
||||
<option value="far">Far</option>
|
||||
<option value="center">Center</option>
|
||||
<option value="near">Near</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Tick Placement
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<select autocomplete="off" onchange="BulletTickPlacement(this)">
|
||||
<option value="outside">Outside</option>
|
||||
<option value="inside">Inside</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Label Position
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<select autocomplete="off" onchange="BulletLabelPosition(this)">
|
||||
<option value="below">Below</option>
|
||||
<option value="above">Above</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Label Placement
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<select autocomplete="off" onchange="BulletLabelPlacement(this)">
|
||||
<option value="outside">Outside</option>
|
||||
<option value="inside">Inside</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Label Offset
|
||||
</div>
|
||||
<div class="col-md-3" style="height:15px">
|
||||
<div id="slider"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
|
||||
function BulletTickPos(sender) {
|
||||
$("#BulletGraph1").ejBulletGraph(
|
||||
'option', 'quantitativeScaleSettings.tickPosition', sender.value
|
||||
);
|
||||
}
|
||||
|
||||
function BulletLabelPlacement(sender) {
|
||||
$("#BulletGraph1").ejBulletGraph(
|
||||
'option', 'quantitativeScaleSettings.labelSettings.labelPlacement', sender.value
|
||||
);
|
||||
}
|
||||
|
||||
function BulletTickPlacement(sender) {
|
||||
$("#BulletGraph1").ejBulletGraph(
|
||||
'option', 'quantitativeScaleSettings.tickPlacement', sender.value
|
||||
);
|
||||
}
|
||||
|
||||
function BulletLabelPosition(sender) {
|
||||
$("#BulletGraph1").ejBulletGraph(
|
||||
'option', 'quantitativeScaleSettings.labelSettings.position', sender.value
|
||||
);
|
||||
}
|
||||
|
||||
function BulletLabelOffset(sender) {
|
||||
$("#BulletGraph1").ejBulletGraph(
|
||||
'option', 'quantitativeScaleSettings.labelSettings.offset', parseFloat(sender.value)
|
||||
);
|
||||
}
|
||||
|
||||
function BulletFlow(sender) {
|
||||
$("#BulletGraph1").ejBulletGraph(
|
||||
'option', 'flowDirection', sender.value
|
||||
);
|
||||
}
|
||||
|
||||
function BulletOrientation(sender) {
|
||||
$("#BulletGraph1").ejBulletGraph(
|
||||
'option', 'orientation', sender.value
|
||||
);
|
||||
}
|
||||
|
||||
$(function () {
|
||||
$("#BulletGraph1").ejBulletGraph({
|
||||
load: "loadBulletTheme",
|
||||
value: 8,
|
||||
comparativeMeasureValue: 5,
|
||||
width: 650,
|
||||
height: 650,
|
||||
qualitativeRangeSize: 50,
|
||||
quantitativeScaleSettings: {
|
||||
location: { x: 108, y: 150 },
|
||||
labelSettings: { offset: 14, size: 10, labelPrefix: '$', labelSuffix: ' K' },
|
||||
majorTickSettings: { size: 13, width: 1, stroke: 'gray' },
|
||||
minorTickSettings: { size: 5, width: 1, stroke: 'gray' },
|
||||
},
|
||||
captionSettings: {
|
||||
textAngle: 0, location: { x: 17, y: 168 }, text: "Revenue YTD",
|
||||
subTitle: {
|
||||
textAngle: 0,
|
||||
text: "$ in Thousands", location: { x: 10, y: 182 }
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$("#slider").ejSlider({
|
||||
sliderType: ej.SliderType.MinRange,
|
||||
height: 10,
|
||||
width: 110,
|
||||
minValue: -85,
|
||||
maxValue: 25,
|
||||
change: "BulletLabelOffset",
|
||||
value:10
|
||||
});
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Essential JS 1 : Bullet Graph - Default Functionalities</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<script src="../scripts/jsrender.min.js" type="text/javascript"></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" align="center">
|
||||
<div id="BulletGraph1">
|
||||
</div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Symbol shape
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<select style="max-width:90%" autocomplete="off" id="symShape" onchange="ChangeBulletSymbol(this)">
|
||||
<option value="circle">Circle</option>
|
||||
<option value="uparrow">Up Arrow</option>
|
||||
<option value="downarrow">Down Arrow</option>
|
||||
<option value="leftarrow">Left Arrow</option>
|
||||
<option value="rightarrow">Right Arrow</option>
|
||||
<option value="cross">Cross</option>
|
||||
<option value="horizontalline">Horizontal Line</option>
|
||||
<option value="verticalline">VerticalLine</option>
|
||||
<option value="triangle" selected="selected">Triangle</option>
|
||||
<option value="invertedtriangle">Inverted Triangle</option>
|
||||
<option value="hexagon">Hexagon</option>
|
||||
<option value="wedge">Wedge</option>
|
||||
<option value="pentagon">Pentagon</option>
|
||||
<option value="star">Star</option>
|
||||
<option value="rectangle">Rectangle</option>
|
||||
<option value="trapezoid">Trapezoid</option>
|
||||
<option value="diamond">Diamond</option>
|
||||
<option value="ellipse">Ellipse</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
$("#BulletGraph1").ejBulletGraph({
|
||||
load: "loadBulletTheme",
|
||||
qualitativeRangeSize: 32,
|
||||
quantitativeScaleLength: 475,
|
||||
height:400,
|
||||
quantitativeScaleSettings: {
|
||||
location: { x: 108, y: 150 },
|
||||
minimum: 0,
|
||||
maximum: 10,
|
||||
interval: 1,
|
||||
majorTickSettings:{ size: 13, width: 1, stroke: 'gray'},
|
||||
minorTickSettings: { size: 5, width: 1, stroke: 'gray' },
|
||||
labelSettings: { offset: 14, size: 10, labelPrefix: '$ ', labelSuffix: 'K' },
|
||||
featuredMeasureSettings: { width: 6 },
|
||||
comparativeMeasureSettings:{ width: 5 },
|
||||
featureMeasures: [{ value: 8, comparativeMeasureValue: 6.7}]
|
||||
},
|
||||
qualitativeRanges: [{ rangeEnd: 4.3 }, { rangeEnd: 7.3 }, {rangeEnd: 10 }],
|
||||
captionSettings: {
|
||||
textAngle: 0, location: { x: 17, y: 160 }, text: "Revenue YTD",
|
||||
subTitle: { textAngle: 0,
|
||||
text: "$ in Thousands", location: { x: 10, y: 175 }
|
||||
},
|
||||
indicator: {
|
||||
visible: true, textSpacing: 8, text: " $ 1.3 K ", location: { x: 15, y: 195 }, font: { color: 'green', fontFamily: 'Segoe UI', fontSize: '13px', fontWeight: 'bold'},
|
||||
symbol: { size: { width: 10, height: 10 }, shape: 'triangle', color: 'green'}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
});
|
||||
|
||||
function ChangeBulletSymbol(sender) {
|
||||
$("#BulletGraph1").ejBulletGraph("option", "captionSettings.indicator.symbol", { shape: sender.value });
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Essential JS 1 : Bullet Graph - Knockout</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet"/>
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<script src="../scripts/knockout.min.js"></script>
|
||||
<script src="../scripts/ej.web.all.min.js" type="text/javascript"></script>
|
||||
<script src="../scripts/ej.unobtrusive.min.js"></script>
|
||||
<script src="../scripts/properties.js" type="text/javascript"></script>
|
||||
<script src="../scripts/ej.widget.ko.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area" align="center">
|
||||
<div id="bulletCore" data-bind="ejBulletGraph: ({ height: bulletHeight, width: bulletWidth, value: samplevalue, comparativeMeasureValue: measurevalues, load: loadTheme })"></div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Value
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<div id="rangeSlider" data-bind="ejSlider: {value:samplevalue, maxValue:maximumValue,height:10,width:110,minValue:0,sliderType: ej.SliderType.MinRange}"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Comparitive Measure Value
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<div id="rangeSlider1" data-bind="ejSlider: {value:measurevalues, maxValue:maximumValue, height:10,width:110,minValue:0,sliderType: ej.SliderType.MinRange}"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
window.viewModel = {
|
||||
|
||||
maximumValue: ko.observable(10),
|
||||
samplevalue: ko.observable(7),
|
||||
measurevalues: ko.observable(5),
|
||||
loadTheme: ko.observable('loadBulletTheme'),
|
||||
bulletWidth: ko.observable(500),
|
||||
bulletHeight: ko.observable(400)
|
||||
};
|
||||
$(function () {
|
||||
ko.applyBindings(viewModel);
|
||||
$("#bulletCore").ejBulletGraph("option", "quantitativeScaleSettings", { location: { x: 20, y: 150 }, majorTickSettings: { width: 1, size: 13, stroke: 'gray' }, minorTickSettings: { width: 1, size: 5, stroke: 'gray' }, labelSettings: { offset: 14, size: 10 } });
|
||||
});
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
</script>
|
||||
<style>
|
||||
.col-md-3 .e-ddl .e-input {
|
||||
line-height: 20px;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Essential JS 1 : Bullet Graph - Local Data Binding</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<script src="../scripts/jsrender.min.js" type="text/javascript"></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" align="center">
|
||||
<div id="BulletGraph">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
var localData = [
|
||||
{
|
||||
value: 9.5, comparativeMeasureValue: 7.5,
|
||||
category: 2001
|
||||
},
|
||||
{
|
||||
value: 9.5, comparativeMeasureValue: 5,
|
||||
category: 2002
|
||||
},
|
||||
{
|
||||
value: 9.5, comparativeMeasureValue: 6,
|
||||
category: 2003
|
||||
},
|
||||
{
|
||||
value: 9.5, comparativeMeasureValue: 8,
|
||||
category: 2004
|
||||
},
|
||||
{
|
||||
value: 9.5, comparativeMeasureValue: 5,
|
||||
category: 2005
|
||||
},
|
||||
{
|
||||
value: 9.5, comparativeMeasureValue: 6,
|
||||
category: 2006
|
||||
}];
|
||||
|
||||
$("#BulletGraph").ejBulletGraph({
|
||||
height: 400, enableAnimation: true, qualitativeRangeSize: 320, load: "loadBulletTheme",
|
||||
quantitativeScaleLength: 475, tooltipSettings: {template: "Tooltip", visible: true}, orientation: ej.datavisualization.BulletGraph.Orientation.Horizontal,
|
||||
flowDirection: ej.datavisualization.BulletGraph.FlowDirection.Forward,
|
||||
quantitativeScaleSettings: {
|
||||
location: { x: 110, y: 25 },
|
||||
minimum: 0,
|
||||
maximum: 10,
|
||||
interval: 1,
|
||||
minorTicksPerInterval: 4,
|
||||
majorTickSettings:{width:1, size: 13, stroke: 'gray'},
|
||||
minorTickSettings: { width: 1, size: 5, stroke: 'gray' },
|
||||
labelSettings: { offset: 14, size: 10 }
|
||||
},
|
||||
enableAnimation: true,
|
||||
fields: {
|
||||
dataSource: localData, category: "category",
|
||||
featureMeasures: "value",
|
||||
comparativeMeasure: "comparativeMeasureValue"
|
||||
},
|
||||
qualitativeRanges: [{
|
||||
rangeEnd: 4.3
|
||||
}, {
|
||||
rangeEnd: 7.3
|
||||
}, {
|
||||
rangeEnd: 10
|
||||
}],
|
||||
captionSettings: {
|
||||
textAngle: -90,
|
||||
location: { x: 40, y: 210 }, text: "Revenue YTD", font: { color: null, fontFamily: 'Segoe UI', fontStyle: 'Normal', size: '12px', fontWeight: 'regular', opacity: 1 }, //'#707070'
|
||||
subTitle: {
|
||||
textAngle: -90,
|
||||
text: "$ in Thousands", location: { x: 55, y: 210 }, font: { color: null, fontFamily: 'Segoe UI', fontStyle: 'Normal ', size: '12px', fontWeight: 'regular', opacity: 1 } //'#707070'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<div id="Tooltip" style="display:none; width:125px;padding-top: 10px;padding-bottom:10px">
|
||||
|
||||
<div align="center" style="font-weight:bold">
|
||||
Sales
|
||||
</div>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
Current
|
||||
</td>
|
||||
<td>
|
||||
: {{:currentValue}}
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Target
|
||||
</td>
|
||||
<td>
|
||||
: {{:targetValue}}
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Year
|
||||
</td>
|
||||
<td >
|
||||
: {{:category}}
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Essential JS 1 : Bullet Graph - Remote Data binding</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<script src="../scripts/jsrender.min.js" type="text/javascript"></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" align="center">
|
||||
<div id="BulletGraph">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
var dataManger = new ej.DataManager({
|
||||
url: window.baseurl + "Wcf/Northwind.svc/", crossDomain: true
|
||||
});
|
||||
|
||||
// Query creation
|
||||
var query = ej.Query().from("Products").take(10).where("UnitPrice", ej.FilterOperators.greaterThan, 18, false).where("UnitPrice", ej.FilterOperators.lessThanOrEqual, 40, false).where("UnitsInStock", ej.FilterOperators.greaterThan, 5, false).where("UnitsInStock",ej.FilterOperators.lessThanOrEqual,45,false);
|
||||
|
||||
$("#BulletGraph").ejBulletGraph({
|
||||
height: 540, enableAnimation: true, qualitativeRangeSize: 320, load: "loadBulletTheme",
|
||||
quantitativeScaleLength: 475, tooltipSettings: {template: "Tooltip", visible: true}, orientation: ej.datavisualization.BulletGraph.Orientation.Vertical,
|
||||
flowDirection: ej.datavisualization.BulletGraph.FlowDirection.Backward,
|
||||
fields: {
|
||||
dataSource: dataManger, query: query, category: "ProductID",
|
||||
featureMeasures: "UnitPrice",
|
||||
comparativeMeasure: "UnitsInStock"
|
||||
},
|
||||
quantitativeScaleSettings: {
|
||||
location: { x: 50, y: 60 },
|
||||
minimum: 5,
|
||||
maximum: 45,
|
||||
interval: 10,
|
||||
minorTicksPerInterval: 4,
|
||||
tickPosition: ej.datavisualization.BulletGraph.TickPosition.Near,
|
||||
majorTickSettings: { width: 1, size: 13, stroke: 'gray' },
|
||||
minorTickSettings: { width: 1, size: 5, stroke: 'gray' },
|
||||
labelSettings: {
|
||||
position: ej.datavisualization.BulletGraph.LabelPosition.Above, offset: 15, size: 10
|
||||
}
|
||||
},
|
||||
enableAnimation: true,
|
||||
qualitativeRanges: [{
|
||||
rangeEnd: 25
|
||||
}, {
|
||||
rangeEnd: 37
|
||||
}, {
|
||||
rangeEnd: 45
|
||||
}],
|
||||
captionSettings: {
|
||||
textAngle: 270,
|
||||
location: { x: 15, y: 290 }, text: "Product (with ID's)", font: { color: null, fontFamily: 'Segoe UI', fontStyle: 'Normal', size: '12px', fontWeight: 'regular', opacity: 1 }, //'#707070'
|
||||
subTitle: {
|
||||
textAngle: 0,
|
||||
text: "Production in Units", location: { x: 170, y: 540 }, font: { color: null, fontFamily: 'Segoe UI', fontStyle: 'Normal ', size: '12px', fontWeight: 'regular', opacity: 1 } //'#707070'
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<div id="Tooltip" style="display:none; width:125px;padding-top: 10px;padding-bottom:10px">
|
||||
|
||||
<div align="center" style="font-weight:bold">
|
||||
Production
|
||||
</div>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
Production level
|
||||
</td>
|
||||
<td>
|
||||
: {{:currentValue}}
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Estimated level
|
||||
</td>
|
||||
<td>
|
||||
: {{:targetValue}}
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Product ID
|
||||
</td>
|
||||
<td >
|
||||
: {{:category}}
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,220 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Essential JS 1 : Bullet Graph - Default Functionalities</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<script src="../scripts/jsrender.min.js" type="text/javascript"></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" align="center">
|
||||
<div id="BulletGraph1">
|
||||
</div>
|
||||
<div id="BulletGraph2">
|
||||
</div>
|
||||
<div id="BulletGraph3"></div>
|
||||
<div id="BulletGraph4"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
$("#BulletGraph1").ejBulletGraph({
|
||||
qualitativeRangeSize: 32, load: "loadBulletTheme",
|
||||
quantitativeScaleLength: 475, tooltipSettings: {template: "Tooltip", visible: true}, orientation: ej.datavisualization.BulletGraph.Orientation.Horizontal,
|
||||
flowDirection: ej.datavisualization.BulletGraph.FlowDirection.Forward,
|
||||
quantitativeScaleSettings: {
|
||||
location: { x: 110, y: 10 },
|
||||
minimum: 0,
|
||||
maximum: 10,
|
||||
interval: 1,
|
||||
minorTicksPerInterval: 4,
|
||||
majorTickSettings:{ size: 13, width: 1, stroke: 'gray'},
|
||||
minorTickSettings:{ size: 5, width: 1, stroke: 'gray'},
|
||||
tickPosition: ej.datavisualization.BulletGraph.TickPosition.Far,
|
||||
labelSettings: {
|
||||
position: ej.datavisualization.BulletGraph.LabelPosition.Below, offset: 14, size: 10
|
||||
},
|
||||
featuredMeasureSettings: { width: 6 },
|
||||
comparativeMeasureSettings:{
|
||||
width: 5
|
||||
},
|
||||
featureMeasures: [{ value: 8, comparativeMeasureValue: 6.7, category: ""}]
|
||||
},
|
||||
qualitativeRanges: [{
|
||||
rangeEnd: 4.3
|
||||
}, {
|
||||
rangeEnd: 7.3
|
||||
}, {
|
||||
rangeEnd: 10
|
||||
}],
|
||||
captionSettings: { textAngle: 0,
|
||||
location: { x: 17, y: 20 }, text: "Revenue YTD", font: { color: null, fontFamily: 'Segoe UI', fontStyle: ej.datavisualization.BulletGraph.FontStyle.Normal, size: '12px', fontWeight: ej.datavisualization.BulletGraph.FontWeight.Normal, opacity: 1 }, //'#707070'
|
||||
subTitle: { textAngle: 0,
|
||||
text: "$ in Thousands", location: { x: 10, y: 35 }, font: { color: null, fontFamily: 'Segoe UI', fontStyle: ej.datavisualization.BulletGraph.FontStyle.Normal, size: '12px', fontWeight: ej.datavisualization.BulletGraph.FontWeight.Normal, opacity: 1} //'#707070'
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
$("#BulletGraph2").ejBulletGraph({ qualitativeRangeSize: 32, height:140, load: "loadBulletTheme",
|
||||
quantitativeScaleLength: 475, orientation: ej.datavisualization.BulletGraph.Orientation.Horizontal,
|
||||
flowDirection: ej.datavisualization.BulletGraph.FlowDirection.Forward,
|
||||
quantitativeScaleSettings: {
|
||||
location: { x: 110, y: 10 },
|
||||
minimum: -10,
|
||||
maximum: 10,
|
||||
interval: 2,
|
||||
minorTicksPerInterval: 4,
|
||||
majorTickSettings:{ size: 13, width: 1},
|
||||
minorTickSettings:{ size: 5, width: 1},
|
||||
tickPosition: ej.datavisualization.BulletGraph.TickPosition.Far,
|
||||
labelSettings: {
|
||||
position: ej.datavisualization.BulletGraph.LabelPosition.Below, offset: 14, size: 10, labelSuffix: ' %'
|
||||
},
|
||||
featuredMeasureSettings: { width: 6 },
|
||||
comparativeMeasureSettings:{
|
||||
width: 5
|
||||
},
|
||||
featureMeasures: [{ value: 8, comparativeMeasureValue: 6.7}]
|
||||
},
|
||||
qualitativeRanges: [{
|
||||
rangeEnd: -4, rangeStroke: "#61a301"
|
||||
}, {
|
||||
rangeEnd: 3, rangeStroke: "#fcda21"
|
||||
}, {
|
||||
rangeEnd: 10, rangeStroke: "#d61e3f"
|
||||
}],
|
||||
captionSettings: { textAngle: 0,
|
||||
location: { x: 60, y: 25 }, text: "Profit", font: { color: null, fontFamily: 'Segoe UI', fontStyle: ej.datavisualization.BulletGraph.FontStyle.Normal, size: '13px', fontWeight: ej.datavisualization.BulletGraph.FontWeight.Normal, opacity: 1 }, //'#707070'
|
||||
//subTitle: { textAngle: 0,
|
||||
// text: "profit in %", location: { x: 35, y: 35 }, font: { color: null, fontFamily: 'Segoe UI', fontStyle: ej.datavisualization.BulletGraph.FontStyle.Normal, size: '12px', fontWeight: ej.datavisualization.BulletGraph.FontWeight.Normal, opacity: 1} //'#707070'
|
||||
//}
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
$("#BulletGraph3").ejBulletGraph({ qualitativeRangeSize: 32, load: "loadBulletTheme",
|
||||
quantitativeScaleLength: 475, orientation: ej.datavisualization.BulletGraph.Orientation.Horizontal,
|
||||
flowDirection: ej.datavisualization.BulletGraph.FlowDirection.Backward,
|
||||
quantitativeScaleSettings: {
|
||||
location: { x: 105, y: 10 },
|
||||
minimum: -10,
|
||||
maximum: 10,
|
||||
interval: 2,
|
||||
minorTicksPerInterval: 4,
|
||||
majorTickSettings:{ size: 13, width: 1, stroke: 'gray'},
|
||||
minorTickSettings: { size: 5, width: 1, stroke: 'gray' },
|
||||
tickPosition: ej.datavisualization.BulletGraph.TickPosition.Far,
|
||||
labelSettings: {
|
||||
position: ej.datavisualization.BulletGraph.LabelPosition.Below, offset: 14, size: 10, labelSuffix: ' %',
|
||||
},
|
||||
featuredMeasureSettings: { width: 6 },
|
||||
comparativeMeasureSettings:{
|
||||
width: 5
|
||||
},
|
||||
featureMeasures: [{ value: -2, comparativeMeasureValue: -2}]
|
||||
},
|
||||
qualitativeRanges: [{
|
||||
rangeEnd: -4.3
|
||||
}, {
|
||||
rangeEnd: 4.3
|
||||
}, {
|
||||
rangeEnd: 10
|
||||
}],
|
||||
captionSettings: { textAngle: 0,
|
||||
location: { x: 38, y: 25 }, text: "Expenses", font: { color: null, fontFamily: 'Segoe UI', fontStyle: 'Normal', size: '13px', fontWeight: 'regular', opacity: 1 }, //'#707070'
|
||||
//subTitle: { textAngle: 0,
|
||||
// text: "in %", location: { x: 38, y:37 }, font: { color: null, fontFamily: 'Segoe UI', fontStyle: 'Normal ', size: '12px', fontWeight: 'regular', opacity: 1} //'#707070'
|
||||
//}
|
||||
}
|
||||
});
|
||||
|
||||
$("#BulletGraph4").ejBulletGraph({ qualitativeRangeSize: 32, load: "loadBulletTheme",
|
||||
quantitativeScaleLength: 475, tooltipSettings: {template: "Tooltip", visible: true}, orientation: ej.datavisualization.BulletGraph.Orientation.Horizontal,
|
||||
flowDirection: ej.datavisualization.BulletGraph.FlowDirection.Backward,
|
||||
quantitativeScaleSettings: {
|
||||
location: { x: 105, y: 10 },
|
||||
minimum: 0,
|
||||
maximum: 10,
|
||||
interval: 1,
|
||||
minorTicksPerInterval: 4,
|
||||
majorTickSettings:{ size: 13, width: 1},
|
||||
minorTickSettings:{ size: 5, width: 1},
|
||||
tickPosition: ej.datavisualization.BulletGraph.TickPosition.Far,
|
||||
labelSettings: {
|
||||
position: ej.datavisualization.BulletGraph.LabelPosition.Below, offset: 14, size: 10, labelPrefix: '$ ', labelSuffix: 'K'
|
||||
},
|
||||
featuredMeasureSettings: { width: 6 },
|
||||
comparativeMeasureSettings:{
|
||||
width: 5
|
||||
},
|
||||
featureMeasures: [{ value: 8, comparativeMeasureValue: 6.7, category: ""}]
|
||||
},
|
||||
qualitativeRanges: [{
|
||||
rangeEnd: 4.3, rangeStroke: "#61a301", rangeOpacity: 1
|
||||
}, {
|
||||
rangeEnd: 7.3, rangeStroke: "#fcda21", rangeOpacity: 1
|
||||
}, {
|
||||
rangeEnd: 10, rangeStroke: "#d61e3f", rangeOpacity: 1
|
||||
}],
|
||||
captionSettings: { textAngle: 0,
|
||||
location: { x: 17, y: 20 }, text: "Revenue YTD", font: { color: null, fontFamily: 'Segoe UI', fontStyle: 'Normal', size: '12px', fontWeight: 'regular', opacity: 1 }, //'#707070'
|
||||
subTitle: { textAngle: 0,
|
||||
text: "$ in Thousands", location: { x: 10, y: 35 }, font: { color: null, fontFamily: 'Segoe UI', fontStyle: 'Normal ', size: '12px', fontWeight: 'regular', opacity: 1} //'#707070'
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<div id="Tooltip" style="display:none; width:125px;padding-top: 10px;padding-bottom:10px">
|
||||
|
||||
<div style="font-weight:bold">
|
||||
Sales
|
||||
</div>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
Current
|
||||
</td>
|
||||
<td>
|
||||
: {{:currentValue}}
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Target
|
||||
</td>
|
||||
<td>
|
||||
: {{:targetValue}}
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
|
||||
</table>
|
||||
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,151 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Essential JS 1 : Bullet Graph - Title Positioning</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<script src="../scripts/jsrender.min.js" type="text/javascript"></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="BulletGraph1"></div>
|
||||
</div>
|
||||
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Caption Position
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<select onchange="BulletCapPosition(this)">
|
||||
<option>Top</option>
|
||||
<option>Left</option>
|
||||
<option selected="selected">Right</option>
|
||||
<option>Bottom</option>
|
||||
<option>Float</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Caption Alignment
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<select onchange="BulletCapAlignment(this)">
|
||||
<option>Near</option>
|
||||
<option>Far</option>
|
||||
<option>Center</option>
|
||||
</select>
|
||||
</div>
|
||||
</div><br/>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Subtitle Position
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<select onchange="BulletSubtitlePosition(this)">
|
||||
<option>Top</option>
|
||||
<option>Left</option>
|
||||
<option selected="selected">Right</option>
|
||||
<option>Bottom</option>
|
||||
<option>Float</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Subtitle Alignment
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<select onchange="BulletSubtitleAlignment(this)">
|
||||
<option>Near</option>
|
||||
<option>Far</option>
|
||||
<option>Center</option>
|
||||
</select>
|
||||
</div>
|
||||
</div><br/>
|
||||
<div class="row">
|
||||
<div class="col-md-3" style="width:auto;">
|
||||
<input type="checkbox" checked="checked" onchange="BulletTrim(this)" />
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Enable Trim
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
|
||||
function BulletTrim(sender) {
|
||||
$("#BulletGraph1").ejBulletGraph('option', 'captionSettings.enableTrim', sender.checked);
|
||||
}
|
||||
|
||||
function BulletCapAlignment(sender) {
|
||||
$("#BulletGraph1").ejBulletGraph('option', 'captionSettings.textAlignment', sender.value);
|
||||
}
|
||||
|
||||
function BulletCapPosition(sender) {
|
||||
$("#BulletGraph1").ejBulletGraph('option', 'captionSettings.textPosition', sender.value);
|
||||
}
|
||||
|
||||
function BulletSubtitleAlignment(sender) {
|
||||
$("#BulletGraph1").ejBulletGraph('option', 'captionSettings.subTitle.textAlignment', sender.value);
|
||||
}
|
||||
|
||||
function BulletSubtitlePosition(sender) {
|
||||
$("#BulletGraph1").ejBulletGraph('option', 'captionSettings.subTitle.textPosition', sender.value);
|
||||
}
|
||||
|
||||
$(function () {
|
||||
$("#BulletGraph1").ejBulletGraph({
|
||||
load: "loadBulletTheme",
|
||||
value: 8,
|
||||
applyRangeStrokeToTicks: true,
|
||||
comparativeMeasureValue: 5,
|
||||
width: 650,
|
||||
height: 400,
|
||||
quantitativeScaleSettings: {
|
||||
location: { x: 93, y: 175 },
|
||||
labelSettings: { offset: 14, size: 10 },
|
||||
majorTickSettings: { size: 13, width: 1, stroke: 'gray' },
|
||||
minorTickSettings: { size: 5, width: 1, stroke: 'gray' },
|
||||
},
|
||||
qualitativeRanges: [{
|
||||
rangeEnd: 3, rangeStroke: "#61a301"
|
||||
}, {
|
||||
rangeEnd: 7, rangeStroke: "#fcda21"
|
||||
}, {
|
||||
rangeEnd: 10, rangeStroke: "#d61e3f"
|
||||
}],
|
||||
captionSettings: {
|
||||
textAngle: 0, location: { x: 5, y: 241 }, text: "Revenue YTD",textPosition:'right',
|
||||
subTitle: {
|
||||
textAngle: 0,textPosition:'right',
|
||||
text: "$ in Thousands", location: { x: 5, y: 257 }
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Essential JS 1 : Button</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<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 class="frame">
|
||||
<div class="control">
|
||||
<table>
|
||||
<tr>
|
||||
<th colspan="2" style="padding-left:30px"> Button </th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> Normal</td>
|
||||
<td class="btnsht">
|
||||
<button id="button11">login</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> Mini</td>
|
||||
<td class="btnsht">
|
||||
<button id="button21">login</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td> Small</td>
|
||||
<td class="btnsht">
|
||||
<button id="button31">login</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> Medium</td>
|
||||
<td class="btnsht">
|
||||
<button id="button41">login</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td> Large</td>
|
||||
<td class="btnsht">
|
||||
<button id="button51">login</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
// declaration
|
||||
$("#button11").ejButton({
|
||||
size: "normal",
|
||||
showRoundedCorner: true,
|
||||
contentType: "imageonly",
|
||||
prefixIcon: "e-icon e-uiLight e-handup"
|
||||
});
|
||||
|
||||
$("#button21").ejButton({
|
||||
showRoundedCorner: true,
|
||||
size: "mini"
|
||||
});
|
||||
|
||||
|
||||
$("#button31").ejButton({
|
||||
showRoundedCorner: true,
|
||||
size: "small"
|
||||
});
|
||||
|
||||
|
||||
$("#button41").ejButton({
|
||||
showRoundedCorner: true,
|
||||
size: "medium"
|
||||
});
|
||||
|
||||
|
||||
$("#button51").ejButton({
|
||||
size: "large",
|
||||
showRoundedCorner: true,
|
||||
contentType: "textandimage",
|
||||
prefixIcon: "e-icon e-uiLight e-handup"
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.e-bgdefault:hover .e-buttondiv .e-icon.e-uiLight, .e-bgdefault:active .e-buttondiv .e-icon.e-uiLight {
|
||||
background-image: url('../content/ejthemes/common-images/icons-white.png');
|
||||
}
|
||||
.control{
|
||||
padding: 30px;
|
||||
}
|
||||
td{
|
||||
padding:5px;
|
||||
}
|
||||
.frame{
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Essential JS 1 : CheckBoxes</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<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 class="frame">
|
||||
<div class="control">
|
||||
<div class="chkalign">
|
||||
<br />
|
||||
Hobbies
|
||||
<br />
|
||||
<br />
|
||||
<table class="checksmall">
|
||||
<tr>
|
||||
<td class="chkrad">
|
||||
<input type="checkbox" class="nodetext" id="check1" />
|
||||
<label for="check1" class="clslab">Music</label></td>
|
||||
<td class="chkrad">
|
||||
<input type="checkbox" class="nodetext" id="Checkbox3" />
|
||||
<label for="Checkbox3" class="clslab">Sports</label></td>
|
||||
<td class="chkrad">
|
||||
<input type="checkbox" class="nodetext" id="Checkbox4" />
|
||||
<label for="Checkbox4" class="clslab">Bike Riding</label></td>
|
||||
</tr>
|
||||
</table>
|
||||
<br />
|
||||
<br />
|
||||
Favorite Search Engines<br />
|
||||
<br />
|
||||
<table>
|
||||
<tr>
|
||||
<td class="chkrad">
|
||||
<input type="checkbox" class="nodetext" id="Checkbox1" /><label for="Checkbox1" class="clslab">Google</label>
|
||||
</td>
|
||||
<td class="chkrad">
|
||||
<input type="checkbox" class="nodetext" id="Checkbox5" /><label for="Checkbox5" class="clslab">Yahoo</label>
|
||||
</td>
|
||||
<td class="chkrad">
|
||||
<input type="checkbox" class="nodetext" id="Checkbox6" /><label for="Checkbox6" class="clslab">Bing</label></td>
|
||||
</tr>
|
||||
</table>
|
||||
<br />
|
||||
<br />
|
||||
Favorite Social networks<br />
|
||||
<br />
|
||||
<table>
|
||||
<tr>
|
||||
<td class="chkrad">
|
||||
<input type="checkbox" class="nodetext" id="Checkbox2" /><label for="Checkbox2" class="clslab">Facebook</label>
|
||||
</td>
|
||||
<td class="chkrad">
|
||||
<input type="checkbox" class="nodetext" id="Checkbox7" /><label for="Checkbox7" class="clslab">GPlus</label>
|
||||
</td>
|
||||
<td class="chkrad">
|
||||
<input type="checkbox" class="nodetext" id="Checkbox8" /><label for="Checkbox8" class="clslab">Twitter</label></td>
|
||||
</tr>
|
||||
</table>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
// declaration
|
||||
$("#check1").ejCheckBox();
|
||||
$("#Checkbox3").ejCheckBox();
|
||||
$("#Checkbox4").ejCheckBox();
|
||||
$("#Checkbox3").ejCheckBox();
|
||||
$("#Checkbox1").ejCheckBox({ size: "medium" });
|
||||
$("#Checkbox5").ejCheckBox({ size: "medium" });
|
||||
$("#Checkbox6").ejCheckBox({ size: "medium" });
|
||||
$("#Checkbox2").ejCheckBox({ size: "medium", enableTriState: true });
|
||||
$("#Checkbox7").ejCheckBox({ size: "medium", enableTriState: true });
|
||||
$("#Checkbox8").ejCheckBox({ size: "medium", enableTriState: true });
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.fixedlayout.material .clslab {
|
||||
margin-top:-10px;
|
||||
vertical-align:middle;
|
||||
}
|
||||
.fixedlayout.material .checksmall .clslab{
|
||||
margin-top:-5px
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Essential JS 1 : Custom Buttons</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<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 class="frame">
|
||||
<div class="control">
|
||||
<div class="btnsht">
|
||||
<button id="PrimaryBtn">Primary</button>
|
||||
</div>
|
||||
<div class="btnsht">
|
||||
<button id="DangerBtn">Danger</button>
|
||||
</div>
|
||||
<div class="btnsht">
|
||||
<button id="InfoBtn">Information</button>
|
||||
</div>
|
||||
<div class="btnsht">
|
||||
<button id="WarningBtn">Warning</button>
|
||||
</div>
|
||||
<div class="btnsht">
|
||||
<button id="SuccessBtn">Success</button>
|
||||
</div>
|
||||
<div class="btnsht">
|
||||
<button id="LinkBtn">Link</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
// declaration
|
||||
$("#PrimaryBtn").ejButton({
|
||||
size: "medium",
|
||||
showRoundedCorner: true,
|
||||
cssClass: 'e-primary'
|
||||
});
|
||||
$("#DangerBtn").ejButton({
|
||||
showRoundedCorner: true,
|
||||
size: "medium",
|
||||
cssClass: 'e-danger'
|
||||
});
|
||||
$("#InfoBtn").ejButton({
|
||||
showRoundedCorner: true,
|
||||
size: "medium",
|
||||
cssClass: 'e-info'
|
||||
});
|
||||
$("#WarningBtn").ejButton({
|
||||
showRoundedCorner: true,
|
||||
size: "medium",
|
||||
cssClass: 'e-warning'
|
||||
});
|
||||
$("#LinkBtn").ejButton({
|
||||
size: "medium",
|
||||
showRoundedCorner: true,
|
||||
cssClass: 'e-link'
|
||||
});
|
||||
$("#SuccessBtn").ejButton({
|
||||
size: "medium",
|
||||
showRoundedCorner: true,
|
||||
cssClass: 'e-success'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.frame {
|
||||
margin: auto;
|
||||
width: 400px;
|
||||
}
|
||||
|
||||
.control .btnsht {
|
||||
width: 125px;
|
||||
display: inline-block;
|
||||
}
|
||||
.fixedlayout.material .e-btn.e-select.e-btn-medium{
|
||||
width: 110px;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,258 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Essential JS 1 : Button - Events</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<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 class="frame">
|
||||
<div class="control">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="btnsht">Button
|
||||
</td>
|
||||
<td class="btnsht">
|
||||
<button id="buttonnormal">
|
||||
Save</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btnsht">Toggle Button
|
||||
</td>
|
||||
<td class="btnsht">
|
||||
<input type="checkbox" id="TextOnly" />
|
||||
<label for="TextOnly">
|
||||
Toggle</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btnsht">Split Button
|
||||
</td>
|
||||
<td class="splttd btnsht">
|
||||
<button id="splitbuttonnormal">
|
||||
Save</button>
|
||||
<ul id="menu1">
|
||||
<li><span>Open</span></li>
|
||||
<li><span>Save</span></li>
|
||||
<li><span>Delete</span></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btnsht">Group Button
|
||||
</td>
|
||||
<td class="btnsht">
|
||||
<div id="groupButton">
|
||||
<ul>
|
||||
<li>
|
||||
Save
|
||||
</li>
|
||||
<li>
|
||||
Open
|
||||
</li>
|
||||
<li>
|
||||
Delete
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cols-prop-area event-tracer">
|
||||
<div>
|
||||
<div class="heading">
|
||||
<span>Event Trace</span>
|
||||
<div class="pull-right">
|
||||
<select name="selectevtprops" id="selectControls">
|
||||
<option value="beforeOpen">BeforeOpen</option>
|
||||
<option value="open">Open</option>
|
||||
<option value="click">Click</option>
|
||||
<option value="change">Change</option>
|
||||
<option value="itemMouseOver">Item Mouse Hover</option>
|
||||
<option value="itemMouseOut">Item Mouse Out</option>
|
||||
<option value="itemSelected">Item Selected</option>
|
||||
<option value="close">Close</option>
|
||||
<option value="select">Select</option>
|
||||
<option value="beforeSelect">Before Select</option>
|
||||
<option value="keyPress">Key Press</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prop-grid content">
|
||||
<div class="eventarea">
|
||||
<div class="EventLog" id="EventLog">
|
||||
</div>
|
||||
</div>
|
||||
<div class="evtbtn">
|
||||
<input type="button" class="eventclear e-btn" value="Clear" onclick="onClear()" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var btnObj, tglbtnObj, spltbtnObj, grpbtnObj;
|
||||
$(function () {
|
||||
|
||||
// declaration
|
||||
$("#buttonnormal").ejButton({
|
||||
size: "large",
|
||||
showRoundedCorner: true,
|
||||
create: "btnLoad",
|
||||
click: "btnClick",
|
||||
});
|
||||
|
||||
$("#TextOnly").ejToggleButton({
|
||||
size: "large",
|
||||
showRoundedCorner: true,
|
||||
defaultText: "Save",
|
||||
activeText: "Delete",
|
||||
create: "tglebtnLoad",
|
||||
click: "tglebtnClick",
|
||||
change: "tglebtnChange",
|
||||
});
|
||||
$("#splitbuttonnormal").ejSplitButton({
|
||||
size: "large",
|
||||
showRoundedCorner: true,
|
||||
targetID: "menu1",
|
||||
create: "spltbtnLoad",
|
||||
beforeOpen: "onFocusIn",
|
||||
open:"spltbtnOpened",
|
||||
click: "spltbtnClick",
|
||||
itemMouseOver: "spltbtnitmHover",
|
||||
itemMouseOut: "spltbtnitmOut",
|
||||
itemSelected: "spltbtnitmSelected",
|
||||
close:"spltbtnClosed",
|
||||
|
||||
});
|
||||
$("#groupButton").ejGroupButton({
|
||||
groupButtonMode:"radiobutton",
|
||||
showRoundedCorner: true,
|
||||
create:"grpbtnLoad",
|
||||
select:"grpbtnSelect",
|
||||
beforeSelect:"grpbtnBeforeSelect",
|
||||
keyPress:"grpbtnKeyPress"
|
||||
});
|
||||
grpbtnObj = $("#groupButton").data("ejGroupButton");
|
||||
btnObj = $("#buttonnormal").data("ejButton");
|
||||
tglbtnObj = $("#TextOnly").data("ejToggleButton");
|
||||
spltbtnObj = $("#splitbuttonnormal").data("ejSplitButton");
|
||||
|
||||
$('#selectControls').ejDropDownList({
|
||||
popupShown: "adjustpopupposition",
|
||||
showCheckbox: true,
|
||||
checkAll: true,
|
||||
change: "evtpropscheckedevent"
|
||||
});
|
||||
});
|
||||
function btnLoad(e) {
|
||||
jQuery.addEventLog("Button has been <span class='eventTitle'>created</span>.");
|
||||
}
|
||||
function btnClick(e) {
|
||||
jQuery.addEventLog("Button has been <span class='eventTitle'>clicked</span>.");
|
||||
}
|
||||
function tglebtnLoad(e) {
|
||||
jQuery.addEventLog("ToggleButton has been <span class='eventTitle'>created</span>.");
|
||||
}
|
||||
function grpbtnLoad(e) {
|
||||
jQuery.addEventLog("Group Button has been <span class='eventTitle'>created</span>.");
|
||||
}
|
||||
function tglebtnLoad(e) {
|
||||
jQuery.addEventLog("ToggleButton has been <span class='eventTitle'>created</span>.");
|
||||
}
|
||||
function tglebtnChange(e) {
|
||||
jQuery.addEventLog("ToggleButton value has been <span class='eventTitle'>changed</span> to " + e.isChecked + ".");
|
||||
}
|
||||
function spltbtnLoad(e) {
|
||||
jQuery.addEventLog("SplitButton has been <span class='eventTitle'>created</span>.");
|
||||
}
|
||||
function spltbtnClick(e) {
|
||||
jQuery.addEventLog("SplitButton has been <span class='eventTitle'>clicked</span>.");
|
||||
}
|
||||
function onFocusIn(e) {
|
||||
jQuery.addEventLog("SplitButton popup has been <span class='eventTitle'>BeforeOpened</span>. ");
|
||||
}
|
||||
function spltbtnOpened(e) {
|
||||
jQuery.addEventLog("SplitButton popup has been <span class='eventTitle'>Opened</span>. ");
|
||||
}
|
||||
function spltbtnClosed(e) {
|
||||
jQuery.addEventLog("SplitButton popup has been <span class='eventTitle'>Closed</span>.");
|
||||
}
|
||||
function spltbtnitmHover(e) {
|
||||
jQuery.addEventLog("SplitButton item <span class='eventTitle'>hovered-in</span>.");
|
||||
}
|
||||
function spltbtnitmOut(e) {
|
||||
jQuery.addEventLog("SplitButton item <span class='eventTitle'>hovered-out</span>.");
|
||||
}
|
||||
function spltbtnitmSelected(e) {
|
||||
jQuery.addEventLog(e.text + " item has been <span class='eventTitle'>selected</span>.");
|
||||
}
|
||||
function grpbtnBeforeSelect(args) {
|
||||
jQuery.addEventLog("Group Button <span class='eventTitle'>BeforeActive</span> event is fired for Index " + args.index + ".");
|
||||
}
|
||||
function grpbtnSelect(args) {
|
||||
jQuery.addEventLog("Group Button <span class='eventTitle'>Active</span> event is fired for Index " + args.index + ".");
|
||||
}
|
||||
function grpbtnKeyPress(args) {
|
||||
jQuery.addEventLog("Group Button <span class='eventTitle'>Focus</span> Changed to the index" + args.index + ".");
|
||||
}
|
||||
function onClear() {
|
||||
jQuery.clearEventLog();
|
||||
}
|
||||
|
||||
function evtpropscheckedevent(args) {
|
||||
if (args.isChecked) {
|
||||
switch (args.selectedValue) {
|
||||
case "create":
|
||||
btnObj.option(args.selectedValue, "btnLoad");
|
||||
tglbtnObj.option(args.selectedValue, "tglebtnLoad");
|
||||
spltbtnObj.option(args.selectedValue, "spltbtnLoad");
|
||||
grpbtnObj.option(args.value, "grpbtnLoad");
|
||||
break;
|
||||
case "click":
|
||||
btnObj.option(args.selectedValue, "btnClick");
|
||||
tglbtnObj.option(args.selectedValue, "tglebtnClick");
|
||||
spltbtnObj.option(args.selectedValue, "spltbtnClick");
|
||||
break;
|
||||
case "beforeOpen": spltbtnObj.option(args.selectedValue, "onFocusIn"); break;
|
||||
case "open": spltbtnObj.option(args.selectedValue, "spltbtnOpened"); break;
|
||||
case "change": tglbtnObj.option(args.selectedValue, "tglebtnChange"); break;
|
||||
case "itemMouseOver": spltbtnObj.option(args.selectedValue, "spltbtnitmHover"); break;
|
||||
case "itemMouseOut": spltbtnObj.option(args.selectedValue, "spltbtnitmOut"); break;
|
||||
case "itemSelected": spltbtnObj.option(args.selectedValue, "spltbtnitmSelected"); break;
|
||||
case "close": spltbtnObj.option(args.selectedValue, "spltbtnClosed"); break;
|
||||
case "select": grpbtnObj.option(args.value, "grpbtnSelect"); break;
|
||||
case "beforeSelect": grpbtnObj.option(args.value, "grpbtnBeforeSelect"); break;
|
||||
case "keyPress": grpbtnObj.option(args.value, "grpbtnKeyPress"); break;
|
||||
}
|
||||
}
|
||||
else {
|
||||
btnObj.option(args.selectedValue, null);
|
||||
tglbtnObj.option(args.selectedValue, null);
|
||||
spltbtnObj.option(args.selectedValue, null);
|
||||
grpbtnObj.option(args.selectedValue, null);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Essential JS 1 : Group Buttons</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<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 class="frame">
|
||||
<div class="control">
|
||||
<div class="element">
|
||||
<div id="groupButton"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
// declaration
|
||||
$("#groupButton").ejGroupButton({
|
||||
groupButtonMode: "radiobutton",
|
||||
dataSource: [
|
||||
{ text: "Day", contentType: "textonly" },
|
||||
{ text: "Work Week", contentType: "textonly" },
|
||||
{ text: "Week", contentType: "textonly" },
|
||||
{ text: "Month", contentType: "textonly", selected: "selected" },
|
||||
{ text: "Year", contentType: "textonly" }],
|
||||
width: "100%",height: "40px",
|
||||
showRoundedCorner: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.control {
|
||||
padding: 30px 0px;
|
||||
}
|
||||
|
||||
.frame {
|
||||
padding: 0 20px;
|
||||
width:450px;
|
||||
}
|
||||
|
||||
.control .element, label {
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.element{
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Essential JS 1 : Button Methods</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<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 class="frame">
|
||||
<div class="control">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="btnsht">Button</td>
|
||||
<td class="btnsht">
|
||||
<button id="buttonnormal">Button</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btnsht">Toggle Button</td>
|
||||
<td class="btnsht">
|
||||
<input type="checkbox" id="TextOnly" />
|
||||
<label for="TextOnly">Toggle</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btnsht">Split Button</td>
|
||||
<td class="splttd btnsht">
|
||||
<button id="splitbuttonnormal">Save</button>
|
||||
<ul id="menu1">
|
||||
<li><span>Open...</span></li>
|
||||
<li><span>Save</span></li>
|
||||
<li><span>Delete</span></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btnsht">Dropdown Button</td>
|
||||
<td class="splttd btnsht">
|
||||
<button id="dropbtnlarge">Save</button>
|
||||
<ul id="menu2">
|
||||
<li><span>Open...</span></li>
|
||||
<li><span>Save</span></li>
|
||||
<li><span>Delete</span></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-6">Disable\Enable</div>
|
||||
<div class="col-md-6">
|
||||
<input type="checkbox" id="btnchkunchk" class="e-togglebtn" value="checkuncheck" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">ArrowPosition</div>
|
||||
<div class="col-md-6">
|
||||
<select id="arrowpos">
|
||||
<option value="right">Right</option>
|
||||
<option value="left">Left</option>
|
||||
<option value="top">Top</option>
|
||||
<option value="bottom">Bottom</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
var btnobject1, btnobject2, btnobject3, btnobject4;
|
||||
$(function () {
|
||||
//declaration
|
||||
$("#buttonnormal").ejButton({ showRoundedCorner: true, size: "large" });
|
||||
$("#TextOnly").ejToggleButton({
|
||||
size: "large",
|
||||
showRoundedCorner: true,
|
||||
defaultText: "Play",
|
||||
activeText: "Stop",
|
||||
});
|
||||
$("#splitbuttonnormal").ejSplitButton({
|
||||
size: "large",
|
||||
showRoundedCorner: true,
|
||||
targetID: "menu1"
|
||||
});
|
||||
$("#dropbtnlarge").ejSplitButton({
|
||||
size: "large",
|
||||
showRoundedCorner: true,
|
||||
buttonMode: ej.ButtonMode.Dropdown,
|
||||
targetID: "menu2"
|
||||
});
|
||||
btnobject1 = $("#buttonnormal").data("ejButton");
|
||||
btnobject2 = $("#TextOnly").data("ejToggleButton");
|
||||
btnobject3 = $("#splitbuttonnormal").data("ejSplitButton");
|
||||
btnobject4 = $("#dropbtnlarge").data("ejSplitButton");
|
||||
$("#btnchkunchk").ejToggleButton({ "change": "onCheckUncheckAll", "width": "120px", "defaultText": "Disable", "activeText": "Enable" });
|
||||
$("#arrowpos").ejDropDownList({ width: "120px", "change": "onArrowChange", "selectedItemIndex": 0 });
|
||||
});
|
||||
function onCheckUncheckAll(args) {
|
||||
if (args.isChecked) {
|
||||
btnobject1.disable();
|
||||
btnobject2.disable();
|
||||
btnobject3.disable();
|
||||
btnobject4.disable();
|
||||
}
|
||||
else {
|
||||
btnobject1.enable();
|
||||
btnobject2.enable();
|
||||
btnobject3.enable();
|
||||
btnobject4.enable();
|
||||
}
|
||||
}
|
||||
function onArrowChange(args) {
|
||||
if (args.value == "top" || args.value == "bottom")
|
||||
$(".splttd").css("padding", "6px 0 6px 1px");
|
||||
else
|
||||
$(".splttd").css("padding", "0 0 0 1px");
|
||||
$(".e-splitbutton").ejSplitButton({ "arrowPosition": args.value });
|
||||
}
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Essential JS 1 : Primary Button</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<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 class="frame">
|
||||
<div class="control">
|
||||
<table>
|
||||
<tr>
|
||||
<th colspan="2" style="padding-left:30px"> Primary Button </th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> Normal</td>
|
||||
<td class="btnsht">
|
||||
<button id="button11"></button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> Mini</td>
|
||||
<td class="btnsht">
|
||||
<button id="button21">login</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td> Small</td>
|
||||
<td class="btnsht">
|
||||
<button id="button31">login</button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> Medium</td>
|
||||
<td class="btnsht">
|
||||
<button id="button41">login</button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td> Large</td>
|
||||
<td class="btnsht">
|
||||
<button id="button51">login</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
// declaration
|
||||
$("#button11").ejButton({
|
||||
size: "normal",
|
||||
showRoundedCorner: true,
|
||||
contentType: "imageonly",
|
||||
prefixIcon: "e-icon e-uiLight e-handup",
|
||||
cssClass: 'e-primary'
|
||||
});
|
||||
|
||||
$("#button21").ejButton({
|
||||
showRoundedCorner: true,
|
||||
size: "mini",
|
||||
cssClass: 'e-primary'
|
||||
});
|
||||
|
||||
|
||||
$("#button31").ejButton({
|
||||
showRoundedCorner: true,
|
||||
size: "small",
|
||||
cssClass: 'e-primary'
|
||||
});
|
||||
|
||||
|
||||
$("#button41").ejButton({
|
||||
showRoundedCorner: true,
|
||||
size: "medium",
|
||||
cssClass: 'e-primary'
|
||||
});
|
||||
|
||||
|
||||
$("#button51").ejButton({
|
||||
size: "large",
|
||||
showRoundedCorner: true,
|
||||
contentType: "textandimage",
|
||||
prefixIcon: "e-icon e-uiLight e-handup",
|
||||
cssClass: 'e-primary'
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.e-bgdefault:hover .e-buttondiv .e-icon.e-uiLight, .e-bgdefault:active .e-buttondiv .e-icon.e-uiLight {
|
||||
background-image: url('../content/ejthemes/common-images/icons-white.png');
|
||||
}
|
||||
.control{
|
||||
padding: 30px;
|
||||
}
|
||||
td{
|
||||
padding:5px;
|
||||
}
|
||||
.frame{
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Essential JS 1 : Radio Button</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<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 class="frame">
|
||||
<div class="control">
|
||||
<div class="radioalign">
|
||||
<br />
|
||||
Category<br />
|
||||
<br />
|
||||
|
||||
<div class="chkrad">
|
||||
|
||||
<input type="radio" name="small" id="Radio1" /><label for="Radio1" class="clslab">Fresher</label>
|
||||
</div>
|
||||
<div class="chkrad">
|
||||
|
||||
<input type="radio" name="small" id="Radio3" /><label for="Radio3" class="clslab">Experienced</label>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
Experienced<br />
|
||||
<br />
|
||||
|
||||
<div class="chkrad">
|
||||
|
||||
<input type="radio" name="medium" id="Radio2" /><label for="Radio2" class="clslab">1+years</label>
|
||||
</div>
|
||||
<div class="chkrad">
|
||||
<input type="radio" name="medium" id="Radio4" /><label for="Radio4" class="clslab">2.5+years</label>
|
||||
</div>
|
||||
<div class="chkrad">
|
||||
<input type="radio" name="medium" id="Radio5" /><label for="Radio5" class="clslab">5+years</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
// declaration
|
||||
$("#Radio1").ejRadioButton({ checked: true });
|
||||
$("#Radio3").ejRadioButton();
|
||||
$("#Radio2").ejRadioButton({ size: "medium", checked: true });
|
||||
$("#Radio4").ejRadioButton({ size: "medium" });
|
||||
$("#Radio5").ejRadioButton({ size: "medium" });
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.frame {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.chkrad {
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Essential JS 1 : Button - Repeat Functionality</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<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 class="frame">
|
||||
<div class="control">
|
||||
<table>
|
||||
<tr>
|
||||
<td style="padding-left:80px">Repeat Button <br/> </br>
|
||||
<button id="buttonnormal">
|
||||
Click</button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="cols-prop-area event-tracer">
|
||||
<div>
|
||||
<div class="heading">
|
||||
<span>Event Trace</span>
|
||||
</div>
|
||||
<div class="prop-grid content">
|
||||
<div class="eventarea">
|
||||
<div class="EventLog" id="EventLog">
|
||||
</div>
|
||||
</div>
|
||||
<div class="evtbtn">
|
||||
<input type="button" class="eventclear e-btn" value="Clear" onclick="onClear()" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
|
||||
$(function () {
|
||||
|
||||
// declaration
|
||||
$("#buttonnormal").ejButton({
|
||||
size: "large",
|
||||
showRoundedCorner: true,
|
||||
repeatButton: true,
|
||||
click: "btnClick"
|
||||
});
|
||||
|
||||
var btnObj = $("#buttonnormal").data("ejButton");
|
||||
|
||||
});
|
||||
|
||||
function btnClick(e, ui) {
|
||||
jQuery.addEventLog("Repeat Button click<span class='eventTitle'> triggered. </span>");
|
||||
}
|
||||
|
||||
function onClear() {
|
||||
jQuery.clearEventLog();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Essential JS 1 : Button-RTL</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<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 class="frame">
|
||||
<div class="control">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="btnsht">
|
||||
<button id="buttonnormal">Play</button>
|
||||
</td>
|
||||
<td class="btnsht brtl">Button
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btnsht">
|
||||
<input type="checkbox" id="TextOnly" />
|
||||
<label for="TextOnly">Toggle</label>
|
||||
</td>
|
||||
<td class="btnsht brtl">Toggle Button
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btnsht">
|
||||
<button id="splitbuttonnormal">Play</button>
|
||||
<ul id="adminmenu">
|
||||
<li><span>Pause</span></li>
|
||||
<li><span>Next</span></li>
|
||||
<li><span>Previous</span></li>
|
||||
</ul>
|
||||
</td>
|
||||
<td class="splttd btnsht brtl">Split Button
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btnsht">
|
||||
<div id="groupButton">
|
||||
<ul>
|
||||
<li>
|
||||
Previous
|
||||
</li>
|
||||
<li>
|
||||
Play
|
||||
</li>
|
||||
<li>
|
||||
Next
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
<td class="btnsht brtl">Group Button
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
// declaration
|
||||
$("#buttonnormal").ejButton({
|
||||
size: "large", contentType: ej.ContentType.TextAndImage,
|
||||
showRoundedCorner: true,
|
||||
imagePosition: ej.ImagePosition.ImageLeft,
|
||||
prefixIcon: "e-icon e-mediaplay e-uiLight", enableRTL: true
|
||||
});
|
||||
|
||||
$("#TextOnly").ejToggleButton({
|
||||
showRoundedCorner: true,
|
||||
size: "large",
|
||||
contentType: ej.ContentType.TextAndImage,
|
||||
defaultText: "Play",
|
||||
activeText: "Next",
|
||||
defaultPrefixIcon: "e-icon e-mediaplay e-uiLight",
|
||||
activePrefixIcon: "e-icon e-mediapause e-uiLight",
|
||||
enableRTL: true
|
||||
});
|
||||
$("#splitbuttonnormal").ejSplitButton({
|
||||
showRoundedCorner: true,
|
||||
size: "large",
|
||||
contentType: ej.ContentType.TextAndImage,
|
||||
imagePosition: ej.ImagePosition.ImageLeft,
|
||||
prefixIcon: "e-icon e-mediaplay e-uiLight",
|
||||
targetID: "adminmenu",
|
||||
enableRTL: true
|
||||
});
|
||||
$("#groupButton").ejGroupButton({
|
||||
groupButtonMode:"radiobutton",
|
||||
width:"215px",
|
||||
enableRTL: true,
|
||||
showRoundedCorner: true
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.e-bgdefault:hover .e-buttondiv .e-icon.e-uiLight, .e-bghover .e-tglebuttondiv .e-icon.e-uiLight, .e-bgdefault:hover .e-splitbuttondiv .e-icon.e-uiLight, .e-bgdefault:active .e-buttondiv .e-icon.e-uiLight, .e-bgselected .e-tglebuttondiv .e-icon.e-uiLight, .e-bgdefault:active .e-splitbuttondiv .e-icon.e-uiLight {
|
||||
background-image: url('../content/ejthemes/common-images/icons-white.png');
|
||||
}
|
||||
|
||||
.brtl {
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,173 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Essential JS 1 : Splitbutton</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<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 class="frame">
|
||||
<div class="control">
|
||||
<table>
|
||||
<tr>
|
||||
<th colspan="2" style="padding-left:30px"> Split Buttons </th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> Normal</td>
|
||||
<td class="btnsht">
|
||||
<div class="spltspan">
|
||||
<button id="spltbutton11">login</button>
|
||||
<ul id="Ul11">
|
||||
<li><span>User</span></li>
|
||||
<li><span>Guest</span></li>
|
||||
<li><span>Admin</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> Mini</td>
|
||||
<td>
|
||||
<button id="spltbutton21">login</button>
|
||||
<ul id="Ul21">
|
||||
<li><span>User</span></li>
|
||||
<li><span>Guest</span></li>
|
||||
<li><span>Admin</span></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> Small</td>
|
||||
<td class="btnsht">
|
||||
<button id="spltbutton31">login</button>
|
||||
<ul id="Ul31">
|
||||
<li><span>User</span></li>
|
||||
<li><span>Guest</span></li>
|
||||
<li><span>Admin</span></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> Medium</td>
|
||||
<td class="btnsht">
|
||||
<button id="spltbutton41">login</button>
|
||||
<ul id="Ul41">
|
||||
<li><span>User</span></li>
|
||||
<li><span>Guest</span></li>
|
||||
<li><span>Admin</span></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> Large</td>
|
||||
<td class="btnsht">
|
||||
<button id="spltbutton51">login</button>
|
||||
<ul id="Ul51">
|
||||
<li><span>User</span></li>
|
||||
<li><span>Guest</span></li>
|
||||
<li><span>Admin</span></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-6">ButtonMode</div>
|
||||
<div class="col-md-6">
|
||||
<select id="btnmode">
|
||||
<option value="split">Split</option>
|
||||
<option value="dropdown">Dropdown</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
// declaration
|
||||
|
||||
$("#spltbutton11").ejSplitButton({
|
||||
size: "normal",
|
||||
showRoundedCorner: true,
|
||||
contentType: "imageonly",
|
||||
targetID: "Ul11",
|
||||
prefixIcon: "e-icon e-uiLight e-login"
|
||||
});
|
||||
|
||||
$("#spltbutton21").ejSplitButton({
|
||||
size: "mini",
|
||||
showRoundedCorner: true,
|
||||
targetID: "Ul21",
|
||||
});
|
||||
|
||||
$("#spltbutton31").ejSplitButton({
|
||||
size: "small",
|
||||
showRoundedCorner: true,
|
||||
targetID: "Ul31",
|
||||
});
|
||||
|
||||
$("#spltbutton41").ejSplitButton({
|
||||
size: "medium",
|
||||
showRoundedCorner: true,
|
||||
targetID: "Ul41",
|
||||
});
|
||||
|
||||
$("#spltbutton51").ejSplitButton({
|
||||
size: "large",
|
||||
showRoundedCorner: true,
|
||||
targetID: "Ul51",
|
||||
contentType: "textandimage",
|
||||
prefixIcon: "e-icon e-login e-uiLight",
|
||||
});
|
||||
|
||||
$("#btnmode").ejDropDownList({ width: "120px", "change": "onChange", "selectedItemIndex": 0 });
|
||||
});
|
||||
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
|
||||
function onChange(args) {
|
||||
$(".e-splitbutton").ejSplitButton({ "buttonMode": args.value });
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.e-bgdefault:hover .e-splitbuttondiv .e-icon.e-uiLight, .e-bgdefault:active .e-splitbuttondiv .e-icon.e-uiLight {
|
||||
background-image: url('../content/ejthemes/common-images/icons-white.png');
|
||||
}
|
||||
.control{
|
||||
padding: 30px;
|
||||
}
|
||||
td{
|
||||
padding:5px;
|
||||
}
|
||||
.frame{
|
||||
padding: 0 20px;
|
||||
}
|
||||
.spltspan {
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,141 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Essential JS 1 : Togglebutton</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<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 class="frame">
|
||||
<div class="control">
|
||||
<table>
|
||||
<tr>
|
||||
<th colspan="2" style="padding-left:30px"> Toggle button </th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> Normal</td>
|
||||
<td class="btnsht">
|
||||
<input type="checkbox" id="check11" />
|
||||
<label for="check11">Toggle</label>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td> Mini</td>
|
||||
<td class="btnsht">
|
||||
<input type="checkbox" id="check21" />
|
||||
<label for="check21">Toggle</label>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td> Small</td>
|
||||
<td class="btnsht">
|
||||
<input type="checkbox" id="check31" />
|
||||
<label for="check31">Toggle</label>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td> Medium</td>
|
||||
<td class="btnsht">
|
||||
<input type="checkbox" id="check41" />
|
||||
<label for="check41">Toggle</label>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td> Large</td>
|
||||
<td class="btnsht">
|
||||
<input type="checkbox" id="check51" />
|
||||
<label for="check51">Toggle</label>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
// declaration
|
||||
$("#check11").ejToggleButton({
|
||||
size: "normal",
|
||||
showRoundedCorner: true,
|
||||
contentType: "imageonly",
|
||||
defaultPrefixIcon: "e-icon e-mediaplay e-uiLight",
|
||||
activePrefixIcon: "e-icon e-mediapause e-uiLight",
|
||||
});
|
||||
|
||||
|
||||
|
||||
$("#check21").ejToggleButton({
|
||||
defaultText: "Play",
|
||||
showRoundedCorner: true,
|
||||
activeText: "Pause",
|
||||
size: "mini",
|
||||
});
|
||||
|
||||
|
||||
$("#check31").ejToggleButton({
|
||||
showRoundedCorner: true,
|
||||
defaultText: "Play",
|
||||
activeText: "Pause",
|
||||
size: "small",
|
||||
});
|
||||
|
||||
|
||||
$("#check41").ejToggleButton({
|
||||
showRoundedCorner: true,
|
||||
defaultText: "Play",
|
||||
activeText: "Pause",
|
||||
size: "medium",
|
||||
});
|
||||
|
||||
|
||||
$("#check51").ejToggleButton({
|
||||
showRoundedCorner: true,
|
||||
defaultText: "Play",
|
||||
activeText: "Pause",
|
||||
size: "large",
|
||||
contentType: "textandimage",
|
||||
defaultPrefixIcon: "e-icon e-mediaplay e-uiLight",
|
||||
activePrefixIcon: "e-icon e-mediapause e-uiLight",
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.e-bghover .e-tglebuttondiv .e-icon.e-uiLight, .e-bgselected .e-tglebuttondiv .e-icon.e-uiLight {
|
||||
background-image: url('../content/ejthemes/common-images/icons-white.png');
|
||||
}
|
||||
.control{
|
||||
padding: 30px;
|
||||
}
|
||||
td{
|
||||
padding:5px;
|
||||
}
|
||||
.frame{
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -0,0 +1,261 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Essential JS 1 : Inline Form on Local data</title>
|
||||
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<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-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/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="dataBox"></div>
|
||||
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="calcBox">
|
||||
CalcEngine calculate the Array data. In this example last cell of row and column returns the sum of values of row or column.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="tempcalcBox">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<input type="button" id="btnGen" onclick="genValue()" value="Generate New Data" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="tempcalcBox">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Row Index
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<input id="rowIndex" class="e-ejinputtext" type="text" value="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Column Index
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<input id="colIndex" class="e-ejinputtext" type="text" value="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Value
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<input id="valueBox" class="e-ejinputtext" type="text" value="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="tempcalcBox">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<input type="button" id="btnsetVal" onclick="setValue()" value="Set Value" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
var rows = 0;
|
||||
var cols = 0;
|
||||
var arrayData;
|
||||
var calcEng = null;
|
||||
|
||||
});
|
||||
function genValue() {
|
||||
row = Math.floor(Math.random() * 10) + 5;
|
||||
col = Math.floor(Math.random() * 6) + 3;
|
||||
var data = create2DArray(row);
|
||||
|
||||
for (var r = 0; r < row; ++r)
|
||||
for (var c = 0; c < col; ++c) {
|
||||
var num = (Math.floor(Math.random() * 79) + 20) / 10;
|
||||
data[r][c] = num.toFixed(1);
|
||||
}
|
||||
|
||||
arrayData = new ArrayCalcData(data);
|
||||
calcEng = arrayData.wireObject();
|
||||
calcEng.setUseDependencies(true);
|
||||
calcEng.recalculateRange(RangeInfo.cells(1, 1, row + 1, col + 1), arrayData);
|
||||
|
||||
arrayData.showObject();
|
||||
};
|
||||
function setValue() {
|
||||
if (row == 0) {
|
||||
alert("Generate data first.");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
var r = parseInt($("#rowIndex").val());
|
||||
var c = parseInt($("#colIndex").val());
|
||||
if (r > row || c > col)
|
||||
alert("Please enter a valid row and column index.");
|
||||
var val = $("#valueBox").val()
|
||||
|
||||
arrayData.setData(val, r, c);
|
||||
var cellArgs = new ValueChangedArgs(r, c, val);
|
||||
calcEng.valueChanged(arrayData, cellArgs);
|
||||
arrayData.showObject();
|
||||
}
|
||||
catch (ex1) {
|
||||
|
||||
}
|
||||
};
|
||||
var ArrayCalcData = (function () {
|
||||
function ArrayCalcData(dataValues) {
|
||||
this.dValues = dataValues;
|
||||
this.rowCount = dataValues.length;
|
||||
this.colCount = dataValues[0].length;
|
||||
this.rowSums = [];
|
||||
this.colSums = [];
|
||||
this.calcEngine = null;
|
||||
//initialize the formulas for the row sums
|
||||
// eg. "=Sum(A5:D5)" to sum row 5
|
||||
for (var row = 0; row <= this.rowCount; ++row) {
|
||||
this.rowSums[row] = "=Sum(A" + (Number(row) + 1) + ":" + RangeInfo.getAlphaLabel(this.colCount) + (Number(row) + 1) + ")";
|
||||
|
||||
}
|
||||
|
||||
//initialize the formulas for the columns sums
|
||||
// eg. "=Sum(B1:B5)" to sum column 2
|
||||
for (var col = 0; col <= this.colCount; ++col) {
|
||||
this.colSums[col] = "=Sum(" + RangeInfo.getAlphaLabel(Number(col) + 1) + "1" + ":" + RangeInfo.getAlphaLabel(Number(col) + 1) + this.rowCount + ")";
|
||||
}
|
||||
this.getValueRowCol = function (sheetId, row, col) {
|
||||
if (row - 1 == this.rowCount) {
|
||||
return this.colSums[col - 1];
|
||||
}
|
||||
else if (col - 1 == this.colCount) {
|
||||
return this.rowSums[row - 1];
|
||||
|
||||
}
|
||||
else
|
||||
return this.dValues[row - 1][col - 1];
|
||||
}
|
||||
this.setValueRowCol = function (sheetId, value, row, col) {
|
||||
|
||||
if (row - 1 == this.rowCount) {
|
||||
this.colSums[col - 1] = Number(value).toFixed(1);
|
||||
}
|
||||
else if (col - 1 == this.colCount) {
|
||||
this.rowSums[row - 1] = Number(value).toFixed(1);
|
||||
}
|
||||
else
|
||||
this.dValues[row - 1][col - 1] = Number(value).toFixed(1);
|
||||
|
||||
var cellArgs = new ValueChangedArgs(row, col, value);
|
||||
this.calcEngine.valueChanged(this, cellArgs);
|
||||
}
|
||||
|
||||
this.getData = function (row, col) {
|
||||
return this.getValueRowCol(this, row + 1, col + 1);
|
||||
};
|
||||
this.setData = function (value, row, col) {
|
||||
this.setValueRowCol(this, value, row + 1, col + 1);
|
||||
};
|
||||
|
||||
this.showObject1 = function () {
|
||||
var textData = "";
|
||||
for (var i = 0; i <= this.rowCount; ++i) {
|
||||
for (var j = 0; j <= this.colCount; ++j) {
|
||||
textData += this.getData(i, j) + ' ';
|
||||
|
||||
}
|
||||
textData += '<br>';
|
||||
}
|
||||
document.getElementById("dataBox").innerHTML = textData;
|
||||
|
||||
}
|
||||
|
||||
this.showObject = function () {
|
||||
var textData = "<table>";
|
||||
for (var i = 0; i <= this.rowCount; ++i) {
|
||||
textData += "<tr>";
|
||||
for (var j = 0; j <= this.colCount; ++j) {
|
||||
textData += "<td>" + this.getData(i, j) + ' ' + "</td>";
|
||||
|
||||
}
|
||||
textData += "</tr>";
|
||||
}
|
||||
textData += "</table>";
|
||||
document.getElementById("dataBox").innerHTML = textData;
|
||||
|
||||
}
|
||||
|
||||
this.wireObject = function () {
|
||||
this.calcEngine = new CalcEngine(this);
|
||||
return this.calcEngine;
|
||||
}
|
||||
}
|
||||
return ArrayCalcData;
|
||||
})();
|
||||
|
||||
function create2DArray(rows) {
|
||||
var arr = [];
|
||||
|
||||
for (var i = 0; i < rows; i++) {
|
||||
arr[i] = [];
|
||||
}
|
||||
|
||||
return arr;
|
||||
}
|
||||
|
||||
|
||||
$(".e-ejinputtext").val("");
|
||||
$(".e-ejinputtext").outerWidth(100);
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
$('#btnGen').trigger('click');
|
||||
|
||||
</script>
|
||||
<style type="text/css" class="cssStyles">
|
||||
|
||||
.control {
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
}
|
||||
.calcBox {
|
||||
margin-left: 0px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
.tdcls {
|
||||
width: 200px;
|
||||
}
|
||||
.tempcalcBox {
|
||||
margin-left: 5px;
|
||||
margin-top: 5px;
|
||||
height: 10px;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,594 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,298 @@
|
|||
<!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="Grid"></div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="calcBox" id="calcdesc">
|
||||
Enter a formula based on grid cells like = A1 + B2 + Cos(B1). Then press Compute.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="tempcalcBox">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3" id="formuladiv">
|
||||
Enter Formula
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="tdcls">
|
||||
<input id="formulaTxt" class="e-ejinputtext" type="text" value="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="tempcalcBox">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<input type="button" value="Compute" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="tempcalcBox">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3" id="resultLable">
|
||||
Result
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="tempcalcBox">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="result">
|
||||
<div class="tempcalcBox">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
var griddata = [{ sno: 1, a: 6, b: 58, c: 35, d: 0.01, e: "7/18/2011 7:45:05 AM", f: 7500, g:-120000 },
|
||||
{ sno: 2, a: 10, b: 11, c: 25, d: 6, e: 1, f: 4, g:39000 },
|
||||
{ sno: 3, a: 0.5, b: 10, c: 23, d: 4, e: 4, f: 3.5, g:30000 },
|
||||
{ sno: 4, a: 0.75, b: 45.35, c: 47.65, d: 0.06, e: 8, f: 1.2, g:21000 },
|
||||
{ sno: 5, a: 0.05, b: 17.56, c: 18.44, d: 10, e: 20, f: 0.908789, g:37000 },
|
||||
{ sno: 6, a: 2.5, b: 16.09, c: 16.91, d: -200, e: 10, f: 40, g:46000 },
|
||||
{ sno: 7, a: 50, b: 2400, c: 15.20, d: -500, e: 3, f: 1.5, g:0.1 },
|
||||
{ sno: 8, a: 0.09, b: 300, c: 6, d: 0.068094, e: 8000, f: 10, g:0.12 },
|
||||
{ sno: 9, a: 30, b: 10, c: 4, d: 0.01, e: "FLUId:FLOW", f: 2, g:42 },
|
||||
{ sno: 10, a: 125000, b: "STREET", c: -200, d: 2, e: "$1000", f: 2000, g:122}]
|
||||
|
||||
|
||||
|
||||
|
||||
var element = $("#Grid");
|
||||
element.ejGrid({
|
||||
dataSource: griddata,//ej.DataManager(window.gridData).executeLocal(ej.Query().take(100)),//
|
||||
editSettings:{allowEditing: true,
|
||||
allowAdding: true,
|
||||
editMode: ej.Grid.EditMode.Batch,
|
||||
},
|
||||
columns: [
|
||||
{ field: "sno", headerText: "sno", isPrimaryKey: true, visible: false },
|
||||
{ field: "a", headerText: "A", type: "string" },
|
||||
{ field: "b", headerText: "B", type: "string" },
|
||||
{ field: "c", headerText: "C", type: "string" },
|
||||
{ field: "d", headerText: "D", type: "string" },
|
||||
{ field: "e", headerText: "E", type: "string" },
|
||||
{ field: "f", headerText: "F", type: "string" },
|
||||
{ field: "g", headerText: "G", type: "string" }
|
||||
],
|
||||
toolbarSettings: { showToolbar: true, toolbarItems: ['update', 'cancel'] },
|
||||
rowSelecting:"rowSelectChange",
|
||||
});
|
||||
document.getElementById("formuladiv").style.fontWeight = 'bold';
|
||||
document.getElementById("calcdesc").style.color = 'dimgray';
|
||||
document.getElementById("resultLable").style.fontWeight = 'bold';
|
||||
document.getElementById("result").style.fontSize = "25px";
|
||||
var namedRangeList = calcObj.getNamedRanges().keys();
|
||||
$("#selectrow").ejDropDownList({
|
||||
change: "selectChange", dataSource: namedRangeList, width: "100px", selectedItemIndex: 0
|
||||
});
|
||||
|
||||
$("input:button").ejButton({
|
||||
click: function (args) {
|
||||
if (document.activeElement.value == "Compute") {
|
||||
try
|
||||
{
|
||||
var value = calcObj.parseAndComputeFormula($("#formulaTxt").val());
|
||||
document.getElementById("result").innerHTML = value;
|
||||
}
|
||||
catch(ex)
|
||||
{
|
||||
alert(ex.message);
|
||||
}
|
||||
}
|
||||
else if (document.activeElement.value == "OK") {
|
||||
$("#Grid").data("ejGrid")._triggerConfirm(args);
|
||||
}
|
||||
else if (document.activeElement.value == "Cancel") {
|
||||
$("#Grid").data("ejGrid")._triggerConfirm(args);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
function rowSelectChange() {
|
||||
$("#Grid_cancel").attr("aria-disabled", false);
|
||||
$("#Grid_cancel").removeClass("e-disable");
|
||||
$("#Grid_update").attr("aria-disabled", false);
|
||||
$("#Grid_update").removeClass("e-disable");
|
||||
}
|
||||
|
||||
function selectChange() {
|
||||
|
||||
var selectedName = $('#selectrow').data("ejDropDownList");
|
||||
$("#cellRange").val() = calcObj.getNamedRanges.getItem(selectedName);
|
||||
alert($("#cellRange").val());
|
||||
}
|
||||
|
||||
$(".e-ejinputtext").val("");
|
||||
$(".e-ejinputtext").outerWidth(100);
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
var calcObj = new CalcEngine($("#Grid"));
|
||||
calcObj.setUseDependencies(true);
|
||||
calcObj.registerGridAsSheet("Sheet1", $("#Grid"), "0");
|
||||
calcObj.cell = "G10";
|
||||
|
||||
calcObj.addNamedRange("SUMRANGE", "Sheet1!$B$1:$B$3")
|
||||
|
||||
calcObj.addNamedRange("FIRSTCELL", "Sheet1!A1")
|
||||
|
||||
|
||||
|
||||
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
|
||||
calcObj.getValueRowCol = function (sheetID,row, col) {
|
||||
var girdData = $("#Grid").data("ejGrid");
|
||||
var rowData = $("#Grid").data("ejGrid").model.dataSource[Number(row) - 1];
|
||||
if (girdData.batchChanges.changed.length > 0) {
|
||||
for (var i in girdData.batchChanges.changed) {
|
||||
if (girdData.batchChanges.changed[i].sno == rowData.sno) {
|
||||
rowData = girdData.batchChanges.changed[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
var data = "";
|
||||
switch (col) {
|
||||
case 1:
|
||||
data = rowData.a;
|
||||
break;
|
||||
case 2:
|
||||
data = rowData.b;
|
||||
break;
|
||||
case 3:
|
||||
data = rowData.c;
|
||||
break;
|
||||
case 4:
|
||||
data = rowData.d;
|
||||
break;
|
||||
case 5:
|
||||
data = rowData.e;
|
||||
break;
|
||||
case 6:
|
||||
data = rowData.f;
|
||||
break;
|
||||
case 7:
|
||||
data = rowData.g;
|
||||
break;
|
||||
default:
|
||||
data = "";
|
||||
break;
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
calcObj.setValueRowCol = function (sheetID, value, row, col) {
|
||||
//var rowData = grid.model.currentViewData[Number(row) - 1];
|
||||
var rowData = $("#Grid").data("ejGrid").model.dataSource[Number(row) - 1];
|
||||
var data = "";
|
||||
switch (col) {
|
||||
case 1:
|
||||
rowData.a = value;
|
||||
break;
|
||||
case 2:
|
||||
rowData.b = value;
|
||||
break;
|
||||
case 3:
|
||||
rowData.c = value;
|
||||
break;
|
||||
case 4:
|
||||
rowData.d = value;
|
||||
break;
|
||||
case 5:
|
||||
rowData.e = value;
|
||||
break;
|
||||
case 6:
|
||||
rowData.f = value;
|
||||
break;
|
||||
case 7:
|
||||
rowData.g = value;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style type="text/css" class="cssStyles">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.calcBox
|
||||
|
||||
{
|
||||
|
||||
margin-left: 5px;
|
||||
|
||||
margin-top: 5px;
|
||||
height : auto;
|
||||
|
||||
}
|
||||
|
||||
.tempcalcBox
|
||||
|
||||
{
|
||||
|
||||
margin-left: 5px;
|
||||
|
||||
margin-top: 5px;
|
||||
height : 10px;
|
||||
|
||||
}
|
||||
|
||||
.formulaTxt
|
||||
{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tdcls {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,295 @@
|
|||
<!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>
|
||||
<![end if]-->
|
||||
<!--[if gte IE 9]> <!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js"></script>
|
||||
<!--<![end if]-->
|
||||
<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="Grid"></div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<table>
|
||||
<tr>
|
||||
<td class="tdcls"><span class="txt">
|
||||
<label>Select Formula</label></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tdcls">
|
||||
<input id="formulaList" type="text" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tdcls"><span class="txt">
|
||||
<label>FormulaText</label></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tdcls">
|
||||
<input id="formulabox" type="text" /></td>
|
||||
</tr>
|
||||
</table>
|
||||
</br>
|
||||
<div class="calcBox">
|
||||
<button class="e-btn" id="calculateBtn">Calculate</button>
|
||||
</div>
|
||||
</br>
|
||||
<table>
|
||||
<tr>
|
||||
<td class="tdcls"><span class="txt">
|
||||
<label>Description</label></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tdcls">
|
||||
<input id="description" type="text" /></td>
|
||||
</tr></br>
|
||||
<tr>
|
||||
<td class="tdcls"><span class="txt">
|
||||
<label>Result</label></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="tdcls">
|
||||
<input id="description" type="text" /></td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
var griddata = [{ sno: 1, a: 1, b: 2, c: 3, d: 4, e: 6, f: 7}, { sno: 2, a: 2, b: 4, c: 3, d: 4, e: 6, f: 7},
|
||||
{ sno: 3, a: 3, b: 2, c: 3, d: 4, e: 6, f: 7}, { sno: 4, a: 1, b: 4, c: 3, d: 4, e: 6, f: 7},
|
||||
{ sno: 3, a: 3, b: 2, c: 3, d: 4, e: 6, f: 7}, { sno: 4, a: 1, b: 4, c: 3, d: 4, e: 6, f: 7},
|
||||
{ sno: 3, a: 3, b: 2, c: 3, d: 4, e: 6, f: 7}, { sno: 4, a: 1, b: 4, c: 3, d: 4, e: 6, f: 7},
|
||||
{ sno: 5, a: 5, b: 8, c: 3, d: 4, e: 6, f: 7}, { sno: 6, a: 6, b: 6, c: 3, d: 4, e: 6, f: 7}]
|
||||
|
||||
var element = $("#Grid");
|
||||
element.ejGrid({
|
||||
dataSource: griddata,//ej.DataManager(window.gridData).executeLocal(ej.Query().take(100)),//
|
||||
editSettings: { allowEditing: true, allowAdding: true, editMode: ej.Grid.EditMode.Batch },
|
||||
columns: [
|
||||
{ field: "sno", headerText: "sno", isPrimaryKey: true, visible: false },
|
||||
{ field: "a", headerText: "A", type: "string" },
|
||||
{ field: "b", headerText: "B", type: "string" },
|
||||
{ field: "c", headerText: "C", type: "string" },
|
||||
{ field: "d", headerText: "D", type: "string" },
|
||||
{ field: "e", headerText: "E", type: "string" },
|
||||
{ field: "f", headerText: "F", type: "string" },
|
||||
{ field: "g", headerText: "G", type: "string" },
|
||||
|
||||
],
|
||||
toolbarSettings: { showToolbar: true, toolbarItems: ['update', 'cancel'] },
|
||||
|
||||
|
||||
});
|
||||
var formulaCountList = calcObj.getLibraryFunctions().keys()
|
||||
$("#formulaList").ejDropDownList({ "change": "selectChange", dataSource:formulaCountList ,width: "120px",selectedItemIndex:0});
|
||||
|
||||
|
||||
});
|
||||
var calcObj = new CalcEngine($("#Grid").data("ejGrid"));
|
||||
calcObj.setUseDependencies(true);
|
||||
calcObj.registerGridAsSheet("Sheet1", "Sheet1", "0");
|
||||
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
|
||||
$("#calculateBtn").ejButton({
|
||||
|
||||
width: "180px", // set the width for the Button
|
||||
|
||||
height: "35px", // set the height for the button
|
||||
|
||||
showRoundedCorner: true, // set the rounded corner option to true
|
||||
|
||||
click: "calculateClick" // set click event of button
|
||||
|
||||
});
|
||||
function calculateClick() {
|
||||
|
||||
var dropdown = $('#formulaList').data("ejDropDownList");
|
||||
var selectedFormula = dropdown.getValue();
|
||||
XMLname = "CalcEngine.xml";
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: XMLname,
|
||||
dataType: "xml",
|
||||
success: function (xml) {
|
||||
alert(XMLname);
|
||||
}
|
||||
});
|
||||
|
||||
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
|
||||
xmlDoc.async = false;
|
||||
xmlDoc.load(XMLname);
|
||||
var M = xmlDoc.getElementsByTagName(selectedFormula);
|
||||
|
||||
return xmlDoc;
|
||||
alert(M);
|
||||
}
|
||||
|
||||
function loadXMLDoc(XMLname)
|
||||
{
|
||||
var xmlDoc;
|
||||
if (window.XMLHttpRequest)
|
||||
{
|
||||
xmlDoc=new window.XMLHttpRequest();
|
||||
xmlDoc.open("GET",XMLname,false);
|
||||
xmlDoc.send("");
|
||||
return xmlDoc.responseXML;
|
||||
}
|
||||
|
||||
else if (ActiveXObject("Microsoft.XMLDOM"))
|
||||
{
|
||||
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
|
||||
xmlDoc.async=false;
|
||||
xmlDoc.load(XMLname);
|
||||
return xmlDoc;
|
||||
}
|
||||
alert("Error loading document!");
|
||||
return null;
|
||||
}
|
||||
function selectChange(args) {
|
||||
var gridObj = $("#Grid").data("ejGrid");
|
||||
if (gridObj.model.isEdit)
|
||||
$("#Grid").ejGrid("cancelEdit");
|
||||
if (this.getSelectedValue() == "inlineformtemplate")
|
||||
$("#Grid").ejGrid("option", { "editSettings": { editMode: this.getSelectedValue(), inlineFormTemplateID: "#template" } });
|
||||
else
|
||||
$("#Grid").ejGrid("option", { "editSettings": { editMode: this.getSelectedValue() } });
|
||||
}
|
||||
function complete(args) {
|
||||
if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "inlineformtemplate") {
|
||||
$("#Freight").ejNumericTextbox({ value: parseFloat($("#Freight").val()), width: "116px", height: "28px", decimalPlaces: 2 });
|
||||
$("#Freight").css({ 'text-align': 'left' });
|
||||
$("#ShipCountry").ejDropDownList({ width: '116px' });
|
||||
args.requestType == "beginedit" && $("#ShipCountry").ejDropDownList("setSelectedValue", args.row.children().eq(3).text());
|
||||
$(".e-field").css({ 'width': '116px', 'text-align': 'left' });
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
calcObj.getValueRowCol = function (sheetID, row, col) {
|
||||
var rowData = $("#Grid").data("ejGrid").model.dataSource[Number(row) - 1];
|
||||
var data = "";
|
||||
switch (col) {
|
||||
case 1:
|
||||
data = rowData.a;
|
||||
break;
|
||||
case 2:
|
||||
data = rowData.b;
|
||||
break;
|
||||
case 3:
|
||||
data = rowData.c;
|
||||
break;
|
||||
case 4:
|
||||
data = rowData.d;
|
||||
break;
|
||||
case 5:
|
||||
data = rowData.e;
|
||||
break;
|
||||
case 6:
|
||||
data = rowData.f;
|
||||
break;
|
||||
case 7:
|
||||
data = rowData.g;
|
||||
break;
|
||||
default:
|
||||
data = "";
|
||||
break;
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
calcObj.setValueRowCol = function (sheetID, value, row, col) {
|
||||
//var rowData = grid.model.currentViewData[Number(row) - 1];
|
||||
var rowData = $("#Grid").data("ejGrid").model.dataSource[Number(row) - 1];
|
||||
var data = "";
|
||||
switch (col) {
|
||||
case 1:
|
||||
rowData.a = value;
|
||||
break;
|
||||
case 2:
|
||||
rowData.b = value;
|
||||
break;
|
||||
case 3:
|
||||
rowData.c = value;
|
||||
break;
|
||||
case 4:
|
||||
rowData.d = value;
|
||||
break;
|
||||
case 5:
|
||||
rowData.e = value;
|
||||
break;
|
||||
case 6:
|
||||
rowData.f = value;
|
||||
break;
|
||||
case 7:
|
||||
rowData.g = value;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
<style type="text/css" class="cssStyles">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.calcBox
|
||||
|
||||
{
|
||||
|
||||
margin-left: 0px;
|
||||
|
||||
margin-top: 5px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.tdcls
|
||||
|
||||
{
|
||||
|
||||
width: 200px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,350 @@
|
|||
<!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="Grid"></div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Choose Name
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<input type="text" id="selectrow" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
New Range
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<input id="newName" class="e-ejinputtext" type="text" value="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Cell Range
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<input id="cellRange" class="e-ejinputtext" type="text" value="" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<input id="addBtn" type="button" value="Add Name Range" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<input id="delBtn" type="button" value="Delete Name Range" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<input id="viewBtn" type="button" value="View All Name Ranges"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Enter Formula
|
||||
</div>
|
||||
<input id="formulaText" class="e-ejinputtext" type="text" value="" />
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<input id="calcBtn" type="button" value="Calculate" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3" id="resultLable">
|
||||
Result
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="result">
|
||||
<div class="col-md-3">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
|
||||
var griddata = [{ sno: 1, a: 1, b: 2, c: 3, d: 4, e: 6, f: 7}, { sno: 2, a: 2, b: 4, c: 3, d: 4, e: 6, f: 7},
|
||||
{ sno: 3, a: 3, b: 2, c: 3, d: 4, e: 6, f: 7}, { sno: 4, a: 1, b: 4, c: 3, d: 4, e: 6, f: 7},
|
||||
{ sno: 3, a: 3, b: 2, c: 3, d: 4, e: 6, f: 7}, { sno: 4, a: 1, b: 4, c: 3, d: 4, e: 6, f: 7},
|
||||
{ sno: 3, a: 3, b: 2, c: 3, d: 4, e: 6, f: 7}, { sno: 4, a: 1, b: 4, c: 3, d: 4, e: 6, f: 7},
|
||||
{ sno: 5, a: 5, b: 8, c: 3, d: 4, e: 6, f: 7}, { sno: 6, a: 6, b: 6, c: 3, d: 4, e: 6, f: 7}]
|
||||
|
||||
var element = $("#Grid");
|
||||
element.ejGrid({
|
||||
dataSource: griddata,//ej.DataManager(window.gridData).executeLocal(ej.Query().take(100)),//
|
||||
editSettings:{allowEditing: true,
|
||||
allowAdding: true,
|
||||
editMode: ej.Grid.EditMode.Batch,
|
||||
},
|
||||
columns: [
|
||||
{ field: "sno", headerText: "sno", isPrimaryKey: true, visible: false },
|
||||
{ field: "a", headerText: "A", type: "string" },
|
||||
{ field: "b", headerText: "B", type: "string" },
|
||||
{ field: "c", headerText: "C", type: "string" },
|
||||
{ field: "d", headerText: "D", type: "string" },
|
||||
{ field: "e", headerText: "E", type: "string" },
|
||||
{ field: "f", headerText: "F", type: "string" }
|
||||
|
||||
],
|
||||
toolbarSettings: { showToolbar: true, toolbarItems: ['update', 'cancel'] },
|
||||
rowSelecting:"rowSelectChange",
|
||||
|
||||
});
|
||||
|
||||
var namedRangeList = calcObj.getNamedRanges().keys()
|
||||
$("#selectrow").ejDropDownList({
|
||||
change: "selectChange", dataSource: namedRangeList, width: "100px"
|
||||
});
|
||||
|
||||
document.getElementById("resultLable").style.fontWeight = 'bold';
|
||||
document.getElementById("result").style.fontSize = "25px";
|
||||
|
||||
$("input:button").ejButton({
|
||||
click: function (args) {
|
||||
if (document.activeElement.value == "Add Name Range") {
|
||||
|
||||
var cell = $("#cellRange").val();
|
||||
if (cell.indexOf("Sheet1!") == -1) {
|
||||
cell = "Sheet1!" + cell;
|
||||
}
|
||||
var row = 0; col = 0;
|
||||
var cellCol = calcObj.getCellsFromArgs(cell.substring(7));
|
||||
try {
|
||||
row = calcObj.rowIndex(cellCol[0]);
|
||||
col = calcObj.colIndex(cellCol[0]);
|
||||
}
|
||||
catch (ex) {
|
||||
alert("Invalid Cell Selection");
|
||||
}
|
||||
if ($("#newName").val() == "") {
|
||||
alert("Enter NamedRange Name");
|
||||
}
|
||||
else if (row <= 0 || col < 0 || row > 10 || col > 6) {
|
||||
alert("Invalid Cell Selection");
|
||||
}
|
||||
else if (!calcObj.addNamedRange($("#newName").val(), cell))
|
||||
alert("NamedRange exits");
|
||||
var namedRangeList = calcObj.getNamedRanges().keys()
|
||||
$("#selectrow").ejDropDownList({
|
||||
change: "selectChange", dataSource: namedRangeList, width: "100px", selectedItemIndex: 0
|
||||
});
|
||||
}
|
||||
else if (document.activeElement.value == "Delete Name Range") {
|
||||
|
||||
var dropdown = $('#selectrow').data("ejDropDownList");
|
||||
var selectedName = dropdown.getValue();
|
||||
if (selectedName == "") {
|
||||
alert("Enter NamedRange Name");
|
||||
}
|
||||
else
|
||||
calcObj.removeNamedRange(selectedName);
|
||||
var namedRangeList = calcObj.getNamedRanges().keys()
|
||||
$("#selectrow").ejDropDownList({
|
||||
change: "selectChange", dataSource: namedRangeList, width: "100px", selectedItemIndex: 0
|
||||
});
|
||||
}
|
||||
else if (document.activeElement.value == "View All Name Ranges") {
|
||||
var nranges = calcObj.getNamedRanges().keys()
|
||||
var namedRangesList = "";
|
||||
for (var i = 0; i < nranges.length; i++) {
|
||||
namedRangesList += nranges[i] + '\n';
|
||||
}
|
||||
if (namedRangesList == "") {
|
||||
alert("No NamedRanged");
|
||||
}
|
||||
else
|
||||
alert(namedRangesList);
|
||||
}
|
||||
else if (document.activeElement.value == "Calculate") {
|
||||
var value = calcObj.parseAndComputeFormula($("#formulaText").val());
|
||||
document.getElementById("result").innerHTML = value;
|
||||
}
|
||||
else if (document.activeElement.value == "OK") {
|
||||
$("#Grid").data("ejGrid")._triggerConfirm(args);
|
||||
}
|
||||
else if (document.activeElement.value == "Cancel") {
|
||||
$("#Grid").data("ejGrid")._triggerConfirm(args);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
function rowSelectChange() {
|
||||
$("#Grid_cancel").attr("aria-disabled", false);
|
||||
$("#Grid_cancel").removeClass("e-disable");
|
||||
$("#Grid_update").attr("aria-disabled", false);
|
||||
$("#Grid_update").removeClass("e-disable");
|
||||
}
|
||||
function selectChange(sender) {
|
||||
|
||||
var dropdown = $('#selectrow').data("ejDropDownList");
|
||||
var selectedName = dropdown.getValue();
|
||||
var value = calcObj.getNamedRanges().getItem(selectedName);
|
||||
document.getElementById("cellRange").value = value;
|
||||
|
||||
}
|
||||
|
||||
$(".e-ejinputtext").val("");
|
||||
$(".e-ejinputtext").outerWidth(100);
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
var calcObj = new CalcEngine($("#Grid"));
|
||||
calcObj.setUseDependencies(true);
|
||||
calcObj.registerGridAsSheet("Sheet1", $("#Grid"), "0");
|
||||
calcObj.cell = "G11";
|
||||
|
||||
|
||||
calcObj.addNamedRange("SUMRANGE", "Sheet1!$B$1:$B$3")
|
||||
|
||||
calcObj.addNamedRange("FIRSTCELL", "Sheet1!A1")
|
||||
|
||||
|
||||
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
|
||||
|
||||
calcObj.getValueRowCol = function (sheetID, row, col) {
|
||||
var girdData = $("#Grid").data("ejGrid");
|
||||
var rowData = $("#Grid").data("ejGrid").model.dataSource[Number(row) - 1];
|
||||
if (girdData.batchChanges.changed.length > 0)
|
||||
{
|
||||
for(var i in girdData.batchChanges.changed)
|
||||
{
|
||||
if(girdData.batchChanges.changed[i].sno == rowData.sno)
|
||||
{
|
||||
rowData = girdData.batchChanges.changed[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
var data = "";
|
||||
switch (col) {
|
||||
case 1:
|
||||
data = rowData.a;
|
||||
break;
|
||||
case 2:
|
||||
data = rowData.b;
|
||||
break;
|
||||
case 3:
|
||||
data = rowData.c;
|
||||
break;
|
||||
case 4:
|
||||
data = rowData.d;
|
||||
break;
|
||||
case 5:
|
||||
data = rowData.e;
|
||||
break;
|
||||
case 6:
|
||||
data = rowData.f;
|
||||
break;
|
||||
case 7:
|
||||
data = rowData.g;
|
||||
break;
|
||||
default:
|
||||
data = "";
|
||||
break;
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
calcObj.setValueRowCol = function (sheetID, value, row, col) {
|
||||
//var rowData = grid.model.currentViewData[Number(row) - 1];
|
||||
var rowData = $("#Grid").data("ejGrid").model.dataSource[Number(row) - 1];
|
||||
var data = "";
|
||||
switch (col) {
|
||||
case 1:
|
||||
rowData.a = value;
|
||||
break;
|
||||
case 2:
|
||||
rowData.b = value;
|
||||
break;
|
||||
case 3:
|
||||
rowData.c = value;
|
||||
break;
|
||||
case 4:
|
||||
rowData.d = value;
|
||||
break;
|
||||
case 5:
|
||||
rowData.e = value;
|
||||
break;
|
||||
case 6:
|
||||
rowData.f = value;
|
||||
break;
|
||||
case 7:
|
||||
rowData.g = value;
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<style type="text/css" class="cssStyles">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.calcBox
|
||||
|
||||
{
|
||||
|
||||
margin-left: 0px;
|
||||
|
||||
margin-top: 5px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.tdcls
|
||||
|
||||
{
|
||||
|
||||
width: 200px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,89 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<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="container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" language="javascript">
|
||||
$(function ()
|
||||
{
|
||||
$("#container").ejChart(
|
||||
{
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis:
|
||||
{
|
||||
axisLine: { visible: false },
|
||||
majorGridLines: { visible: true, color: "#a9a9a9", opacity: 0.12 }
|
||||
},
|
||||
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
title: { text: "% of Employees" },
|
||||
majorGridLines: { visible: true, color: "#a9a9a9", opacity: 0.12 }
|
||||
},
|
||||
|
||||
//Initializing Common Properties for all the series
|
||||
commonSeriesOptions:
|
||||
{
|
||||
tooltip: { visible: true, format: " #series.name# <br/> #point.x# : #point.y#% " }
|
||||
},
|
||||
|
||||
//Initializing Series
|
||||
series:
|
||||
[
|
||||
{
|
||||
|
||||
points: [{ x: "All plans", y: 36 }, { x: "HMO", y: 18 }, { x: "PPO", y: 59 }, { x: "POS", y: 40 },
|
||||
{ x: "HDHP", y: 34 }, { x: "SO", y: 44 }],
|
||||
|
||||
type: 'bar',
|
||||
name: "California"
|
||||
},
|
||||
|
||||
{
|
||||
points: [{ x: "All plans", y: 61 }, { x: "HMO", y: 31 }, { x: "PPO", y: 70 }, { x: "POS", y: 31 },
|
||||
{ x: "HDHP", y: 60 }, { x: "SO", y: 62 }],
|
||||
|
||||
type: 'bar',
|
||||
name: "United States"
|
||||
}
|
||||
],
|
||||
|
||||
//Enabling 3D Chart
|
||||
enable3D: true,
|
||||
enableRotation: true,
|
||||
depth: 100,
|
||||
wallSize: 2,
|
||||
tilt: 0,
|
||||
rotation: 34,
|
||||
perspectiveAngle: 90,
|
||||
sideBySideSeriesPlacement: true,
|
||||
isResponsive: true,
|
||||
load: "loadTheme",
|
||||
title: { text: "Employees In Self Insured Plans, 2013" },
|
||||
size: { height: '600'},
|
||||
legend: { visible: true }
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<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="container"></div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Column Facet
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div id="dropdown">
|
||||
<select id="optColumnFacet">
|
||||
<option value="rectangle">Rectangle</option>
|
||||
<option value="cylinder">Cylinder</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" language="javascript">
|
||||
var chartObj;
|
||||
function columnFacetChanged(e)
|
||||
{
|
||||
$('#container').ejChart('option', { commonSeriesOptions: { columnFacet: e.value } });
|
||||
}
|
||||
$(function ()
|
||||
{
|
||||
$("#optColumnFacet").ejDropDownList({ "change": "columnFacetChanged", width: "110px",selectedItemIndex:0 });
|
||||
|
||||
$("#container").ejChart(
|
||||
{
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis:
|
||||
{
|
||||
valueType: 'category',
|
||||
labelFormat:"MMM",
|
||||
labelIntersectAction: 'multipleRows',
|
||||
majorGridLines: { visible: true, color: "#a9a9a9", opacity: 0.12 }
|
||||
},
|
||||
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
majorGridLines: { visible: true, color: "#a9a9a9", opacity: 0.12 }
|
||||
},
|
||||
|
||||
//Initializing Common Properties for all the series
|
||||
commonSeriesOptions:
|
||||
{
|
||||
tooltip: { visible: true, format: "#series.name#<br/>#point.x# : #point.y#mg" },
|
||||
type: "column"
|
||||
},
|
||||
|
||||
//Initializing Series
|
||||
series:
|
||||
[
|
||||
{
|
||||
points: [{ x: "Calcium sulfate(Gypsum hydrated)", y: 11 }, { x: "Phosphorus Pentachloride", y: 20 }, { x: "Sodium permanganate monohydrate", y: 8},
|
||||
{ x: "Magnesium permanganate", y: 9 }, { x: "Pottasium permanganate", y: 8.5}, { x: "Sodium bicarbonate", y: 6.3 }],
|
||||
|
||||
name: 'Chemicals in Soap X'
|
||||
},
|
||||
|
||||
{
|
||||
points: [{ x: "Calcium sulfate(Gypsum hydrated)", y: 6 }, { x: "Phosphorus Pentachloride", y: 26 }, { x: "Sodium permanganate monohydrate", y: 7 },
|
||||
{ x: "Magnesium permanganate", y: 32 }, { x: "Pottasium permanganate", y: 9.6 }, { x: "Sodium bicarbonate", y: 8.1 }],
|
||||
|
||||
name: 'Chemicals in Soap Y'
|
||||
}
|
||||
],
|
||||
|
||||
//Enabling 3D Chart
|
||||
enable3D: true,
|
||||
enableRotation: true,
|
||||
depth: 100,
|
||||
wallSize: 2,
|
||||
tilt: 0,
|
||||
rotation: 14,
|
||||
perspectiveAngle: 20,
|
||||
sideBySideSeriesPlacement: true,
|
||||
load: "loadTheme",
|
||||
title: { text: 'Chemicals in Soaps' },
|
||||
isResponsive: true,
|
||||
size: { height: '600'},
|
||||
legend: { visible: true }
|
||||
});
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<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="container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" language="javascript">
|
||||
$(function ()
|
||||
{
|
||||
$("#container").ejChart(
|
||||
{
|
||||
//Initializing Common Properties for all the series
|
||||
commonSeriesOptions:
|
||||
{
|
||||
labelPosition: 'outside',
|
||||
tooltip: { visible: true, format: "#point.x# : #point.y#%" },
|
||||
marker:
|
||||
{
|
||||
dataLabel:
|
||||
{
|
||||
shape: 'none',
|
||||
visible: true,
|
||||
textPosition: 'top',
|
||||
border: { width: 1},
|
||||
connectorLine: { height: 30, stroke:'black' }
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
//Initializing Series
|
||||
series:
|
||||
[
|
||||
{
|
||||
points: [{ x: "Watching TV", text: "Watching TV", y: 56 },
|
||||
{ x: "Socializing", text: "Socializing", y: 26 },
|
||||
{ x: "Reading", text: "Reading", y: 3 },
|
||||
{ x: "Sports", text: "Sports", y: 7 },
|
||||
{ x: "Others", text: "Others", y: 8 }],
|
||||
|
||||
type: 'doughnut',
|
||||
explodeIndex: 4,
|
||||
doughnutCoefficient: 0.5,
|
||||
doughnutSize: 0.8
|
||||
}
|
||||
],
|
||||
|
||||
//Enabling 3D Chart
|
||||
enable3D: true,
|
||||
enableRotation: true,
|
||||
depth: 30,
|
||||
tilt: -30,
|
||||
rotation: -30,
|
||||
perspectiveAngle: 90,
|
||||
isResponsive: true,
|
||||
load: "onchartload",
|
||||
title:{text:"People's Hobbies"},
|
||||
size: { height: "600", width:"970"},
|
||||
legend: { visible: false}
|
||||
});
|
||||
});
|
||||
|
||||
function onchartload(sender)
|
||||
{
|
||||
loadTheme(sender);
|
||||
if (sender.model.theme == "flatdark" || sender.model.theme == "gradientdark")
|
||||
sender.model.commonSeriesOptions.marker.dataLabel.connectorLine.stroke = "white";
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<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="container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" language="javascript">
|
||||
$(function ()
|
||||
{
|
||||
$("#container").ejChart(
|
||||
{
|
||||
//Initializing Common Properties for all the series
|
||||
commonSeriesOptions:
|
||||
{
|
||||
labelPosition: 'outside',
|
||||
tooltip: { visible: true, format: "#point.x# : #point.y#%" },
|
||||
marker:
|
||||
{
|
||||
dataLabel:
|
||||
{
|
||||
shape: 'none',
|
||||
visible: true,
|
||||
textPosition: 'top',
|
||||
border: { width: 1},
|
||||
connectorLine: { height: 70, stroke:"black" }
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
//Initializing Series
|
||||
series:
|
||||
[
|
||||
{
|
||||
points: [{ x: "Housing", text: "Housing", y: 31 },
|
||||
{ x: "Food", text: "Food", y: 16 },
|
||||
{ x: "Transportation", text: "Transportation", y: 14 },
|
||||
{ x: "Clothing", text: "Clothing", y: 6 },
|
||||
{ x: "Health care", text: "Health care", y: 8 },
|
||||
{ x: "Education", text: "Education", y: 17 },
|
||||
{ x: "Miscellaneous", text: "Miscellaneous", y: 8 }],
|
||||
|
||||
explodeIndex: 0,
|
||||
border: { width: 2, color: 'white' },
|
||||
type: 'pie',
|
||||
labelPosition: 'outside',
|
||||
startAngle: 145
|
||||
}
|
||||
],
|
||||
|
||||
//Enabling 3D Chart
|
||||
enable3D: true,
|
||||
enableRotation:true,
|
||||
depth: 30,
|
||||
tilt: -30,
|
||||
rotation: -30,
|
||||
perspectiveAngle: 90,
|
||||
isResponsive: true,
|
||||
load: "onchartload",
|
||||
title:{text:"Expenditure shares on a child from birth through age 17"},
|
||||
size: { height: "600", width:"970"},
|
||||
legend: { visible: false }
|
||||
});
|
||||
});
|
||||
|
||||
function onchartload(sender)
|
||||
{
|
||||
loadTheme(sender);
|
||||
if (sender.model.theme == "flatdark" || sender.model.theme == "gradientdark")
|
||||
sender.model.commonSeriesOptions.marker.dataLabel.connectorLine.stroke = "white";
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<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="container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" language="javascript">
|
||||
$(function ()
|
||||
{
|
||||
$("#container").ejChart(
|
||||
{
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis:
|
||||
{
|
||||
range: { min: 2008, max: 2015, interval: 1 },
|
||||
axisLine: { visible: false },
|
||||
majorGridLines: { visible: true, color: "#a9a9a9", opacity: 0.12 }
|
||||
},
|
||||
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
range: { min: 0, max: 20, interval: 2 },
|
||||
labelFormat:"${value}",
|
||||
title: { text: "Digital Ad Sales in Billion" },
|
||||
majorGridLines: { visible: true, color: "#a9a9a9", opacity: 0.12 }
|
||||
},
|
||||
//Initializing Common Properties for all the series
|
||||
commonSeriesOptions:
|
||||
{
|
||||
type: 'stackingbar',
|
||||
tooltip: { visible: true, format: " #series.name# <br/> Year #point.x# : #point.y# Billions " }
|
||||
},
|
||||
//Initializing Series
|
||||
series:
|
||||
[
|
||||
{
|
||||
points: [{ x: 2009, y: 2.9 }, { x: 2010, y: 3.8 }, { x: 2011, y: 4.9 }, { x: 2012, y: 6.5 },
|
||||
{ x: 2013, y: 7.1 }, { x: 2014, y: 7.5 } ],
|
||||
name:"Desktop Display"
|
||||
},
|
||||
|
||||
{
|
||||
points: [{ x: 2009, y: 0.1 }, { x: 2010, y: 0.5 }, { x: 2011, y: 1.4 }, { x: 2012, y: 2.9 },
|
||||
{ x: 2013, y: 4.9 }, { x: 2014, y: 6.8 }],
|
||||
name:"Mobile"
|
||||
},
|
||||
|
||||
{
|
||||
points: [{ x: 2009, y: 0.1 }, { x: 2010, y: 0.5 }, { x: 2011, y: 1.1 }, { x: 2012, y: 2.0 },
|
||||
{ x: 2013, y: 3.1 }, { x: 2014, y: 3.9 }],
|
||||
name:"Video"
|
||||
}
|
||||
],
|
||||
//Enabling 3D Chart
|
||||
enable3D: true,
|
||||
enableRotation: true,
|
||||
depth: 100,
|
||||
wallSize: 2,
|
||||
tilt: 0,
|
||||
rotation: 34,
|
||||
perspectiveAngle: 90,
|
||||
sideBySideSeriesPlacement: true,
|
||||
load: "loadTheme",
|
||||
title:{text:"Forecast:Real-Time Bidding Digital Ad Sales"},
|
||||
isResponsive: true,
|
||||
size: { height: '600'},
|
||||
legend: { visible: true }
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<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="container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" language="javascript">
|
||||
$(function ()
|
||||
{
|
||||
$("#container").ejChart(
|
||||
{
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis:
|
||||
{
|
||||
axisLine: { visible: false },
|
||||
range: { min: 2005, max: 2012, interval: 1 },
|
||||
majorGridLines: { visible: true, color: "#a9a9a9", opacity: 0.12 }
|
||||
},
|
||||
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
majorGridLines: { visible: true, color: "#a9a9a9", opacity: 0.12 }
|
||||
},
|
||||
|
||||
//Initializing Common Properties for all the series
|
||||
commonSeriesOptions:
|
||||
{
|
||||
type: 'stackingbar100',
|
||||
tooltip:
|
||||
{ visible: true,
|
||||
format: " #series.name# <br/> X : #point.x# <br/> Y : #point.y# <br/> Percentage : #point.percentage#% "
|
||||
}
|
||||
},
|
||||
|
||||
//Initializing Series
|
||||
series:
|
||||
[
|
||||
|
||||
{
|
||||
points: [{ x: 2006, y: 8000 }, { x: 2007, y: 12000 }, { x: 2008, y: 20000 }, { x: 2009, y: 21000 },
|
||||
{ x: 2010, y: 28000 }, { x: 2011, y: 29000 }],
|
||||
name: "John"
|
||||
},
|
||||
{
|
||||
points: [{ x: 2006, y: 5000 }, { x: 2007, y: 15000 }, { x: 2008, y: 19000 }, { x: 2009, y: 25000 },
|
||||
{ x: 2010, y: 26000 }, { x: 2011, y: 30000 }],
|
||||
name: "Andrew"
|
||||
},
|
||||
{
|
||||
points: [{ x: 2006, y: 1400 }, { x: 2007, y: 1350 }, { x: 2008, y: 12000 }, { x: 2009, y: 14000 },
|
||||
{ x: 2010, y: 11000 }, { x: 2011, y: 20000}],
|
||||
name: "Thomas"
|
||||
},
|
||||
{
|
||||
points: [{ x: 2006, y: 1700 }, { x: 2007, y: 1600}, { x: 2008, y: 9000 }, { x: 2009, y: 12000 },
|
||||
{ x: 2010, y: 14000 }, { x: 2011, y: 19000 }],
|
||||
name: "Hendry"
|
||||
}
|
||||
],
|
||||
|
||||
//Enabling 3D Chart
|
||||
enable3D: true,
|
||||
enableRotation: true,
|
||||
depth: 100,
|
||||
wallSize: 2,
|
||||
tilt: 0,
|
||||
rotation: 34,
|
||||
perspectiveAngle: 90,
|
||||
sideBySideSeriesPlacement: true,
|
||||
load: "loadTheme",
|
||||
title: { text: "Money savings by year" },
|
||||
isResponsive: true,
|
||||
size: { height: '600'},
|
||||
legend: { visible: true }
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<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="container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" language="javascript">
|
||||
$(function ()
|
||||
{
|
||||
$("#container").ejChart(
|
||||
{
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis:
|
||||
{
|
||||
axisLine: { visible: false },
|
||||
range: { min: 2005, max: 2013, interval: 1 },
|
||||
title: { text: "Year" },
|
||||
majorGridLines: { visible: true, color: "#a9a9a9", opacity: 0.12 }
|
||||
},
|
||||
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
majorGridLines: { visible: true, color: "#a9a9a9", opacity: 0.12 }
|
||||
},
|
||||
|
||||
//Initializing Common Properties for all the series
|
||||
commonSeriesOptions:
|
||||
{
|
||||
type: 'stackingcolumn',
|
||||
tooltip:
|
||||
{
|
||||
visible: true,
|
||||
format: " #series.name# <br/> Year #point.x# : #point.y# Millions "
|
||||
}
|
||||
},
|
||||
|
||||
//Initializing Series
|
||||
series:
|
||||
[
|
||||
{
|
||||
points: [ { x: 2006, y: 8 }, { x: 2007, y: 5 }, { x: 2008, y: 4 }, { x: 2009, y: 12 },
|
||||
{ x: 2010, y: 16 }, { x: 2011, y: 6 }, { x: 2012, y: 13 }],
|
||||
name: "India",
|
||||
stackingGroup: 'Asia Continent'
|
||||
},
|
||||
{
|
||||
points: [ { x: 2006, y: 5 }, { x: 2007, y: 6 }, { x: 2008, y: 7 }, { x: 2009, y: 10 },
|
||||
{ x: 2010, y: 14 }, { x: 2011, y: 14 }, { x: 2012, y: 15 }],
|
||||
name: "China",
|
||||
stackingGroup: 'Asia Continent'
|
||||
},
|
||||
{
|
||||
points: [ { x: 2006, y: 14 }, { x: 2007, y: 14 }, { x: 2008, y: 13 }, { x: 2009, y: 13 },
|
||||
{ x: 2010, y: 13 }, { x: 2011, y: 13 }, { x: 2012, y: 12 }],
|
||||
name: "Canada",
|
||||
stackingGroup: 'North America Continent'
|
||||
},
|
||||
{
|
||||
points: [ { x: 2006, y: 17 }, { x: 2007, y: 16 }, { x: 2008, y: 13 }, { x: 2009, y: 10 },
|
||||
{ x: 2010, y: 12 }, { x: 2011, y: 13 }, { x: 2012, y: 14 }],
|
||||
name: "USA",
|
||||
stackingGroup:'North America Continent'
|
||||
}
|
||||
],
|
||||
|
||||
//Enabling 3D Chart
|
||||
enable3D: true,
|
||||
enableRotation: true,
|
||||
depth: 100,
|
||||
wallSize: 2,
|
||||
tilt: 0,
|
||||
rotation: 34,
|
||||
perspectiveAngle: 90,
|
||||
sideBySideSeriesPlacement: true,
|
||||
isResponsive: true,
|
||||
load: "loadTheme",
|
||||
title: { text: "Passenger Car Sales" },
|
||||
size: { height: '600'},
|
||||
legend: { visible: true }
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,99 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<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="container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" language="javascript">
|
||||
$(function ()
|
||||
{
|
||||
$("#container").ejChart(
|
||||
{
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis:
|
||||
{
|
||||
axisLine: { visible: false },
|
||||
range: { min: 2005, max: 2012, interval: 1 },
|
||||
title: { text: "Year" },
|
||||
majorGridLines: { visible: true, color: "#a9a9a9", opacity: 0.12 }
|
||||
},
|
||||
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
majorGridLines: { visible: true, color: "#a9a9a9", opacity: 0.12 }
|
||||
},
|
||||
|
||||
//Initializing Common Properties for all the series
|
||||
commonSeriesOptions:
|
||||
{
|
||||
type: 'stackingcolumn100',
|
||||
tooltip:
|
||||
{
|
||||
visible: true,
|
||||
format: " #series.name# <br/> X : #point.x# <br/> Y : #point.y# <br/> Percentage : #point.percentage#% "
|
||||
}
|
||||
},
|
||||
|
||||
//Initializing Series
|
||||
series:
|
||||
[
|
||||
{
|
||||
points: [{ x: 2006, y: 80000 }, { x: 2007, y: 22000 }, { x: 2008, y: 60000 }, { x: 2009, y: 39000 },
|
||||
{ x: 2010, y: 62000 },{ x: 2011, y: 90000 }],
|
||||
name: "India"
|
||||
},
|
||||
{
|
||||
points: [{ x: 2006, y: 50000 }, { x: 2007, y: 43000 }, { x: 2008, y: 52000 }, { x: 2009, y: 43000 },
|
||||
{ x: 2010, y: 47000 },{ x: 2011, y: 93000 }],
|
||||
name: "China"
|
||||
},
|
||||
{
|
||||
points: [{ x: 2006, y: 14000 }, { x: 2007, y: 14040 }, { x: 2008, y: 12000 }, { x: 2009, y: 7000 },
|
||||
{ x: 2010, y: 18000 }, { x: 2011, y: 40000 }],
|
||||
name: "Japan"
|
||||
},
|
||||
{
|
||||
points: [{ x: 2006, y: 17000 }, { x: 2007, y: 16020 }, { x: 2008, y: 14000 }, { x: 2009, y: 11000 },
|
||||
{ x: 2010, y: 14000 }, { x: 2011, y: 38000 }],
|
||||
name: "Pakistan"
|
||||
}
|
||||
],
|
||||
|
||||
//Enabling 3D Chart
|
||||
enable3D: true,
|
||||
enableRotation: true,
|
||||
depth: 100,
|
||||
wallSize: 2,
|
||||
tilt: 0,
|
||||
rotation: 34,
|
||||
perspectiveAngle: 90,
|
||||
sideBySideSeriesPlacement: true,
|
||||
load: "loadTheme",
|
||||
title: { text: "Smartphone Penetration in Asia" },
|
||||
isResponsive: true,
|
||||
size: { height: '600'},
|
||||
legend: { visible: true }
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,121 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<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="container"></div>
|
||||
</div>
|
||||
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Indexed : <input type="checkbox" checked onchange="isindex(this)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" language="javascript">
|
||||
|
||||
$(function () {
|
||||
$("#container").ejChart(
|
||||
{
|
||||
commonSeriesOptions:
|
||||
{
|
||||
|
||||
type: "column",
|
||||
},
|
||||
primaryYAxis: {
|
||||
labelFormat: "{value}$",title:{text:'Sales'}
|
||||
},
|
||||
primaryXAxis:{
|
||||
title:{text:"Days"},
|
||||
labelIntersectAction:"trim",
|
||||
labelPlacement:"betweenticks",
|
||||
crosshairLabel: { visible: true, },
|
||||
isIndexed:true,
|
||||
},
|
||||
series:
|
||||
[
|
||||
{
|
||||
points: [
|
||||
{ x: "Monday", y: 50 }, { x: "Tuesday", y: 40 }, { x: "Wednesday", y: 70 },
|
||||
{ x: "Thursday", y: 60 }, { x: "Friday", y: 50 },
|
||||
{ x: "Monday", y: 40 }, { x: "Tuesday", y: 50 }, { x: "Wednesday", y: 30 },
|
||||
{ x: "Thursday", y: 40 }, { x: "Friday", y: 70 },
|
||||
{ x: "Monday", y: 60 }, { x: "Tuesday", y: 30 }, { x: "Wednesday", y: 50 },
|
||||
{ x: "Thursday", y: 50 }, { x: "Friday", y: 40 },
|
||||
{ x: "Monday", y: 30 }, { x: "Tuesday", y: 55 }, { x: "Wednesday", y: 60 },
|
||||
{ x: "Thursday", y: 30 }, { x: "Friday", y: 60 },
|
||||
],
|
||||
name: 'Product X', opacity: 0.8,
|
||||
},
|
||||
{
|
||||
points: [
|
||||
{ x: "Monday", y: 60 }, { x: "Tuesday", y: 30 }, { x: "Wednesday", y: 40 },
|
||||
{ x: "Thursday", y: 80 }, { x: "Friday", y: 70 },
|
||||
{ x: "Monday", y: 50 }, { x: "Tuesday", y: 40 }, { x: "Wednesday", y: 50 },
|
||||
{ x: "Thursday", y: 50 }, { x: "Friday", y: 50 },
|
||||
{ x: "Monday", y: 70 }, { x: "Tuesday", y: 50 }, { x: "Wednesday", y: 60 },
|
||||
{ x: "Thursday", y: 30 }, { x: "Friday", y: 60 },
|
||||
{ x: "Monday", y: 40 }, { x: "Tuesday", y: 65 }, { x: "Wednesday", y: 70 },
|
||||
{ x: "Thursday", y: 40 }, { x: "Friday", y: 40 },
|
||||
],
|
||||
name: 'Product Y',
|
||||
},
|
||||
{
|
||||
points: [
|
||||
{ x: "Monday", y: 40 }, { x: "Tuesday", y: 60 }, { x: "Wednesday", y: 40 },
|
||||
{ x: "Thursday", y: 30 }, { x: "Friday", y: 80 },
|
||||
{ x: "Monday", y: 30 }, { x: "Tuesday", y: 30 }, { x: "Wednesday", y: 60 },
|
||||
{ x: "Thursday", y: 40 }, { x: "Friday", y: 40 },
|
||||
{ x: "Monday", y: 50 }, { x: "Tuesday", y: 20 }, { x: "Wednesday", y: 30 },
|
||||
{ x: "Thursday", y: 70 }, { x: "Friday", y: 60 },
|
||||
{ x: "Monday", y: 20 }, { x: "Tuesday", y: 35 }, { x: "Wednesday", y: 50 },
|
||||
{ x: "Thursday", y: 20 }, { x: "Friday", y: 30 },
|
||||
],
|
||||
name: 'Product Z',
|
||||
}
|
||||
],
|
||||
|
||||
load: "loadTheme",
|
||||
crosshair:{
|
||||
visible: true,
|
||||
type:"trackball"
|
||||
},
|
||||
isResponsive: true,
|
||||
|
||||
title: { text: "Weekly Products Sales Comparison" },
|
||||
legend: { visible: true, position: 'bottom' }
|
||||
});
|
||||
|
||||
});
|
||||
function isindex(tis){
|
||||
var chart=$("#container").ejChart("instance");
|
||||
chart.model.primaryXAxis.isIndexed=tis.checked;
|
||||
$("#container").ejChart("redraw");
|
||||
}
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<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="container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" language="javascript">
|
||||
$(function ()
|
||||
{
|
||||
$("#container").ejChart(
|
||||
{
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis:
|
||||
{
|
||||
title: { text: 'Year' },
|
||||
axisLine: { visible: false },
|
||||
majorGridLines: { visible: false },
|
||||
majorTickLines: { visible: false }
|
||||
},
|
||||
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
title: { text: 'Gold Price in Billion U.S Dollars' },
|
||||
axisLine: { visible: false },
|
||||
opacity: 0.5,
|
||||
majorGridLines: { visible: true }
|
||||
},
|
||||
|
||||
//Initializing Common Properties for all the series
|
||||
commonSeriesOptions:
|
||||
{
|
||||
enableAnimation: true,
|
||||
type: 'rangearea',
|
||||
opacity: 0.5,
|
||||
border: { width: 2 }
|
||||
},
|
||||
|
||||
//Initializing Series
|
||||
series:
|
||||
[
|
||||
{
|
||||
border: { width: 1, color: 'Indigo' },
|
||||
fill: "Indigo",
|
||||
name:'Gold Value'
|
||||
}
|
||||
],
|
||||
|
||||
//Initializing Zooming
|
||||
zooming:
|
||||
{
|
||||
enable: true,
|
||||
enableMouseWheel: true
|
||||
},
|
||||
title: { text: 'World Gold Price' },
|
||||
size: { height: "600" },
|
||||
load: onchartload,
|
||||
isResponsive: true,
|
||||
legend: { visible: true }
|
||||
});
|
||||
|
||||
function onchartload(sender)
|
||||
{
|
||||
loadTheme(sender);
|
||||
var data = GetData();
|
||||
sender.model.series[0].dataSource = data.Open;
|
||||
sender.model.series[0].xName = "XValue";
|
||||
sender.model.series[0].high = "high";
|
||||
sender.model.series[0].low = "low";
|
||||
}
|
||||
|
||||
function GetData()
|
||||
{
|
||||
var series1 = [];
|
||||
var series2 = [];
|
||||
var value = 70;
|
||||
var value1 = 50;
|
||||
for (var i = 1; i < 1000; i++)
|
||||
{
|
||||
if (Math.random() > .5)
|
||||
{
|
||||
value += Math.random();
|
||||
}
|
||||
else
|
||||
{
|
||||
value -= Math.random();
|
||||
}
|
||||
var point1 = { XValue: new Date(1930, i + 2, i), high: value,low:value+20 };
|
||||
series1.push(point1);
|
||||
}
|
||||
var data = { Open: series1 };
|
||||
return data;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,177 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Accumulation Distribution Indicator </title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<script src="../scripts/ej.web.all.min.js" type="text/javascript"></script>
|
||||
<script src="../scripts/onlinedata.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="container"></div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Signal Line Stroke:
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<select name="signalLine" autocomplete="off" id="signalLine">
|
||||
<option value="0">Blue</option>
|
||||
<option value="1">Yellow</option>
|
||||
<option value="2">Green</option>
|
||||
<option value="3">Red</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" language="javascript">
|
||||
$("#container").ejChart(
|
||||
{
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis:
|
||||
{
|
||||
valueType: 'DateTime',
|
||||
labelFormat: "dd,MMM",
|
||||
title: { text: "Date" }
|
||||
},
|
||||
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
labelFormat: '${value}',
|
||||
range:{min:55,max:75,interval:5}
|
||||
},
|
||||
axes:
|
||||
[
|
||||
{
|
||||
opposedPosition: true,
|
||||
name: 'yaxis',
|
||||
majorGridLines: {visible: false}
|
||||
}
|
||||
],
|
||||
|
||||
//Initializing Series
|
||||
series:
|
||||
[
|
||||
{
|
||||
name: 'indicator',
|
||||
type: 'hiloopenclose',
|
||||
drawMode: 'both',
|
||||
dataSource: window.chartData,
|
||||
high:"High",
|
||||
low: "Low",
|
||||
close: "Close",
|
||||
open: "Open",
|
||||
volume:"Volume",
|
||||
xName: "xDate",
|
||||
tooltip:
|
||||
{
|
||||
visible: false,
|
||||
format: "#point.x#<br/>Open : $#point.open#<br/>High : $#point.high#<br/>Low : $#point.low#<br/>Close : $#point.close#<br/>"
|
||||
},
|
||||
enableAnimation: true
|
||||
}
|
||||
],
|
||||
|
||||
//Initializing Indicators
|
||||
indicators:
|
||||
[
|
||||
{
|
||||
type: 'accumulationdistribution',
|
||||
seriesName: 'indicator',
|
||||
yAxisName: 'yaxis',
|
||||
fill:"blue",
|
||||
width:2,
|
||||
tooltip:{visible:false,format:"",fill:"transparent", border: {color: "transparent"}},
|
||||
enableAnimation: true
|
||||
}
|
||||
],
|
||||
|
||||
//Initializing Crosshair
|
||||
crosshair:
|
||||
{
|
||||
visible: true,
|
||||
type: "trackball"
|
||||
},
|
||||
|
||||
//Initializing Zooming
|
||||
zooming:
|
||||
{
|
||||
enable: true
|
||||
},
|
||||
load: 'loadTheme',
|
||||
trackToolTip: 'track',
|
||||
size: { height: "600"},
|
||||
legend: { visible: false },
|
||||
title: { text: "Accumulation Distribution Indicator" },
|
||||
isResponsive: true,
|
||||
});
|
||||
|
||||
function getColorValue(name)
|
||||
{
|
||||
var val;
|
||||
switch(name)
|
||||
{
|
||||
case "Red":
|
||||
val="#FF0000";
|
||||
break;
|
||||
case "Green":
|
||||
val="#009900";
|
||||
break;
|
||||
case "Yellow":
|
||||
val="#D8B213";
|
||||
break;
|
||||
case "Blue":
|
||||
val="#0000FF";
|
||||
break;
|
||||
}
|
||||
return val;
|
||||
}
|
||||
|
||||
$('#signalLine').change(function ()
|
||||
{
|
||||
var option = $("#signalLine option:selected").text();
|
||||
var chart = $("#container").ejChart("instance");
|
||||
var value =getColorValue(option);
|
||||
chart.model.indicators[0].fill=value;
|
||||
$("#container").ejChart("redraw");
|
||||
});
|
||||
|
||||
function track(sender)
|
||||
{
|
||||
sender.data.Location.X = sender.data.Location.X + 1;
|
||||
if (sender.data.Series.name == "indicator")
|
||||
{
|
||||
if (this.model.indicators[0].segment.length > 0)
|
||||
{
|
||||
if (this.model.indicators[0].segment[0].points[sender.data.pointIndex].y != null)
|
||||
sender.data.currentText = sender.data.currentText + "Signal Line " + " :" + " $"
|
||||
+ this.model.indicators[0].segment[0].points[sender.data.pointIndex].y.toFixed(2) + "<br/>";
|
||||
else
|
||||
sender.data.currentText = sender.data.currentText + "Signal Line " + " :" + " $"
|
||||
+ this.model.indicators[0].segment[0].points[sender.data.pointIndex].y + "<br/>";
|
||||
}
|
||||
}
|
||||
}
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,240 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>Essential JS 1 : Alternate Grid Band</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet"/>
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<script src="../scripts/angular.min.js"></script>
|
||||
<script src="../scripts/ej.web.all.min.js" type="text/javascript"></script>
|
||||
<script src="../scripts/ej.widget.angular.min.js"></script>
|
||||
<script src="../scripts/ej.unobtrusive.min.js"></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="container"></div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<b>XAxis</b>
|
||||
<br />
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Alternate Grid Band
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<select name="selectIndex" autocomplete="off" id="optXAxisChange">
|
||||
<option value="0">None</option>
|
||||
<option value="1">Even</option>
|
||||
<option value="2">Odd</option>
|
||||
</select>
|
||||
</div>
|
||||
<br />
|
||||
<br />
|
||||
<br />
|
||||
<b>YAxis</b>
|
||||
<br />
|
||||
<div class="col-md-3">
|
||||
Alternate Grid Band
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<select name="disableItem" autocomplete="off" id="optYAxisChange">
|
||||
<option value="0">Even</option>
|
||||
<option value="1">Odd</option>
|
||||
<option value="2">None</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" language="javascript">
|
||||
var chartObj;
|
||||
$(function ()
|
||||
{
|
||||
$("#container").ejChart(
|
||||
{
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis:
|
||||
{
|
||||
valueType: "double",
|
||||
title: { text: "Year" },
|
||||
axisLine: { visible: false },
|
||||
majorTickLines: { visible: false },
|
||||
range: { min: 1965, max: 2010, interval: 5 },
|
||||
majorGridLines: { color: "transparent" }
|
||||
},
|
||||
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
title: { text: "Tons Per Day" },
|
||||
range: { min: 0, max: 18000, interval: 2000 },
|
||||
axisLine: { visible: false },
|
||||
majorTickLines: { visible: false },
|
||||
alternateGridBand:
|
||||
{
|
||||
even:
|
||||
{
|
||||
fill: "#A7A9AB",
|
||||
opacity: 0.1
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
//Initializing Common Properties for all the series
|
||||
commonSeriesOptions:
|
||||
{
|
||||
enableAnimation: true,
|
||||
tooltip:
|
||||
{ visible: true,
|
||||
format: "#series.name# <br/> Year: #point.x# <br/>Tons Per Day: #point.y#"
|
||||
}
|
||||
},
|
||||
|
||||
//Initializing Series
|
||||
series: [
|
||||
{
|
||||
points: [{ x: 1970, y: 16500 }, { x: 1975, y: 16000 },{ x: 1980, y: 15400 },
|
||||
{ x: 1985, y: 15800 }, { x: 1990, y: 14000 }, { x: 1995, y: 10500 },
|
||||
{ x: 2000, y: 13300 }, { x: 2005, y: 12800 }],
|
||||
name: "VOC Emission by All sources",
|
||||
type: 'column',
|
||||
fill: "#FF7F7F"
|
||||
},
|
||||
{
|
||||
points: [{ x: 1970, y: 8000 }, { x: 1975, y: 7600 }, { x: 1980, y: 6400 },
|
||||
{ x: 1985, y: 3700 }, { x: 1990, y: 7200 }, { x: 1995, y: 2300 },
|
||||
{ x: 2000, y: 4000 }, { x: 2005, y: 4800 }],
|
||||
name: "VOC Emission by Autos and Light Trucks",
|
||||
type: 'column',
|
||||
fill: "#3E9C9C"
|
||||
}
|
||||
],
|
||||
title: { text: "World Pollution Report" },
|
||||
load: "loadTheme",
|
||||
size: { height: "600" },
|
||||
isResponsive: true,
|
||||
legend: { visible: true },
|
||||
chartArea:
|
||||
{
|
||||
border: { color: "transparent" }
|
||||
}
|
||||
});
|
||||
|
||||
$('#optXAxisChange').change(function ()
|
||||
{
|
||||
var option1 = $("#optXAxisChange option:selected").text();
|
||||
var chart = $("#container").ejChart("instance");
|
||||
var ygridline = chart.model.primaryYAxis.alternateGridBand;
|
||||
switch (option1)
|
||||
{
|
||||
case 'Even':
|
||||
chart.model.primaryXAxis.alternateGridBand.odd.fill = 'transparent';
|
||||
chart.model.primaryXAxis.alternateGridBand.even.fill = "#A7A9AB";
|
||||
chart.model.primaryXAxis.alternateGridBand.even.opacity = 0.1;
|
||||
chart.model.primaryXAxis.majorGridLines.color = "#DFDFDF";
|
||||
chart.model.primaryYAxis.majorGridLines.color = "transparent";
|
||||
chart.model.primaryXAxis.axisLine.visible = false;
|
||||
chart.model.primaryYAxis.axisLine.visible = false;
|
||||
|
||||
chart.redraw();
|
||||
break;
|
||||
case 'Odd':
|
||||
chart.model.primaryXAxis.alternateGridBand.even.fill = 'transparent';
|
||||
chart.model.primaryXAxis.alternateGridBand.odd.fill = "#A7A9AB";
|
||||
chart.model.primaryXAxis.alternateGridBand.odd.opacity = 0.1;
|
||||
chart.model.primaryXAxis.majorGridLines.color = "#DFDFDF";
|
||||
chart.model.primaryYAxis.majorGridLines.color = "transparent";
|
||||
chart.model.primaryXAxis.axisLine.visible = false;
|
||||
chart.model.primaryYAxis.axisLine.visible = false;
|
||||
|
||||
chart.redraw();
|
||||
break;
|
||||
case 'None':
|
||||
chart.model.primaryXAxis.alternateGridBand.even.fill = 'transparent';
|
||||
chart.model.primaryXAxis.alternateGridBand.odd.fill = 'transparent';
|
||||
chart.model.primaryYAxis.majorGridLines.color = "#DFDFDF";
|
||||
if (ygridline.even.fill != "transparent" || ygridline.odd.fill != "transparent") {
|
||||
chart.model.primaryXAxis.majorGridLines.color = "transparent";
|
||||
chart.model.primaryXAxis.axisLine.visible = false;
|
||||
chart.model.primaryYAxis.axisLine.visible = false;
|
||||
}
|
||||
else {
|
||||
chart.model.primaryXAxis.axisLine.visible = true;
|
||||
chart.model.primaryYAxis.axisLine.visible = true;
|
||||
}
|
||||
chart.redraw();
|
||||
break;
|
||||
default:
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
$('#optYAxisChange').change(function ()
|
||||
{
|
||||
var option1 = $("#optYAxisChange option:selected").text();
|
||||
var chart = $("#container").ejChart("instance");
|
||||
var xgridline = chart.model.primaryXAxis.alternateGridBand;
|
||||
switch (option1)
|
||||
{
|
||||
case 'Even':
|
||||
chart.model.primaryYAxis.alternateGridBand.odd.fill = 'transparent';
|
||||
chart.model.primaryYAxis.alternateGridBand.even.fill = "#A7A9AB";
|
||||
chart.model.primaryYAxis.alternateGridBand.even.opacity = 0.1;
|
||||
chart.model.primaryYAxis.majorGridLines.color = "#DFDFDF";
|
||||
chart.model.primaryXAxis.majorGridLines.color = "transparent";
|
||||
chart.model.primaryXAxis.axisLine.visible = false;
|
||||
chart.model.primaryYAxis.axisLine.visible = false;
|
||||
|
||||
chart.redraw();
|
||||
break;
|
||||
case 'Odd':
|
||||
|
||||
chart.model.primaryYAxis.alternateGridBand.even.fill = 'transparent';
|
||||
chart.model.primaryYAxis.alternateGridBand.odd.fill = "#A7A9AB";
|
||||
chart.model.primaryYAxis.alternateGridBand.odd.opacity = 0.1;
|
||||
chart.model.primaryYAxis.majorGridLines.color = "#DFDFDF";
|
||||
chart.model.primaryXAxis.majorGridLines.color = "transparent";
|
||||
chart.model.primaryXAxis.axisLine.visible = false;
|
||||
chart.model.primaryYAxis.axisLine.visible = false;
|
||||
chart.redraw();
|
||||
break;
|
||||
case 'None':
|
||||
chart.model.primaryYAxis.alternateGridBand.even.fill = 'transparent';
|
||||
chart.model.primaryYAxis.alternateGridBand.odd.fill = 'transparent';
|
||||
chart.model.primaryXAxis.majorGridLines.color = "#DFDFDF";
|
||||
if (xgridline.even.fill != "transparent" || xgridline.odd.fill != "transparent")
|
||||
{
|
||||
chart.model.primaryYAxis.majorGridLines.color = "transparent";
|
||||
chart.model.primaryYAxis.axisLine.visible = false;
|
||||
chart.model.primaryXAxis.axisLine.visible = false;
|
||||
}
|
||||
else
|
||||
{
|
||||
chart.model.primaryXAxis.axisLine.visible = true;
|
||||
chart.model.primaryYAxis.axisLine.visible = true;
|
||||
}
|
||||
chart.redraw();
|
||||
break;
|
||||
default:
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,188 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<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="container"></div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Series Type
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<select name="selectIndex" id="seriestype">
|
||||
<option value="spline">Spline</option>
|
||||
<option value="area">Area</option>
|
||||
<option value="column">Column</option>
|
||||
<option value="bar">Bar</option>
|
||||
<option value="scatter">Scatter</option>
|
||||
<option value="bubble">Bubble</option>
|
||||
<option value="pie">Pie</option>
|
||||
<option value="doughnut">Doughnut</option>
|
||||
<option value="polar">Polar</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Series Animation
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<input type="checkbox" checked="checked" id="series"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Animation Duration
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<input type="text" id="duration"><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="Tooltip" style="display: none;">
|
||||
<div id="icon">
|
||||
<div id="airplaneicon">
|
||||
</div>
|
||||
</div>
|
||||
<div id="value">
|
||||
<div>
|
||||
<label id="no-of-airports"> #point.y#
|
||||
</label>
|
||||
<label id="airport">Airports
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" language="javascript">
|
||||
$(function ()
|
||||
{
|
||||
$("#container").ejChart(
|
||||
{
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis:
|
||||
{
|
||||
title: { text: 'Countries' },
|
||||
labelIntersectAction: "trim"
|
||||
},
|
||||
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
title: { text: 'Number of airports' }
|
||||
},
|
||||
|
||||
//Initializing Series
|
||||
series: [{
|
||||
points: [{ x: "Australia", y: 480, size: 1.8 }, { x: "China", y: 507, size: 2 },
|
||||
{ x: "France", y: 464, size: 1.7 }, { x: "Germany", y: 539, size: 2.4 },
|
||||
{ x: "India", y: 346, size: 1 }, {x: "Indonesia", y: 663, size: 3}, { x: "Saudi Arabia", y: 214, size: 0.6 },
|
||||
{ x: "South Afirca", y: 566, size: 2.6 }, { x: "United Kingdom", y: 460, size: 1.7 },
|
||||
{x: "Venezuela", y: 444, size: 1.6}],
|
||||
name: 'Airports', drawType: 'column', tooltip: {visible: true,template:"Tooltip"},
|
||||
enableAnimation :true, type: "spline", fill: "#5e35b1",
|
||||
marker: { shape: 'circle',
|
||||
size: { height: 10, width: 10 },
|
||||
visible: true
|
||||
}
|
||||
}],
|
||||
load:"loadTheme",
|
||||
isResponsive: true,
|
||||
title :{text: 'Total number of Airports in various countries'},
|
||||
legend: { visible: false, columnCount:5 }
|
||||
});
|
||||
$("#duration").ejNumericTextbox({
|
||||
groupSeparator:'', value: 2000, width: "85px", minValue :0, maxValue: 5000, incrementStep:500,change: "animationDuration"
|
||||
});
|
||||
});
|
||||
|
||||
$('#seriestype').change(function () {
|
||||
var chart = $("#container").ejChart('instance');
|
||||
var type = $('#seriestype')[0].value;
|
||||
chart.model.series[0].type = type;
|
||||
chart.model.legend.visible = type == 'pie' || type == 'doughnut';
|
||||
if (type == 'column' || type == "bar" || type == "bubble" || type == "polar")
|
||||
chart.model.series[0].marker.visible = false;
|
||||
else
|
||||
chart.model.series[0].marker.visible = true;
|
||||
chart.redraw();
|
||||
});
|
||||
|
||||
$('#series').change(function () {
|
||||
var chart = $("#container").ejChart("instance");
|
||||
chart.model.series[0].enableAnimation = $('#series').is(":checked");
|
||||
if ($('#series').is(":checked"))
|
||||
chart.animate();
|
||||
});
|
||||
|
||||
function animationDuration(sender)
|
||||
{
|
||||
var chart = $("#container").ejChart("instance");
|
||||
chart.model.series[0].animationDuration=parseInt(sender.value);
|
||||
chart.animate();
|
||||
}
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
</script>
|
||||
<style class="cssStyles">
|
||||
label{
|
||||
margin-bottom : -25px !important ;
|
||||
text-align :center !important;
|
||||
}
|
||||
.tooltipDiv {
|
||||
background-color:#E94649;
|
||||
color: white;
|
||||
width:130px;
|
||||
}
|
||||
#Tooltip >div:first-child {
|
||||
float: left;
|
||||
}
|
||||
#Tooltip #value {
|
||||
float: right;
|
||||
height: 50px;
|
||||
width: 60px;
|
||||
}
|
||||
#Tooltip #value >div {
|
||||
margin: 5px 5px 5px 5px;
|
||||
}
|
||||
#Tooltip #no-of-airports {
|
||||
font-size: 20px;
|
||||
font-family: segoe ui;
|
||||
padding-left: 2px;
|
||||
color: #ffffff;
|
||||
}
|
||||
#Tooltip #airport {
|
||||
font-size: 12px;
|
||||
font-family: segoe ui;
|
||||
color: #ffffff;
|
||||
}
|
||||
#airplaneicon {
|
||||
background-image: url("../content/images/chart/airplane.png");
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<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="container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id= "watermark" style="font-size:100px; display:none">2014</div>
|
||||
|
||||
<div id= "hightemp" style="display:none" align="center">
|
||||
<img style="width:50px;" src="../content/images/chart/sun_annotation.png">
|
||||
<div>Highest<br/>Temperature</div>
|
||||
</div>
|
||||
|
||||
<div id= "lowtemp" style="display:none;"align="center">
|
||||
<img style="width:50px;" src="../content/images/chart/rain_annotation.png">
|
||||
<div>Lowest<br/>Temperature</div>
|
||||
</div>
|
||||
<script type="text/javascript" language="javascript">
|
||||
|
||||
$(function () {
|
||||
$("#container").ejChart(
|
||||
{
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis:
|
||||
{
|
||||
title: { text: 'Month' }
|
||||
},
|
||||
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
range: { min: 0, max: 120, interval: 20 },
|
||||
title: { text: 'Temperature (Fahrenheit)' }
|
||||
},
|
||||
|
||||
//Initializing Common Properties for all the series
|
||||
commonSeriesOptions: {
|
||||
type: 'column', enableAnimation: true,
|
||||
tooltip :{ visible:false}
|
||||
},
|
||||
|
||||
//Initializing Series
|
||||
series: [{
|
||||
points: [{ x: "Jan", y: 60 }, { x: "Feb", y: 50 }, { x: "Mar", y: 64 }, { x: "Apr", y: 63 },
|
||||
{ x: "May", y: 81 }, { x: "Jun", y: 64 }, { x: "Jul", y: 82 }, { x: "Aug", y: 96 }, { x: "Sep", y: 78 }, { x: "Oct", y: 60 },
|
||||
{ x: "Nov", y: 58 }, { x: "Dec", y: 56 }
|
||||
],
|
||||
|
||||
name: 'India', fill: "#55AAFF", marker:{dataLabel:{visible:true, textPosition:"middle", font:{size:"14px"},enableContrastColor:true}}
|
||||
}],
|
||||
|
||||
annotations:[
|
||||
{visible:true, content:"watermark", opacity:0.2, region:"series"},
|
||||
{visible:true, content:"lowtemp", coordinateUnit:"points", x:1, y:51, verticalAlignment:"top", margin:{bottom:5}},
|
||||
{visible:true, content:"hightemp", coordinateUnit:"points", x:7, y:97, verticalAlignment: "top", margin:{bottom:5}}
|
||||
],
|
||||
load:"loadTheme",
|
||||
isResponsive: true,
|
||||
title :{text: 'Temperature flow over months'},
|
||||
size: { height: "600" },
|
||||
legend: { visible: false}
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<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="container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" language="javascript">
|
||||
$(function ()
|
||||
{
|
||||
$("#container").ejChart(
|
||||
{
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis:
|
||||
{
|
||||
axisLine:{visible:false},
|
||||
majorGridLines:{visible:false},
|
||||
majorTickLines: { visible: false },
|
||||
range: { min: 1900, max: 2000, interval: 10 },
|
||||
title: { text: 'Year' }
|
||||
},
|
||||
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
axisLine: { visible: false },
|
||||
majorTickLines: { visible: false },
|
||||
range: { min: 2, max: 5, interval: 0.5 },
|
||||
title: { text: 'Sales Amount in Millions' }
|
||||
},
|
||||
|
||||
//Initializing Series
|
||||
series:
|
||||
[
|
||||
{
|
||||
points: [{ x: 1900, y: 4 }, { x: 1920, y: 3.0 },{ x: 1940, y: 3.8 }, { x: 1960, y: 3.4 },
|
||||
{ x: 1980, y: 3.2 }, { x: 2000, y: 3.9 }],
|
||||
name: 'Product A',
|
||||
type: 'Area',
|
||||
enableAnimation: true,
|
||||
border:{color: 'transparent'},
|
||||
opacity: 0.5,
|
||||
fill:'#69D2E7'
|
||||
},
|
||||
|
||||
{
|
||||
points: [{ x: 1900, y: 2.6 }, { x: 1920, y: 2.8 },{ x: 1940, y: 2.6 }, { x: 1960, y: 3 },
|
||||
{ x: 1980, y: 3.6 }, { x: 2000, y: 3 }],
|
||||
name: 'Product B',
|
||||
type: 'Area',
|
||||
enableAnimation: true,
|
||||
opacity: 0.5,
|
||||
border: { color: 'transparent' },
|
||||
fill: '#C4C24A'
|
||||
},
|
||||
|
||||
{
|
||||
points: [{ x: 1900, y: 2.8 }, { x: 1920, y: 2.5 },{ x: 1940, y: 2.8 }, { x: 1960, y: 3.2 },
|
||||
{ x: 1980, y: 2.9 }, { x: 2000, y: 2 }],
|
||||
name: 'Product C',
|
||||
type: 'Area',
|
||||
enableAnimation: true,
|
||||
opacity: 0.5,
|
||||
border:{color: 'transparent'},
|
||||
fill: '#6A4B82'
|
||||
}
|
||||
],
|
||||
load:"loadTheme",
|
||||
isResponsive: true,
|
||||
title:{text: 'Average Sales Comparison' },
|
||||
size: { height: "600" },
|
||||
legend: { visible: true }
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,206 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<script src="../scripts/ej.web.all.min.js" type="text/javascript"></script>
|
||||
<script src="../scripts/properties.js" type="text/javascript"></script>
|
||||
<script src="../scripts/onlinedata.js" type="text/javascript"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area">
|
||||
<div id="container"></div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Period:
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<input type="text" id="period" value="5" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Signal Line Stroke:
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<select name="signalLine" autocomplete="off" id="signalLine">
|
||||
<option value="0">Blue</option>
|
||||
<option value="1">Yellow</option>
|
||||
<option value="2">Green</option>
|
||||
<option value="3">Red</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" language="javascript">
|
||||
$(function ()
|
||||
{
|
||||
var chartData = window.chartData;
|
||||
$("#container").ejChart(
|
||||
{
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis:
|
||||
{
|
||||
title: { text: "Date" },
|
||||
valueType: "datetime",
|
||||
labelFormat: "dd,MMM"
|
||||
},
|
||||
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
labelFormat: '${value}',
|
||||
range:{min:55,max:75,interval:5}
|
||||
},
|
||||
axes:
|
||||
[
|
||||
{
|
||||
name: 'yaxis',
|
||||
opposedPosition: true,
|
||||
majorGridLines: { visible: false }
|
||||
}
|
||||
],
|
||||
|
||||
//Initializing Series
|
||||
series:
|
||||
[
|
||||
{
|
||||
dataSource:chartData,
|
||||
xName: "xDate",
|
||||
high: "High",
|
||||
low: "Low",
|
||||
open: "Open",
|
||||
close: "Close",
|
||||
name: 'Hilo',
|
||||
type: 'hiloopenclose',
|
||||
drawMode: 'both',
|
||||
tooltip:
|
||||
{
|
||||
visible: false,
|
||||
format: "#point.x#<br/>Open : $#point.open#<br/>High : $#point.high#<br/>Low : $#point.low#<br/>Close : $#point.close#<br/>"
|
||||
},
|
||||
enableAnimation: true
|
||||
}
|
||||
],
|
||||
|
||||
//Initializing Indicators
|
||||
indicators:
|
||||
[
|
||||
{
|
||||
type: "atr",
|
||||
seriesName: "Hilo",
|
||||
yAxisName: "yaxis",
|
||||
enableAnimation: true,
|
||||
fill: "blue",
|
||||
width: 2,
|
||||
tooltip:
|
||||
{
|
||||
visible: false,
|
||||
format: "",
|
||||
fill: "transparent",
|
||||
border: {color: "transparent"}
|
||||
},
|
||||
enableAnimation: true
|
||||
}
|
||||
],
|
||||
|
||||
//Initializing Zooming
|
||||
zooming:
|
||||
{
|
||||
enable: true
|
||||
},
|
||||
|
||||
//Initializing Crosshair
|
||||
crosshair:
|
||||
{
|
||||
visible: true,
|
||||
type: 'trackball'
|
||||
},
|
||||
trackToolTip: 'track',
|
||||
isResponsive: true,
|
||||
load: 'loadTheme',
|
||||
title: { text: 'ATR Indicator' },
|
||||
size: { height: "600" },
|
||||
legend: { visible: false }
|
||||
});
|
||||
$("#period").ejNumericTextbox({
|
||||
value: 14, width: "80px", minValue :1, maxValue: 50, change: "period",
|
||||
});
|
||||
});
|
||||
|
||||
function period(sender)
|
||||
{
|
||||
var chartObj = $("#container").ejChart("instance");
|
||||
chartObj.model.indicators[0].period=parseInt(sender.value);
|
||||
$("#container").ejChart("redraw");
|
||||
}
|
||||
|
||||
function getColorValue(name)
|
||||
{
|
||||
var val;
|
||||
switch(name)
|
||||
{
|
||||
case "Red":
|
||||
val="#FF0000";
|
||||
break;
|
||||
case "Green":
|
||||
val="#009900";
|
||||
break;
|
||||
case "Yellow":
|
||||
val="#D8B213";
|
||||
break;
|
||||
case "Blue":
|
||||
val="#0000FF";
|
||||
break;
|
||||
}
|
||||
return val;
|
||||
}
|
||||
|
||||
$('#signalLine').change(function ()
|
||||
{
|
||||
var option = $("#signalLine option:selected").text();
|
||||
var chart = $("#container").ejChart("instance");
|
||||
var value =getColorValue(option);
|
||||
chart.model.indicators[0].fill=value;
|
||||
$("#container").ejChart("redraw");
|
||||
});
|
||||
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
|
||||
function track(sender)
|
||||
{
|
||||
sender.data.Location.X = sender.data.Location.X + 1;
|
||||
if (sender.data.Series.name == "Hilo")
|
||||
{
|
||||
if (this.model.indicators[0].segment.length > 0)
|
||||
{
|
||||
if (this.model.indicators[0].segment[0].points[sender.data.pointIndex].y != null)
|
||||
sender.data.currentText = sender.data.currentText + "Signal Line " + " :" + " $"
|
||||
+ this.model.indicators[0].segment[0].points[sender.data.pointIndex].y.toFixed(2) + "<br/>";
|
||||
else
|
||||
sender.data.currentText = sender.data.currentText + "Signal Line " + " :" + " $"
|
||||
+ this.model.indicators[0].segment[0].points[sender.data.pointIndex].y + "<br/>";
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<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="container"></div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<b>X-Axis</b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Crosses At
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<input id="xCrossingValue" min="-100" max="100" value="0" step="25"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3" style="width:80px">
|
||||
Show Next to Axis Line
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<input type="checkbox" style="margin-left:25px" id="myCheck1" name="ShowNextToAxisLine" onchange="axisCrossing()" checked >
|
||||
</div>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<b>Y-Axis</b>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Crosses At
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<input id="yCrossingValue" style= "max-width:80px;"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3" style="width:80px">
|
||||
Show Next to Axis Line
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<input type="checkbox" style="margin-left:25px" id="myCheck2" name="ShowNextToAxisLine" onchange="axisCrossing()" checked >
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript">
|
||||
$(function ()
|
||||
{
|
||||
|
||||
$("#container").ejChart(
|
||||
{
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis:
|
||||
{
|
||||
range: { min: 1998, max: 2012, interval: 2 },
|
||||
crossesAt: 0
|
||||
},
|
||||
margin:{ left:20 },
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
range: { min: -1, max: 1, interval: 0.25 },
|
||||
name:'primaryYAxis',
|
||||
labelFormat: 'p0',
|
||||
crossesAt: 2005,
|
||||
title: { text: 'Profit / loss percentage'}
|
||||
},
|
||||
//Initializing Common Properties for all the series
|
||||
commonSeriesOptions:
|
||||
{
|
||||
type:'bubble',
|
||||
enableAnimation: true,
|
||||
tooltip: { visible: true }
|
||||
},
|
||||
//Initializing Series
|
||||
series:
|
||||
[
|
||||
{
|
||||
points: [{ x: 2000, y: -.33, size: 5, fill: '#E94649' },
|
||||
{ x: 2000.5, y: .81, size: 4, fill: '#F6B53F' },
|
||||
{ x: 2001.5, y: .40, size: 9, fill: '#6FAAB0'},
|
||||
{ x: 2002, y: -.48, size: 2, fill: '#C4C24A' },
|
||||
{ x: 2002.5, y: -.19, size: 8, fill: '#FB954F' },
|
||||
{ x: 2003, y: .70, size: 11, fill: '#D9CEB2' },
|
||||
{ x: 2006, y: .62, size: 1, fill: '#FF8D8D' },
|
||||
{ x: 2007, y: .39, size: 9, fill: '#69D2E7' },
|
||||
{ x: 2008, y: .70, size: 6, fill: '#E27F2D' },
|
||||
{ x: 2009, y: .22, size: 7, fill: '#6A4B82' },
|
||||
{ x: 2010, y: .48, size: 7, fill: '#4B4B82' },
|
||||
{ x: 2006.5, y: -.62, size: 1, fill: '#CF8D8D' },
|
||||
{ x: 2007.5, y: -.39, size: 9, fill: '#B9D2E7' },
|
||||
{ x: 2008.5, y: -.70, size: 6, fill: '#A27F2D' },
|
||||
{ x: 2009.5, y: -.22, size: 7, fill: '#CA4D82' },
|
||||
{ x: 2010.5, y: -.48, size: 7, fill: '#B64A82' }],
|
||||
name: 'Sales',
|
||||
opacity: 0.7
|
||||
}
|
||||
],
|
||||
title: { text: 'Sales Analysis', subTitle:{ text: 'Profit till 2010', textAlignment : 'center'} },
|
||||
load: "loadTheme",
|
||||
isResponsive: true,
|
||||
legend: { visible: false },
|
||||
toolTipInitialize: function (args) {
|
||||
var point = args.model.series[args.data.seriesIndex].points[args.data.pointIndex];
|
||||
args.data.currentText = 'Sales in year ' + point.x + '<br/>Cost: ' + point.size + ' million(s)<br/>' + (point.y < 0 ? -point.y * 100 + ' % loss' : point.y * 100 + ' % profit');
|
||||
}
|
||||
});
|
||||
$("#xCrossingValue").ejNumericTextbox({
|
||||
value: 0, width: "80px", minValue :-100, maxValue: 100,decimalPlaces:0,incrementStep:25, change: "xCrossingValue",
|
||||
});
|
||||
$("#yCrossingValue").ejNumericTextbox({
|
||||
groupSeparator:'',value: 2005, width: "80px", minValue :1998, maxValue: 2012,decimalPlaces:0, change: "yCrossingValue",
|
||||
});
|
||||
|
||||
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
});
|
||||
function xCrossingValue(sender)
|
||||
{
|
||||
$("#container").ejChart("option", { primaryXAxis: { crossesAt : parseInt(sender.value)/100} });
|
||||
}
|
||||
function yCrossingValue(sender)
|
||||
{
|
||||
$("#container").ejChart("option", { primaryYAxis: { crossesAt : parseInt(sender.value)} });
|
||||
}
|
||||
function axisCrossing()
|
||||
{
|
||||
var chartobj = $("#container").ejChart("instance");
|
||||
var xCrossValue = document.getElementById('xCrossingValue');
|
||||
var yCrossValue = document.getElementById('yCrossingValue');
|
||||
if ($("#myCheck1").is(":checked"))
|
||||
chartobj.model.primaryXAxis.showNextToAxisLine = true;
|
||||
else
|
||||
chartobj.model.primaryXAxis.showNextToAxisLine = false;
|
||||
if ($("#myCheck2").is(":checked"))
|
||||
chartobj.model.primaryYAxis.showNextToAxisLine = true;
|
||||
else
|
||||
chartobj.model.primaryYAxis.showNextToAxisLine = false;
|
||||
$("#container").ejChart("redraw");
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<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="container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" language="javascript">
|
||||
$(function ()
|
||||
{
|
||||
$("#container").ejChart(
|
||||
{
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis:
|
||||
{
|
||||
title: { text: 'Year' },
|
||||
range: { min: 2005, max: 2012, interval: 1 },
|
||||
},
|
||||
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
range: { min: 3, max: 12, interval: 1 },
|
||||
labelFormat:"{value}%",
|
||||
title: { text: 'Percentage' }
|
||||
},
|
||||
|
||||
//Initializing Common Properties for all the series
|
||||
commonSeriesOptions:
|
||||
{
|
||||
type: 'bar',
|
||||
enableAnimation: true,
|
||||
tooltip:{visible:true, format: "#series.name# <br/> #point.x# : #point.y#"},
|
||||
marker:
|
||||
{
|
||||
dataLabel:
|
||||
{
|
||||
font: { size:'13px',fontFamily:'Segoe UI',fontStyle:'Normal',fontWeight:'regular'},
|
||||
textPosition: 'top',
|
||||
horizontalTextAlignment:"near",
|
||||
visible:true,
|
||||
enableContrastColor:true
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
//Initializing Series
|
||||
series:
|
||||
[
|
||||
{
|
||||
points: [{ x: 2006, y: 7.8 }, { x: 2007, y: 7.2}, { x: 2008, y: 6.8 }, { x: 2009, y: 10.7 },
|
||||
{ x: 2010, y: 10.8}, { x: 2011, y: 9.8 }],
|
||||
name: 'India'
|
||||
},
|
||||
{
|
||||
points: [{ x: 2006, y: 4.8 }, { x: 2007, y: 4.6 }, { x: 2008, y: 7.2 }, { x: 2009, y: 9.3 },
|
||||
{ x: 2010, y: 9.7}, { x: 2011, y: 9 }],
|
||||
name: 'US'
|
||||
}
|
||||
],
|
||||
load:"loadTheme",
|
||||
displayTextRendering:"OndataLabel",
|
||||
isResponsive: true,
|
||||
showTooltip: true,
|
||||
title:{text: 'Unemployment rate (%)'},
|
||||
size: { height: "600" },
|
||||
legend: { visible: true, position: 'right', alignment:"near" }
|
||||
});
|
||||
});
|
||||
|
||||
function OndataLabel(sender)
|
||||
{
|
||||
sender.data.location.x=sender.data.location.x+20;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,282 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>Bollinger Band Indicator </title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<script src="../scripts/ej.web.all.min.js" type="text/javascript"></script>
|
||||
<script src="../scripts/onlinedata.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="container"></div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Period:
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<input type="text" id="Period" value="5" />
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Standard
|
||||
Deviations:
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<input type="text" id="standardDeviations" value="5" />
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Upper Line Stroke:
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<select name="upperLine" autocomplete="off" id="upLine">
|
||||
<option value="0">Red</option>
|
||||
<option value="1">Yellow</option>
|
||||
<option value="2">Green</option>
|
||||
<option value="3">Blue</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Signal Line Stroke:
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<select name="signalLine" autocomplete="off" id="signalLine">
|
||||
<option value="0">Blue</option>
|
||||
<option value="1">Yellow</option>
|
||||
<option value="2">Green</option>
|
||||
<option value="3">Red</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
Lower Line Stroke:
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<select name="lowLine" autocomplete="off" id="lowLine">
|
||||
<option value="0">Green</option>
|
||||
<option value="1">Yellow</option>
|
||||
<option value="2">Red</option>
|
||||
<option value="3">Blue</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" language="javascript">
|
||||
$("#container").ejChart(
|
||||
{
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis:
|
||||
{
|
||||
title: { text: "Date" },
|
||||
valueType: "datetime",
|
||||
labelFormat: "dd/MMM"
|
||||
},
|
||||
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
labelFormat: '${value}',
|
||||
range:{min:55,max:75,interval:5}
|
||||
},
|
||||
axes:
|
||||
[{
|
||||
opposedPosition: true,
|
||||
range:{ min:55,max:75,interval:5},
|
||||
name: 'yaxis',
|
||||
}],
|
||||
|
||||
//Initializing Series
|
||||
series:
|
||||
[
|
||||
{
|
||||
name: 'Hilo',
|
||||
type: 'hiloopenclose',
|
||||
drawMode: 'both',
|
||||
dataSource: window.chartData,
|
||||
high:"High",
|
||||
low: "Low",
|
||||
close: "Close",
|
||||
open: "Open",
|
||||
xName: "xDate",
|
||||
enableAnimation: true,
|
||||
tooltip:
|
||||
{
|
||||
visible: false,
|
||||
format: "#point.x#<br/>Open : $#point.open#<br/>High : $#point.high#<br/>Low : $#point.low#<br/>Close : $#point.close#<br/>"
|
||||
}
|
||||
}
|
||||
],
|
||||
|
||||
//Initializing Indicators
|
||||
indicators:
|
||||
[{
|
||||
type: "bollingerband",
|
||||
seriesName: "Hilo",
|
||||
yAxisName: "yaxis",
|
||||
enableAnimation: true,
|
||||
upperLine: {width: 2},
|
||||
fill: "blue",
|
||||
width: 2,
|
||||
lowerLine: {width:2},
|
||||
tooltip:
|
||||
{
|
||||
visible: false,
|
||||
format: "",
|
||||
fill: "transparent",
|
||||
border: {color: "transparent"}
|
||||
}
|
||||
}],
|
||||
|
||||
//Initializing Zooming
|
||||
zooming:
|
||||
{
|
||||
enable: true
|
||||
},
|
||||
|
||||
//Initializing Crosshair
|
||||
crosshair:
|
||||
{
|
||||
visible: true,
|
||||
type: "trackball",
|
||||
},
|
||||
|
||||
trackToolTip: 'track',
|
||||
load: 'loadTheme',
|
||||
size: { height: "600"},
|
||||
legend: { visible:false },
|
||||
title: { text: "Bollinger Band Indicator" },
|
||||
isResponsive: true,
|
||||
});
|
||||
|
||||
$("#Period").ejNumericTextbox({
|
||||
value: 14, width: "80px", minValue :1, maxValue: 50, change: "period",
|
||||
});
|
||||
$("#standardDeviations").ejNumericTextbox({
|
||||
value: 2, width: "80px", minValue :1, maxValue: 10, change: "standarddeviations",
|
||||
});
|
||||
function track(sender)
|
||||
{
|
||||
sender.data.Location.X = sender.data.Location.X + 1;
|
||||
if (sender.data.Series.name == "Hilo")
|
||||
{
|
||||
if (this.model.indicators[0].segment.length > 0)
|
||||
{
|
||||
if (this.model.indicators[0].segment[0].points[sender.data.pointIndex].y != null){
|
||||
if(this.model.indicators[0].standardDeviations > 0)
|
||||
sender.data.currentText = sender.data.currentText + "Upper Band : " + "$"
|
||||
+ this.model.indicators[0].segment[0].points[sender.data.pointIndex].y.toFixed(2)
|
||||
+ "<br/>Signal Line " + " :" + " $"
|
||||
+ this.model.indicators[0].segment[2].points[sender.data.pointIndex].y.toFixed(2)
|
||||
+ "<br/>" + "Lower Band : " + "$"
|
||||
+ this.model.indicators[0].segment[1].points[sender.data.pointIndex].y.toFixed(2) + "<br/>" + "<br/>";
|
||||
else
|
||||
sender.data.currentText = sender.data.currentText + "Signal Line " + " :" + " $"
|
||||
+ this.model.indicators[0].segment[2].points[sender.data.pointIndex].y.toFixed(2) +
|
||||
"<br/>" + "<br/>";
|
||||
}
|
||||
else{
|
||||
if(this.model.indicators[0].standardDeviations > 0)
|
||||
sender.data.currentText = sender.data.currentText + "Upper Band : " + "$"
|
||||
+ this.model.indicators[0].segment[0].points[sender.data.pointIndex].y
|
||||
+ "<br/>Signal Line " + " :" + " $"
|
||||
+ this.model.indicators[0].segment[2].points[sender.data.pointIndex].y
|
||||
+ "<br/>" + "Lower Band : " + "$"
|
||||
+ this.model.indicators[0].segment[1].points[sender.data.pointIndex].y + "<br/>" + "<br/>";
|
||||
else
|
||||
sender.data.currentText = sender.data.currentText + "Signal Line " + " :" + " $"
|
||||
+ this.model.indicators[0].segment[2].points[sender.data.pointIndex].y +
|
||||
"<br/>" + "<br/>";
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function period(sender)
|
||||
{
|
||||
var chartObj = $("#container").ejChart("instance");
|
||||
chartObj.model.indicators[0].period=parseInt(sender.value);
|
||||
$("#container").ejChart("redraw");
|
||||
}
|
||||
|
||||
function standarddeviations(sender)
|
||||
{
|
||||
var chartObj = $("#container").ejChart("instance");
|
||||
chartObj.model.indicators[0].standardDeviations=parseInt(sender.value);
|
||||
$("#container").ejChart("redraw");
|
||||
}
|
||||
|
||||
function getColorValue(name)
|
||||
{
|
||||
var val;
|
||||
switch(name)
|
||||
{
|
||||
case "Red":
|
||||
val="#FF0000";
|
||||
break;
|
||||
case "Green":
|
||||
val="#009900";
|
||||
break;
|
||||
case "Yellow":
|
||||
val="#D8B213";
|
||||
break;
|
||||
case "Blue":
|
||||
val="#0000FF";
|
||||
break;
|
||||
}
|
||||
return val;
|
||||
}
|
||||
|
||||
$('#upLine').change(function ()
|
||||
{
|
||||
var option = $("#upLine option:selected").text();
|
||||
var chart = $("#container").ejChart("instance");
|
||||
var value =getColorValue(option);
|
||||
chart.model.indicators[0].upperLine.fill=value;
|
||||
$("#container").ejChart("redraw");
|
||||
});
|
||||
|
||||
$('#signalLine').change(function ()
|
||||
{
|
||||
var option = $("#signalLine option:selected").text();
|
||||
var chart = $("#container").ejChart("instance");
|
||||
var value =getColorValue(option);
|
||||
chart.model.indicators[0].fill=value;
|
||||
$("#container").ejChart("redraw");
|
||||
});
|
||||
|
||||
$('#lowLine').change(function ()
|
||||
{
|
||||
var option = $("#lowLine option:selected").text();
|
||||
var chart = $("#container").ejChart("instance");
|
||||
var value =getColorValue(option);
|
||||
chart.model.indicators[0].lowerLine.fill=value;
|
||||
$("#container").ejChart("redraw");
|
||||
});
|
||||
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,118 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<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="container"></div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row" style="margin: 10px 0;">
|
||||
<div class="col-md-3">
|
||||
BoxPlot Mode
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div id="dropdown">
|
||||
<select id="boxmode" style="width:50px;">
|
||||
<option value="Exclusive">Exclusive</option>
|
||||
<option value="Inclusive">Inclusive</option>
|
||||
<option value="Normal">Normal</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 10px 0;" >
|
||||
<div class="col-md-3">
|
||||
Show Median
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<input type="checkbox" id="Median" name="median" checked> <br/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
$(function()
|
||||
{
|
||||
$("#boxmode").ejDropDownList({ "change": "changeBoxmode",width: "110px",selectedItemIndex:0 });
|
||||
$("#container").ejChart(
|
||||
{
|
||||
|
||||
primaryXAxis:
|
||||
{
|
||||
title: { text: "Department" },
|
||||
labelIntersectAction : "trim"
|
||||
},
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
|
||||
title: { text:"Age" },
|
||||
|
||||
},
|
||||
commonSeriesOptions:
|
||||
{
|
||||
type: 'boxandwhisker',
|
||||
boxPlotMode:"exclusive",
|
||||
tooltip:{ visible :true},
|
||||
fill:"#69D2E7",
|
||||
outlierSettings:{
|
||||
shape:'circle',size:{width:6,heigth:6}
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
|
||||
|
||||
points: [{ x: "Development", y: [22,22,23,25,25,25,26,27,27,28,28,29,30,32,34,32,34,36,35,38] }, { x: "Testing", y: [22,33,23,25,26,28,29,30,34,33,32,31,50] },
|
||||
{ x: "HR", y: [22,24,25,30,32,34,36,38,39,41,35,36,40,56] }, { x: "Finance", y: [26,27,28,30,32,34,35,37,35,37,45] },
|
||||
{ x: "R&D", y: [26,27,29,32,34,35,36,37,38,39,41,43,58] },
|
||||
{ x: "Sales", y: [27,26,28,29,29,29,32,35,32,38,53] },{ x: "Inventory", y: [21,23,24,25,26,27,28,30,34,36,38] },
|
||||
{ x: "Graphics", y: [26,28,29,30,32,33,35,36, 52] },{ x: "Training", y: [28,29,30,31,32,34,35,36] }],
|
||||
|
||||
}
|
||||
],
|
||||
load:"loadTheme",
|
||||
isResponsive: true,
|
||||
title :{text: 'Employees age group in various departments'},
|
||||
legend: { visible: false }
|
||||
});
|
||||
var chart = $("#container").ejChart("instance");
|
||||
|
||||
$('#Median').click(function () {
|
||||
if ($("#Median").is(":checked"))
|
||||
chart.model.series[0].showMedian = true;
|
||||
else
|
||||
chart.model.series[0].showMedian = false;
|
||||
chart.redraw();
|
||||
});
|
||||
|
||||
});
|
||||
function changeBoxmode(e)
|
||||
{
|
||||
$('#container').ejChart('option', { commonSeriesOptions: { boxPlotMode: e.value } });
|
||||
}
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<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="container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" language="javascript">
|
||||
$(function ()
|
||||
{
|
||||
$("#container").ejChart(
|
||||
{
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis:
|
||||
{
|
||||
title: { text: 'Literacy Rate' },
|
||||
range: {min:60, max:100, interval:5}
|
||||
},
|
||||
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
title: { text: 'GDP Growth Rate' },
|
||||
range: {min:-2, max:16, interval:2}
|
||||
},
|
||||
|
||||
//Initializing Series
|
||||
series:
|
||||
[
|
||||
{
|
||||
points: [{ x: 92.2, y: 7.8, size: 1.347, fill: '#E94649', text:'China' },
|
||||
{ x: 74, y: 6.5, size: 1.241, fill: '#F6B53F', text:'India' },
|
||||
{ x: 90.4, y: 6.0, size: 0.238, fill: '#6FAAB0', text:'Indonesia' },
|
||||
{ x: 99.4, y: 2.2, size: 0.312, fill: '#C4C24A', text:'US' },
|
||||
{ x: 88.6, y: 1.3, size: 0.197, fill: '#FB954F', text:'Brazil' },
|
||||
{ x: 54.9, y: 3.7, size: 0.177, fill: '#D9CEB2', text:'Pakistan' },
|
||||
{ x: 99, y: 0.7, size: 0.0818, fill: '#FF8D8D', text:'Germany' },
|
||||
{ x: 72, y: 2.0, size: 0.0826, fill: '#69D2E7', text:'Egypt' },
|
||||
{ x: 99.6, y: 3.4, size: 0.143, fill: '#E27F2D', text:'Russia' },
|
||||
{ x: 99, y: 0.2, size: 0.128, fill: '#6A4B82', text:'Japan' },
|
||||
{ x: 86.1, y: 4.0, size: 0.115, fill: '#F6B53F', text:'Mexico' },
|
||||
{ x: 92.6, y: 6.6, size: 0.096, fill: '#C4C24A', text:'Philippines' },
|
||||
{ x: 61.3, y: 14.5, size: 0.162, fill: '#FF8D8D', text:'Nigeria' },
|
||||
{ x: 56.8, y: 6.1, size: 0.151, fill: '#69D2E7', text:'Bangladesh' }],
|
||||
enableAnimation: true,
|
||||
tooltip :
|
||||
{
|
||||
visible:true ,
|
||||
format: "#point.text#<br/>Literacy Rate : #point.x#%<br/>GDP Annual Growth Rate : #point.y#<br/>Population : #point.size# Billion"
|
||||
},
|
||||
name: 'pound',
|
||||
type: 'bubble',
|
||||
opacity: 0.7
|
||||
}
|
||||
],
|
||||
load:"loadTheme",
|
||||
isResponsive: true,
|
||||
title :{text: 'World Countries Details'},
|
||||
size: { height: "600" },
|
||||
legend: { visible: false}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<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="container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="Tooltip" style="display: none; width:110px;padding-top: 10px;padding-bottom:10px">
|
||||
<div align="center" style="font-weight:bold">
|
||||
#point.x#
|
||||
</div>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
Open:
|
||||
</td>
|
||||
<td>
|
||||
$#point.open#
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
High:
|
||||
</td>
|
||||
<td>
|
||||
$#point.high#
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Low:
|
||||
</td>
|
||||
<td >
|
||||
$#point.low#
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
Close:
|
||||
</td>
|
||||
<td>
|
||||
$#point.close#
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<script type="text/javascript" language="javascript">
|
||||
$(function () {
|
||||
|
||||
$("#container").ejChart(
|
||||
{
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis:
|
||||
{
|
||||
title: { text: "Date" },
|
||||
valueType: 'datetime',
|
||||
labelFormat: 'MM/dd/yyyy',
|
||||
range: { min: new Date(1949, 1, 1), max: new Date(2009, 1, 1), interval: 20 },
|
||||
intervalType: 'years'
|
||||
},
|
||||
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
range: { min: 0, max: 250, interval: 50 },
|
||||
title: { text: "Price in Dollars" },
|
||||
labelFormat: '${value}'
|
||||
},
|
||||
|
||||
//Initializing Series
|
||||
series:
|
||||
[
|
||||
{
|
||||
points: [{ x: new Date(1950, 1, 12), high: 125, low: 70, open: 115, close: 90 },
|
||||
{ x: new Date(1953, 1, 12), high: 150, low: 60, open: 120, close: 70 },
|
||||
{ x: new Date(1956, 1, 12), high: 200, low: 140, open: 160, close: 190 },
|
||||
{ x: new Date(1959, 1, 12), high: 160, low: 90, open: 140, close: 110 },
|
||||
{ x: new Date(1962, 1, 12), high: 200, low: 100, open: 180, close: 120 },
|
||||
{ x: new Date(1965, 1, 12), high: 100, low: 45, open: 70, close: 50 },
|
||||
{ x: new Date(1968, 1, 12), high: 150, low: 70, open: 140, close: 130 },
|
||||
{ x: new Date(1971, 1, 12), high: 90, low: 60, open: 65, close: 80 },
|
||||
{ x: new Date(1974, 1, 12), high: 225, low: 170, open: 175, close: 220 },
|
||||
{ x: new Date(1977, 1, 12), high: 250, low: 180, open: 223, close: 190 },
|
||||
{ x: new Date(1980, 1, 12), high: 200, low: 140, open: 160, close: 190 },
|
||||
{ x: new Date(1983, 1, 12), high: 160, low: 90, open: 140, close: 110 },
|
||||
{ x: new Date(1986, 1, 12), high: 200, low: 100, open: 180, close: 120 },
|
||||
{ x: new Date(1989, 1, 1), high: 130, low: 95, open: 120, close: 100 },
|
||||
{ x: new Date(1991, 1, 12), high: 100, low: 70, open: 92, close: 75 },
|
||||
{ x: new Date(1994, 1, 12), high: 50, low: 85, open: 65, close: 80 },
|
||||
{ x: new Date(1997, 1, 12), high: 185, low: 110, open: 130, close: 170 },
|
||||
{ x: new Date(2000, 1, 12), high: 90, low: 30, open: 80, close: 50 },
|
||||
{ x: new Date(2003, 1, 12), high: 200, low: 140, open: 160, close: 190 },
|
||||
{ x: new Date(2006, 1, 12), high: 170, low: 90, open: 140, close: 110 },
|
||||
{ x: new Date(2008, 1, 12), high: 200, low: 100, open: 180, close: 120 }],
|
||||
name: 'candle',
|
||||
type: 'candle',
|
||||
enableAnimation: true,
|
||||
tooltip:
|
||||
{
|
||||
visible: true,
|
||||
template: 'Tooltip'
|
||||
}
|
||||
}
|
||||
],
|
||||
load: "loadTheme",
|
||||
isResponsive: true,
|
||||
title: { text: 'Foreign Exchange Rate Analysis' },
|
||||
size: { height: "600" },
|
||||
legend: { visible: false }
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<style class="cssStyles">
|
||||
.tooltipDivcontainer table, table th, table tr, table td {
|
||||
border: 0px none;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.tooltipDivcontainer {
|
||||
border: 2px transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#Tooltip td {
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,187 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
|
||||
<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="container"></div>
|
||||
</div>
|
||||
<div id="sampleProperties">
|
||||
<div class="prop-grid">
|
||||
<div class="row">
|
||||
<div class="col-md-3" style="width:200px;">
|
||||
<input type="checkbox" id="sidebyside" name="sidebyside" checked> Side by Side Series Placement <br/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3" style="width:200px;">
|
||||
<input type="checkbox" id="showOutsideLabels" name="outsideLabels" checked> Show Edge Labels <br/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 10px 0;">
|
||||
<div class="col-md-3">
|
||||
Column Width
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<input type="text" id="columnWidth" value = "0.7" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Column Spacing
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<input type="text" id="columnSpacing" value = "0"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 20px 0;">
|
||||
<div class="col-md-3">
|
||||
Corner Radius
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<input type="text" id="cornerRadius" value = "0" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="margin: 10px 0;">
|
||||
<div class="col-md-3">
|
||||
Column Facet
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div id="dropdown">
|
||||
<select id="optColumnFacet">
|
||||
<option value="rectangle">Rectangle</option>
|
||||
<option value="cylinder">Cylinder</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" language="javascript">
|
||||
function changeColumnWidth(e)
|
||||
{
|
||||
$('#container').ejChart('option', { commonSeriesOptions: { columnWidth: e.value } });
|
||||
}
|
||||
function changeColumnSpacing(e)
|
||||
{
|
||||
$('#container').ejChart('option', { commonSeriesOptions: { columnSpacing: e.value } });
|
||||
}
|
||||
function changeColumnFacet(e)
|
||||
{
|
||||
$('#container').ejChart('option', { commonSeriesOptions: { columnFacet: e.value } });
|
||||
}
|
||||
function changecornerRadius(e)
|
||||
{
|
||||
$('#container').ejChart('option', { commonSeriesOptions: { cornerRadius: e.value } });
|
||||
}
|
||||
$(function ()
|
||||
{
|
||||
$("#optColumnFacet").ejDropDownList({ "change": "changeColumnFacet", width: "110px",selectedItemIndex:0 });
|
||||
|
||||
$("#container").ejChart(
|
||||
{
|
||||
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis:
|
||||
{
|
||||
title: { text: 'Countries' }
|
||||
},
|
||||
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
range: { min: 0, max: 70, interval: 10 },
|
||||
title: { text: 'Medals' }
|
||||
},
|
||||
|
||||
//Initializing Common Properties for all the series
|
||||
commonSeriesOptions:
|
||||
{
|
||||
type: 'column',
|
||||
enableAnimation: true,
|
||||
marker:{dataLabel:{visible:true,showEdgeLabels:true,enableContrastColor:true}},
|
||||
tooltip :
|
||||
{
|
||||
visible:true ,
|
||||
format: "#point.x# : #point.y# #series.name# Medals"
|
||||
}
|
||||
},
|
||||
|
||||
//Initializing Series
|
||||
series:
|
||||
[
|
||||
{
|
||||
points: [{ x: "USA", y: 50 }, { x: "China", y: 40 },
|
||||
{ x: "Japan", y: 70 }, { x: "Australia", y: 60 },
|
||||
{ x: "France", y: 50 }, { x: "Germany", y: 40 },
|
||||
{ x: "Italy", y: 40 }, { x: "Sweden", y: 30 }],
|
||||
name: 'Gold',fill:"rgba(135,206,235,1)"
|
||||
},
|
||||
{
|
||||
points: [{ x: "USA", y: 70 }, { x: "China", y: 60 },
|
||||
{ x: "Japan", y: 60 }, { x: "Australia", y: 56 },
|
||||
{ x: "France", y: 45 }, { x: "Germany", y: 30 },
|
||||
{ x: "Italy", y: 35 }, { x: "Sweden", y: 25 }],
|
||||
name: 'Silver',fill:"rgba(255,255,0,0.7)"
|
||||
},
|
||||
{
|
||||
points: [{ x: "USA", y: 45 }, { x: "China", y: 55 },
|
||||
{ x: "Japan", y: 50 }, { x: "Australia", y: 40 },
|
||||
{ x: "France", y: 35 }, { x: "Germany", y: 22 },
|
||||
{ x: "Italy", y: 37 }, { x: "Sweden", y: 27 }],
|
||||
name: 'Bronze',fill:"rgba(255,204,153,1)"
|
||||
}
|
||||
],
|
||||
load:"loadTheme",
|
||||
isResponsive: true,
|
||||
title :{text: 'Olympic Medals'},
|
||||
size: { height: "600" },
|
||||
legend: { visible: true, position: 'top' }
|
||||
});
|
||||
var chart = $("#container").ejChart("instance");
|
||||
|
||||
$('#sidebyside').click(function () {
|
||||
if ($("#sidebyside").is(":checked"))
|
||||
chart.model.sideBySideSeriesPlacement = true;
|
||||
else
|
||||
chart.model.sideBySideSeriesPlacement = false;
|
||||
chart.redraw();
|
||||
});
|
||||
$('#showOutsideLabels').change(function ()
|
||||
{
|
||||
$("#container").ejChart("option", { "commonSeriesOptions": { marker: { dataLabel: { showEdgeLabels: $('#showOutsideLabels').is(":checked") } } }});
|
||||
});
|
||||
$("#columnWidth").ejNumericTextbox({
|
||||
value: 0.7, width: "70px", minValue: 0, maxValue: 1, incrementStep: 0.1, decimalPlaces: 1, change: "changeColumnWidth",
|
||||
});
|
||||
|
||||
$("#columnSpacing").ejNumericTextbox({
|
||||
value: 0, width: "70px", minValue: 0, maxValue: 1, incrementStep: 0.1, decimalPlaces: 1, change: "changeColumnSpacing"
|
||||
});
|
||||
$("#cornerRadius").ejNumericTextbox({
|
||||
value: 0, width: "70px", minValue: 0, maxValue: 12, incrementStep: 1, decimalPlaces: 1, change: "changecornerRadius",
|
||||
});
|
||||
});
|
||||
$("#sampleProperties").ejPropertiesPanel();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
||||
<link href="../content/default.css" rel="stylesheet" />
|
||||
<link href="../content/default-responsive.css" rel="stylesheet" />
|
||||
<!--[if lt IE 9]>
|
||||
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<!--[if gte IE 9]><!-->
|
||||
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
||||
<!--<![endif]-->
|
||||
<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="container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script type="text/javascript" language="javascript">
|
||||
$(function ()
|
||||
{
|
||||
$("#container").ejChart(
|
||||
{
|
||||
//Initializing Primary X Axis
|
||||
primaryXAxis:
|
||||
{
|
||||
title: { text: "Month" }
|
||||
},
|
||||
|
||||
//Initializing Primary Y Axis
|
||||
primaryYAxis:
|
||||
{
|
||||
title: { text: "Unit Sold" }
|
||||
},
|
||||
axes:
|
||||
[
|
||||
{
|
||||
majorGridLines:
|
||||
{
|
||||
visible: false
|
||||
},
|
||||
orientation: 'Vertical',
|
||||
opposedPosition: true,
|
||||
axisLine: { visible: false },
|
||||
rangePadding: 'normal',
|
||||
name: 'yAxis',
|
||||
labelFormat: '${value}',
|
||||
title: { text: "Total Transactions" }
|
||||
}
|
||||
],
|
||||
|
||||
//Initializing Common Properties for all the series
|
||||
commonSeriesOptions:
|
||||
{
|
||||
tooltip: { visible: true }
|
||||
},
|
||||
|
||||
//Initializing Series
|
||||
series:
|
||||
[
|
||||
{
|
||||
points: [{ x: "Jan", y: 45 }, { x: "Feb", y: 100 }, { x: "March", y: 25 },
|
||||
{ x: "April", y: 100 }, { x: "May", y: 85 }, { x: "June", y: 140 }],
|
||||
fill:"#69D2E7",
|
||||
name: 'Unit Sold',
|
||||
type: 'column',
|
||||
enableAnimation: true,
|
||||
tooltip:
|
||||
{
|
||||
format: "#point.x# <br/> Unit Sold : #point.y# <br/>"
|
||||
}
|
||||
},
|
||||
{
|
||||
points: [{ x: "Jan", y: 1000 }, { x: "Feb", y: 3000 }, { x: "March", y: 1000 },
|
||||
{ x: "April", y: 7000 }, { x: "May", y: 5000 }, { x: "June", y: 7000 }],
|
||||
name: 'Total Transaction',
|
||||
type: 'line',
|
||||
enableAnimation: true,
|
||||
yAxisName: 'yAxis',
|
||||
tooltip:
|
||||
{
|
||||
format: "#point.x# <br/> Profit : #point.y# <br/>"
|
||||
},
|
||||
marker:
|
||||
{
|
||||
shape: 'circle',
|
||||
size:
|
||||
{
|
||||
height: 8, width: 8
|
||||
},
|
||||
visible: true
|
||||
},
|
||||
border:{width: 2 }
|
||||
}
|
||||
],
|
||||
load: "loadTheme",
|
||||
isResponsive: true,
|
||||
title: { text: 'Sales Report ' },
|
||||
size: { height: "600" },
|
||||
legend:
|
||||
{
|
||||
visible: true,
|
||||
font: { size: '15px' },
|
||||
shape: 'seriesType',
|
||||
position: 'Top',
|
||||
itemStyle: { width: 15, height: 15 }
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче