Available in the OSS Version
Split Button - TypeScript
This sample demonstrates how a user can combine split button and color picker in TypeScript.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
- Change shape:
- Change color:
- Change shape:
- Change color:
- Change shape:
- Change color:
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
You can change the shape of the figures with the split button, and change the color with the color picker button.
Code View
Copy to Clipboard
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
<style>
#figuresArea {
margin: 0px 0px 40px 0px;
}
#circle, #triangle, #rectangle, #square {
padding: 0px 0px 0px 60px;
}
.manipulator-container {
border-bottom: 1px solid black;
padding: 0px 0px 5px 0px;
width: 300px;
}
.ui-button {
width: 18px;
height: 18px;
padding: 3px;
}
.ui-igbutton .ui-igbutton-forecolor, .button-split {
background-image: url('http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/images/ui-icons_888888_256x240.png')!important;
background-size: 384px 370px;
}
#color-picker-circle .ui-igbutton .ui-igbutton-forecolor, .button-circle.ui-icon {
background-position: -123px -230px;
background-image: url('http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/images/ui-icons_888888_256x240.png')!important;
}
#color-picker-triangle .ui-igbutton .ui-igbutton-forecolor, #split-button-circle .button-triangle,
#split-button-triangle .button-triangle, #split-button-square .button-triangle.ui-icon {
background-position: -98px -8px;
background-image: url('http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/images/igGrid/filter-icons-333333.png')!important;
background-size: 606px 32px;
}
#color-picker-square .ui-igbutton .ui-igbutton-forecolor, .button-square.ui-icon {
background-position: -148px -254px;
background-image: url('http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/images/ui-icons_888888_256x240.png')!important;
}
.ui-splitbutton .ui-igtoolbarbutton.ui-button {
margin: 0;
border: none !important; /* Needed to prevent various jquery ui interaction state scenarios */
}
</style>
</head>
<body>
<div id="figuresArea">
<div class="element-container">
<canvas id="circle"></canvas>
<div class="manipulator-container">
<span> - Change shape: </span><div id="split-button-circle"></div>
<span> - Change color: </span><div id="color-picker-circle"></div>
</div>
</div>
<div class="element-container">
<canvas id="triangle"></canvas>
<div class="manipulator-container">
<span> - Change shape: </span><div id="split-button-triangle"></div>
<span> - Change color: </span><div id="color-picker-triangle"></div>
</div>
</div>
<div class="element-container">
<canvas id="square"></canvas>
<div class="manipulator-container">
<span> - Change shape: </span><div id="split-button-square"></div>
<span> - Change color: </span><div id="color-picker-square"></div>
</div>
</div>
</div>
<script src="/TypeScriptSamples/split-button/typescript.js"></script>
</body>
</html>
/// <reference path="/js/typings/jquery.d.ts" />
/// <reference path="/js/typings/jqueryui.d.ts" />
/// <reference path="/js/typings/igniteui.d.ts" />
$(function () {
function drawCircle(element) {
var elementCtx = element.getContext("2d"),
previousFillStyle = elementCtx.fillStyle;
elementCtx.clearRect(0, 0, element.width, element.height);
elementCtx.beginPath();
elementCtx.arc(60, 80, 50, 0, 2 * Math.PI);
elementCtx.stroke();
elementCtx.fillStyle = previousFillStyle;
elementCtx.fill();
}
function drawTriangle(element) {
var elementCtx = element.getContext("2d"),
previousFillStyle = elementCtx.fillStyle;
elementCtx.clearRect(0, 0, element.width, element.height);
elementCtx.beginPath();
elementCtx.moveTo(0, 120);
elementCtx.lineTo(120, 120);
elementCtx.lineTo(60, 20);
elementCtx.closePath();
elementCtx.stroke();
elementCtx.fillStyle = previousFillStyle;
elementCtx.fill();
}
function drawSquare(element) {
var elementCtx = element.getContext("2d"),
previousFillStyle = elementCtx.fillStyle;
elementCtx.clearRect(0, 0, element.width, element.height);
elementCtx.beginPath();
elementCtx.rect(10, 30, 100, 100);
elementCtx.stroke();
elementCtx.fillStyle = previousFillStyle;
elementCtx.fill();
}
function firstTimeInit() {
var circle, triangle, square, circleCtx, triangleCtx, squareCtx;
circle = document.getElementById("circle");
circle.getContext("2d").fillStyle = "#205867"
drawCircle(circle);
triangle = document.getElementById("triangle");
triangle.getContext("2d").fillStyle = "#5F497A";
drawTriangle(triangle);
square = document.getElementById("square");
square.getContext("2d").fillStyle = "#E36C09"
drawSquare(square);
}
function changeShape(id, newShape) {
var elementToChange = document.getElementById(id);
if (newShape === "circle") {
drawCircle(elementToChange);
} else if (newShape === "triangle") {
drawTriangle(elementToChange);
} else if (newShape === "square") {
drawSquare(elementToChange);
}
};
$("#split-button-circle").igSplitButton({
items: [{
name: "circle",
label: "circle",
iconClass: "button-split button-circle"
}, {
name: "triangle",
label: "triangle",
iconClass: "button-triangle"
},
{
name: "square",
label: "square",
iconClass: "button-split button-square"
}],
defaultItemName: "circle",
swapDefaultEnabled: true,
click: function (event, ui) {
var elementToChangeId = (<HTMLElement>event.target).id.split("-")[2];
var shape = (<HTMLElement>(<Node>event.target).firstChild).id.split("_")[1];
changeShape(elementToChangeId, shape);
}
});
$("#split-button-triangle").igSplitButton({
items: [{
name: "circle",
label: "circle",
iconClass: "button-split button-circle"
}, {
name: "triangle",
label: "triangle",
iconClass: "button-triangle"
},
{
name: "square",
label: "square",
iconClass: "button-split button-square"
}],
defaultItemName: "triangle",
swapDefaultEnabled: true,
click: function (event, ui) {
var elementToChangeId = (<HTMLElement>event.target).id.split("_")[0].split("-")[2];
var shape = (<HTMLElement>(<Node>event.target).firstChild).id.split("_")[1];
changeShape(elementToChangeId, shape);
}
});
$("#split-button-square").igSplitButton({
items: [{
name: "circle",
label: "circle",
iconClass: "button-split button-circle"
}, {
name: "triangle",
label: "triangle",
iconClass: "button-triangle"
},
{
name: "square",
label: "square",
iconClass: "button-split button-square"
}],
defaultItemName: "square",
swapDefaultEnabled: true,
click: function (event, ui) {
var elementToChangeId = (<HTMLElement>event.target).id.split("_")[0].split("-")[2];
var shape = (<HTMLElement>(<Node>event.target).firstChild).id.split("_")[1];
changeShape(elementToChangeId, shape);
}
});
$("#color-picker-circle").igColorPickerSplitButton({
items: [{
name: "circlecolor",
label: "Circle Color",
iconClass: "circle ui-igbutton-forecolor circle"
}],
defaultItemName: "circlecolor",
defaultColor: "#205867",
colorSelected: function (event, color) {
var circleCanvas = <HTMLCanvasElement>document.getElementById("circle");
var circleCtx = circleCanvas.getContext("2d");
circleCtx.fillStyle = color.value;
circleCtx.fill();
circleCtx.strokeStyle = "#000";
}
});
$("#color-picker-triangle").igColorPickerSplitButton({
items: [{
name: "trianglecolor",
label: "Triangle Color",
iconClass: "ui-igbutton-forecolor"
}],
defaultItemName: "trianglecolor",
defaultColor: "#5F497A",
colorSelected: function (event, color) {
var triangleCanvas = <HTMLCanvasElement>document.getElementById("triangle");
var triangleCtx = triangleCanvas.getContext("2d");
triangleCtx.fillStyle = color.value;
triangleCtx.fill();
triangleCtx.strokeStyle = "#000";
}
});
$("#color-picker-square").igColorPickerSplitButton({
items: [{
name: "squarecolor",
label: "Square Color",
iconClass: "ui-igbutton-forecolor"
}],
defaultItemName: "squarecolor",
defaultColor: "#E36C09",
colorSelected: function (event, color) {
var triangleCanvas = <HTMLCanvasElement>document.getElementById("square");
var squareCtx = triangleCanvas.getContext("2d");
squareCtx.fillStyle = color.value;
squareCtx.fill();
squareCtx.strokeStyle = "#000";
}
});
firstTimeInit();
});