Form Decorator

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 your favorite text editor.
Copy Code

<!DOCTYPE HTML> <HTML> <head> </head> <body> </body> </HTML>

Paste in your favorite text editor.	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.

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.20183.140.min.css" rel="stylesheet" type="text/css" /> <!--RequireJs--> <script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script>

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.20183.140.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.

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>

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.

Script	Copy Code
<script type="text/javascript"> requirejs.config({ baseUrl: "http://cdn.wijmo.com/amd-js/3.20161.90", paths: { "jquery": "jquery-1.11.1.min", "jquery-ui": "jquery-ui-1.11.0.custom.min", "jquery.ui": "jquery-ui", "jquery.mousewheel": "jquery.mousewheel.min", "globalize": "globalize.min", "bootstrap": "bootstrap.min", //Needed if you use Bootstrap. "knockout": "knockout-3.1.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>

Script

Copy Code

<script type="text/javascript">
    requirejs.config({
        baseUrl: "http://cdn.wijmo.com/amd-js/3.20161.90",
            paths: {
                "jquery": "jquery-1.11.1.min",
                "jquery-ui": "jquery-ui-1.11.0.custom.min",
                "jquery.ui": "jquery-ui",
                "jquery.mousewheel": "jquery.mousewheel.min",
                "globalize": "globalize.min",
                "bootstrap": "bootstrap.min", //Needed if you use Bootstrap.
                "knockout": "knockout-3.1.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.

Widgets

Reference