1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-10-30 06:36:17 +00:00
TiddlyWiki5/editions/tw2/source/tiddlywiki/jquery/plugins/doc/twStylesheet.html

95 lines
2.9 KiB
HTML
Raw Normal View History

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery.twStylesheet</title>
<link rel="stylesheet" type="text/css" href="styles/main.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="http://svn.tiddlywiki.org/Trunk/core/jquery/plugins/jQuery.twStylesheet.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var applyCSS = function() {
var css = $("#css_code").val();
$.twStylesheet(css);
};
var resetCSS = function() {
$.twStylesheet.remove();
};
$("#css_apply").click(applyCSS);
$("#css_reset").click(resetCSS);
// initialize
$("#css_code").val(
"html { background-color: #EEE; }\n" +
"body { color: #FFF; background-color: #000; }\n" +
"h1, h2 { font-variant: small-caps; }\n" +
"ul { list-style-type: square; }\n" +
"code { padding: 1px 2px; background-color: #EEE; }\n" +
"#css_editor, #css_editor legend { background-color: #888; }\n"
);
});
</script>
</head>
<body>
<h1>jQuery.twStylesheet</h1>
<p>
This <a href="http://jquery.com">jQuery</a> plugin allows the application
of CSS rule sets to the document.
</p>
<p>
In contrast to jQuery's <a href="http://docs.jquery.com/CSS">CSS methods</a>,
it applies styles to the document rather than to individual elements (just
like defining a static style sheet in the document head).
</p>
<p>
The code is based on <a href="http://tiddlywiki.com">TiddlyWiki</a>'s dynamic
style-sheet capabilities, where it is used to allow users to customize their
documents on the fly.
</p>
<h2>Source</h2>
<p>
The source code is currently hosted in TiddlyWiki's
<a href="http://svn.tiddlywiki.org/Trunk/core/jquery/plugins/jQuery.twStylesheet.js">Subversion repository</a>.
</p>
<p>
<a href="http://groups.google.com/group/TiddlyWikiDev/">Feedback</a> is welcome.
</p>
<h2>API Summary</h2>
<ul>
<li>
<p><code>$.twStylesheet(css[, options])</code>: adds or replaces a style sheet</p>
<p>
<code>css</code> is a string containing the CSS rule sets, while
<code>options.id</code> is an optional name identifying the style sheet, allowing
co-existence of multiple style sheets
</p>
</li>
<li>
<p>
<code>$.twStylesheet.remove([options])</code>: delete an existing style sheet
</p>
<p>
The <code>options</code> argument is identical to <code>$.twStylesheet</code>'s.
</p>
</li>
</ul>
<p>(full documentation in the code comments)</p>
<h2>Demo</h2>
This will apply the CSS rule sets below to the entire document.
<fieldset id="css_editor" class="editor">
<legend>CSS</legend>
<textarea id="css_code" rows="10" cols="70"></textarea>
<input id="css_apply" type="button" value="Apply">
<input id="css_reset" type="button" value="Reset">
</fieldset>
</body>
</html>