Thread: jquery-ui for roundcube plugins

Hi all, I've made a new plugin that adds jquery-ui to roundcube. This allows plugin developers to use jquery-ui without having to load it themselves. The benefit of using 1 central jquery-ui library is that there won't be conflicts between plugins that load their own versions of jquery-ui.

If you use jquery-ui in your plugin, it may be better to use this plugin as a requirement. I will make versions of this plugin of all stable releases of jquery-ui going forward.

This plugin supports the jquery theme 'smoothness'. This theme is the closest to the roundcube theme, and therefore was chosen as the default theme for jquery-ui. It is possible however for plugin authors to override the smoothness theme and use their own theme. Since multiple plugins can add UI elements to a page, this has to be done in a specific (but relatively easy) way.

First go to the jquery-ui download page. On the right side of the screen, you can pick the theme you want. Click on "Advanced Theme Settings" and now provide a scope for your plugin. A scope is simply a class that you need to add to your UI elements.



In the above example, I have picked the darkness theme, and added the class ".my_plugin" to it.

Now download the css, and add it to your plugin like this:

PHP Code:

$this->include_stylesheet("..path to css../darkness/jquery-ui-1.8.2.custom.css"); 


Finally, make sure you add the ".my_plugin" class to the elements that you want to use the darkness theme on. For instance, when using the jquery-dialog element, you can pass this class using the 'dialogClass' option.

You can get the plugin here: Roundcube Plugins | Underwater World