Question

For my project i need to use the jQuery Rule Plugin

Its looks like great ,so that i can append new css rules to the dom.

but how can i create a new rule and append it to the dom ??

The documentation says that :

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.

Please help me .

Thank you.

Note: i am sure it may be very easy to do if you know something about jQuery but it will make it hard if you are a newbie,i tried google to get some info about this,but cant find anything. I am familiar to the question What you tried ? ,here i dont know !! please this is a start. Thank you !

Answer 1

Basic example:

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

In this example its a rule that will add new style to css id named ‘some_id’. It will append new css rule setting font-size to 17px;

So basically You are creating new rule using “$.rule” keyword with parameters described here http://flesler.webs.com/jQuery.Rule/API.txt

You can get more examples here : http://flesler.webs.com/jQuery.Rule/

Of course first You need to include jquery and this plugin in You document for eg. like this:

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