v20.4.0.38
This commit is contained in:
SyncfusionBuild
Родитель
92ef60daed
Коммит
0babfb6134
|
|
@ -114,4 +114,4 @@ Refer the Syncfusion Essential JS 1 for AngularJS Product Release Notes in [onli
|
|||
|
||||
* 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-12-22 at precisely 08:41:36 EST.</p>
|
||||
<p>Copyright © 2001-2022 Syncfusion, Inc. Updated on 2022-12-22 at precisely 08:57:29 EST.</p>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,58 @@
|
|||
|
||||
<div ng-controller="sparkline">
|
||||
<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" ej-sparkline e-type="ctype" e-enableanimation="false" e-tooltip-visible="false" e-rangebandsettings-color="rangeColor" e-rangebandsettings-startrange="value" e-rangebandsettings-endrange="value2" e-width="strokeWidth" e-datasource="cdata" e-lowpointcolor="low" e-negativepointcolor="negativeColor" e-highpointcolor="colorValue" e-size-height="cheight" e-size-width="cwidth"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
<div id="sampleProperties" class="panel-body">
|
||||
<div id="property-window" class="box wide">
|
||||
<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" ej-colorpicker e-value="colorValue" e-opacityvalue="opacity" e-modeltype="modelType" />
|
||||
</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" ej-colorpicker e-value="low" e-opacityvalue="opacity" e-modeltype="modelType" />
|
||||
</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="" ej-numerictextbox e-value="value" e-minvalue=-3 e-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="" ej-numerictextbox e-value="value2" e-minvalue= -3 e-maxvalue=12 style="width: 110px" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
if (!!window.SVGSVGElement) {
|
||||
$("#sparkline").css('visibility', 'visible');
|
||||
size = { height: 40, width: 170 };
|
||||
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;
|
||||
|
||||
|
||||
syncApp.controller("sparkline", function ($scope) {
|
||||
$scope.lheight = size.height;
|
||||
$scope.lwidth = size.width;
|
||||
$scope.cdata = cdata;
|
||||
$scope.ctype = ctype;
|
||||
|
||||
$scope.negativeColor = negativeColor;
|
||||
$scope.cheight = cheight;
|
||||
$scope.cwidth = cwidth;
|
||||
$scope.strokeWidth = strokeWidth;
|
||||
$scope.colorValue = "#ff14ae";
|
||||
$scope.low = "#138808";
|
||||
$scope.rangeColor = "#712002",
|
||||
$scope.opacity = "100";
|
||||
$scope.modelType = "picker";
|
||||
|
||||
|
||||
$scope.value = 5;
|
||||
$scope.value2 = 7;
|
||||
$scope.width = "100%";
|
||||
});
|
||||
}
|
||||
else {
|
||||
$("#sparkline").css('visibility', 'hidden');
|
||||
alert("Sparkline will not be supported in IE Version < 9");
|
||||
}
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
|
||||
<div ng-controller="sparkline">
|
||||
<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" ej-sparkline e-type="line" e-dataSource="LineDataSource" e-tooltip-visible="true" e-tooltip-font-size="12px" e-size-height="100" e-size-width="150"></div>
|
||||
</td>
|
||||
<tr>
|
||||
<td align="center"><i>Revenue Status</i></td>
|
||||
<td>
|
||||
<div id="column" style="height:100px;width:150px" ej-sparkline e-type="column" e-dataSource="ColumnDataSource" e-tooltip-visible="true" e-tooltip-font-size="12px" e-size-height="100" e-size-width="150" e-negativePointColor="red" e-highPointColor="blue"></div>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center"><i>Project Status Tracing</i></td>
|
||||
<td>
|
||||
<div id="area" style="height:100px;width:150px" ej-sparkline e-type="area" e-dataSource="AreaDataSource" e-tooltip-visible="true" e-size-width="150" e-markerSettings-visible="true" e-highPointColor="blue" e-lowPointColor="orange" e-opacity="0.5"></div>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center"><i>Profit Comparison for each months</i></td>
|
||||
<td>
|
||||
<div id="winloss" style="height:100px;width:150px" ej-sparkline e-type="winloss" e-dataSource="WinlossDataSource" e-size-height="100" e-size-width="150"></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" ej-sparkline e-type="pie" e-dataSource="Pie1DataSource" e-tooltip-visible="true" e-tooltip-font-size="12px" e-size-height="40" e-size-width="40"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div id="pie2" style="height:40px;width:40px" ej-sparkline e-type="pie" e-dataSource="Pie2DataSource" e-tooltip-visible="true" e-tooltip-font-size="12px" e-size-height="40" e-size-width="40"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div id="pie3" style="height:40px;width:40px" ej-sparkline e-type="pie" e-dataSource="Pie3DataSource" e-tooltip-visible="true" e-tooltip-font-size="12px" e-size-height="40" e-size-width="40"></div>
|
||||
</td>
|
||||
<td>
|
||||
<div id="pie4" style="height:40px;width:40px" ej-sparkline e-type="pie" e-dataSource="Pie4DataSource" e-tooltip-visible="true" e-tooltip-font-size="12px" e-size-height="40" e-size-width="40"></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>
|
||||
</div>
|
||||
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
var lineData = [12, 14, 11, 12, 11, 15, 12, 10, 11, 12, 15, 13, 12, 11, 10, 13, 15, 12, 14, 16, 14, 12, 11];
|
||||
var columnData = [2, 6, -1, 1, 12, 5, -2, 7, -3, 5, 8, 10];
|
||||
var areaData = [12, -10, 11, 8, 17, 6, 2, -17, 13, -6, 8, 10];
|
||||
var winlossData = [12, 15, -11, 13, 17, 0, -12, 17, 13, -15, 8, 10];
|
||||
var pie1Data = [4, 6, 7];
|
||||
var pie2Data = [8, 9, 1, ];
|
||||
var pie3Data = [2, 3, 5];
|
||||
var pie4Data = [10, 12, 11];
|
||||
|
||||
if (!!window.SVGSVGElement) {
|
||||
$("#sparkline").css('visibility', 'visible');
|
||||
syncApp.controller("sparkline", function ($scope) {
|
||||
$scope.LineDataSource = lineData;
|
||||
$scope.ColumnDataSource = columnData;
|
||||
$scope.AreaDataSource = areaData;
|
||||
$scope.WinlossDataSource = winlossData;
|
||||
$scope.Pie1DataSource = pie1Data;
|
||||
$scope.Pie2DataSource = pie2Data;
|
||||
$scope.Pie3DataSource = pie3Data;
|
||||
$scope.Pie4DataSource = pie4Data;
|
||||
|
||||
});
|
||||
}
|
||||
else {
|
||||
$("#sparkline").css('visibility', 'hidden');
|
||||
alert("Sparkline will not be supported in IE Version < 9");
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<script src="scripts/jsonspark.js"></script>
|
||||
<div ng-controller="sparkline">
|
||||
<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" ej-grid e-datasource="Data" e-allowSelection="false" e-allowScrolling="true" e-scrollSettings-height="400" e-enableRowHover="false" e-columns="Column" e-create="render" e-actionComplete="render">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style type="text/css" class="cssStyles">
|
||||
.rowcell {
|
||||
font-size: 15px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
|
||||
if (!!window.SVGSVGElement) {
|
||||
var gridData = ej.DataManager(window.gridData).executeLocal(ej.Query().take(50));
|
||||
$("#sparkline").css('visibility', 'visible');
|
||||
syncApp.controller("sparkline", function ($scope) {
|
||||
$scope.Data = gridData;
|
||||
$scope.Column = [
|
||||
|
||||
{ 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" },
|
||||
|
||||
];
|
||||
});
|
||||
}
|
||||
else {
|
||||
$("#sparkline").css('visibility', 'hidden');
|
||||
alert("Sparkline will not be supported in IE Version < 9");
|
||||
}
|
||||
|
||||
function render(args) {
|
||||
for (var i = 0; i < 56; 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;
|
||||
}
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
<div ng-controller="MethodsCtrl">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area">
|
||||
<div id="APIAccordion" ej-accordion 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 class="panel-body">
|
||||
<div id="property-window" class="box wide">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
Active Index
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<select name="selectIndex" class="e-ddl" id="optActiveChange" ej-dropdownlist e-change="onActiveChange" e-watermarktext="Select" e-width="120px">
|
||||
<option value="0">London</option>
|
||||
<option value="1">Paris</option>
|
||||
<option value="2">Rome</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
Disable Item
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<select name="disableItem" class="e-ddl" id="optDisableChange" ej-dropdownlist e-change="onDisableChange" e-showcheckbox="true" e-watermarktext="Select" e-width="120px">
|
||||
<option value="0">London</option>
|
||||
<option value="1">Paris</option>
|
||||
<option value="2">Rome</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" ej-dropdownlist e-change="onEnableChange" e-watermarktext="Select" e-showcheckbox="true" e-width="120px">
|
||||
<option value="0">London</option>
|
||||
<option value="1">Paris</option>
|
||||
<option value="2">Rome</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" ej-togglebutton e-change="onEnaleDisableAll" e-defaulttext="Disable All" e-activetext="Enable All" e-width="120px" e-activetext="Restore" class="e-togglebtn" e-value="ShowHide" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
Show / Hide
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<input type="checkbox" ej-checkbox id="chkShowHide" class="e-chkbox" e-value="ShowHide" e-checked="checked" e-change="onShowHide" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
Destroy
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<input type="checkbox" ej-checkbox id="chkDestroy" e-change="onDestoryRestore" e-defaulttext="Destory" e-width="120px" 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" ej-dropdownlist e-change="onHeightAdjust" e-value="content" e-width="120px">
|
||||
<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" ej-togglebutton class="e-togglebtn" e-change="onShowHideCloseBtn" e-defaulttext="Show" e-width="120px" e-activetext="Hide" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
var acrdnObj, optDisable, optEnable, activeObj;
|
||||
$(function () {
|
||||
acrdnObj = $("#APIAccordion").data("ejAccordion");
|
||||
activeObj = $("#optActiveChange").data("ejDropDownList");
|
||||
optDisable = $("#optDisableChange").data("ejDropDownList");
|
||||
optEnable = $("#optEnableChange").data("ejDropDownList");
|
||||
});
|
||||
syncApp.controller('MethodsCtrl', function ($scope, $rootScope) {
|
||||
$scope.onEnaleDisableAll = function (args) {
|
||||
if (acrdnObj) {
|
||||
if (args.isChecked) {
|
||||
acrdnObj.disable();
|
||||
activeObj.disable();
|
||||
optDisable.disable();
|
||||
}
|
||||
else {
|
||||
acrdnObj.enable();
|
||||
activeObj.enable();
|
||||
optDisable.enable();
|
||||
}
|
||||
}
|
||||
}
|
||||
$scope.onDestoryRestore = function (args) {
|
||||
if (args.isChecked) {
|
||||
acrdnObj.destroy();
|
||||
acrdnObj = null;
|
||||
}
|
||||
else {
|
||||
$("#APIAccordion").ejAccordion();
|
||||
acrdnObj = $("#APIAccordion").data("ejAccordion");
|
||||
}
|
||||
}
|
||||
$scope.onActiveChange = function (args) {
|
||||
if (acrdnObj) {
|
||||
acrdnObj.option({ selectedItemIndex: args.value });
|
||||
$("#optDisableChange").ejDropDownList("clearText");
|
||||
$("#optEnableChange").ejDropDownList("clearText");
|
||||
}
|
||||
}
|
||||
$scope.onDisableChange = function (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");
|
||||
|
||||
}
|
||||
}
|
||||
$scope.onEnableChange = function (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");
|
||||
}
|
||||
}
|
||||
$scope.onShowHide = function (args) {
|
||||
if (acrdnObj) {
|
||||
if (args.isChecked)
|
||||
acrdnObj.show();
|
||||
else
|
||||
acrdnObj.hide();
|
||||
}
|
||||
}
|
||||
$scope.onHeightAdjust = function (args) {
|
||||
if (acrdnObj) {
|
||||
acrdnObj.element.find(">.e-content").css("height", "");
|
||||
acrdnObj.option("heightAdjustMode", args.value);
|
||||
}
|
||||
}
|
||||
$scope.onShowHideCloseBtn = function (args) {
|
||||
acrdnObj && acrdnObj.option("showCloseButton", args.isChecked);
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<div ng-controller="AccordionCtrl">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area">
|
||||
<div id="accordion" ej-accordion>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
syncApp.controller('AccordionCtrl', function ($scope, $rootScope) {
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<div ng-controller="MultipleopenCtrl">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area">
|
||||
<div id="multiAccordion" ej-accordion e-enablemultipleopen="multipleopen">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
syncApp.controller('MultipleopenCtrl', function ($scope, $rootScope) {
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,441 @@
|
|||
window.htmlEditor = [];
|
||||
window.JSEditor = [];
|
||||
window.isPopupOpened = false;
|
||||
window.isRefresh = false;
|
||||
window.isInitialLoad = true;
|
||||
window.isThemeChange = false;
|
||||
window.currentSample = "";
|
||||
window.isOnline = (window.location.host == "ngjq.syncfusion.com") ? true : false;
|
||||
window.theme = (window.sessionStorage.length == 0) ? "bootstrap" : window.sessionStorage.theme;
|
||||
window.isMac = function () { return (/(ipad|iphone|ipod touch)/i).test(navigator.userAgent.toLowerCase()) && !(/trident|windows phone/i.test(navigator.userAgent.toLowerCase())); }
|
||||
var $routeProviderReference, syncApp = angular.module("defaultApp", ["ngRoute", "ejangular"]);
|
||||
syncApp.controller("defaultCtrl", ["$scope", "$rootScope", "$window", function ($scope, $rootScope, $window) {
|
||||
$rootScope.isPopupOpen = false;
|
||||
$scope.getCookieValue = function(cookieName){
|
||||
var name = cookieName + "=";
|
||||
var decodedCookie = decodeURIComponent(document.cookie);
|
||||
var cookieValues = decodedCookie.split(';');
|
||||
for (var i = 0; i < cookieValues.length; i++) {
|
||||
var cookie = cookieValues[i];
|
||||
while (cookie.charAt(0) == ' ') {
|
||||
cookie = cookie.substring(1);
|
||||
}
|
||||
if (cookie.indexOf(name) == 0) {
|
||||
return cookie.substring(name.length, cookie.length);
|
||||
}
|
||||
}
|
||||
return "";
|
||||
};
|
||||
window.baseurl = (window.isMac()) ? "//js.syncfusion.com/demos/ejServices/" : window.baseurl;
|
||||
if (document.referrer && document.referrer.split('/')[2] != window.location.host) {
|
||||
var existingCookieValue = $scope.getCookieValue("SampleSiteReferrer");
|
||||
var currentUrl = "";
|
||||
if (existingCookieValue.indexOf(window.location.host) === -1) {
|
||||
currentUrl = "," + window.location.href;
|
||||
}
|
||||
if (existingCookieValue != "undefined" && existingCookieValue != undefined && existingCookieValue != "") {
|
||||
existingCookieValue = existingCookieValue + currentUrl;
|
||||
document.cookie = "SampleSiteReferrer" + "=" + existingCookieValue + ";path=/;domain=syncfusion.com";
|
||||
}
|
||||
else {
|
||||
document.cookie = "SampleSiteReferrer" + "=" + document.referrer + currentUrl + ";path=/;domain=syncfusion.com";
|
||||
}
|
||||
}
|
||||
//var are declared separately to avoid JSLint error
|
||||
var subdata = []; var i; var j; var k; var collection = window.ControlList;
|
||||
for (i = 0; i < collection.length; i += 1) {
|
||||
if (!collection[i]) continue;
|
||||
for (j = 0; j < collection[i].samples.length; j += 1) {
|
||||
if (!collection[i].samples[j]) continue;
|
||||
var properties = {}, len;
|
||||
var controlName = collection[i].id;
|
||||
if (!collection[i].samples[j].samples) {
|
||||
properties["id"] = collection[i].samples[j].templateUrl;
|
||||
properties["control"] = collection[i].name;
|
||||
properties["sample"] = collection[i].samples[j].name;
|
||||
properties["data"] = collection[i].name + " " + collection[i].samples[j].name;
|
||||
subdata.push(properties);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$scope.dashboardSamples = window.showcaseSamplelist;
|
||||
$scope.controls = window.ControlList;
|
||||
$scope.subControlList = subdata;
|
||||
$scope.menuData = [
|
||||
{ id: 1, text: "", parentId: null, spriteCssClass: "e-icon" },
|
||||
{ id: "azure", text: "Flat-Azure", parentId: 1, spriteCssClass: "SB-theme SB-flat-azure" },
|
||||
{ id: "azuredark", text: "Flat-Azure-Dark", parentId: 1, spriteCssClass: "SB-theme SB-flat-azure-dark" },
|
||||
{ id: "lime", text: "Flat-Lime", parentId: 1, spriteCssClass: "SB-theme SB-flat-lime" },
|
||||
{ id: "limedark", text: "Flat-Lime-Dark", parentId: 1, spriteCssClass: "SB-theme SB-flat-lime-dark" },
|
||||
{ id: "saffron", text: "Flat-Saffron", parentId: 1, spriteCssClass: "SB-theme SB-flat-saffron" },
|
||||
{ id: "saffrondark", text: "Flat-Saffron-Dark", parentId: 1, spriteCssClass: "SB-theme SB-flat-saffron-dark" },
|
||||
{ id: "gradientazure", text: "Gradient-Azure", parentId: 1, spriteCssClass: "SB-theme SB-gradient-azure" },
|
||||
{ id: "gradientazuredark", text: "Gradient-Azure-Dark", parentId: 1, spriteCssClass: "SB-theme SB-gradient-azure-dark" },
|
||||
{ id: "gradientlime", text: "Gradient-Lime", parentId: 1, spriteCssClass: "SB-theme SB-gradient-lime" },
|
||||
{ id: "gradientlimedark", text: "Gradient-Lime-Dark", parentId: 1, spriteCssClass: "SB-theme SB-gradient-lime-dark" },
|
||||
{ id: "gradientsaffron", text: "Gradient-Saffron", parentId: 1, spriteCssClass: "SB-theme SB-gradient-saffron" },
|
||||
{ id: "gradientsaffrondark", text: "Gradient-Saffron-Dark", parentId: 1, spriteCssClass: "SB-theme SB-gradient-saffron-dark" },
|
||||
{ id: "bootstrap", text: "Bootstrap", parentId: 1, spriteCssClass: "SB-theme SB-bootstrap" },
|
||||
{ id: "high-contrast-01", text: "High-Contrast-01", parentId: 1, spriteCssClass: "SB-theme SB-high-contrast-01" },
|
||||
{ id: "high-contrast-02", text: "High-Contrast-02", parentId: 1, spriteCssClass: "SB-theme SB-high-contrast-02" },
|
||||
{ id: "material", text: "Material", parentId: 1, spriteCssClass: "SB-theme SB-material" },
|
||||
{ id: "office-365", text: "Office-365", parentId: 1, spriteCssClass: "SB-theme SB-office365" }
|
||||
];
|
||||
|
||||
$scope.onThemeChange = function (args) {
|
||||
if (!isPopupOpened) $rootScope.bindUnbindDocClickEvents(true);
|
||||
isPopupOpened = $(args.element).hasClass("e-haschild");
|
||||
if (args.event) args.event.stopPropagation();
|
||||
if (args.ID == 1) {
|
||||
$("#themebutton").find("li ul").css({ 'left': $("#themebutton").width() - $("#themebutton").find("li ul").width() });
|
||||
if (this.element.find("ul li.e-active").length == 0) {
|
||||
var themeList = $("#themebutton").find("ul li");
|
||||
themeList.each(function () { if (this.id == window.theme) $(this).addClass("e-active"); });
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.element.find('li.e-active').removeClass('e-active');
|
||||
var _themename = (args.text).toLowerCase();
|
||||
window.themestyle = (_themename.indexOf("gradient") !== -1) ? "gradient" : "flat"
|
||||
window.themevarient = (_themename.indexOf("dark") !== -1) ? "dark" : "light";
|
||||
if (_themename.indexOf("azure") !== -1) window.themecolor = "azure";
|
||||
else if (_themename.indexOf("lime") !== -1) window.themecolor = "lime";
|
||||
else if (_themename.indexOf("saffron") !== -1) window.themecolor = "saffron";
|
||||
else if (_themename.indexOf("office-365") !== -1) window.themecolor = "office-365";
|
||||
else if (_themename.indexOf("material") !== -1) window.themecolor = "material";
|
||||
else if (_themename.indexOf("high-contrast-02") !== -1) window.themecolor = "high-contrast-02";
|
||||
else if (_themename.indexOf("high-contrast-01") !== -1) window.themecolor = "high-contrast-01";
|
||||
else if (_themename.indexOf("bootstrap") !== -1) window.themecolor = "bootstrap";
|
||||
window.theme = args.element.id;
|
||||
$rootScope.updateTheme();
|
||||
$(args.element).addClass("e-active");
|
||||
}
|
||||
};
|
||||
$rootScope.bindUnbindDocClickEvents = function (isOpened) {
|
||||
if (!isOpened) {
|
||||
$(document).unbind("click");
|
||||
}
|
||||
else {
|
||||
$(document).bind("click", function (evt) {
|
||||
if ($("#sbtooltipbox").ejDialog("isOpened")) $("#sbtooltipbox").ejDialog("close");
|
||||
$(".product-naviation").addClass("hideIt");
|
||||
var menuObj = $("#themebutton").ejMenu("instance");
|
||||
menuObj._closeAll();
|
||||
if (!$(evt.target).hasClass("sbheading") && evt.target.nodeName != "INPUT")
|
||||
$rootScope.bindUnbindDocClickEvents(false);
|
||||
else
|
||||
isPopupOpened = true;
|
||||
isPopupOpened = false;
|
||||
evt.stopPropagation();
|
||||
});
|
||||
}
|
||||
};
|
||||
$rootScope.updateTheme = function () {
|
||||
if (window.isOnline) {
|
||||
$rootScope.replaceTheme();
|
||||
$rootScope.updateLinkTag();
|
||||
}
|
||||
else {
|
||||
$("body").attr({ "class": "ng-scope " + window.theme });
|
||||
}
|
||||
};
|
||||
$rootScope.replaceTheme = function () {
|
||||
if (window.theme.indexOf("lime") != -1)
|
||||
window.themecolor = 'lime';
|
||||
else if (window.theme.indexOf("azure") != -1)
|
||||
window.themecolor = 'azure';
|
||||
else if (window.theme.indexOf('saffron') != -1)
|
||||
window.themecolor = 'saffron';
|
||||
else if ((window.theme.indexOf('high-contrast-01') != -1))
|
||||
window.themecolor = 'high-contrast-01';
|
||||
else if ((window.theme.indexOf('high-contrast-02') != -1))
|
||||
window.themecolor = 'high-contrast-02';
|
||||
else if ((window.theme.indexOf('material') != -1))
|
||||
window.themecolor = 'material';
|
||||
else if ((window.theme.indexOf('office-365') != -1))
|
||||
window.themecolor = 'office-365';
|
||||
else if (window.theme.indexOf('azure') != -1)
|
||||
window.themecolor = "azure";
|
||||
else if (window.theme.indexOf('bootstrap') != -1)
|
||||
window.themecolor = "bootstrap";
|
||||
else
|
||||
window.themecolor = "bootstrap";
|
||||
window.themevarient = (window.theme.indexOf("dark") != -1 || theme.indexOf("high-contrast-01") != -1 || theme.indexOf("high-contrast-02") != -1) ? "dark" : "light";
|
||||
$("body").attr({ "class": "ng-scope " + window.themecolor });
|
||||
if (window.themevarient == "dark") $("body").addClass("darktheme");
|
||||
};
|
||||
$rootScope.updateLinkTag = function () {
|
||||
var selectTheme = {
|
||||
"flat": "content/ejthemes/default-theme/",
|
||||
"flatdark": "content/ejthemes/flat-azure-dark/",
|
||||
"azure": "content/ejthemes/default-theme/",
|
||||
"azuredark": "content/ejthemes/flat-azure-dark/",
|
||||
"lime": "content/ejthemes/flat-lime/",
|
||||
"limedark": "content/ejthemes/flat-lime-dark/",
|
||||
"saffron": "content/ejthemes/flat-saffron/",
|
||||
"saffrondark": "content/ejthemes/flat-saffron-dark/",
|
||||
"gradient": "content/ejthemes/gradient-azure/",
|
||||
"gradientdark": "content/ejthemes/gradient-azure-dark/",
|
||||
"gradientazure": "content/ejthemes/gradient-azure/",
|
||||
"gradientazuredark": "content/ejthemes/gradient-azure-dark/",
|
||||
"gradientlime": "content/ejthemes/gradient-lime/",
|
||||
"gradientlimedark": "content/ejthemes/gradient-lime-dark/",
|
||||
"gradientsaffron": "content/ejthemes/gradient-saffron/",
|
||||
"gradientsaffrondark": "content/ejthemes/gradient-saffron-dark/",
|
||||
"bootstrap": "content/ejthemes/bootstrap-theme/",
|
||||
"high-contrast-01": "content/ejthemes/high-contrast-01/",
|
||||
"high-contrast-02": "content/ejthemes/high-contrast-02/",
|
||||
"material": "content/ejthemes/material/",
|
||||
"office-365": "content/ejthemes/office-365/"
|
||||
};
|
||||
var links = $(document.head || document.getElementsByTagName('head')[0]).find("link");
|
||||
for (var i = 0; i < links.length; i++) {
|
||||
if (links[i].href.indexOf("ej.web.all.min.css") != -1) {
|
||||
links[i].href = selectTheme[window.theme] + "ej.web.all.min.css";
|
||||
}
|
||||
}
|
||||
window.sessionStorage.setItem("themeStyle", window.theme);
|
||||
window.isThemeChange = true;
|
||||
$(".contentchild").css({ visibility: "hidden" });
|
||||
$rootScope.viewReload();
|
||||
};
|
||||
$rootScope.showTooltipbox = function () {
|
||||
if (window.isOnline) {
|
||||
var $btnelement = $("#themebutton");
|
||||
var pos = $btnelement.offset();
|
||||
var left = pos.left - $("#sbtooltipbox").width() + 50;
|
||||
$("#sbtooltipbox").ejDialog("option", "position", { X: left + ($(window).width() <= 979 ? 0 : 10), Y: pos.top + $btnelement.height() });
|
||||
$("#sbtooltipbox").ejDialog("open");
|
||||
setTimeout(function () {
|
||||
$("#sbtooltipbox").ejDialog("close");
|
||||
}, 3000);
|
||||
}
|
||||
};
|
||||
$scope.loadSample = function (controlName, sampleName, $event) {
|
||||
window.isRefresh = false;
|
||||
if (ej.isNullOrUndefined(controlName) && ej.isNullOrUndefined(sampleName) && window.currentSample == "") {
|
||||
$(".control-panel").children().eq(0).addClass("showcasefooter");
|
||||
$(".producttitle,.showcasesamples").css({ display: "block" });
|
||||
$(".controlnamediv,.productpage").css({ display: "none" });
|
||||
}
|
||||
else {
|
||||
$(".control-panel").children().eq(0).removeClass("showcasefooter");
|
||||
$(".producttitle,.showcasesamples").css({ display: "none" });
|
||||
$(".controlnamediv,.productpage").css({ display: "block" });
|
||||
$(".productList li a").removeClass("e-active");
|
||||
if (!ej.isNullOrUndefined($event)) $($event.currentTarget).addClass("e-active");
|
||||
var isPanelToggle = true;
|
||||
if (ej.isNullOrUndefined(controlName) && ej.isNullOrUndefined(sampleName)) {
|
||||
var list = window.currentSample.split("/");
|
||||
controlName = list[0];
|
||||
sampleName = list[1];
|
||||
window.currentSample = "";
|
||||
isPanelToggle = false;
|
||||
}
|
||||
if ($("#slidemenu").is(":visible") && isPanelToggle) $(".accordion-panel").animate({ "margin-left": "-250px" }, "slow");
|
||||
for (loop = 0; loop < window.ControlList.length; loop += 1) {
|
||||
if (window.ControlList[loop].id.replace(" ", "") == $.trim(controlName.toLowerCase().replace(" ", ""))) {
|
||||
var samplelist = window.ControlList[loop].samples;
|
||||
for (var a = 0; a < samplelist.length; a++) {
|
||||
if (samplelist[a].id == sampleName) break;
|
||||
}
|
||||
$rootScope.subRoute = samplelist[a];
|
||||
$rootScope.controlName = window.ControlList[loop].name;
|
||||
$rootScope.sampleName = $rootScope.subRoute.name;
|
||||
$rootScope.htmlContent($rootScope.subRoute.templateUrl + ".html");
|
||||
$rootScope.jsContent($rootScope.subRoute.templateUrl + ".js");
|
||||
break;
|
||||
}
|
||||
}
|
||||
//To avoid JSLint error,the loop is not optimizedk
|
||||
$routeProviderReference.when("/" + $rootScope.subRoute.templateUrl, {
|
||||
templateUrl: $rootScope.subRoute.templateUrl + ".html",
|
||||
resolve: {
|
||||
load: ["$q", "$rootScope", function ($q, $rootScope) {
|
||||
var deferred = $q.defer();
|
||||
require([$rootScope.subRoute.templateUrl], function () {
|
||||
$rootScope.$apply(function () {
|
||||
deferred.resolve();
|
||||
});
|
||||
});
|
||||
return deferred.promise;
|
||||
}]
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
angular.element(document).ready(function () {
|
||||
$("body").css("visibility", "visible");
|
||||
$(".content").height($(window).height() - $(".toolbar").outerHeight());
|
||||
$(".themegallery").css({ display: (window.isOnline) ? "block" : "none" });
|
||||
$rootScope.updateTheme();
|
||||
$rootScope.showTooltipbox();
|
||||
$rootScope.refreshContentWindow();
|
||||
$rootScope.currentSampleExpand();
|
||||
$rootScope.refreshScroller();
|
||||
$rootScope.activeSample();
|
||||
});
|
||||
angular.element($window).bind("resize", function () {
|
||||
$(".accordion-panel").css({ "margin-left": ($(window).width() <= "981") ? "-250px" : "0px" });
|
||||
$rootScope.refreshScroller();
|
||||
$rootScope.refreshContentWindow();
|
||||
});
|
||||
$rootScope.refreshContentWindow = function (args) {
|
||||
$(".control-panel").height($(window).height() - $(".headerarea").outerHeight());
|
||||
};
|
||||
$rootScope.activeSample = function () {
|
||||
var element = $(".productList li").find(".ng-binding");
|
||||
for (var i = 0; i < element.length; i++) {
|
||||
if ($(element[i]).attr("href") == window.location.hash) {
|
||||
$(element[i]).addClass("e-active");
|
||||
if (window.location.hash != "#/" && window.location.hash.replace("#/", "") != "") {
|
||||
$(".productList").animate({
|
||||
scrollTop: $(element[i]).parents().find(">ul.ng-scope").offset().top - ($("#searchauto").offset().top + $(".dashboardheader").offset().top + 5)
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
$scope.hideSampleList = function ($event) {
|
||||
$rootScope.expandCollapse = true;
|
||||
if ($($event.currentTarget).children().hasClass("up")) {
|
||||
$($event.currentTarget).next().show(300, function () { $rootScope.refreshScroller() });
|
||||
$($event.currentTarget).children().removeClass("up").addClass("down");
|
||||
}
|
||||
else {
|
||||
$($event.currentTarget).next().hide(300, function () { $rootScope.refreshScroller() });
|
||||
$($event.currentTarget).children().removeClass("down").addClass("up");
|
||||
}
|
||||
};
|
||||
$scope.showcaseSampleClick = function ($event) {
|
||||
window.isRefresh = false;
|
||||
window.location.hash = $($event.currentTarget).attr("href");
|
||||
$rootScope.expandCollapse = false;
|
||||
$rootScope.currentSampleExpand();
|
||||
if ($("#slidemenu").is(":visible") && $(".accordion-panel").is(":visible")) $(".accordion-panel").animate({ "margin-left": "-250px" }, "slow");
|
||||
$(".control-panel").children().eq(0).addClass("showcasefooter");
|
||||
$(".producttitle,.showcasesamples").css({ display: "block" });
|
||||
$(".controlnamediv,.productpage").css({ display: "none" });
|
||||
};
|
||||
$scope.navBarHide = function ($event) {
|
||||
if ($(window).width() <= "981" && $("#slidemenu").is(":visible") && !$($event.target).closest(".slidemenuicon").hasClass("slidemenuicon") && ($($event.target).closest(".productpage").length == 0 || $(".accordion-panel").is(":visible"))) {
|
||||
$(".accordion-panel").animate({ "margin-left": "-250px" }, "slow");
|
||||
}
|
||||
else {
|
||||
$(".accordion-panel").animate({ "margin-left": "0px" }, "slow");
|
||||
}
|
||||
};
|
||||
$rootScope.currentSampleExpand = function () {
|
||||
if (!$rootScope.expandCollapse) {
|
||||
var element = $(".productList li").find(".ng-scope");
|
||||
for (var i = 0; i < element.length; i++) {
|
||||
if ($.trim($(element[i]).parent().find(">.ng-binding").text().toLowerCase().replace(" ", "")) == location.hash.replace("#/", "").replace("#", "").split("/")[0]) {
|
||||
$(element[i]).find("ul").show();
|
||||
$(element[i]).parent().find("span").removeClass("up").addClass("down");
|
||||
} else {
|
||||
$(element[i]).parent().find("span").removeClass("down").addClass("up");
|
||||
$(element[i]).parent().find("ul").hide();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
$rootScope.refreshScroller = function () {
|
||||
$(".accordion-panel").height((($(window).height() - $(".headerarea").outerHeight())) + "px ;");
|
||||
var controlheight = $("#scrollcontainer").ejScroller("instance");
|
||||
controlheight.model.height = ($(window).height()) - ($(".headerarea").outerHeight() + $("#dashboardheader").outerHeight() + $(".accordion-panel .searchoption").outerHeight());
|
||||
controlheight.refresh();
|
||||
$("#scrollcontainer .e-vhandle").addClass("e-box");
|
||||
};
|
||||
$rootScope.searchLoad = function () {
|
||||
var element = $(".productList li").find(".ng-scope");
|
||||
for (var i = 0; i < element.length; i++) {
|
||||
if ($.trim($(element[i]).parent().find(">.ng-binding").text().toLowerCase().replace(" ", "")) == location.hash.replace("#/", "").replace("#", "").split("/")[0]) {
|
||||
$(element[i]).show();
|
||||
$(element[i]).parent().find("span").removeClass("up").addClass("down");
|
||||
}
|
||||
}
|
||||
};
|
||||
$scope.slideclick = function () {
|
||||
$(".accordion-panel").css({ "z-index": "1000000", "position": "fixed" });
|
||||
$(".accordion-panel").animate({ "margin-left": "0px" }, "slow");
|
||||
$rootScope.refreshScroller();
|
||||
$rootScope.refreshContentWindow();
|
||||
};
|
||||
$scope.$on("$viewContentLoaded", function (event) {
|
||||
$rootScope.refreshContentWindow();
|
||||
$rootScope.currentSampleExpand();
|
||||
$rootScope.refreshScroller();
|
||||
$rootScope.activeSample();
|
||||
if (window.isInitialLoad || window.isThemeChange) $rootScope.viewReload();
|
||||
window.isInitialLoad = false;
|
||||
window.isThemeChange = false;
|
||||
$(".contentchild").css({ visibility: "visible" });
|
||||
});
|
||||
$rootScope.htmlContent = function (url) {
|
||||
$.get(url, function (data) {
|
||||
var htmlContent = data;
|
||||
$("#tab #htmlsource").css("display", "block");
|
||||
$("#tab #jssource").css("display", "none");
|
||||
if ($("#htmlsource").find(".CodeMirror")) $("#htmlsource").find(".CodeMirror").remove();
|
||||
window.htmlEditor.push(CodeMirror.fromTextArea($("#htmlsource .tab_content").val(htmlContent)[0], {
|
||||
lineNumbers: false,
|
||||
readOnly: true,
|
||||
mode: "text/html"
|
||||
}));
|
||||
$("#htmlsource").find($(".CodeMirror")).appendTo("#htmlsource");
|
||||
$("#tab").ejTab("model.selectedItemIndex", 0);
|
||||
});
|
||||
};
|
||||
$rootScope.jsContent = function (url) {
|
||||
$.get(url, function (data) {
|
||||
var jsContent = data;
|
||||
$("#tab #htmlsource").css("display", "none");
|
||||
$("#tab #jssource").css("display", "block");
|
||||
if ($("#jssource").find(".CodeMirror")) $("#jssource").find(".CodeMirror").remove();
|
||||
window.JSEditor.push(CodeMirror.fromTextArea($("#jssource .tab_content").val(jsContent)[0], {
|
||||
lineNumbers: false,
|
||||
readOnly: true,
|
||||
mode: "javascript"
|
||||
}));
|
||||
$("#jssource").find($(".CodeMirror")).appendTo("#jssource");
|
||||
$("#tab #jssource").css("display", "none");
|
||||
$("#tab #htmlsource").css("display", "block");
|
||||
$("#tab").ejTab("model.selectedItemIndex", 0);
|
||||
});
|
||||
};
|
||||
$scope.loadSample();
|
||||
$scope.onSelectItem = function (args) {
|
||||
$rootScope.expandCollapse = true;
|
||||
var name = args.item.id.split("/");
|
||||
$scope.loadSample(name[0], name[1], args);
|
||||
window.isRefresh = false;
|
||||
window.location.hash = "/" + args.item.id.replace(" ", "");
|
||||
$rootScope.searchLoad();
|
||||
$rootScope.activeSample();
|
||||
$("#searchauto").ejAutocomplete("clearText");
|
||||
};
|
||||
$scope.onPopupOpen = function (args) {
|
||||
$rootScope.isPopupOpen = (args.type == "open") ? true : false;
|
||||
};
|
||||
$scope.$on("$locationChangeStart", function (event, next, current) {
|
||||
if (window.isRefresh && window.location.hash.replace("#/", "") != "") {
|
||||
window.location.reload();
|
||||
}
|
||||
window.isRefresh = true;
|
||||
});
|
||||
}]);
|
||||
syncApp.config(["$routeProvider", "$controllerProvider", "$compileProvider", "$filterProvider", "$provide", "$locationProvider", function ($routeProvider, $controllerProvider, $compileProvider, $filterProvider, $provide, $locationProvider) {
|
||||
$routeProviderReference = $routeProvider;
|
||||
$locationProvider.hashPrefix("");
|
||||
syncApp = {
|
||||
controller: $controllerProvider.register
|
||||
}
|
||||
}]);
|
||||
syncApp.run(["$route", "$rootScope", function ($route, $rootScope) {
|
||||
window.theme = (window.sessionStorage.length == 0) ? "bootstrap" : window.sessionStorage.getItem("themeStyle");
|
||||
window.currentSample = (window.location.hash.replace("#/", "") == "") ? "" : window.location.hash.replace("#/", "");
|
||||
$rootScope.viewReload = function () {
|
||||
$route.reload();
|
||||
};
|
||||
}]);
|
||||
|
|
@ -0,0 +1 @@
|
|||
window.baseurl = "//js.syncfusion.com/ejServices/";
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<div ng-controller="AutocompleteApiCtrl">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area">
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<input type="text" id="selectCountry" ej-autocomplete e-datasource="countries" e-width="100%" e-watermarktext="Select a country" e-fields-key="key" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div id="property-window" class="box wide">
|
||||
<div class="row-fluid">
|
||||
<div class="col-md-6">
|
||||
<input type="checkbox" id="check21" class="e-togglebtn" ej-togglebutton e-defaulttext="Disable" e-activetext="Enable" e-click="changeState" e-width="107px" />
|
||||
<label for="check21">Toggle</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<input type="button" id="GetValue" ej-button value="Get value" e-width="107px" e-click="currentValue" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.frame span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.inputbtn {
|
||||
width: 107px;
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
|
||||
syncApp.controller('AutocompleteApiCtrl', function ($scope, $rootScope) {
|
||||
$scope.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" }
|
||||
];
|
||||
$scope.changeState = function (args) {
|
||||
var autocomplete = $('#selectCountry').data("ejAutocomplete");
|
||||
if (args.isChecked) autocomplete.disable();
|
||||
else autocomplete.enable();
|
||||
}
|
||||
$scope.currentValue = function (args) {
|
||||
var autocomplete = $('#selectCountry').data("ejAutocomplete");
|
||||
alert("Current value is : " + autocomplete.getValue());
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<div ng-controller="AutocompleteAutoFillCtrl">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area">
|
||||
<div class="frame">
|
||||
<div class="angularbind">
|
||||
<div id="control">
|
||||
<input id="autofill" type="text" ej-autocomplete e-datasource="autoFilldataList" e-watermarktext="Select a flower" e-enableautofill="true" e-width="100%" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.angularbind > div {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#control {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.txt {
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.input {
|
||||
height: 25px;
|
||||
text-indent: 12px;
|
||||
width: 99%;
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
|
||||
syncApp.controller('AutocompleteAutoFillCtrl', function ($scope, $rootScope) {
|
||||
$scope.autoFilldataList = [
|
||||
"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"
|
||||
];
|
||||
});
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<div ng-controller="AutocompleteJSONCtrl">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area">
|
||||
<div class="frame">
|
||||
<div class="angularbind">
|
||||
<div id="control">
|
||||
<input id="databinding-json" type="text" ej-autocomplete e-datasource="jsondataList" e-watermarktext="Select a state" e-fields-key="index" e-fields-text="countryName" e-width="100%" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.angularbind > div {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#control {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.txt {
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.input {
|
||||
height: 25px;
|
||||
text-indent: 12px;
|
||||
width: 99%;
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
|
||||
syncApp.controller('AutocompleteJSONCtrl', function ($scope, $rootScope) {
|
||||
$scope.jsondataList = [
|
||||
{ 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" }
|
||||
];
|
||||
$scope.index="index";
|
||||
$scope.countryName="countryName";
|
||||
});
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<div ng-controller="AutocompleteOdataCtrl">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area">
|
||||
<div class="frame">
|
||||
<div class="angularbind">
|
||||
<div id="control">
|
||||
<input id="databinding-odata" type="text" ej-autocomplete e-datasource="odatadataList" e-watermarktext="Search a customer" e-query="odataquery" e-fields-key="SupplierID" e-fields-text="ContactName" e-width="100%" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.angularbind > div {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#control {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.txt {
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.input {
|
||||
height: 25px;
|
||||
text-indent: 12px;
|
||||
width: 99%;
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
|
||||
syncApp.controller('AutocompleteOdataCtrl', function ($scope, $rootScope) {
|
||||
$scope.odataquery = ej.Query().from("Suppliers").select("SupplierID", "ContactName");
|
||||
$scope.odatadataList = ej.DataManager({
|
||||
url: window.baseurl + "Wcf/Northwind.svc/", crossDomain: true
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<div ng-controller="AutocompleteDefaultCtrl">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area">
|
||||
<div class="frame">
|
||||
<span>Select a car</span>
|
||||
<div class="angularbind">
|
||||
<div id="control">
|
||||
<input id="auto-default" type="text" ej-autocomplete e-datasource="dataList" e-value="setValue" e-width="100%" />
|
||||
</div>
|
||||
<div id="binding">
|
||||
<input type="text" name="AutoComplete" class="input ejinputtext" ng-model="setValue" e-width="100%" />
|
||||
</div>
|
||||
<h6><span class="txt">Note:Two Way Angular Support</span></h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.angularbind > div {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#control {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.txt {
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.input {
|
||||
height: 34px;
|
||||
text-indent: 12px;
|
||||
width: 99%;
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
|
||||
syncApp.controller('AutocompleteDefaultCtrl', function ($scope, $rootScope) {
|
||||
$scope.setValue = "Alfa Romeo";
|
||||
$scope.dataList = [
|
||||
"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"
|
||||
];
|
||||
});
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<div ng-controller="AutocompleteGroupingCtrl">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area">
|
||||
<div class="frame">
|
||||
<div class="angularbind">
|
||||
<div class="control">
|
||||
<input id="autogrouping" type="text" ej-autocomplete e-datasource="groupingdataList" e-filtertype="groupingfilterType" e-itemscount="7" e-width="100%" e-watermarktext="Select a country" e-fields-text="groupingtext" e-fields-groupBy="groupingcategory" e-highlightsearch="true"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.angularbind > div {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#control {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.txt {
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.input {
|
||||
height: 25px;
|
||||
text-indent: 12px;
|
||||
width: 99%;
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
|
||||
syncApp.controller('AutocompleteGroupingCtrl', function ($scope, $rootScope) {
|
||||
$scope.groupingfilterType = ej.filterType.Contains;
|
||||
$scope.groupingdataList = [
|
||||
{ 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" }
|
||||
];
|
||||
$scope.groupingitemsCount= "7";
|
||||
$scope.groupingtext="text";
|
||||
$scope.groupingcategory="category";
|
||||
});
|
||||
|
|
@ -0,0 +1,83 @@
|
|||
<div ng-controller="AutocompleteKeyBoardCtrl">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area">
|
||||
<div class="frame">
|
||||
<span>Select Car</span>
|
||||
<div class="angularbind">
|
||||
<div id="control">
|
||||
<input type="text" id="autokeyboard" ej-autocomplete e-datasource="keyboarddataList" e-watermarktext="Choose skills" e-multiselectmode="keyboardmultiselect" e-width="100%" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div id="property-window" class="box wide">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.angularbind > div {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#control {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.txt {
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.input {
|
||||
height: 25px;
|
||||
text-indent: 12px;
|
||||
width: 99%;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
|
||||
syncApp.controller('AutocompleteKeyBoardCtrl', function ($scope, $rootScope) {
|
||||
$scope.keyboarddataList = [
|
||||
"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"
|
||||
];
|
||||
$scope.keyboardmultiselect = ej.MultiSelectMode.Delimiter;
|
||||
$(document).on("keydown", function (e) {
|
||||
if (e.altKey && e.keyCode === 74) { // j- key code.
|
||||
$("#autokeyboard").focus();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<div ng-controller="AutocompleteMultiColumnCtrl">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area">
|
||||
<div class="frame">
|
||||
<div class="angularbind">
|
||||
<div id="control">
|
||||
<input type="text" id="automulticolumn" ej-autocomplete e-datasource="multicolumndataList" e-fields-key="multicolumnkey" e-fields-text="multicolumntext" e-watermarktext="Select a order" e-highlightsearch="true" e-showpopupbutton="true" e-multicolumnsettings="multicolumncolset" e-width="100%" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.angularbind > div {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#control {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.txt {
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.input {
|
||||
height: 25px;
|
||||
text-indent: 12px;
|
||||
width: 99%;
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
|
||||
|
||||
syncApp.controller('AutocompleteMultiColumnCtrl', function ($scope, $rootScope) {
|
||||
$scope.multicolumndataList = [{ "EmployeeID": 1, "FirstName": "Nancy", "City": "Seattle" },
|
||||
{ "EmployeeID": 2, "FirstName": "Andrew", "City": "Tacoma" },
|
||||
{ "EmployeeID": 3, "FirstName": "Janet", "City": "Kirkland" },
|
||||
{ "EmployeeID": 4, "FirstName": "Margaret", "City": "Redmond" },
|
||||
{ "EmployeeID": 5, "FirstName": "Steven", "City": "London" },
|
||||
{ "EmployeeID": 6, "FirstName": "Michael", "City": "London" },
|
||||
{ "EmployeeID": 7, "FirstName": "Robert", "City": "London" },
|
||||
{ "EmployeeID": 8, "FirstName": "Laura", "City": "Seattle" },
|
||||
{ "EmployeeID": 9, "FirstName": "Anne", "City": "London" },
|
||||
{ "EmployeeID": 10, "FirstName": "Laura", "City": "Seattle" },
|
||||
{ "EmployeeID": 11, "FirstName": "Janet", "City": "Kirkland" },
|
||||
{ "EmployeeID": 12, "FirstName": "Michael", "City": "London" },
|
||||
{ "EmployeeID": 13, "FirstName": "Steven", "City": "London" },
|
||||
{ "EmployeeID": 14, "FirstName": "Andrew", "City": "Tacoma" },
|
||||
{ "EmployeeID": 15, "FirstName": "Robert", "City": "London" },
|
||||
{ "EmployeeID": 16, "FirstName": "Margaret", "City": "Redmond" },
|
||||
{ "EmployeeID": 17, "FirstName": "Steven", "City": "London" },
|
||||
{ "EmployeeID": 18, "FirstName": "Michael", "City": "London" },
|
||||
{ "EmployeeID": 19, "FirstName": "Robert", "City": "London" },
|
||||
{ "EmployeeID": 20, "FirstName": "Laura", "City": "Seattle" },
|
||||
{ "EmployeeID": 21, "FirstName": "Anne", "City": "London" },
|
||||
{ "EmployeeID": 22, "FirstName": "Margaret", "City": "London" },
|
||||
{ "EmployeeID": 23, "FirstName": "Andrew", "City": "Tacoma" },
|
||||
{ "EmployeeID": 24, "FirstName": "Janet", "City": "Kirkland" },
|
||||
{ "EmployeeID": 25, "FirstName": "Margaret", "City": "Redmond" },
|
||||
{ "EmployeeID": 26, "FirstName": "Steven", "City": "London" },
|
||||
{ "EmployeeID": 27, "FirstName": "Michael", "City": "London" },
|
||||
{ "EmployeeID": 28, "FirstName": "Robert", "City": "London" },
|
||||
{ "EmployeeID": 29, "FirstName": "Laura", "City": "Seattle" },
|
||||
{ "EmployeeID": 30, "FirstName": "Anne", "City": "London" },
|
||||
{ "EmployeeID": 31, "FirstName": "Margaret", "City": "Redmond" },
|
||||
{ "EmployeeID": 32, "FirstName": "Steven", "City": "London" }];
|
||||
$scope.multicolumnkey="EmployeeID";
|
||||
$scope.multicolumntext="City";
|
||||
$scope.multicolumncolset = {
|
||||
stringFormat: "{0} ({2}) ({1})",
|
||||
enable:true,
|
||||
showHeader: true,
|
||||
columns: [
|
||||
{
|
||||
field: "FirstName",
|
||||
headerText: "FirstName"
|
||||
},
|
||||
{
|
||||
field: "EmployeeID",
|
||||
headerText: "EmployeeID"
|
||||
},
|
||||
{
|
||||
field: "City",
|
||||
headerText: "City"
|
||||
}
|
||||
]}
|
||||
});
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<div ng-controller="AutocompleteMultiCtrl">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area">
|
||||
<div class="frame">
|
||||
<div class="angularbind">
|
||||
<div class="control">
|
||||
<span class="txt">Using Delimiter</span>
|
||||
<input type="text" id="automultiselectdeli" ej-autocomplete e-datasource="multidataList" e-width="100%" e-showpopupbutton="true" e-multiselectmode="multidelimit" id="delimit" />
|
||||
</div>
|
||||
<div class="control">
|
||||
<span class="txt">Using VisualMode</span>
|
||||
<input type="text" id="automultiselectvisualmode" ej-autocomplete e-datasource="multidataList" e-width="100%" e-showpopupbutton="true" e-multiselectmode="multivisual" id="visualmode" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.angularbind > div {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#control {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.txt {
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.input {
|
||||
height: 25px;
|
||||
text-indent: 12px;
|
||||
width: 99%;
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
|
||||
syncApp.controller('AutocompleteMultiCtrl', function ($scope, $rootScope) {
|
||||
$scope.multidelimit = ej.MultiSelectMode.Delimiter;
|
||||
$scope.multivisual = ej.MultiSelectMode.VisualMode;
|
||||
$scope.multidataList = [
|
||||
"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"
|
||||
];;
|
||||
});
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<div ng-controller="AutocompleteRtlCtrl">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area">
|
||||
<div class="frame">
|
||||
<div class="angularbind">
|
||||
<div id="control">
|
||||
<input type="text" id="autortl" ej-autocomplete e-datasource="rtldataList" e-watermarktext="Select a car" e-enableRTL="true" e-width="100%" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.angularbind > div {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#control {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.txt {
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.input {
|
||||
height: 25px;
|
||||
text-indent: 12px;
|
||||
width: 99%;
|
||||
}
|
||||
.frame{
|
||||
width:350px;
|
||||
border: 1px solid #BBBCBB;
|
||||
border-radius: 10px;
|
||||
width: 350px;
|
||||
color: #5C5C5C;
|
||||
padding: 30px;
|
||||
margin: auto;
|
||||
display: table;
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
|
||||
syncApp.controller('AutocompleteRtlCtrl', function ($scope, $rootScope) {
|
||||
$scope.rtldataList = [
|
||||
"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"
|
||||
];
|
||||
});
|
||||
|
|
@ -0,0 +1,187 @@
|
|||
<div ng-controller="AutocompleteTemplateCtrl">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area">
|
||||
<div class="frame">
|
||||
<div class="angularbind">
|
||||
<div id="control">
|
||||
<input type="text" id="autotemplate" ej-autocomplete e-datasource="templatedataList" e-watermarktext="Select a country" e-template="templateContent" e-width="100%" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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: 7px;
|
||||
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;
|
||||
}
|
||||
.angularbind > div {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
#control {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.txt {
|
||||
font-style: italic;
|
||||
font-weight: normal;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.input {
|
||||
height: 25px;
|
||||
text-indent: 12px;
|
||||
width: 99%;
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
|
||||
syncApp.controller('AutocompleteTemplateCtrl', function ($scope, $rootScope) {
|
||||
$scope.templatedataList = [
|
||||
{ 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" }
|
||||
];
|
||||
$scope.templateContent='<div class="flag ${sprite}"> </div>' + '<div class="txt"> ${text} </div>'
|
||||
});
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<div ng-controller="BarCodeController">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row" align="center">
|
||||
<div class="cols-sample-area">
|
||||
<div class="frame">
|
||||
<div id="bar_codabar" ej-barcode e-text="text_codabar" e-symbologytype="codabar"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<br />
|
||||
Text<input type="text" style="width: 150px; margin-left: 15px" id="textBox_codabar" ng-model="text_codabar" />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.frame{
|
||||
width: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
syncApp.controller('BarCodeController', function ($scope) {
|
||||
$scope.text_codabar = "01234567";
|
||||
});
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<div ng-controller="BarCodeController">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row" align="center">
|
||||
<div class="cols-sample-area">
|
||||
<div class="frame">
|
||||
<div id="code_11" ej-barcode e-text="text_11" e-symbologytype="code11"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<br />
|
||||
Text<input type="text" style="width: 150px; margin-left: 15px" id="textBox_11" ng-model="text_11" />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.frame {
|
||||
width: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
syncApp.controller('BarCodeController', function ($scope) {
|
||||
$scope.text_11 = "01234567";
|
||||
});
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<div ng-controller="BarCodeController">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row" align="center">
|
||||
<div class="cols-sample-area">
|
||||
<div class="frame">
|
||||
<div id="code_128a" ej-barcode e-text="text_128a" e-symbologytype="code128a"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<br />
|
||||
Text<input type="text" style="width: 150px; margin-left: 15px" id="textBox_128a" ng-model="text_128a" />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.frame{
|
||||
width: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
syncApp.controller('BarCodeController', function ($scope) {
|
||||
$scope.text_128a = "SYNCFUSION";
|
||||
});
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<div ng-controller="BarCodeController">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row" align="center">
|
||||
<div class="cols-sample-area">
|
||||
<div class="frame">
|
||||
<div id="code_128b" ej-barcode e-text="text_128b" e-symbologytype="code128b"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<br />
|
||||
Text<input type="text" style="width: 150px; margin-left: 15px" id="textBox_128b" ng-model="text_128b" />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.frame {
|
||||
width: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
syncApp.controller('BarCodeController', function ($scope) {
|
||||
$scope.text_128b = "SYNCFUSION";
|
||||
});
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<div ng-controller="BarCodeController">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row" align="center">
|
||||
<div class="cols-sample-area">
|
||||
<div class="frame">
|
||||
<div id="code_128c" ej-barcode e-text="text_128c" e-symbologytype="code128c"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<br />
|
||||
Text<input type="text" style="width: 150px; margin-left: 15px" id="textBox_128c" ng-model="text_128c" />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.frame {
|
||||
width: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
syncApp.controller('BarCodeController', function ($scope) {
|
||||
$scope.text_128c = "01234567";
|
||||
});
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<div ng-controller="BarCodeController">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row" align="center">
|
||||
<div class="cols-sample-area">
|
||||
<div class="frame">
|
||||
<div id="code_32" ej-barcode e-text="text_32" e-symbologytype="code32"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<br />
|
||||
Text<input type="text" style="width: 150px; margin-left: 15px" id="textBox_32" ng-model="text_32" />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.frame {
|
||||
width: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
syncApp.controller('BarCodeController', function ($scope) {
|
||||
$scope.text_32 = "01234567";
|
||||
});
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<div ng-controller="BarCodeController">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row" align="center">
|
||||
<div class="cols-sample-area">
|
||||
<div class="frame">
|
||||
<div id="code_39" ej-barcode e-text="text_39" e-symbologytype="code39"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<br />
|
||||
Text<input type="text" style="width: 150px; margin-left: 15px" id="textBox_39" ng-model="text_39" />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.frame {
|
||||
width: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
syncApp.controller('BarCodeController', function ($scope) {
|
||||
$scope.text_39 = "SYNCFUSION";
|
||||
});
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<div ng-controller="BarCodeController">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row" align="center">
|
||||
<div class="cols-sample-area">
|
||||
<div class="frame">
|
||||
<div id="code_39e" ej-barcode e-text="text_39e" e-symbologytype="code39extended"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<br />
|
||||
Text<input type="text" style="width: 150px; margin-left: 15px" id="textBox_39e" ng-model="text_39e" />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.frame{
|
||||
width: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
syncApp.controller('BarCodeController', function ($scope) {
|
||||
$scope.text_39e = "SYNCFUSION";
|
||||
});
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<div ng-controller="BarCodeController">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row" align="center">
|
||||
<div class="cols-sample-area">
|
||||
<div class="frame">
|
||||
<div id="code_93" ej-barcode e-text="text_93" e-symbologytype="code93"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<br />
|
||||
Text<input type="text" style="width: 150px; margin-left: 15px" id="textBox_93" ng-model="text_93" />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.frame {
|
||||
width: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
syncApp.controller('BarCodeController', function ($scope) {
|
||||
$scope.text_93 = "SYNCFUSION";
|
||||
});
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<div ng-controller="BarCodeController">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row" align="center">
|
||||
<div class="cols-sample-area">
|
||||
<div class="frame">
|
||||
<div id="code_93e" ej-barcode e-text="text_93e" e-symbologytype="code93extended"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<br />
|
||||
Text<input type="text" style="width: 150px; margin-left: 15px" id="textBox_93e" ng-model="text_93e" />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.frame {
|
||||
width: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
syncApp.controller('BarCodeController', function ($scope) {
|
||||
$scope.text_93e = "SYNCFUSION";
|
||||
});
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<div ng-controller="BarCodeController">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row" align="center">
|
||||
<div class="cols-sample-area">
|
||||
<div class="frame">
|
||||
<div id="bar_dm" ej-barcode e-text="text_dm" e-symbologytype="datamatrix"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<br />
|
||||
Text<input type="text" style="width: 150px; margin-left: 15px" id="textBox_dm" ng-model="text_dm" />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.frame {
|
||||
width: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
syncApp.controller('BarCodeController', function ($scope) {
|
||||
$scope.text_dm = "SYNCFUSION";
|
||||
});
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<div ng-controller="BarCodeController">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row" align="center">
|
||||
<div class="cols-sample-area">
|
||||
<div class="frame">
|
||||
<div id="bar_qr" ej-barcode e-text="text_qr" e-symbologytype="qrbarcode"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<br />
|
||||
Text<input type="text" style="width: 150px; margin-left: 15px" id="textBox_qr" ng-model="text_qr" />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.frame {
|
||||
width: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
syncApp.controller('BarCodeController', function ($scope) {
|
||||
$scope.text_qr = "//www.syncfusion.com";
|
||||
});
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<div ng-controller="BarCodeController">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row" align="center">
|
||||
<div class="cols-sample-area">
|
||||
<div class="frame">
|
||||
<div id="upcbarcode" ej-barcode e-text="text_upc" e-symbologytype="upcbarcode"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<br />
|
||||
Text<input type="text" style="width: 150px; margin-left: 15px" id="textBox_upc" ng-model="text_upc" />
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.frame {
|
||||
width: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
syncApp.controller('BarCodeController', function ($scope) {
|
||||
$scope.text_upc = "01234567890";
|
||||
});
|
||||
|
|
@ -0,0 +1,199 @@
|
|||
|
||||
<div ng-controller="angularBullet1">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area" align="center" style="margin-top:20px">
|
||||
<div id="bulletCore1" ej-bulletgraph e-load="loadBulletTheme" e-height="600" e-width="600" e-qualitativeRangeSize="32" e-quantitativeScaleLength="475" e-orientation="Horizontal" e-flowDirection="Forward" e-quantitativeScaleSettings-location-x="100" e-quantitativeScaleSettings-location-y="200"
|
||||
e-quantitativeScaleSettings-minimum="0"
|
||||
e-value="8" e-comparativeMeasureValue="6.7"
|
||||
e-quantitativeScaleSettings-maximum="10"
|
||||
e-quantitativeScaleSettings-interval="1"
|
||||
e-quantitativeScaleSettings-minorTicksPerInterval="4"
|
||||
e-quantitativeScaleSettings-majorTickSettings-size="13"
|
||||
e-quantitativeScaleSettings-majorTickSettings-width="1"
|
||||
e-quantitativeScaleSettings-majorTickSettings-stroke="gray"
|
||||
e-quantitativeScaleSettings-minorTickSettings-size="5"
|
||||
e-quantitativeScaleSettings-minorTickSettings-width="1"
|
||||
e-quantitativeScaleSettings-minorTickSettings-stroke="gray"
|
||||
e-quantitativeScaleSettings-tickPosition="Far"
|
||||
e-quantitativeScaleSettings-labelSettings-position="Below"
|
||||
e-quantitativeScaleSettings-labelSettings-offset="14" e-quantitativeScaleSettings-labelSettings-size="10"
|
||||
e-quantitativeScaleSettings-featuredMeasureSettings-width="5" e-quantitativeScaleSettings-comparativeMeasureSettings-width="5"
|
||||
e-captionSettings-textPosition="left" e-captionSettings-textAlignment="center" e-captionSettings-padding="5" e-captionSettings-text= "Revenue YTD" e-captionSettings-font-color="null" e-captionSettings-font-fontFamily="Segoe UI" e-captionSettings-font-fontStyle="Normal" e-captionSettings-font-size="12px" e-captionSettings-font-fontWeight= "Normal" e-captionSettings-font-opacity="1"
|
||||
e-captionSettings-subTitle-text="$ in Thousands" e-captionSettings-subTitle-textPosition="left" e-captionSettings-subTitle-textAlignment="center" e-captionSettings-subTitle-padding="5" e-captionSettings-subTitle-font-color="null" e-captionSettings-subTitle-font-fontFamily="Segoe UI" e-captionSettings-subTitle-font-fontStyle="Normal" e-captionSettings-subTitle-font-size="12px" e-captionSettings-subTitle-font-fontWeight="Normal" e-captionSettings-subTitle-font-opacity="1">
|
||||
<e-qualitativeRanges>
|
||||
<e-qualitativeRange e-rangeEnd="4.3">
|
||||
</e-qualitativeRange>
|
||||
<e-qualitativeRange e-rangeEnd="7.3">
|
||||
</e-qualitativeRange>
|
||||
<e-qualitativeRange e-rangeEnd="10">
|
||||
</e-qualitativeRange>
|
||||
</e-qualitativeRanges>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div id="property-window" class="box wide">
|
||||
<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>
|
||||
<style>
|
||||
.aligntop .e-ddl .e-input {
|
||||
line-height:20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,171 @@
|
|||
syncApp.controller('angularBullet1', function ($scope) {
|
||||
createPropertiesWindow();
|
||||
});
|
||||
|
||||
function createPropertiesWindow()
|
||||
{
|
||||
$("#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"
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
function AddSuffix(sender) {
|
||||
$("#bulletCore1").ejBulletGraph("option", "quantitativeScaleSettings.labelSettings", { labelSuffix: sender.value });
|
||||
}
|
||||
function AddPrefix(sender) {
|
||||
$("#bulletCore1").ejBulletGraph("option", "quantitativeScaleSettings.labelSettings", { labelPrefix: sender.value });
|
||||
}
|
||||
|
||||
function onTickStroke(args) {
|
||||
if (args.isChecked)
|
||||
$("#bulletCore1").ejBulletGraph("option", "applyRangeStrokeToTicks", true);
|
||||
else
|
||||
$("#bulletCore1").ejBulletGraph("option", "applyRangeStrokeToTicks", false);
|
||||
};
|
||||
|
||||
function onLabelStroke(args) {
|
||||
if (args.isChecked)
|
||||
$("#bulletCore1").ejBulletGraph("option", "applyRangeStrokeToLabels", true);
|
||||
else
|
||||
$("#bulletCore1").ejBulletGraph("option", "applyRangeStrokeToLabels", false);
|
||||
}
|
||||
|
||||
function onAnimateClick(args) {
|
||||
if (args.isChecked)
|
||||
$("#bulletCore1").ejBulletGraph("option", "enableAnimation", true);
|
||||
else
|
||||
$("#bulletCore1").ejBulletGraph("option", "enableAnimation", false);
|
||||
}
|
||||
|
||||
function onValuechange(args) {
|
||||
var dat = $("#bulletCore1").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)
|
||||
$("#bulletCore1").ejBulletGraph("option", "qualitativeRanges", [{ rangeStroke: args.text }]);
|
||||
}
|
||||
|
||||
function onRangeStroke2change(args) {
|
||||
if (args.itemId != 0)
|
||||
$("#bulletCore1").ejBulletGraph("option", "qualitativeRanges", [{},{ rangeStroke: args.text }]);
|
||||
}
|
||||
|
||||
function onRangeStroke3change(args) {
|
||||
if (args.itemId != 0)
|
||||
$("#bulletCore1").ejBulletGraph("option", "qualitativeRanges", [{}, {}, { rangeStroke: args.text }]);
|
||||
}
|
||||
|
||||
function onMajorTickchange(args) {
|
||||
if (args.itemId != 0)
|
||||
$("#bulletCore1").ejBulletGraph("option", "quantitativeScaleSettings.majorTickSettings", { stroke: args.text });
|
||||
}
|
||||
|
||||
function onMinorTickchange(args) {
|
||||
if (args.itemId != 0)
|
||||
$("#bulletCore1").ejBulletGraph("option", "quantitativeScaleSettings.minorTickSettings", { stroke: args.text });
|
||||
}
|
||||
|
||||
function onFeaturebarchange(args) {
|
||||
if (args.itemId != 0)
|
||||
$("#bulletCore1").ejBulletGraph("option", "quantitativeScaleSettings.featuredMeasureSettings", { stroke: args.text });
|
||||
}
|
||||
|
||||
function onComparativechange(args) {
|
||||
if (args.itemId != 0)
|
||||
$("#bulletCore1").ejBulletGraph("option", "quantitativeScaleSettings.comparativeMeasureSettings", { stroke: args.text });
|
||||
}
|
||||
|
||||
function onOrientationchange(args) {
|
||||
var dat = $("#bulletCore1").data("ejBulletGraph");
|
||||
if (dat) {
|
||||
$("#bulletCore1").ejBulletGraph("option", "orientation", args.text);
|
||||
}
|
||||
}
|
||||
|
||||
function onFlowDirectionchange(args) {
|
||||
var dat = $("#bulletCore1").data("ejBulletGraph");
|
||||
if (dat)
|
||||
$("#bulletCore1").ejBulletGraph("option", "flowDirection", args.text);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
|
||||
<div ng-controller="angularBullet1">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area" align="center">
|
||||
<div id="bulletCore1" ej-bulletgraph e-value="8" e-comparativeMeasureValue="5" e-load="loadBulletTheme" e-height="650" e-width="650" e-qualitativeRangeSize="50" e-quantitativeScaleLength="475" e-quantitativeScaleSettings-location-x="108" e-quantitativeScaleSettings-location-y="150" e-quantitativeScaleSettings-labelSettings-offset="14" e-quantitativeScaleSettings-labelSettings-size="10" e-quantitativeScaleSettings-labelSettings-labelPrefix="$" e-quantitativeScaleSettings-labelSettings-labelSuffix="K"
|
||||
e-quantitativeScaleSettings-majorTickSettings-size="13" e-quantitativeScaleSettings-majorTickSettings-width="1" e-quantitativeScaleSettings-majorTickSettings-stroke="gray" e-quantitativeScaleSettings-minorTickSettings-stroke="gray" e-quantitativeScaleSettings-minorTickSettings-size="5" e-quantitativeScaleSettings-width="1" e-quantitativeScaleSettings-stroke="gray"
|
||||
e-captionSettings-textAngle="0" e-captionSettings-location-x="17" e-captionSettings-location-y="168" e-captionSettings-text= "Revenue YTD" e-captionSettings-subTitle-textAngle="0"
|
||||
e-captionSettings-subTitle-text="$ in Thousands" e-captionSettings-subTitle-location-x="10" e-captionSettings-subTitle-location-y="182">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div id="property-window" class="box wide">
|
||||
<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" id="slider">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.aligntop .e-ddl .e-input {
|
||||
line-height:20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
syncApp.controller('angularBullet1', function ($scope) {
|
||||
|
||||
createPropertiesWindow();
|
||||
});
|
||||
|
||||
function createPropertiesWindow()
|
||||
{
|
||||
$("#slider").ejSlider({
|
||||
minValue: -85,
|
||||
maxValue: 25,
|
||||
change: "BulletLabelOffset",
|
||||
value:10
|
||||
});
|
||||
|
||||
}
|
||||
function BulletTickPos(sender) {
|
||||
$("#bulletCore1").ejBulletGraph(
|
||||
'option', 'quantitativeScaleSettings.tickPosition', sender.value
|
||||
);
|
||||
}
|
||||
|
||||
function BulletLabelPlacement(sender) {
|
||||
$("#bulletCore1").ejBulletGraph(
|
||||
'option', 'quantitativeScaleSettings.labelSettings.labelPlacement', sender.value
|
||||
);
|
||||
}
|
||||
|
||||
function BulletTickPlacement(sender) {
|
||||
$("#bulletCore1").ejBulletGraph(
|
||||
'option', 'quantitativeScaleSettings.tickPlacement', sender.value
|
||||
);
|
||||
}
|
||||
|
||||
function BulletLabelPosition(sender) {
|
||||
$("#bulletCore1").ejBulletGraph(
|
||||
'option', 'quantitativeScaleSettings.labelSettings.position', sender.value
|
||||
);
|
||||
}
|
||||
|
||||
function BulletLabelOffset(sender) {
|
||||
$("#bulletCore1").ejBulletGraph(
|
||||
'option', 'quantitativeScaleSettings.labelSettings.offset', parseFloat(sender.value)
|
||||
);
|
||||
}
|
||||
|
||||
function BulletFlow(sender) {
|
||||
$("#bulletCore1").ejBulletGraph(
|
||||
'option', 'flowDirection', sender.value
|
||||
);
|
||||
}
|
||||
|
||||
function BulletOrientation(sender) {
|
||||
$("#bulletCore1").ejBulletGraph(
|
||||
'option', 'orientation', sender.value
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<div ng-controller="angularBullet">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area" align="center">
|
||||
<div id="bulletCore" ej-bulletgraph e-load="nload" e-width="500" e-height="100" e-value="nvalue" e-comparativemeasurevalue="CMvalue">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-body">
|
||||
<div id="property-window" class="box wide">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Value
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<input type="text" id="txtValue" value="" ej-numerictextbox e-value="nvalue" e-minvalue="0" e-maxvalue="10" style="width: 110px" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
Comparitive Measure Value
|
||||
</div>
|
||||
<div class="col-md-3 aligntop">
|
||||
<input type="text" id="txtcmpValue" ej-numerictextbox e-value="CMvalue" e-minvalue="0" e-maxvalue="10" style="width: 110px" />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.col-md-3 .e-ddl .e-input {
|
||||
line-height: 20px;
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
syncApp.controller('angularBullet', function ($scope) {
|
||||
$scope.nvalue = 5;
|
||||
$scope.CMvalue = 7;
|
||||
$scope.nload = 'loadBulletTheme';
|
||||
});
|
||||
$("#txtValue").keyup(function () {
|
||||
var txtval = parseInt(document.getElementById("txtValue").value);
|
||||
if (10 < txtval) {
|
||||
document.getElementById("txtValue").value = 10;
|
||||
$("#bulletCore").ejBulletGraph({ "value": 10 })
|
||||
}
|
||||
else if (0 > txtval) {
|
||||
document.getElementById("txtValue").value = 0;
|
||||
$("#bulletCore").ejBulletGraph({ "value": 0 })
|
||||
}
|
||||
});
|
||||
$("#txtcmpValue").keyup(function () {
|
||||
var txtval = parseInt(document.getElementById("txtcmpValue").value);
|
||||
if (10 < txtval) {
|
||||
document.getElementById("txtcmpValue").value = 10;
|
||||
$("#bulletCore").ejBulletGraph({ "comparativeMeasureValue": 10 })
|
||||
}
|
||||
else if (0 > txtval) {
|
||||
document.getElementById("txtcmpValue").value = 0;
|
||||
$("#bulletCore").ejBulletGraph({ "comparativeMeasureValue": 0 })
|
||||
}
|
||||
|
||||
});
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
|
||||
<div ng-controller="angularBullet1">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area" align="center">
|
||||
<div id="bulletCore1" ej-bulletgraph e-enableAnimation="true" e-load="loadBulletTheme" e-qualitativeRangeSize="32" e-quantitativeScaleLength="475" e-orientation="Horizontal" e-flowDirection="Forward"
|
||||
e-quantitativeScaleSettings-location-x="110" e-quantitativeScaleSettings-location-y="10"
|
||||
e-quantitativeScaleSettings-minimum="0"
|
||||
e-quantitativeScaleSettings-maximum="10"
|
||||
e-quantitativeScaleSettings-interval="1"
|
||||
e-value="8" e-comparativeMeasureValue="6.7"
|
||||
e-quantitativeScaleSettings-minorTicksPerInterval="4"
|
||||
e-quantitativeScaleSettings-tickPosition="Far"
|
||||
e-quantitativeScaleSettings-majorTickSettings-width="1" e-quantitativeScaleSettings-majorTickSettings-size="13" e-quantitativeScaleSettings-majorTickSettings-stroke="gray"
|
||||
e-quantitativeScaleSettings-minorTickSettings-width="1" e-quantitativeScaleSettings-minorTickSettings-size="5" e-quantitativeScaleSettings-minorTickSettings-stroke="gray"
|
||||
e-quantitativeScaleSettings-labelSettings-position="Below" e-quantitativeScaleSettings-labelSettings-offset="14" e-quantitativeScaleSettings-labelSettings-size="10"
|
||||
e-quantitativeScaleSettings-featuredMeasureSettings-width="6"
|
||||
e-quantitativeScaleSettings-comparativeMeasureSettings-width="5"
|
||||
e-captionSettings-textAngle="0"
|
||||
e-captionSettings-location-x="17" e-captionSettings-location-y="20" e-captionSettings-text="Revenue YTD"
|
||||
e-captionSettings-font-color="null" e-captionSettings-font-fontFamily="Segoe UI" e-captionSettings-font-fontStyle="Normal" e-captionSettings-font-size="12px" e-captionSettings-font-fontWeight="regular" e-captionSettings-font-opacity="1"
|
||||
e-captionSettings-subTitle-textAngle="0"
|
||||
e-captionSettings-subTitle-text="$ in Thousands" e-captionSettings-subTitle-location-x="10" e-captionSettings-subTitle-y="35" e-e-captionSettings-subTitle-font-color="null" e-captionSettings-subTitle-font-fontFamily="Segoe UI" e-captionSettings-subTitle-font-fontStyle="Normal" e-captionSettings-subTitle-font-size="12px" e-captionSettings-subTitle-font-fontWeight="Normal" e-captionSettings-subTitle-font-opacity="1"
|
||||
e-captionSettings-indicator-visible="true" e-captionSettings-indicator-textSpacing="8" e-captionSettings-indicator-text=" $ 1.3 K " e-captionSettings-indicator-location-x="15" e-captionSettings-indicator-y="195" e-captionSettings-indicator-symbol-size-width="10" e-captionSettings-indicator-symbol-size-height="10" e-captionSettings-indicator-symbol-shape='triangle' e-captionSettings-indicator-symbol-color='green'>
|
||||
<e-qualitativeRanges>
|
||||
<e-qualitativeRange e-rangeEnd="4.3">
|
||||
</e-qualitativeRange>
|
||||
<e-qualitativeRange e-rangeEnd="7.3">
|
||||
</e-qualitativeRange>
|
||||
<e-qualitativeRange e-rangeEnd="10">
|
||||
</e-qualitativeRange>
|
||||
</e-qualitativeRanges>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div id="property-window" class="box wide">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
syncApp.controller('angularBullet1', function ($scope) {
|
||||
|
||||
});
|
||||
|
||||
function ChangeBulletSymbol(sender) {
|
||||
$("#bulletCore1").ejBulletGraph("option", "captionSettings.indicator.symbol", { shape: sender.value });
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<div ng-controller="angularBullet">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area" align="center">
|
||||
<div id="bulletCore" ej-bulletgraph e-height="400"
|
||||
e-enableanimation="true" e-qualitativerangesize="320" e-quantitativescalelength="475"
|
||||
e-tooltipsettings-visible="true" e-orientation="horizontal" e-flowdirection="forward"
|
||||
e-quantitativescalesettings-interval="1" e-quantitativescalesettings-minimum="0" e-quantitativescalesettings-maximum="10"
|
||||
e-quantitativescalesettings-location-x="110" e-quantitativescalesettings-location-y="25"
|
||||
e-quantitativescalesettings-minorticksperinterval="4"
|
||||
e-quantitativescalesettings-majorticksettings-width="1" e-quantitativescalesettings-majorticksettings-size="13" e-quantitativescalesettings-majorticksettings-stroke="gray"
|
||||
e-quantitativescalesettings-minorticksettings-width="1" e-quantitativescalesettings-minorticksettings-size="5" e-quantitativescalesettings-minorticksettings-stroke="gray"
|
||||
e-captionsettings-textangle="-90" e-captionsettings-location-x="40" e-captionsettings-location-y="200"
|
||||
e-captionsettings-text="Revenue YTD" e-captionsettings-font-color="null" e-captionsettings-font-fontfamily="segoe ui" e-captionsettings-font-fontstyle="normal" e-captionsettings-font-size="12px" e-captionsettings-font-fontweight="regular" e-captionsettings-font-opacity="1"
|
||||
e-captionsettings-subtitle-textangle="-90" e-captionsettings-subtitle-text="$ in Thousands" e-captionsettings-subtitle-location-x="55" e-captionsettings-subtitle-location-y="200"
|
||||
e-captionsettings-subtitle-font-color="null" e-captionsettings-subtitle-font-fontfamily="segoe ui" e-captionsettings-subtitle-font-fontstyle="normal" e-captionsettings-subtitle-font-size="12px" e-captionsettings-subtitle-font-fontweight="regular" e-captionsettings-subtitle-font-opacity="1"
|
||||
e-fields-datasource="data" e-fields-category="category" e-fields-featuremeasures="value" e-fields-comparativemeasure="comparativeMeasureValue"
|
||||
>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.col-md-3 .e-ddl .e-input {
|
||||
line-height: 20px;
|
||||
}
|
||||
</style>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
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
|
||||
}];
|
||||
|
||||
syncApp.controller('angularBullet', function ($scope) {
|
||||
|
||||
$scope.nload = 'loadBulletTheme';
|
||||
$scope.data = localData;
|
||||
});
|
||||
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
|
||||
<div ng-controller="angularBullet1">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area" align="center">
|
||||
<div id="bulletCore1" ej-bulletgraph e-height="540" e-enableAnimation="true" e-qualitativeRangeSize="320" e-load="loadBulletTheme"
|
||||
e-quantitativeScaleLength="475" e-orientation="Vertical"
|
||||
e-flowDirection="Backward"
|
||||
e-fields-dataSource="Data" e-fields-query="Query" e-fields-category="ProductID"
|
||||
e-fields-featureMeasures="UnitPrice"
|
||||
e-fields-comparativeMeasure="UnitsInStock"
|
||||
e-quantitativeScaleSettings-location-x="50" e-quantitativeScaleSettings-location-y="60"
|
||||
e-quantitativeScaleSettings-minimum="5"
|
||||
e-quantitativeScaleSettings-maximum="45"
|
||||
e-quantitativeScaleSettings-interval="10"
|
||||
e-quantitativeScaleSettings-tickPosition="Near"
|
||||
e-quantitativeScaleSettings-labelSettings-position="Above"
|
||||
e-quantitativeScaleSettings-labelSettings-offset="14" e-quantitativeScaleSettings-labelSettings-size="10"
|
||||
e-quantitativeScaleSettings-majorTickSettings-size="13" e-quantitativeScaleSettings-majorTickSettings-width="1" e-quantitativeScaleSettings-majorTickSettings-stroke='gray'
|
||||
e-quantitativeScaleSettings-minorTickSettings-size="5" e-quantitativeScaleSettings-minorTickSettings-width="1" e-quantitativeScaleSettings-minorTickSettings-stroke='gray'
|
||||
e-captionSettings-textAngle="270" e-captionSettings-location-x="15" e-captionSettings-location-y="290" e-captionSettings-text="Product"
|
||||
e-captionSettings-subTitle-textAngle="0"
|
||||
e-captionSettings-subTitle-text="Production in Units" e-captionSettings-subTitle-location-x="170" e-captionSettings-subTitle-location-y="540"
|
||||
>
|
||||
<e-qualitativeRanges>
|
||||
<e-qualitativeRange e-rangeEnd="25">
|
||||
</e-qualitativeRange>
|
||||
<e-qualitativeRange e-rangeEnd="37">
|
||||
</e-qualitativeRange>
|
||||
<e-qualitativeRange e-rangeEnd="45">
|
||||
</e-qualitativeRange>
|
||||
</e-qualitativeRanges>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<style>
|
||||
.aligntop .e-ddl .e-input {
|
||||
line-height:20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
syncApp.controller('angularBullet1', function ($scope) {
|
||||
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);
|
||||
|
||||
|
||||
$scope.Data = dataManger;
|
||||
$scope.Query = query;
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,187 @@
|
|||
|
||||
<div ng-controller="angularBullet1">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area" align="center" style="height:70px;">
|
||||
<div id="bulletCore1" ej-bulletgraph e-enableAnimation="true" e-load="loadBulletTheme" e-qualitativeRangeSize="32" e-quantitativeScaleLength="475" e-orientation="Horizontal" e-flowDirection="Forward"
|
||||
e-quantitativeScaleSettings-location-x="110" e-quantitativeScaleSettings-location-y="10"
|
||||
e-quantitativeScaleSettings-minimum="0"
|
||||
e-quantitativeScaleSettings-maximum="10"
|
||||
e-quantitativeScaleSettings-interval="1"
|
||||
e-value="8" e-comparativeMeasureValue="6.7"
|
||||
e-quantitativeScaleSettings-minorTicksPerInterval="4"
|
||||
e-quantitativeScaleSettings-tickPosition="Far"
|
||||
e-quantitativeScaleSettings-majorTickSettings-width="1" e-quantitativeScaleSettings-majorTickSettings-size="13" e-quantitativeScaleSettings-majorTickSettings-stroke="gray"
|
||||
e-quantitativeScaleSettings-minorTickSettings-width="1" e-quantitativeScaleSettings-minorTickSettings-size="5" e-quantitativeScaleSettings-minorTickSettings-stroke="gray"
|
||||
e-quantitativeScaleSettings-labelSettings-position="Below" e-quantitativeScaleSettings-labelSettings-offset="14" e-quantitativeScaleSettings-labelSettings-size="10"
|
||||
e-quantitativeScaleSettings-featuredMeasureSettings-width="6"
|
||||
e-quantitativeScaleSettings-comparativeMeasureSettings-width="5"
|
||||
e-captionSettings-textAngle="0"
|
||||
e-captionSettings-location-x="17" e-captionSettings-location-y="20" e-captionSettings-text="Revenue YTD"
|
||||
e-captionSettings-font-color="null" e-captionSettings-font-fontFamily="Segoe UI" e-captionSettings-font-fontStyle="Normal" e-captionSettings-font-size="12px" e-captionSettings-font-fontWeight="regular" e-captionSettings-font-opacity="1"
|
||||
e-captionSettings-subTitle-textAngle="0"
|
||||
e-captionSettings-subTitle-text="$ in Thousands" e-captionSettings-subTitle-location-x="10" e-captionSettings-subTitle-y="35" e-e-captionSettings-subTitle-font-color="null" e-captionSettings-subTitle-font-fontFamily="Segoe UI" e-captionSettings-subTitle-font-fontStyle="Normal" e-captionSettings-subTitle-font-size="12px" e-captionSettings-subTitle-font-fontWeight="Normal" e-captionSettings-subTitle-font-opacity="1"
|
||||
>
|
||||
<e-qualitativeRanges>
|
||||
<e-qualitativeRange e-rangeEnd="4.3">
|
||||
</e-qualitativeRange>
|
||||
<e-qualitativeRange e-rangeEnd="7.3">
|
||||
</e-qualitativeRange>
|
||||
<e-qualitativeRange e-rangeEnd="10">
|
||||
</e-qualitativeRange>
|
||||
</e-qualitativeRanges>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-controller="angularBullet2">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area" align="center" style="height:70px;">
|
||||
<div id="bulletCore2" ej-bulletgraph e-load="loadBulletTheme" e-height="80" e-qualitativeRangeSize="32" e-quantitativeScaleLength="475" e-orientation="Horizontal" e-flowDirection="Forward"
|
||||
e-quantitativeScaleSettings-location-x="110" e-quantitativeScaleSettings-location-y="10"
|
||||
e-quantitativeScaleSettings-minimum="-10"
|
||||
e-value="8" e-comparativeMeasureValue="6.7"
|
||||
e-quantitativeScaleSettings-maximum="10"
|
||||
e-quantitativeScaleSettings-interval="2"
|
||||
e-quantitativeScaleSettings-minorTicksPerInterval="4"
|
||||
e-quantitativeScaleSettings-tickPosition="Far"
|
||||
e-quantitativeScaleSettings-majorTickSettings-width="1" e-quantitativeScaleSettings-majorTickSettings-size="13" e-quantitativeScaleSettings-majorTickSettings-stroke="gray"
|
||||
e-quantitativeScaleSettings-minorTickSettings-width="1" e-quantitativeScaleSettings-minorTickSettings-size="5" e-quantitativeScaleSettings-minorTickSettings-stroke="gray"
|
||||
e-quantitativeScaleSettings-labelSettings-position="Below" e-quantitativeScaleSettings-labelSettings-offset="14" e-quantitativeScaleSettings-labelSettings-size="10"
|
||||
e-quantitativeScaleSettings-labelSettings-labelSuffix=' %'
|
||||
e-quantitativeScaleSettings-featuredMeasureSettings-width="6"
|
||||
e-quantitativeScaleSettings-comparativeMeasureSettings-width="5"
|
||||
e-captionSettings-textAngle="0"
|
||||
e-captionSettings-location-x="60" e-captionSettings-location-y="25" e-captionSettings-text="Profit"
|
||||
e-captionSettings-font-color="null" e-captionSettings-font-fontFamily="Segoe UI" e-captionSettings-font-fontStyle="Normal" e-captionSettings-font-size="12px" e-captionSettings-font-fontWeight="regular" e-captionSettings-font-opacity="1"
|
||||
>
|
||||
<e-qualitativeRanges>
|
||||
<e-qualitativeRange e-rangeEnd="-4" e-rangeStroke="#61a301">
|
||||
</e-qualitativeRange>
|
||||
<e-qualitativeRange e-rangeEnd="3" e-rangeStroke="#fcda21">
|
||||
</e-qualitativeRange>
|
||||
<e-qualitativeRange e-rangeEnd="10" e-rangeStroke="#d61e3f">
|
||||
</e-qualitativeRange>
|
||||
</e-qualitativeRanges>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div ng-controller="angularBullet3">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area" align="center" style="height:70px;">
|
||||
<div id="bulletCore3" ej-bulletgraph e-load="loadBulletTheme" e-qualitativeRangeSize="32" e-quantitativeScaleLength="475" e-orientation=" Horizontal" e-flowDirection="Backward"
|
||||
e-quantitativeScaleSettings-location-x="105" e-quantitativeScaleSettings-location-y="10"
|
||||
e-quantitativeScaleSettings-minimum="-10"
|
||||
e-quantitativeScaleSettings-maximum="10"
|
||||
e-quantitativeScaleSettings-interval="2"
|
||||
e-value="-2" e-comparativeMeasureValue="-2"
|
||||
e-quantitativeScaleSettings-minorTicksPerInterval="4"
|
||||
e-quantitativeScaleSettings-tickPosition="Far"
|
||||
e-quantitativeScaleSettings-majorTickSettings-width="1" e-quantitativeScaleSettings-majorTickSettings-size="13" e-quantitativeScaleSettings-majorTickSettings-stroke="gray"
|
||||
e-quantitativeScaleSettings-minorTickSettings-width="1" e-quantitativeScaleSettings-minorTickSettings-size="5" e-quantitativeScaleSettings-minorTickSettings-stroke="gray"
|
||||
e-quantitativeScaleSettings-labelSettings-position="Below" e-quantitativeScaleSettings-labelSettings-offset="14" e-quantitativeScaleSettings-labelSettings-size="10"
|
||||
e-quantitativeScaleSettings-labelSettings-labelSuffix=' %'
|
||||
e-quantitativeScaleSettings-featuredMeasureSettings-width="6"
|
||||
e-quantitativeScaleSettings-comparativeMeasureSettings-width="5"
|
||||
e-captionSettings-textAngle="0"
|
||||
e-captionSettings-location-x="38" e-captionSettings-location-y="25" e-captionSettings-text="Expenses"
|
||||
e-captionSettings-font-color="null" e-captionSettings-font-fontFamily="Segoe UI" e-captionSettings-font-fontStyle="Normal" e-captionSettings-font-size="12px" e-captionSettings-font-fontWeight="regular" e-captionSettings-font-opacity="1"
|
||||
>
|
||||
<e-qualitativeRanges>
|
||||
<e-qualitativeRange e-rangeEnd="-4.4">
|
||||
</e-qualitativeRange>
|
||||
<e-qualitativeRange e-rangeEnd="4.3">
|
||||
</e-qualitativeRange>
|
||||
<e-qualitativeRange e-rangeEnd="10">
|
||||
</e-qualitativeRange>
|
||||
</e-qualitativeRanges>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div ng-controller="angularBullet4">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area" align="center" style="height:70px;">
|
||||
<div id="bulletCore4" ej-bulletgraph e-load="loadBulletTheme" e-height="80" e-qualitativeRangeSize="32" e-quantitativeScaleLength="475" e-orientation="Horizontal" e-flowDirection="Backward"
|
||||
e-quantitativeScaleSettings-location-x="105" e-quantitativeScaleSettings-location-y="10"
|
||||
e-quantitativeScaleSettings-minimum="0"
|
||||
e-quantitativeScaleSettings-maximum="10"
|
||||
e-quantitativeScaleSettings-interval="1"
|
||||
e-value="8" e-comparativeMeasureValue="6.7"
|
||||
e-quantitativeScaleSettings-minorTicksPerInterval="4"
|
||||
e-quantitativeScaleSettings-tickPosition="Far"
|
||||
e-quantitativeScaleSettings-majorTickSettings-width="1" e-quantitativeScaleSettings-majorTickSettings-size="13" e-quantitativeScaleSettings-majorTickSettings-stroke="gray"
|
||||
e-quantitativeScaleSettings-minorTickSettings-width="1" e-quantitativeScaleSettings-minorTickSettings-size="5" e-quantitativeScaleSettings-minorTickSettings-stroke="gray"
|
||||
e-quantitativeScaleSettings-labelSettings-position="Below" e-quantitativeScaleSettings-labelSettings-offset="14" e-quantitativeScaleSettings-labelSettings-size="10"
|
||||
e-quantitativeScaleSettings-labelSettings-labelSuffix="K" e-quantitativeScaleSettings-labelSettings-labelPrefix="$"
|
||||
e-quantitativeScaleSettings-featuredMeasureSettings-width="6"
|
||||
e-quantitativeScaleSettings-comparativeMeasureSettings-width="5"
|
||||
e-captionSettings-textAngle="0"
|
||||
e-captionSettings-location-x="38" e-captionSettings-location-y="25" e-captionSettings-text="Revenue YTD"
|
||||
e-captionSettings-font-color="null" e-captionSettings-font-fontFamily="Segoe UI" e-captionSettings-font-fontStyle="Normal" e-captionSettings-font-size="12px" e-captionSettings-subTitle-textAngle="0"
|
||||
e-captionSettings-subTitle-text="$ in Thousands" e-captionSettings-subTitle-location-x="10" e-captionSettings-subTitle-location-y="35" e-captionSettings-font-fontWeight="regular" e-captionSettings-font-opacity="1"
|
||||
>
|
||||
<e-qualitativeRanges>
|
||||
<e-qualitativeRange e-rangeEnd="4.3" e-rangeStroke="#61a301" e-rangeOpacity="1">
|
||||
</e-qualitativeRange>
|
||||
<e-qualitativeRange e-rangeEnd="7.3" e-rangeStroke="#fcda21" e-rangeOpacity="1">
|
||||
</e-qualitativeRange>
|
||||
<e-qualitativeRange e-rangeEnd="10" e-rangeStroke="#d61e3f" e-rangeOpacity="1">
|
||||
</e-qualitativeRange>
|
||||
</e-qualitativeRanges>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
syncApp.controller('angularBullet1', function ($scope) {
|
||||
|
||||
});
|
||||
|
||||
|
||||
syncApp.controller('angularBullet2', function ($scope) {
|
||||
|
||||
});
|
||||
|
||||
syncApp.controller('angularBullet3', function ($scope) {
|
||||
|
||||
});
|
||||
|
||||
|
||||
syncApp.controller('angularBullet4', function ($scope) {
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
|
||||
<div ng-controller="angularBullet1">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area" align="center">
|
||||
<div id="bulletCore1" ej-bulletgraph e-load="loadBulletTheme"
|
||||
e-value="8"
|
||||
e-applyRangeStrokeToTicks="true"
|
||||
e-comparativeMeasureValue="5"
|
||||
e-width="650"
|
||||
e-height="400"
|
||||
e-quantitativeScaleSettings-location-x="93" e-quantitativeScaleSettings-location-y="175"
|
||||
e-quantitativeScaleSettings-labelSettings-offset="14" e-quantitativeScaleSettings-labelSettings-size="10"
|
||||
e-quantitativeScaleSettings-majorTickSettings-size="13" e-quantitativeScaleSettings-majorTickSettings-width="1" e-quantitativeScaleSettings-majorTickSettings-stroke='gray'
|
||||
e-quantitativeScaleSettings-minorTickSettings-size="5" e-quantitativeScaleSettings-minorTickSettings-width="1" e-quantitativeScaleSettings-minorTickSettings-stroke='gray'
|
||||
e-captionSettings-textAngle="0" e-captionSettings-location-x="5" e-captionSettings-location-y="241" e-captionSettings-text="Revenue YTD" e-captionSettings-textPosition='right'
|
||||
e-captionSettings-subTitle-textAngle="0" e-captionSettings-subTitle-textPosition='right'
|
||||
e-captionSettings-subTitle-text="$ in Thousands" e-captionSettings-subTitle-location-x="5" e-captionSettings-subTitle-location-y="257"
|
||||
>
|
||||
<e-qualitativeRanges>
|
||||
<e-qualitativeRange e-rangeEnd="3" e-rangeStroke="#61a301">
|
||||
</e-qualitativeRange>
|
||||
<e-qualitativeRange e-rangeEnd="7" e-rangeStroke="#fcda21">
|
||||
</e-qualitativeRange>
|
||||
<e-qualitativeRange e-rangeEnd="10" e-rangeStroke="#d61e3f">
|
||||
</e-qualitativeRange>
|
||||
<e-qualitativeRanges>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div id="property-window" class="box wide">
|
||||
<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 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
syncApp.controller('angularBullet1', function ($scope) {
|
||||
|
||||
});
|
||||
|
||||
|
||||
function BulletTrim(sender) {
|
||||
$("#bulletCore1").ejBulletGraph('option', 'captionSettings.enableTrim', sender.checked);
|
||||
}
|
||||
|
||||
function BulletCapAlignment(sender) {
|
||||
$("#bulletCore1").ejBulletGraph('option', 'captionSettings.textAlignment', sender.value);
|
||||
}
|
||||
|
||||
function BulletCapPosition(sender) {
|
||||
$("#bulletCore1").ejBulletGraph('option', 'captionSettings.textPosition', sender.value);
|
||||
}
|
||||
|
||||
function BulletSubtitleAlignment(sender) {
|
||||
$("#bulletCore1").ejBulletGraph('option', 'captionSettings.subTitle.textAlignment', sender.value);
|
||||
}
|
||||
|
||||
function BulletSubtitlePosition(sender) {
|
||||
$("#bulletCore1").ejBulletGraph('option', 'captionSettings.subTitle.textPosition', sender.value);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<div ng-controller="ButtonApiCtrl">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area">
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<table>
|
||||
<tr>
|
||||
<td>Normal Button</td>
|
||||
<td class="btnsht">
|
||||
<button id="button" class="ang-button btn" ej-button e-showroundedcorner="true" e-size="large" e-contenttype="textonly" e-text="Button"></button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Toggle Button</td>
|
||||
<td>
|
||||
<input type="checkbox" id="toggle1" ej-togglebutton e-showroundedcorner="true" e-size="large" e-contenttype="textandimage" e-defaulttext="Play" e-activetext="Pause" e-defaultprefixicon="e-icon e-mediaplay" e-activeprefixicon="e-icon e-mediapause" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="btnsht">DropDown Button</td>
|
||||
<td class="splttd btnsht">
|
||||
<button id="dropdown1" ej-splitbutton e-size="large" e-showroundedcorner="true" e-contenttype="textonly" e-targetid="MediaMenu" e-text="Play" e-buttonmode="buttonMode"></button>
|
||||
<ul id="MediaMenu">
|
||||
<li><span>Play</span></li>
|
||||
<li><span>Pause</span></li>
|
||||
<li><span>Forward</span></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td></td>
|
||||
<tr>
|
||||
<tr>
|
||||
<td class="btnsht">Split Button</td>
|
||||
<td class="splttd btnsht">
|
||||
|
||||
<button id="split1" ej-splitbutton e-size="large" e-showroundedcorner="true" e-contenttype="textonly" e-targetid="loginMenu" e-text="login"></button>
|
||||
<ul id="loginMenu">
|
||||
<li><span>User</span></li>
|
||||
<li><span>Guest</span></li>
|
||||
<li><span>Admin</span></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div id="property-window" class="box wide">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<input type="checkbox" id="toggle2" ej-togglebutton e-showroundedcorner="true" e-width='105px' e-contenttype="textonly" e-defaulttext="Enable" e-activetext="Disable" e-click="checkuncheck" />
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<input id="dropdown2" ej-dropdownlist e-datasource="dataList" e-watermarktext="ArrowChange" e-change="onArrowChange" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<style type="text/css" class="cssStyles">
|
||||
@media only screen and (min-width: 480px) {
|
||||
.control {
|
||||
padding: 0 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.frame {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
var list = [{ text: "Right", value: 'right' },
|
||||
{ text: "Left", value: 'left' },
|
||||
{ text: "Top", value: 'top' },
|
||||
{ text: "Bottom", value: 'bottom' }];
|
||||
|
||||
syncApp.controller('ButtonApiCtrl', function ($scope, $rootScope) {
|
||||
$scope.buttonMode = "Dropdown",
|
||||
$scope.index = 0,
|
||||
$scope.dataList = list,
|
||||
$scope.checkuncheck = function (args) {
|
||||
var button1 = $("#button").data('ejButton');
|
||||
var button2 = $("#toggle1").data('ejToggleButton');
|
||||
var button3 = $("#split1").data('ejSplitButton');
|
||||
var button4 = $("#dropdown1").data('ejSplitButton');
|
||||
if (args.isChecked) {
|
||||
button1.disable();
|
||||
button2.disable();
|
||||
button3.disable();
|
||||
button4.disable();
|
||||
}
|
||||
else {
|
||||
button1.enable();
|
||||
button2.enable();
|
||||
button3.enable();
|
||||
button4.enable();
|
||||
}
|
||||
}
|
||||
$scope.onArrowChange = function (args) {
|
||||
if (args.value == "top" || args.value == "bottom")
|
||||
$(".splttd").css("padding", "6px 20px 6px 20px");
|
||||
else
|
||||
$(".splttd").css("padding", "6px 20px 6px 20px");
|
||||
$(".e-splitbutton").ejSplitButton({ "arrowPosition": args.value });
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
<div ng-controller="CheckBoxCtrl">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area">
|
||||
<div class="control">
|
||||
<br />
|
||||
Hobbies
|
||||
<br />
|
||||
<br />
|
||||
<table>
|
||||
<tr>
|
||||
<td class="chkrad">
|
||||
<input type="checkbox" ej-checkbox class="nodetext" id="check1" />
|
||||
<label for="check1" class="clslab">Music</label>
|
||||
</td>
|
||||
<td class="chkrad">
|
||||
<input type="checkbox" ej-checkbox class="nodetext" id="Checkbox3" />
|
||||
<label for="Checkbox3" class="clslab">Sports</label>
|
||||
</td>
|
||||
<td class="chkrad">
|
||||
<input type="checkbox" ej-checkbox class="nodetext" id="Checkbox4" />
|
||||
<label for="Checkbox4" class="clslab">Reading</label>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br />
|
||||
<br />
|
||||
Favorite Search Engines<br />
|
||||
<br />
|
||||
<table>
|
||||
<tr>
|
||||
<td class="chkrad">
|
||||
<input type="checkbox" class="nodetext" ej-checkbox e-size="medium" id="Checkbox1" /><label for="Checkbox1" class="clslab">Google</label>
|
||||
</td>
|
||||
<td class="chkrad">
|
||||
<input type="checkbox" class="nodetext" ej-checkbox e-size="medium" id="Checkbox5" /><label for="Checkbox5" class="clslab">Yahoo</label>
|
||||
</td>
|
||||
<td class="chkrad">
|
||||
<input type="checkbox" class="nodetext" ej-checkbox e-size="medium" e-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" ej-checkbox e-size="medium" e-enabletristate="true" id="Checkbox2" /><label for="Checkbox2" class="clslab">Facebook</label>
|
||||
</td>
|
||||
<td class="chkrad">
|
||||
<input type="checkbox" class="nodetext" ej-checkbox e-size="medium" e-enabletristate="true" id="Checkbox7" /><label for="Checkbox7" class="clslab">GPlus</label>
|
||||
</td>
|
||||
<td class="chkrad">
|
||||
<input type="checkbox" class="nodetext" ej-checkbox e-size="medium" e-enabletristate="true" id="Checkbox8" /><label for="Checkbox8" class="clslab">Twitter</label>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style type="text/css" class="cssStyles">
|
||||
.chkrad {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.control {
|
||||
padding: 0 25%;
|
||||
}
|
||||
|
||||
.clslab {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 580px) {
|
||||
.control {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
syncApp.controller('CheckBoxCtrl', function ($scope) {
|
||||
|
||||
})
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<div ng-controller="ButtonCtrl">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area">
|
||||
<div class="control">
|
||||
<table class="table-condensed f11 table-nowrap">
|
||||
<tr>
|
||||
<td>Normal</td>
|
||||
<td class="btnsht">
|
||||
<button id="button11" class="ang-button btn" ej-button e-showroundedcorner="true" e-size="normal" e-contenttype="imageonly" e-prefixicon="e-icon e-uiLight e-handup" e-text="login"></button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mini</td>
|
||||
<td class="btnsht">
|
||||
<button id="button21" class="ang-button btn" ej-button e-showroundedcorner="true" e-size="mini" e-text="login"></button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Small</td>
|
||||
<td class="btnsht">
|
||||
<button id="button31" class="ang-button btn" ej-button e-showroundedcorner="true" e-size="small" e-text="login"></button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Medium</td>
|
||||
<td class="btnsht">
|
||||
<button id="button41" class="ang-button btn" ej-button e-showroundedcorner="true" e-size="medium" e-text="login"></button>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Large</td>
|
||||
<td class="btnsht">
|
||||
<button id="button51" class="ang-button btn" ej-button e-showroundedcorner="true" e-size="large" e-contenttype="textandimage" e-prefixicon="e-icon e-uiLight e-handup" e-text="login"></button>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style type="text/css" class="cssStyles">
|
||||
@media only screen and (min-width: 480px){
|
||||
.control{
|
||||
padding:0 30%;
|
||||
}
|
||||
}
|
||||
|
||||
.table-nowrap td {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
syncApp.controller('ButtonCtrl', function ($scope) {
|
||||
|
||||
})
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
<div ng-controller="ButtonenableRTLCtrl">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area">
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<table>
|
||||
<tr>
|
||||
<td>Normal Button</td>
|
||||
<td class="btnsht">
|
||||
<button id="button" class="ang-button btn" ej-button e-showroundedcorner="true" e-size="large" e-contenttype="textandimage" e-text="Button" e-prefixicon="e-icon e-mediaplay" e-enablertl="true"></button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Toggle Button</td>
|
||||
<td>
|
||||
<input type="checkbox" id="toggle1" ej-togglebutton e-showroundedcorner="true" e-size="large" e-contenttype="textandimage" e-defaulttext="Play" e-activetext="Pause" e-enablertl="true" e-defaultprefixicon="e-icon e-mediaplay" e-activeprefixicon="e-icon e-mediapause" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Split Button</td>
|
||||
<td>
|
||||
<button id="split1" ej-splitbutton e-size="large" e-showroundedcorner="true" e-contenttype="textonly" e-enablertl="true" e-targetid="Ul51" e-text="login"></button>
|
||||
<ul id="Ul51">
|
||||
<li><span>User</span></li>
|
||||
<li><span>Guest</span></li>
|
||||
<li><span>Admin</span></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Group Button</td>
|
||||
<td>
|
||||
<div class="element">
|
||||
<div id="group1" ej-groupbutton e-groupbuttonmode="radiobutton" e-width="100%" e-showroundedcorner="true" e-enablertl="true" e-datasource="dataSource"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style type="text/css" class="cssStyles">
|
||||
@media only screen and (min-width: 480px) {
|
||||
.control {
|
||||
padding: 0 10%;
|
||||
}
|
||||
}
|
||||
|
||||
.frame {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
syncApp.controller('ButtonenableRTLCtrl', function ($scope) {
|
||||
var list = [{ text: "Play" }, { text: "Pause" }, { text: "Stop" }];
|
||||
$scope.dataSource = list
|
||||
});
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
<div ng-controller="ButtoneventCtrl">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area">
|
||||
<div class="frame">
|
||||
<div class="control">
|
||||
<table>
|
||||
<tr>
|
||||
<td>Normal Button</td>
|
||||
<td class="btnsht">
|
||||
<button id="button" class="ang-button btn" ej-button e-showroundedcorner="true" e-size="large" e-contenttype="textonly" e-text="Button" e-click="btnClick" e-create="btnLoad"></button>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Toggle Button</td>
|
||||
<td>
|
||||
<input type="checkbox" id="toggle1" ej-togglebutton e-showroundedcorner="true" e-size="large" e-contenttype="textandimage" e-defaulttext="Play" e-activetext="Pause" e-defaultprefixicon="e-icon e-mediaplay" e-activeprefixicon="e-icon e-mediapause" e-create="tglebtnLoad" e-click="tglebtnClick" e-change="tglebtnChange" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Split Button</td>
|
||||
<td>
|
||||
<button id="split1" ej-splitbutton e-size="large" e-showroundedcorner="true" e-contenttype="textonly" e-targetid="Ul51" e-text="login" e-create="spltbtnLoad" e-beforeOpen="onFocusIn" e-open="spltbtnOpened" e-click="spltbtnClick" e-itemMouseOver="spltbtnitmHover" e-itemMouseOut="spltbtnitmOut" e-itemSelected="spltbtnitmSelected" e-close="spltbtnClosed"></button>
|
||||
<ul id="Ul51">
|
||||
<li><span>User</span></li>
|
||||
<li><span>Guest</span></li>
|
||||
<li><span>Admin</span></li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Group Button</td>
|
||||
|
||||
|
||||
|
||||
<td>
|
||||
<div class="element">
|
||||
<div id="group1" ej-groupbutton e-groupbuttonmode="radiobutton" e-width="100%" e-showroundedcorner="true" e-datasource="dataSource" e-create="grpbtnLoad" e-select="grpbtnSelect" e-beforeSelect="grpbtnBeforeSelect" e-keyPress="grpbtnKeyPress"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id='Logger' class='EventBox'>
|
||||
<h4>Event Trace</h4>
|
||||
<div class="console">
|
||||
<div class='EventLog' id='EventLog'></div>
|
||||
</div>
|
||||
<button id="clrbutton" e-size='small' ej-button class="eventclear e-btn" e-contenttype="textonly" e-text='Clear' e-value="Clear" e-click="onClear" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style type="text/css" class="cssStyles">
|
||||
@media only screen and (min-width: 480px) {
|
||||
.control {
|
||||
padding: 0 10%;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
.frame {
|
||||
width:50%;
|
||||
}
|
||||
td {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
syncApp.controller('ButtoneventCtrl', function ($scope) {
|
||||
var list = [{ text: "Play" }, { text: "Pause" }, { text: "Stop" }];
|
||||
|
||||
var listdrp = [{ text: "Before Open", value: "beforeOpen" }, { text: "Open", value: "open" }, { text: 'Change', value: 'change' }, { text: 'Item Mouse Over', value: 'itemMouseOver' }, { text: 'Item Mouse Out', value: 'itemMouseout' }, { text: 'itemSelected', value: 'Item Selected' }, { text: 'Close', value: 'close' }, { text: 'Select', value: 'select' }, { text: 'Before Select', value: 'beforeSelect' }, { text: 'Key Press', value: 'keyPress' }];
|
||||
var grpbtnObj = $("#groupButton").data("ejGroupButton");
|
||||
var btnObj = $("#buttonnormal").data("ejButton");
|
||||
var tglbtnObj = $("#TextOnly").data("ejToggleButton");
|
||||
var spltbtnObj = $("#splitbuttonnormal").data("ejSplitButton");
|
||||
|
||||
$scope.dataSource = list,
|
||||
$scope.droplist = listdrp,
|
||||
($scope).btnLoad = function (e) {
|
||||
jQuery.addEventLog("Button has been <span class='eventTitle'>created</span>.");
|
||||
},
|
||||
$scope.btnClick = function (e) {
|
||||
jQuery.addEventLog("Button has been <span class='eventTitle'>clicked</span>.");
|
||||
},
|
||||
$scope.tglebtnLoad = function (e) {
|
||||
jQuery.addEventLog("ToggleButton has been <span class='eventTitle'>created</span>.");
|
||||
},
|
||||
$scope.tglebtnClick = function (e) {
|
||||
jQuery.addEventLog("ToggleButton has been <span class='eventTitle'>clicked</span>.");
|
||||
}
|
||||
$scope.tglebtnChange = function (e) {
|
||||
jQuery.addEventLog("ToggleButton value has been <span class='eventTitle'>changed</span> to " + e.isChecked + ".");
|
||||
}
|
||||
$scope.spltbtnLoad = function (e) {
|
||||
jQuery.addEventLog("SplitButton has been <span class='eventTitle'>created</span>.");
|
||||
}
|
||||
$scope.spltbtnClick = function (e) {
|
||||
jQuery.addEventLog("SplitButton has been <span class='eventTitle'>clicked</span>.");
|
||||
}
|
||||
$scope.onFocusIn = function (e) {
|
||||
jQuery.addEventLog("SplitButton popup has been <span class='eventTitle'>BeforeOpened</span>. ");
|
||||
}
|
||||
$scope.spltbtnOpened = function (e) {
|
||||
jQuery.addEventLog("SplitButton popup has been <span class='eventTitle'>Opened</span>. ");
|
||||
}
|
||||
$scope.spltbtnClosed = function (e) {
|
||||
jQuery.addEventLog("SplitButton popup has been <span class='eventTitle'>Closed</span>.");
|
||||
}
|
||||
$scope.spltbtnitmHover = function (e) {
|
||||
jQuery.addEventLog("SplitButton item <span class='eventTitle'>hovered-in</span>.");
|
||||
}
|
||||
$scope.spltbtnitmOut = function (e) {
|
||||
jQuery.addEventLog("SplitButton item <span class='eventTitle'>hovered-out</span>.");
|
||||
}
|
||||
$scope.spltbtnitmSelected = function (e) {
|
||||
jQuery.addEventLog(e.text + " item has been <span class='eventTitle'>selected</span>.");
|
||||
}
|
||||
$scope.grpbtnBeforeSelect = function (args) {
|
||||
jQuery.addEventLog("Group Button <span class='eventTitle'>BeforeActive</span> event is fired for Index " + args.index + ".");
|
||||
}
|
||||
$scope.grpbtnSelect = function (args) {
|
||||
jQuery.addEventLog("Group Button <span class='eventTitle'>Active</span> event is fired for Index " + args.index + ".");
|
||||
}
|
||||
$scope.grpbtnKeyPress = function (args) {
|
||||
jQuery.addEventLog("Group Button <span class='eventTitle'>Focus</span> Changed to the index" + args.index + ".");
|
||||
}
|
||||
$scope.grpbtnLoad = function (e) {
|
||||
jQuery.addEventLog("Group Button has been <span class='eventTitle'>created</span>.");
|
||||
}
|
||||
$scope.onClear = function () {
|
||||
jQuery.clearEventLog();
|
||||
}
|
||||
|
||||
$scope.evtpropscheckedevent = function (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);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<div ng-controller="GroupButtonCtrl">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area">
|
||||
<div class="control">
|
||||
<label>Appointment View</label>
|
||||
<div class="element">
|
||||
<div id="groupButton" ej-groupbutton e-groupbuttonmode="radiobutton" e-width="100%" e-showroundedcorner="true" e-datasource="dataSource"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style type="text/css" class="cssStyles">
|
||||
|
||||
.control .element, label {
|
||||
display: table;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.element {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
syncApp.controller('GroupButtonCtrl', function ($scope) {
|
||||
var groupdata = [
|
||||
{ text: "Day", contentType: "textonly" },
|
||||
{ text: "Week", contentType: "textonly" },
|
||||
{ text: "Month", contentType: "textonly", selected: "selected" },
|
||||
{ text: "Year", contentType: "textonly" }];
|
||||
$scope.dataSource = groupdata;
|
||||
})
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<div ng-controller="RadioButtonCtrl">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area">
|
||||
<div class="control">
|
||||
<div class="radioalign">
|
||||
<br />
|
||||
Category<br />
|
||||
<br />
|
||||
<table class="table-condensed f11 table-nowrap">
|
||||
<tr>
|
||||
<td class="chkrad">
|
||||
<input type="radio" ej-radiobutton e-name="small" e-checked="true" id="Radio1" /><label for="Radio1" class="clslab">Fresher</label>
|
||||
</td>
|
||||
<td class="chkrad" colspan="2">
|
||||
<input type="radio" ej-radiobutton e-name="small" id="Radio3" /><label for="Radio3" class="clslab">Experienced</label>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br />
|
||||
<br />
|
||||
Experienced<br />
|
||||
<br />
|
||||
<table class="table-condensed f11 table-nowrap">
|
||||
<tr>
|
||||
<td class="chkrad">
|
||||
<input type="radio" ej-radiobutton e-name="medium" e-checked="true" id="Radio2" /><label for="Radio2" class="clslab">1+ years</label>
|
||||
</td>
|
||||
<td class="chkrad">
|
||||
<input type="radio" ej-radiobutton e-name="medium" id="Radio4" /><label for="Radio4" class="clslab">2.5+years</label>
|
||||
</td>
|
||||
<td class="chkrad">
|
||||
<input type="radio" ej-radiobutton name="medium" id="Radio5" /><label for="Radio5" class="clslab">5+years</label>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style type="text/css" class="cssStyles">
|
||||
@media only screen and (min-width: 480px){
|
||||
.control{
|
||||
padding:0 30%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.table-nowrap td {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.chkrad {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.clslab {
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
syncApp.controller('RadioButtonCtrl', function ($scope) {
|
||||
|
||||
})
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<div ng-controller="SplitButtonCtrl">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area">
|
||||
<div class="control">
|
||||
<table class="table-condensed f11 table-nowrap">
|
||||
<tr>
|
||||
<td> Normal</td>
|
||||
<td>
|
||||
<div class="spltspan">
|
||||
<button id="spltbutton11" ej-splitbutton e-size="normal" e-showroundedcorner="true" e-contenttype="imageonly" e-prefixicon="e-icon e-login" e-targetid="Ul11"></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" ej-splitbutton e-size="mini" e-showroundedcorner="true" e-text="login" e-targetid="Ul21"></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>
|
||||
<button id="spltbutton31" ej-splitbutton e-size="small" e-showroundedcorner="true" e-text="login" e-targetid="Ul31"></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>
|
||||
<button id="spltbutton41" ej-splitbutton e-size="medium" e-showroundedcorner="true" e-text="login" e-targetid="Ul41"></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>
|
||||
<button id="spltbutton51" ej-splitbutton e-size="large" e-showroundedcorner="true" e-contenttype="textandimage" e-targetid="Ul51" e-prefixicon="e-icon e-login" e-text="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>
|
||||
</div>
|
||||
<style type="text/css" class="cssStyles">
|
||||
@media only screen and (min-width: 480px){
|
||||
.control{
|
||||
padding:0 30%;
|
||||
}
|
||||
}
|
||||
|
||||
.table-nowrap td {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.spltspan {
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
syncApp.controller('SplitButtonCtrl', function ($scope) {
|
||||
|
||||
})
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<div ng-controller="ToggleButtonCtrl">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area">
|
||||
<div class="control">
|
||||
<table class="table-condensed f11 table-nowrap">
|
||||
<tr>
|
||||
<td>Normal</td>
|
||||
<td>
|
||||
<input type="checkbox" id="button11" ej-togglebutton e-showroundedcorner="true" e-size="normal" e-contenttype="imageonly" e-defaultprefixicon="e-icon e-mediaplay" e-activeprefixicon="e-icon e-mediapause" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Mini</td>
|
||||
<td>
|
||||
<input type="checkbox" id="button21" ej-togglebutton e-showroundedcorner="true" e-size="mini" e-contenttype="textonly" e-defaulttext="Play" e-activetext="Pause" />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Small</td>
|
||||
<td>
|
||||
<input type="checkbox" id="button31" ej-togglebutton e-showroundedcorner="true" e-size="small" e-contenttype="textonly" e-defaulttext="Play" e-activetext="Pause" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Medium</td>
|
||||
<td>
|
||||
<input type="checkbox" id="button41" ej-togglebutton e-showroundedcorner="true" e-size="medium" e-contenttype="textonly" e-defaulttext="Play" e-activetext="Pause" />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Large</td>
|
||||
<td>
|
||||
<input type="checkbox" id="button51" ej-togglebutton e-showroundedcorner="true" e-size="large" e-contenttype="textandimage" e-defaulttext="Play" e-activetext="Pause" e-defaultprefixicon="e-icon e-mediaplay" e-activeprefixicon="e-icon e-mediapause" />
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<style type="text/css" class="cssStyles">
|
||||
@media only screen and (min-width: 480px){
|
||||
.control{
|
||||
padding:0 30%;
|
||||
}
|
||||
}
|
||||
|
||||
.table-nowrap td {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
syncApp.controller('ToggleButtonCtrl', function ($scope) {
|
||||
|
||||
})
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<script src="scripts/ChartData.js"></script>
|
||||
<div ng-controller="ChartCtrl">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area" align="center">
|
||||
<div id="chartContainer" style="width: 100%" ej-chart e-size-height="600px" e-primaryXAxis-range-min="2008" e-primaryXAxis-range-max="2015" e-primaryXAxis-range-interval="1"
|
||||
e-primaryXAxis-range-axisLine-visible="false"
|
||||
e-primaryXAxis-range-majorGridLines-visible="true" e-primaryXAxis-range-majorGridLines-color="#a9a9a9" e-primaryXAxis-range-majorGridLines-opacity="0.12"
|
||||
e-primaryYAxis-range-min="0" e-primaryYAxis-range-max="20" e-primaryYAxis-range-interval="2"
|
||||
e-primaryYAxis-labelFormat="${value}"
|
||||
e-primaryYAxis-title-text="Digital Ad Sales in Billion"
|
||||
e-primaryYAxis-majorGridLines-visible="true" e-primaryYAxis-majorGridLines-color="#a9a9a9" e-primaryYAxis-majorGridLines-opacity="0.12"
|
||||
e-commonSeriesOptions-type="stackingbar"
|
||||
e-commonSeriesOptions-tooltip-visible="true" e-commonSeriesOptions-tooltip-format="#series.name# <br/> Year #point.x# : #point.y# Billions"
|
||||
e-enable3D="true" e-enableRotation="true" e-depth="100" e-wallSize="2" e-tilt="0" e-rotation="34" e-perspectiveAngle="90" e-sideBySideSeriesPlacement="true" e-isResponsive="true" e-load="loadTheme" e-title-text="Forecast:Real-Time Bidding Digital Ad Sales" e-legend-visible="true">
|
||||
<e-series>
|
||||
<e-series e-name="Desktop Display" e-points="Points1">
|
||||
</e-series>
|
||||
<e-series e-name="Mobile" e-points="Points2">
|
||||
</e-series>
|
||||
<e-series e-name="Video" e-points="Points3">
|
||||
</e-series>
|
||||
</e-series>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
|
||||
syncApp.controller('ChartCtrl', function ($scope) {
|
||||
$scope.Points1 = [{ 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 } ];
|
||||
$scope.Points2 = [{ 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 }];
|
||||
$scope.Points3 = [{ 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 }];
|
||||
});
|
||||
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<script src="scripts/ChartData.js"></script>
|
||||
<div ng-controller="ChartCtrl">
|
||||
<div class="content-container-fluid">
|
||||
<div class="row">
|
||||
<div class="cols-sample-area" align="center">
|
||||
<div id="chartContainer" style="width: 100%" ej-chart e-size-height="600px" e-primaryXAxis-axisLine-visible="false"
|
||||
e-primaryXAxis-majorGridLines-visible="true" e-primaryXAxis-majorGridLines-color="#a9a9a9" e-primaryXAxis-majorGridLines-opacity="0.12" e-primaryYAxis-title-text="% of Employees"
|
||||
e-primaryYAxis-title-majorGridLines-visible="true" e-primaryYAxis-title-majorGridLines-color="#a9a9a9" e-primaryYAxis-title-majorGridLines-opacity="0.12" e-commonSeriesOptions-tooltip-visible="true" e-commonSeriesOptions-tooltip-format=" #series.name# <br/> #point.x# : #point.y#% " e-enable3D="true" e-enableRotation="true" e-depth="100" e-wallSize="2" e-tilt="0" e-rotation="34" e-perspectiveAngle="90" e-sideBySideSeriesPlacement="true" e-isResponsive="true" e-load="loadTheme" e-title-text="Employees In Self Insured Plans, 2013" e-legend-visible="true">
|
||||
<e-series>
|
||||
<e-series e-points="Points1" e-type="bar" e-name="California">
|
||||
</e-series>
|
||||
<e-series e-points="Points2" e-type="bar" e-name="United States">
|
||||
</e-series>
|
||||
</e-series>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче