Integration with jQuery.CssRule?
Hello all devs,
My porpuse is create some integrations with all plugins that need CSS
manipulation to get things working.
For example:
Tabs - jQuery plugin for accessible, unobtrusive tabs
http://stilbuero.de/tabs/ by Klaus Hartl
To use this plugin the developer need to link a CSS file, but we don't
need it more, with jQuery.CssRule we can declare all CSS rules by
JavaScript.
Check out the sample:
<script src="jquery-1.1.3.1.pack.js" type="text/javascript"></script>
<script src="jquery.cssrule.js" type="text/javascript"></script>
<script src="jquery.history_remote.pack.js" type="text/javascript"></
script>
<script src="jquery.tabs.pack.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$.cssRule({
".tabs-hide": "display: none",
".tabs-nav": "display: none",
".tabs-nav": "{ padding-right: 0px; padding-left: 4px; padding-
bottom: 0px; margin: 0px; padding-top: 0px; list-style: none }",
".tabs-nav:after": "{ clear: both; display: block; content: \"
\" }",
".tabs-nav li": "{ min-width: 84px; float: left; margin: 0px 0px 0px
1px }",
".tabs-nav a, .tabs-nav a span": "{ padding-right: 10px; display:
block; padding-left: 10px; background: url(tab.png) no-repeat; padding-
bottom: 0px; padding-top: 0px }",
".tabs-nav a": "{ padding-left: 0px; font-weight: bold; font-size:
12px; z-index: 2; color: #27537a; line-height: 1.2; white-space:
nowrap; position: relative; top: 1px; text-align: center; text-
decoration: none }",
".tabs-nav .tabs-selected a": "{ color: #000; }",
".tabs-nav .tabs-selected a, .tabs-nav a:hover, .tabs-nav
a:focus, .tabs-nav a:active": "{ background-position: 100% -150px;
outline: 0; }",
".tabs-nav a, .tabs-nav .tabs-disabled a:hover, .tabs-nav .tabs-
disabled a:focus, .tabs-nav .tabs-disabled a:active": "{ background-
position: 100% -100px; }",
".tabs-nav a span": "{ width: 64px; min-width: 64px; height: 18px;
min-height: 18px; padding-top: 6px; padding-right: 0pt; }",
"* > .tabs-nav a span": "{ width: auto; height: auto; }",
".tabs-nav .tabs-selected a span": "{ padding-top: 7px; }",
".tabs-nav .tabs-selected a span, .tabs-nav a:hover span, .tabs-nav
a:focus span, .tabs-nav a:active span": "{ background-position: 0pt
-50px; }",
".tabs-nav a span, .tabs-nav .tabs-disabled a:hover span, .tabs-
nav .tabs-disabled a:focus span, .tabs-nav .tabs-disabled a:active
span": "{ background-position: 0 0; }",
".tabs-nav .tabs-selected a:link, .tabs-nav .tabs-selected
a:visited, .tabs-nav .tabs-disabled a:link, .tabs-nav .tabs-disabled
a:visited": "{ cursor: text; }",
".tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active":
"{ cursor: pointer; }",
".tabs-nav .tabs-disabled": "{ opacity: 0.4; }",
".tabs-container": "{ border-top: 1px solid rgb(151, 165, 176);
padding: 1em 8px; background: rgb(255, 255, 255) none repeat scroll
0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-
initial; -moz-background-inline-policy: -moz-initial; }",
".tabs-loading em": "{ padding: 0pt 0pt 0pt 20px; background:
transparent url(loading.gif) no-repeat scroll 0pt 50%; -moz-background-
clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-
background-inline-policy: -moz-initial; }"
});
if(jQuery.browser.msie){
$.cssRule({
".tabs-nav": "display: inline-block;",
".tabs-nav .tabs-disabled": "position: relative; filter:
alpha(opacity=40);",
".tabs-nav .tabs-disabled a span": "_height: 19px; min-height:
19px;"
});
}
//-->
</script>
interesting, uhm?
Let me know if you want to integrate your plugin with jQuery.CssRule.
Plugin page:
http://gsaraiva.projects.pro.br/?page_id=17