Element Button
JXG.GeometryElement,JXG.CoordsElement
↳ JXG.Text
↳ Text
↳ Button
A text element that contains an HTML button tag. For this element, the attribute "display" has to have the value 'html' (which is the default).
Setting a CSS class: The attribute cssClass affects the HTML div element that contains the button element. To change the CSS properties of the HTML button element a selector of the form .mybutton > button { ... } has to be used. See the example below.
Access the button element with JavaScript:
The underlying HTML button element can be accessed through the sub-object 'rendNodeButton', e.g. to
add event listeners.
Defined in: button.js.
Extends
Text.
| Constructor Attributes | Constructor Name and Description |
|---|---|
| Field Attributes | Field Name and Description |
|---|---|
|
Control the attribute "disabled" of the HTML button.
|
- Methods borrowed from class JXG.Text:
- _createFctUpdateText, _setText, bounds, calculateScore, checkForSizeUpdate, convertGeonext2CSS, convertGeonextAndSketchometry2CSS, convertSketchometry2CSS, crudeSizeEstimate, escapeTicks, expandShortMath, generateTerm, getAnchorX, getAnchorY, getNumberOfConflicts, getSize, hasPoint, notifyParents, poorMansTeX, replaceSub, replaceSup, setAutoPosition, setCoords, setText, setTextJessieCode, unescapeTicks, update, updateRenderer, updateSize, updateText, utf8_decode, valueTagToJessieCode
- Methods borrowed from class JXG.GeometryElement:
- _set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, addTransform, animate, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, eval, evalVisProp, formatNumberLocale, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, updateVisibility, useLocale
- Methods borrowed from class JXG.CoordsElement:
- _anim, addAnchor, addConstraint, Coords, Dist, findClosestSnapValue, free, handleAttractors, handleSnapToPoints, makeGlider, moveAlong, moveAlongES6, moveTo, moveToES6, popSlideObject, setGliderPosition, setPositionByTransform, updateConstraint, updateCoords, updateGlider, updateGliderFromParent, updateTransform, visit, visitES6, X, XEval, Y, YEval, Z, ZEval
- Events borrowed from class JXG.GeometryElement:
- attribute, attribute:key, down, drag, keydrag, mousedown, mousedrag, mousemove, mouseout, mouseover, mouseup, move, out, over, pendown, pendrag, penup, touchdown, touchdrag, touchup, up
Element Detail
Button
-
This element has no direct constructor. To create an instance of this element you have to call JXG.Board#create
with type "button".
- Possible parent array combinations are:
-
{number|function} x
{number|function} y
{String|function} label
{function} handler
- Parent elements for button elements.
x and y are the coordinates of the lower left corner of the text box. The position of the text is fixed, x and y are numbers. The position is variable if x or y are functions.
The label of the input element may be given as string.
The (optional) handler function which is called when the button is pressed.
- Examples:
var p = board.create('point', [0.5, 0.5], {id: 'p1'});
// Create a button element at position [1,2].
var button1 = board.create('button', [1, 2, 'Change Y with JavaScript', function() {
p.moveTo([p.X(), p.Y() + 0.5], 100);
}], {});
// Create a button element at position [1,4].
var button2 = board.create('button', [1, 4, 'Change Y with JessieCode',
"$('p1').Y = $('p1').Y() - 0.5;"
], {});
// A toggle button
var butt = board.create('button', [-2, -2, 'Off', function() {
var txt;
butt.value = !butt.value;
if (butt.value) {
txt = 'On';
} else {
txt = 'Off';
}
butt.rendNodeButton.innerHTML = txt;
}]);
// Set initial value for the button
if (!JXG.exists(butt.value)) {
butt.value = false;
}
var p = board.create('point', [2, -2], {
visible: () => butt.value
});
var i1 = board.create('input', [-3, 4, 'sin(x)', 'f(x)='], {cssStyle: 'width:4em', maxlength: 2});
var c1 = board.create('checkbox', [-3, 2, 'label 1'], {});
var b1 = board.create('button', [-3, -1, 'Change texts', function () {
i1.setText('g(x)');
i1.set('cos(x)');
c1.setText('label 2');
b1.setText('Texts are changed');
}],
{cssStyle: 'width:200px'});
// Set the CSS class of the button
// CSS:
<style>
.mybutton > button {
background-color: #04AA6D;
border: none;
color: white;
padding: 1px 3px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
</style>
// JavaScript:
var button = board.create('button',
[1, 4, 'answers', function () {}],
{cssClass:'mybutton', highlightCssClass: 'mybutton'});
Attribute Detail
{Boolean}
disabled
Control the attribute "disabled" of the HTML button.
Defined in: options.js.
Defined in: options.js.
- Default Value:
- false
Attributes borrowed from other Elements
- Attributes borrowed from class Text:
- anchor, anchorX, anchorY, attractors, cssClass, cssDefaultStyle, cssStyle, digits, display, dragArea, fontSize, fontUnit, formatNumber, highlightCssClass, highlightCssDefaultStyle, highlightCssStyle, intl, isLabel, katexMacros, parse, rotate, snapSizeX, snapSizeY, toFraction, useASCIIMathML, useCaja, useKatex, useMathJax, visible
- Attributes borrowed from class JXG.GeometryElement:
- aria, dash, dashScale, draft, dragToTopOfLayer, element3D, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, highlight, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, ignoreForLabelAutoposition, layer, lineCap, needsRegularUpdate, nonnegativeOnly, precision, priv, rotatable, scalable, shadow, snapToGrid, strokeColor, strokeOpacity, strokeWidth, tabindex, trace, traceAttributes, transitionDuration, transitionProperties, withLabel
Fields borrowed from other Elements
- Fields borrowed from class JXG.Text:
- size
- Fields borrowed from class JXG.GeometryElement:
- _org_type, _pos, ancestors, baseElement, board, childElements, descendants, dump, elementClass, elType, hasLabel, highlighted, id, inherits, isDraggable, isReal, lastDragTime, methodMap, mouseover, name, needsUpdate, notExistingParents, numTraces, parents, quadraticform, rendNode, stdform, subs, symbolic, traces, transformations, type, visProp, visPropCalc
- Fields borrowed from class JXG.CoordsElement:
- coords, groups, isConstrained, needsUpdateFromParent, onPolygon, position, slideObject, slideObjects
Methods borrowed from other Elements
- Methods borrowed from class JXG.Text:
- _createFctUpdateText, _setText, bounds, calculateScore, checkForSizeUpdate, convertGeonext2CSS, convertGeonextAndSketchometry2CSS, convertSketchometry2CSS, crudeSizeEstimate, escapeTicks, expandShortMath, generateTerm, getAnchorX, getAnchorY, getNumberOfConflicts, getSize, hasPoint, notifyParents, poorMansTeX, replaceSub, replaceSup, setAutoPosition, setCoords, setText, setTextJessieCode, unescapeTicks, update, updateRenderer, updateSize, updateText, utf8_decode, valueTagToJessieCode
- Methods borrowed from class JXG.GeometryElement:
- _set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, addTransform, animate, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, eval, evalVisProp, formatNumberLocale, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, updateVisibility, useLocale
- Methods borrowed from class JXG.CoordsElement:
- _anim, addAnchor, addConstraint, Coords, Dist, findClosestSnapValue, free, handleAttractors, handleSnapToPoints, makeGlider, moveAlong, moveAlongES6, moveTo, moveToES6, popSlideObject, setGliderPosition, setPositionByTransform, updateConstraint, updateCoords, updateGlider, updateGliderFromParent, updateTransform, visit, visitES6, X, XEval, Y, YEval, Z, ZEval
Events borrowed from other Elements