Question

我正在编写一个需要一些最小默认css的JQuery组件插件。（组件的功能布局需要css - 而不仅仅是样式修饰）我应该：

写一个单独的.css文件并在我的插件代码中动态加载它（我怎么做？）
使用JQuery的.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），第一个选项就会起作用。< / p>

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

$(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" />');
  }

});

Answer 2

我同意汤姆关于将它们分开的看法。但是，如果您确实希望在jQuery代码中使用样式化插件，那么这里有一个很好的教程，介绍如何设置默认值并将它们公开为可配置属性：http://mattberseth.com/blog/2008/06/glowbuttons_writing_my_first_j.html

Answer 3

就像@Tom的想法一样，虽然我已经看到很多带有单独CSS文件的jquery插件。

但我倾向于建议使用单独的CSS文件，以便：

样式可以在必要时由用户覆盖
名称冲突可以调试
级联是可预测的

我使用了几个jquery插件，这些插件为标签元素定义了不可原谅的样式（不是类，不是id，而是实际的blummin'标签）;因此，如果您“隐藏”样式，请使用带有与插件相关的前缀/后缀的类，以避免冲突。

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

3 个答案: