JavaScript must be enabled in order for you to use JSXGraph and JSXGraph reference. However, it seems JavaScript is either disabled or not supported by your browser.

Class Index | File Index

Elements
Classes

Element Button

JXG.GeometryElement,JXG.CoordsElement
   ↳ JXG.Text
      ↳ Text
            ↳ Button

This element is used to provide a constructor for special texts containing a form button element.

For this element, the attribute "display" has to have the value 'html' (which is the default).

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.

Element Summary
Constructor Attributes Constructor Name and Description
 
Attributes Summary
Field Attributes Field Name and Description
 
Control the attribute "disabled" of the HTML button.
Methods borrowed from class JXG.Text:
_createFctUpdateText, _setText, bounds, 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, 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, moveTo, popSlideObject, setGliderPosition, setPositionByTransform, updateConstraint, updateCoords, updateGlider, updateGliderFromParent, updateTransform, visit, 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:400px'});


				
                
Attribute Detail
{Boolean} disabled
Control the attribute "disabled" of the HTML button.
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:
dash, dashScale, draft, dragToTopOfLayer, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, highlight, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, layer, lineCap, needsRegularUpdate, precision, priv, rotatable, scalable, shadow, snapToGrid, strokeColor, strokeOpacity, strokeWidth, tabindex, trace, traceAttributes, transitionDuration, transitionProperties, viewport, 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, 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, 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, moveTo, popSlideObject, setGliderPosition, setPositionByTransform, updateConstraint, updateCoords, updateGlider, updateGliderFromParent, updateTransform, visit, X, XEval, Y, YEval, Z, ZEval

Events borrowed from other Elements
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
Documentation generated by JsDoc Toolkit 2.4.0 on Fri Mar 08 2024 12:20:59 GMT+0100 (Mitteleuropäische Normalzeit)