Easily style standard HTML form elements like radio buttons or check boxes on your web apps using the Wijmo Form Decorator widgets. With these widgets, you can style form elements uniformly in any browser.
Form Decorator Widgets
Use the following Wijmo Form Decorator widgets to decorate standard HTML form elements:
- Radio button – wijradio
- Check box – wijcheckbox
- Drop-down list – wijdropdown
- Text box – wijtextbox
Specify which HTML elements of the form to decorate by using a custom jQuery selector.
Here is how to add all of the Form Decorator widgets to an HTML project using HTML markup and jQuery script.
- 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
|
<!--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" />
<!--RequireJs-->
<script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script> |
- Add the following markup within the <body> tags to create the widgets. The HTML elements create the widgets, and we call their class attributes in jQuery to initialize them.
Drop down and copy markup to paste inside the body tags
| Markup |
Copy Code
|
<h3> Input</h3>
<input id="textbox" class="wijtextbox" type="text" />
<h3> Textarea</h3>
<textarea id="area" class="wijtextbox" rows="5" cols="50"></textarea>
<h3> Dropdown</h3>
<select id="select1" class="wijdropdown">
<optgroup label="A-G">
<option>Item A</option>
<option selected="selected">Item B</option>
<option>Item C</option>
<option>Item D</option>
<option>Item E</option>
<option>Item F</option>
<option>Item G</option>
</optgroup>
<optgroup label="H-M">
<option>Item H</option>
<option>Item I</option>
<option>Item J</option>
<option>Item K</option>
<option>Item L</option>
<option>Item M</option>
</optgroup>
</select>
<h3> Checkbox</h3>
<input id="checkbox1" type="checkbox" class="wijcheckbox" />
<label for="checkbox1">Checkbox 1</label>
<h3 style="clear: both;"> Radio</h3>
<input type="radio" name="radiobutton1" id="radio1" value="1" class="wijradio" checked />
<label for="radio1">Radio 1</label>
<input type="radio" name="radiobutton1" id="radio2" value="2" class="wijradio" />
<label for="radio2">Radio 2</label> |
- Within the <head> tags, below the references, add the following script to initialize the widgets and populate them with values.
Drop down and copy script to paste inside the head tags
| Script |
Copy Code
|
<script type="text/javascript">
requirejs.config({
baseUrl: "http://cdn.wijmo.com/amd-js/",
paths: {
"jquery": "jquery-1.9.1.min",
"jquery-ui": "jquery-ui-1.10.1.custom.min",
"jquery.ui": "jquery-ui",
"jquery.mousewheel": "jquery.mousewheel.min",
"globalize": "globalize.min",
"bootstrap": "bootstrap.min", //Needed if you use Bootstrap.
"knockout": "knockout-2.2.0" //Needed if you use Knockout.
}
});
</script>
<script id="scriptInit" type="text/javascript">
require(["wijmo.wijtextbox", "wijmo.wijdropdown", "wijmo.wijradio", "wijmo.wijcheckbox"], function () {
$(document).ready(function(){
$(".wijtextbox").wijtextbox();
$(".wijdropdown").wijdropdown();
$(".wijradio").wijradio();
$(".wijcheckbox").wijcheckbox();
});
});
</script> |
- Save your HTML file and open it in a browser. The file appears like the following live widgets.
See Also
Widgets
Reference
Show All
Hide All