jquery plugins and css

I am using jquery to write plugins to my application. Each p开发者_开发问答lugin requires different css file. What is the best method to load both the jquery file and the css?

I am using the plugins in different pages under different locations. How can I find out the absolute path to those files?

EDIT: Does anyone has an answer for this?

I think the fairly standard way is just to require than whenever a plugin is used, it's corresponding CSS file is used too.

You could have your jQuery plugin do this though:

$('head').append('<link rel="stylesheet" href="/css/myPlugin.css" />');

Or even:

if (!$('head>link[href$="myPlugin.css"]').size()) // if the stylesheet isn't already included
    $('head').append('<link rel="stylesheet" href="/css/myPlugin.css" />');

Better yet, put that in its own plugin:

$.extend({addStyleSheet : function (nameOfPlugin) {
    if (!$('head>link[href$="' + nameOfPlugin + '.css"]').size()) // if the stylesheet isn't already included
        $('head').append('<link rel="stylesheet" href="/css/' + nameOfPlugin + '.css" />');
});

Then in your plugin, just call it like this:

$.addStyleSheet('myPlugin');