The first step is to create html page and add links to the javascript files and css dependencies to your project. The jqxFormattedInput widget requires the following files:
<head> <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.base.css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxformattedinput.js"></script><script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<script type="text/javascript"> $(document).ready(function () { $("#jqxFormattedInput").jqxFormattedInput({ width: 250, height: 25, radix: "binary", value: "1111011", spinButtons: true, dropDown: true }); });</script>
To get the formatted input's value (the currently displayed number), you need to do the following:$("#jqxFormattedInput").jqxFormattedInput("open");
To set a property (option), you need to pass the property name and value(s) in the jqxFormattedInput's constructor:var value = $("#jqxFormattedInput").val();
To get a property (option), you need to pass the property name to the jqxFormattedInput's constructor:$("#jqxFormattedInput").jqxFormattedInput({ radix: "hexadecimal" });
To bind to an event of a UI widget, you can use basic jQuery syntax. Let’s suppose that you want to know when the input value (number) is changed:var min = $("#jqxFormattedInput").jqxFormattedInput("min");
// bind to 'change' event.$('#jqxFormattedInput').on('change', function (event) {});
<!DOCTYPE html><html><head> <title>jQuery Formatted Input Sample</title> <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.base.css" /> <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxformattedinput.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#jqxFormattedInput").jqxFormattedInput({ width: 250, height: 25, radix: "binary", value: "1111011", spinButtons: true, dropDown: true }); }); </script><script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head><body> <div id="jqxFormattedInput"> <input type="text" /> <div> </div> <div> </div> </div></body></html>