Like jQuery, the jQuery UI user interface library (version 1.8.7) is already included and registered by the system module of Drupal 7. All you need to do is enable it.
You can include jQuery UI in the PHP editor of a single node or module:
// Add the core jQuery UI library
drupal_add_library('system', 'ui');
// Add an individual effect
drupal_add_library('system', 'ui.tabs');
If you add an individual effect, Drupal will add the core libraries for you automatically. If you’re using Drupal’s JavaScript aggregation, you’ll need to turn it off temporarily to see jQuery UI being linked in your rendered HTML code.
To make jQuery UI available for every page on your site, add it to your template.php file:
function MYTHEME_preprocess_page(&$variables) {
drupal_add_library('system', 'ui');
drupal_add_library('system', 'ui.tabs');
drupal_add_library('system', 'effects.bounce');
}
Finally, remember that in Drupal (and WordPress), jQuery loads in noconflict mode so the “$” shortcut isn’t available. You can override this by setting jQuery.noConflict(false) or moving it to another namespace. Otherwise you can just spell out ‘jQuery’:
<script>
jQuery(function() {
jQuery( "#tabs" ).tabs();
});
</script>
