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


Class 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).

Defined in: button.js.
Extends Text.

Class Summary
Constructor Attributes Constructor Name and Description
 
Button(x,y,label,handler)
Fields borrowed from class Text:
anchor, anchorX, anchorY, attractors, cssClass, cssDefaultStyle, cssStyle, digits, display, dragArea, fontSize, fontUnit, highlightCssClass, highlightCssDefaultStyle, highlightCssStyle, isLabel, parse, rotate, snapSizeX, snapSizeY, useASCIIMathML, useCaja, useKatex, useMathJax
Fields borrowed from class JXG.Text:
size
Fields borrowed from class JXG.GeometryElement:
_org_type, _pos, ancestors, baseElement, board, childElements, dash, descendants, draft, dragToTopOfLayer, dump, elementClass, elType, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, hasLabel, highlight, highlighted, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, id, inherits, isDraggable, isReal, lastDragTime, methodMap, mouseover, name, needsRegularUpdate, needsUpdate, notExistingParents, numTraces, parents, precision, quadraticform, rendNode, scalable, shadow, snapToGrid, stdform, strokeColor, strokeOpacity, strokeWidth, subs, symbolic, trace, traceAttributes, traces, transformations, transitionDuration, type, visible, visProp, visPropCalc, withLabel
Fields borrowed from class JXG.CoordsElement:
coords, groups, isConstrained, needsUpdateFromParent, onPolygon, position, slideObject, slideObjects
Field Summary
Field Attributes Field Name and Description
 
Control the attribute "disabled" of the HTML button.
Fields borrowed from class Text:
anchor, anchorX, anchorY, attractors, cssClass, cssDefaultStyle, cssStyle, digits, display, dragArea, fontSize, fontUnit, highlightCssClass, highlightCssDefaultStyle, highlightCssStyle, isLabel, parse, rotate, snapSizeX, snapSizeY, useASCIIMathML, useCaja, useKatex, useMathJax
Fields borrowed from class JXG.Text:
size
Fields borrowed from class JXG.GeometryElement:
_org_type, _pos, ancestors, baseElement, board, childElements, dash, descendants, draft, dragToTopOfLayer, dump, elementClass, elType, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, hasLabel, highlight, highlighted, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, id, inherits, isDraggable, isReal, lastDragTime, methodMap, mouseover, name, needsRegularUpdate, needsUpdate, notExistingParents, numTraces, parents, precision, quadraticform, rendNode, scalable, shadow, snapToGrid, stdform, strokeColor, strokeOpacity, strokeWidth, subs, symbolic, trace, traceAttributes, traces, transformations, transitionDuration, type, visible, visProp, visPropCalc, withLabel
Fields borrowed from class JXG.CoordsElement:
coords, groups, isConstrained, needsUpdateFromParent, onPolygon, position, slideObject, slideObjects
Methods borrowed from class JXG.Text:
_createFctUpdateText, _setText, checkForSizeUpdate, convertGeonext2CSS, convertGeonextAndSketchometry2CSS, convertSketchometry2CSS, crudeSizeEstimate, expandShortMath, generateTerm, getNumberofConflicts, getSize, hasPoint, notifyParents, replaceSub, replaceSup, setAutoPosition, setCoords, setText, setTextJessieCode, update, updateRenderer, updateSize, updateText, utf8_decode
Methods borrowed from class JXG.GeometryElement:
_set, addChild, addDescendants, addParents, addRotation, addTicks, addTransform, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, labelColor, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, updateVisibility
Methods borrowed from class JXG.CoordsElement:
_anim, addAnchor, addConstraint, Dist, 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, mousedown, mousedrag, mousemove, mouseout, mouseover, mouseup, move, out, over, pendown, pendrag, penup, touchdown, touchdrag, touchup, up
Class Detail
Button(x,y,label,handler)
Parameters:
{number|function_number|function_String_function} x,y,label,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'});


				
                
Field Detail
{Boolean} disabled
Control the attribute "disabled" of the HTML button.
Defined in: options.js.
Default Value:
false