gramps/data/jhtmlarea/ColorPickerMenu.htm

90 lines
3.8 KiB
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jHtmlArea-0.7.0.min.js"></script>
<link rel="Stylesheet" type="text/css" href="style/jHtmlArea.css" />
<script type="text/javascript" src="scripts/jHtmlArea.ColorPickerMenu-0.7.0.js"></script>
<link rel="Stylesheet" type="text/css" href="style/jHtmlArea.ColorPickerMenu.css" />
<style type="text/css">
div.jHtmlArea { border: solid 1px #ccc; }
</style>
</head>
<body>
<h3>jHtmlArea Live Demo - jHtmlAreaColorPickerMenu Example</h3>
<p>The jHtmlAreaColorPickerMenu plugin/extension allows you to show a simple Color Picker Menu when the user clicks on the "forecolor" Toolbar Button.</p>
<p>
<a href="http://jhtmlarea.codeplex.com">jHtmlArea Project Homepage</a>
&nbsp;|&nbsp;
<a href="http://jhtmlarea.codeplex.com/Release/ProjectReleases.aspx">Downloads</a>
&nbsp;|&nbsp;
<a href="http://jhtmlarea.codeplex.com/Thread/List.aspx">Discussions</a>
&nbsp;|&nbsp;
<a href="http://jhtmlarea.codeplex.com/WorkItem/List.aspx">Issue Tracker</a>
</p>
<script type="text/javascript">
//// You can also override the "default" colors option of the jHtmlAreaColorPickerMenu
//// to show only the specific colors you want.
// jHtmlAreaColorPickerMenu.defaultOptions.colors = ["red", "yellow", "blue", "green", "purple", "white", "black"];
// The followin creates a jHtmlArea and adds a custom list of toolbar buttons.
// Among the buttons is the "forecolor" button that will automatically take
// advantage of the jHtmlAreaColorPickerMenu plugin.
$(function() {
$("#Textarea1").htmlarea({
toolbar: ["html", "|",
"forecolor", // <-- Add the "forecolor" Toolbar Button
"|", "bold", "italic", "underline", "|", "p", "h1", "h2", "h3", "|", "link", "unlink"] // Overrides/Specifies the Toolbar buttons to show
});
});
</script>
<textarea id="Textarea1" cols="50" rows="15"><p><h3>Another TextArea</h3>This is some sample text to test out the <b>WYSIWYG Control</b>.</p></textarea>
<hr />
The jHtmlAreaColorPickerMenu object can also be reused for other purposes. For example clicking on the button below will allow you to change the background color of the page.
<br />
<input id="choosecolor" type="button" value="Choose Color..." />
<script type="text/javascript">
$(function() {
$("#choosecolor").click(function() {
jHtmlAreaColorPickerMenu(this, {
colorChosen: function(color) {
$(document.body).css('background-color', color);
}
});
});
});
</script>
<br /><br /><br /><br /><br />
<hr />
<div style="position: relative;border: solid 30px #cccccc;">
<h3>Editor within a "position: relative" DIV element.</h3>
<textarea id="txtInDiv" cols="50" rows="15">Some <b>Test</b> content.</textarea>
<script type="text/javascript">
$(function() {
$("#txtInDiv").htmlarea({
toolbar: ["html", "|",
"forecolor", // <-- Add the "forecolor" Toolbar Button
"|", "bold", "italic", "underline", "|", "p", "h1", "h2", "h3", "|", "link", "unlink"] // Overrides/Specifies the Toolbar buttons to show
});
});
</script>
</div>
</body>
</html>