mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-11-13 21:34:51 +00:00
95 lines
2.9 KiB
HTML
95 lines
2.9 KiB
HTML
|
<!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>
|