jQuery Rule插件 - 添加新规则

时间:2012-04-17 10:15:24

标签: jquery css jquery-plugins

对于我的项目,我需要使用jQuery Rule Plugin

它看起来很棒,所以我可以在dom中添加新的css规则。

但是如何创建新规则并将其附加到dom?

文档说:

These are the methods, the plugin adds to the different namespaces.

jQuery.fn
 - sheet: returns the stylesheets from the matched styles and links.
 - cssRules: return all the rules from all the given sheets.
 - ownerNode: returns the nodes that belong to the given sheet (opposite to sheets).
 - cssText: returns the text of the first matched style/link.

jQuery.rule
 - constructor( $.rule ):
    - 1st argument: nothing, a rule filter, rule literal, css rule or array of rules.
    - 2nd argument: nothing, node filter for link/style, nodes link/style.
 - sheets: returns the sheets that match the selector or all of them if none.
 - clean: converts a rule literal, to array of rules.
 - parent: returns the parent of a rule, neccesary for IE.
 - outerText: return the selector with the rules of the given rule.
 - text: gets/sets the cssText of the rule.

jQuery.rule.fn
 - append: will add one or more styles in the form of "attr:value; attr:value" to the matched rules.
 - css : sets a value to all matched rules.
 - outerText: return $.rule.outerText of the first rule.
 - text: sets the cssText of the rules, or gets the cssText from the first one.
 - appendTo: appends the matched rules to the specified stylesheet(1), can be a selector, dom element, sheet.

All these methods ( from jQuery.rule.fn ) are equal (or very similar) to those in jQuery.fn, but for CSS Rules.
    add, andSelf, animate, appendTo, attr, css, dequeue,
    each, end, eq, fadeIn, fadeOut, fadeTo, filter, get,
    hide, index, is, map, not, pushStack, queue, remove,
    setArray, show, size, slice, stop, toggle.

Some calls to show and hide behave unexpectedly sometimes. Some styles and animations might fail.

请帮帮我。

谢谢。

注意:我相信如果你对jQuery有所了解可能会很容易,但是如果你是一个新手会让它变得困难,我试着谷歌获取一些关于这个的信息,但是找不到任何东西。我对问题What you tried ?很熟悉,我不知道!!请这是一个开始。谢谢!

2 个答案:

答案 0 :(得分:2)

基本示例:

$.rule('#some_id','style').append('font-size:17px');

在此示例中,它的规则将为名为“some_id”的css id添加新样式。它会将新的css规则设置font-size附加到17px;

所以基本上你是使用“$ .rule”关键字创建新规则,其中包含此处描述的参数http://flesler.webs.com/jQuery.Rule/API.txt

您可以在此处获得更多示例:http://flesler.webs.com/jQuery.Rule/

当然首先你需要在你的文档中包含jquery和这个插件,例如。像这样:

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.rule.js"></script>

答案 1 :(得分:1)

不要使用jQuery规则 - 它的文档非常糟糕。 JSS要好得多:https://github.com/Box9/jss。如何在JSS中做你想做的事:

jss('#some_id', {
  fontSize: '17px'
});