jQWidgets
  • Documentation
  • License and Pricing
  • Services
  • Community
    • Forums
    • Blogs
    • Follow Us
    • Client Login
  • About
    • About Us
    • Contact Us
    • FAQ
  • Demo
  • Download

Custom Elements

  • Javascript/jQuery
  • Angular
  • React
  • Vue
  • Custom Elements
  • ASP .NET MVC
  • Showcase Demos
  • Responsive Design
  • Theme Builder
Show Demo List

Custom Elements

  • jqxGrid
  • jqxTabs
  • jqxTextArea
  • jqxWindow
  • jqxKnob
  • jqxResponsivePanel
  • jqxChart
  • jqxMenu
  • jqxInput
  • jqxDocking
  • jqxGauge
  • jqxNavBar
  • jqxPivotGrid
  • jqxTree
  • jqxPasswordInput
  • jqxNotification
  • jqxBarGauge
  • jqxTagCloud
  • jqxScheduler
  • jqxNavigationBar
  • jqxMaskedInput
  • jqxPopOver
  • jqxExpander
  • jqxLoader
  • jqxTreeGrid
  • jqxListMenu
  • jqxComplexInput
  • jqxTooltip
  • jqxRating
  • jqxDraw
  • jqxDataTable
  • jqxToolBar
  • jqxFormattedInput
  • jqxColorPicker
  • jqxRangeSelector
  • jqxDragDrop
  • jqxTreeMap
  • jqxComboBox
  • jqxNumberInput
  • jqxScrollView
  • jqxSlider
  • jqxPanel
  • jqxEditor
  • jqxDropDownList
  • jqxDateTimeInput
  • jqxProgressBar
  • jqxScrollBar
  • jqxValidator
  • jqxRibbon
  • jqxListBox
  • jqxCalendar
  • jqxFileUpload
  • jqxSplitter
  • jqxValidator
  • jqxLayout
  • jqxButtons
  • jqxKanban
  • jqxBulletChart
  • jqxSortable
  • jqxPanel
  • jqxDockingLayout

jqxComplexInput

  • Default functionality
  • Spin Buttons
  • Validation
  • Exponential Notation
  • Change Event
  • Fluid Size
  • Right to Left Layout
Theme:
  • Demo
  • View Source
  • API Reference
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>Custom Element ComplexInput DefaultFunctionality</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<meta name="description" content="This demo shows the default functionality of Custom element ComplexInput. This widget can be used for inputting complex numbers and getting their real and imaginary parts." />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>
<script type="text/javascript" src="../scripts/demos.js"></script>
<script type="text/javascript">
JQXElements.settings['ComplexInput'] =
{
value: "15 + 7.2i"
}
window.onload = function() {
var myComplexInput = document.querySelector('jqx-complex-input');
var myButtons = document.querySelectorAll('jqx-button');
myButtons[0].addEventListener('click', function() {
var realPart = myComplexInput.getReal();
alert("Real part is " + realPart);
});
myButtons[1].addEventListener('click', function() {
var imaginaryPart = myComplexInput.getImaginary();
alert("Real part is " + imaginaryPart);
});
}
</script>
</head>
<body>
<div class="example-description">
This demo shows the default functionality of Custom element ComplexInput. This widget can be used for inputting complex numbers and getting their real and imaginary parts.
</div>
<jqx-complex-input settings ="ComplexInput"></jqx-complex-input>
<div style="margin-top: 20px;">
<jqx-button>
Get real part
</jqx-button>
<jqx-button>
Get imaginary part
</jqx-button>
</div>
</body>
</html>

Properties

decimalNotation string 'default'

Sets or gets the decimalNotation property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>ComplexInput Custom Element Settings</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>
<script>
JQXElements.settings["complexInputSettings"] =
{
width:250,height:25, decimalNotation:"exponential", theme:"light"
}
</script>
</head>
<body>
<jqx-complex-input settings="complexInputSettings"></jqx-complex-input>
</body>
</html>
disabled boolean false

