NetAdvantage jQuery Controls are Theme Roller Ready

One of the core design principle of the NetAdvantage for jQuery controls were to make sure it honors the jQuery styling conventions. In order to do that, all the jQuery controls fully support the jQueryUI Theme Roller styles. This has a lot of benefits out side of just being able to style the controls, some of them are:

• If you have a jQuery based application that uses style from the Theme Roller library, you can simply plug in the NetAdvantage jQuery controls, and it would light up and blend in with the overall theme without any changes needed.
• If you find something out in the open source community that you want to use today which you don’t find in our toolset today, first and foremost, shoot me an email so that we can evaluate and include that in our future product offering . But most importantly, if the control that you want to use adheres to jQuery standards and is Theme Roller style compatible, you can use it and it will merge well with the overall application theme, and no need to maintain custom styling per control. In the future, if you want to rip that one out and use something else, you can do so pretty easily without having to touch CSS settings.
• It is an Open Source theme library and there are contributions to it hosted up on the jQuery UI website with a  bunch of theme libraries. If down the road, there is a new theme library and you want to bring that into your application. You simply would need to copy and replace it within your web projects, and jQuery controls in NetAdvantage will pick the new CSS settings.

 

Let’s take a look at an example of the jQueryUI Theme Roller themes and how to bring that into your application. You can browse through all the available themes up on the jQueryUI website here. Once you pick a theme, you can click on the download button, which will take you to a page to customize the theme, and then download it. Once you have downloaded the base theme, the folder structure looks like what you see in the image below. The only files you need from this are under CSS –> [Theme Name]. You will find a jquery-ui…css with an ‘images’ folder. All you need is to bring the CSS file along with the ‘images’ folder to your web application.

I usually change the name of the CSS file to jquery.ui.custom.css, but you don’t have to if you like it the way it is. Once it is in your project, you link this CSS reference in your web page along with the control CSS and that’s it, you have the NetAdvantage jQuery control light up using the jQueryUI Theme Roller styles.

To demonstrate this, I have create a sample with a drop down chooser to switch between styles at runtime. You can take a look at the sample here. To download the sample code, click here.

As always, should you have any questions, feel free to reach out to me at : murtazaa@infragistics.com