jQuery

jQuery is a powerful JavaScript library. It is provided by default in the key project types.

Usage

Modify Controls

jQuery is the perfect tools to modify the code generated by controls on the user agent.

Position

You can use the css() method on a control’s layout div to define the position of a control: positioning method and coordinates. For example: $("#ComponentName_outer").css({ "position": "absolute", "top": "20px", "left": "20px"});.

You can also get the position of a control: $("#ComponentName_outer").position() will return an object with two properties, top and left (integers).

Size

Most components can be resized using their main DOM element: $("#ComponentName").css({ "height": "100px", "width": "100px"});.

However, that won’t work for every single component; complex components might require modifiying a different HTML element. For example, to modify the size of a RadioGroup, you need to target the underlying HTML table generated: $("#ComponentName_table").css("height", "150px");.

You should check the HTML code generated by a control to know how to resize it; use the Tag Viewer from the Design view, or your browser’s development tools, to get the output HTML code. If there is a page for the control in this documentation (not just in the reference) you will probably find there a simple explanation of the DOM elements generated by the control. For example, see Label or RadioGroup.

Visibility

To hide or show a control depending on the circumstances, use the show() and hide() methods on the control’s layout div: $("#ComponentName_outer").hide();. You can check whether a control is or not vissible calling .is(":visible") on it:

// Hide only if visible and the condition variable is true:
if ( $("#ComponentName_outer").is(":visible") && condition == true)
{
    $("#ComponentName_outer").hide();
}

You can also use the toggle() method to hide a visible control or show a hidden one.

Help Resources

Tutorials

• Getting Started with jQuery.
• Tutorial by W3Schools.

Documentation

• Available online here.
• You can access an offline copy from Home > Help > jQuery.

See Also

• jQuery Mobile