Sets or gets the disabled property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>ComplexInput Custom Element Settings</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>
<script>
JQXElements.settings["complexInputSettings"] =
{
width:250,height:25,disabled:true, theme:"light"
}
</script>
</head>
<body>
<jqx-complex-input settings="complexInputSettings"></jqx-complex-input>
</body>
</html>
height number null

Sets or gets the height property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>ComplexInput Custom Element Settings</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>
<script>
JQXElements.settings["complexInputSettings"] =
{
width:250,height:25, theme:"light"
}
</script>
</head>
<body>
<jqx-complex-input settings="complexInputSettings"></jqx-complex-input>
</body>
</html>
placeHolder string ''

Sets or gets the placeHolder property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>ComplexInput Custom Element Settings</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>
<script>
JQXElements.settings["complexInputSettings"] =
{
width:250,height:25, theme:"light", placeHolder:"Enter a complex number"
}
</script>
</head>
<body>
<jqx-complex-input settings="complexInputSettings"></jqx-complex-input>
</body>
</html>
roundedCorners boolean true

Sets or gets the roundedCorners property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>ComplexInput Custom Element Settings</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>
<script>
JQXElements.settings["complexInputSettings"] =
{
width:250,height:25, theme:"light",roundedCorners:false
}
</script>
</head>
<body>
<jqx-complex-input settings="complexInputSettings"></jqx-complex-input>
</body>
</html>
rtl boolean false

Sets or gets the rtl property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>ComplexInput Custom Element Settings</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>
<script>
JQXElements.settings["complexInputSettings"] =
{
width:250,height:25, theme:"light",rtl:true
}
</script>
</head>
<body>
<jqx-complex-input settings="complexInputSettings"></jqx-complex-input>
</body>
</html>
spinButtons boolean false

Sets or gets the spinButtons property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>ComplexInput Custom Element Settings</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>
<script>
JQXElements.settings["complexInputSettings"] =
{
width:250,height:25, theme:"light",spinButtons:true
}
</script>
</head>
<body>
<jqx-complex-input settings="complexInputSettings"></jqx-complex-input>
</body>
</html>
spinButtonsStep number 1

Sets or gets the spinButtonsStep property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>ComplexInput Custom Element Settings</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>
<script>
JQXElements.settings["complexInputSettings"] =
{
width:250,height:25, theme:"light",spinButtonsStep:10
}
</script>
</head>
<body>
<jqx-complex-input settings="complexInputSettings"></jqx-complex-input>
</body>
</html>
template string 'default'

Sets or gets the template property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>ComplexInput Custom Element Settings</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>
<script>
JQXElements.settings["complexInputSettings"] =
{
width:250,height:25, theme:"light", template:"primary"
}
</script>
</head>
<body>
<jqx-complex-input settings="complexInputSettings"></jqx-complex-input>
</body>
</html>
theme string ''

Sets or gets the theme property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>ComplexInput Custom Element Settings</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>
<script>
JQXElements.settings["complexInputSettings"] =
{
width:250,height:25, theme:"light"
}
</script>
</head>
<body>
<jqx-complex-input settings="complexInputSettings"></jqx-complex-input>
</body>
</html>
value string ''

Sets or gets the value property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>ComplexInput Custom Element Settings</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>
<script>
JQXElements.settings["complexInputSettings"] =
{
width:250,height:25, theme:"light",value:190
}
</script>
</head>
<body>
<jqx-complex-input settings="complexInputSettings"></jqx-complex-input>
</body>
</html>
width number null

Sets or gets the width property.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>ComplexInput Custom Element Settings</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>
<script>
JQXElements.settings["complexInputSettings"] =
{
width:250,height:25, theme:"light"
}
</script>
</head>
<body>
<jqx-complex-input settings="complexInputSettings"></jqx-complex-input>
</body>
</html>

Events

change Event

Code examples

