0

我正在开发一个 Jquery 插件，并且必须在脚本内设置许多 css 值以使其灵活。

它看起来像这样：

...var loadingBarInsideFWidth = loadingBarWidth - 4;
var loadingBarInsideWidth;
$(holder).find('.round').css({
'width':setRoundWidth,
'height':setRoundWidth
});
$(holder).find('.pointer').css({
'width':setPointerWidth,
'height':setPointerWidth,
'left':rotCenter,
'top':rotCenter*2
});...

以此类推，大约有 70 行代码。只是想问一下这样可以吗，还是有更好的方法？

谢谢

ps确保有一个外部css文件，所有这些值都是关于预加载器和一些导航元素的位置和大小相对于包含元素大小的。

4

4 回答 4

1

您可以从 css 文件中添加所有这些样式...并将插件包含在 css 文件中...这样，您的插件也可以自定义其他人的外观和感觉，他们不会使用您的 javascript/jquery代码。

于 2012-07-13T14:14:29.980 回答
1

我更喜欢将 CSS 和 JS 分开：将所有样式放入一个文件并按需动态加载。

如果这不是你想要的，你可以写：

(function(){
   // do some caching
   $holder = $(holder);

   function _css(elem,rules){
      $holder.find(elem).css(rules);
   }

    _css(".round",{'width':setRoundWidth, 'height':setRoundWidth});
})();

或者，为了进一步区分 - 将样式放入对象中并对其进行迭代。这使它更像“CSS”。

(function(){
   // do some caching
   $holder = $(holder);
   styles = {
       ".round":  { 'width' :setRoundWidth,
                    'height':setRoundWidth
                  },
       ".pointer":{ 'width' :setPointerWidth,
                    'height':setPointerWidth,
                    'left'  :rotCenter,
                    'top'   :rotCenter*2
                  }
   }
   for (var elem in styles){
      if (styles.hasOwnProperty(elem)) $holder.find(elem).css(styles[elem]);
   }
})();
于 2012-07-13T14:17:24.703 回答
1

如果您将其应用于 DOM 内元素，则从 JS 添加 70 种 CSS 样式将导致大量重排/重绘。

如果您不想随插件提供专用的 CSS 表格，请考虑将样式直接写入动态 CSS 表格元素。

您可以通过 DOM 编写<style>标签并将样式放入其中，或劫持页面内链接样式表之一来实现此目的。请参阅http://www.javascriptkit.com/domref/stylesheet.shtml。

于 2012-07-13T14:18:00.420 回答
0

将您的 css 样式放入样式表中的类中。

然后在需要时将该类添加到您的元素中。

jQuery(".myElement").addClass("myClass");
于 2012-07-13T14:18:08.470 回答