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

前端之家收集整理的这篇文章主要介绍了如何将CSS应用于我的JQuery插件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在编写一个 JQuery组件插件,需要一些最小的默认css. (组件的功能布局需要css – 而不仅仅是样式修饰)我应该:

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

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

解决方法

我喜欢将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" />');
  }

});

猜你在找的CSS相关文章