In this quick start, you'll learn how to add two wijinputmask widgets to a Web page and customize the appearance and behavior of the widgets. For the first widget, we create some initial text with the nullText option and create a drop-down list using the comboItems option. For the second widget, we use the mask and passwordChar options to create a Social Security Number textbox.
- To create a new HTML page in your favorite text editor, add the following code and save the document with an .html extension.
Drop down and copy markup
| Paste in Notepad. |
Copy Code
|
<!DOCTYPE HTML>
<HTML>
<head>
</head>
<body>
</body>
</HTML>
|
- Add links to the dependencies to your HTML page within the <head> tags. Find the latest dependencies in the content delivery network (CDN) file at wijmo cdn.
Drop down and copy references to paste inside the head tags
| References |
Copy Code
|
<!--jQuery References-->
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js" type="text/javascript"></script>
<!--Theme-->
<link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" />
<!--Wijmo Widgets CSS-->
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20133.19.min.css" rel="stylesheet" type="text/css" />
<!--Wijmo Widgets JavaScript-->
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20133.19.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20133.19.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/interop/wijmo.data.ajax.3.20133.19.js" type="text/javascript"></script>
|
- Add the following markup within the <body> tags to create two widgets. The <input> elements create the widgets, and we call their id attributes in jQuery to initialize them.
Drop down and copy markup to paste inside the body tags
| Markup |
Copy Code
|
<input type="text" id="textbox1" />
<br>
<h3>Enter your SSN:</h3>
<input type="text" id="textbox2" /> |
- Within the <head> tags, below the references, add the following script to initialize the widget and populate it with data.
Drop down and copy script to paste inside the head tags
| Script |
Copy Code
|
<script type="text/javascript">
$(document).ready(function () {
$("#textbox1").wijinputnumber(
{
showTrigger: true,
comboItems: ['100', '200', '300'],
showNullText: true,
nullText: 'Click the arrow',
});
$("#textbox2").wijinputmask(
{
mask: '000-00-0000',
passwordChar: '*'
});
});
</script> |
- Save your HTML file and open it in a browser. The widget appears like the following live widget. The null text Click the arrow appears in the first textbox. If you click the arrow, the combo items appear in the drop-down list. Enter some numbers in the second textbox. The password character is used to hide the numbers.
See Also
Concepts
Reference
Show All
Hide All