Bind to the change event of jqxComplexInput.

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>ComplexInput Custom Element Settings</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>
<script>
JQXElements.settings["complexInputSettings"] =
{
width:250,height:25, theme:"light"
}
window.onload = function() {
document.querySelector("jqx-complex-input").addEventListener("change", function(event) {
// Your code here.
});
};
</script>
</head>
<body>
<jqx-complex-input settings="complexInputSettings"></jqx-complex-input>
</body>
</html>

Methods

destroy Method
Parameter Type Description
None
Return Value
void
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>ComplexInput Custom Element Settings</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>
<script>
JQXElements.settings["complexInputSettings"] =
{
width:250,height:25, theme:"light"
}
window.onload = function() {
document.querySelector("jqx-complex-input").destroy();
}
</script>
</head>
<body>
<jqx-complex-input settings="complexInputSettings"></jqx-complex-input>
</body>
</html>

getReal Method
Parameter Type Description
complexNumber number if passed, gets the real part of the passed complex number
Return Value
Number
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>ComplexInput Custom Element Settings</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>
<script>
JQXElements.settings["complexInputSettings"] =
{
width:250,height:25, theme:"light"
}
window.onload = function() {
var result = document.querySelector("jqx-complex-input").getReal();
}
</script>
</head>
<body>
<jqx-complex-input settings="complexInputSettings"></jqx-complex-input>
</body>
</html>

getImaginary Method
Parameter Type Description
complexNumber number if passed, gets the imaginary part of the passed complex number
Return Value
Number
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>ComplexInput Custom Element Settings</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>
<script>
JQXElements.settings["complexInputSettings"] =
{
width:250,height:25, theme:"light"
}
window.onload = function() {
var result = document.querySelector("jqx-complex-input").getImaginary();
}
</script>
</head>
<body>
<jqx-complex-input settings="complexInputSettings"></jqx-complex-input>
</body>
</html>

getDecimalNotation Method
Parameter Type Description
part string
type string
Return Value
String
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>ComplexInput Custom Element Settings</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>
<script>
JQXElements.settings["complexInputSettings"] =
{
width:250,height:25, theme:"light"
}
window.onload = function() {
var result = document.querySelector("jqx-complex-input").getDecimalNotation();
}
</script>
</head>
<body>
<jqx-complex-input settings="complexInputSettings"></jqx-complex-input>
</body>
</html>

render Method
Parameter Type Description
None
Return Value
void
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>ComplexInput Custom Element Settings</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>
<script>
JQXElements.settings["complexInputSettings"] =
{
width:250,height:25, theme:"light"
}
window.onload = function() {
document.querySelector("jqx-complex-input").render();
}
</script>
</head>
<body>
<jqx-complex-input settings="complexInputSettings"></jqx-complex-input>
</body>
</html>

refresh Method
Parameter Type Description
None
Return Value
void
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>ComplexInput Custom Element Settings</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>
<script>
JQXElements.settings["complexInputSettings"] =
{
width:250,height:25, theme:"light"
}
window.onload = function() {
document.querySelector("jqx-complex-input").refresh();
}
</script>
</head>
<body>
<jqx-complex-input settings="complexInputSettings"></jqx-complex-input>
</body>
</html>

val Method
Parameter Type Description
value string/object If object is passed, it should be with object.real and object.imaginary properties.
Return Value
String
<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>ComplexInput Custom Element Settings</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<link rel="stylesheet" href="../jqwidgets/styles/site.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets/styles/jqx.light.css" type="text/css" />
<link rel="stylesheet" href="../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../jqwidgets/jqxcomplexinput.js"></script>
<script>
JQXElements.settings["complexInputSettings"] =
{
width:250,height:25, theme:"light"
}
window.onload = function() {
var result = document.querySelector("jqx-complex-input").val();
}
</script>
</head>
<body>
<jqx-complex-input settings="complexInputSettings"></jqx-complex-input>
</body>
</html>

jQWidgets
  • Facebook
  • Youtube
  • Google +
  • Demo
  • Download
  • Documentation
  • License and Pricing
  • Services
  • Forums
  • About
  • Terms of Use
  • Privacy Policy
  • Contact Us

jQWidgets © 2011-2018. All Rights Reserved.