如何将CSS应用于我的JQuery插件

Question

我正在编写一个JQuery组件插件,需要一些最小的默认css.(组件的功能布局需要css - 而不仅仅是样式修饰)我应该:

• 写一个单独的.css文件并在我的插件代码中动态加载它(我该怎么做？)
• 使用JQuery的.css(...)直接在我的插件代码中应用css属性

似乎第二种选择是确保我的组件获得所需的css的更安全的方式.思考？

Answer 1

我喜欢将CSS保存在单独的文件中,然后使用插件导入它.

加班,这使得它更容易维护,它使用户或未来的开发人员更容易使用您的插件,而不是挖掘JavaScript源(可能会超时).

要使用jQuery应用样式表,您可以这样做:

$(function() {
  $('head').append('<link rel="stylesheet" href="plugin-styles.css" type="text/css" />');
});

显然,您需要知道CSS文件的路径,但如果您css使用插件发布目录,这应该不是问题.

就"确保[你的]组件获得所需的css"而言,只要确保你的元素具有JavaScript源可以访问的唯一标识符(类名或ID),第一个选项就会起作用.

如果你想确保你没有多次加载样式表,你可以这样做:

$(function() {

  var bStylesheetExists = false;
  $('link').each(function() { 
    if($(this).attr('href') === 'plugin-style.css')) {
       bStylesheetExists = true;
    }
  });

  if(bStylesheetExists === false) {
    $('head').append('<link rel="stylesheet" href="plugin-styles.css" type="text/css" />');
  }

});