📄 js_template.htm
字号:
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Using JavaScript templates</title>
<link REL ="stylesheet" TYPE="text/css" HREF="stylesheet.css" TITLE="Style">
</head>
<body>
<a href="./index.htm">CONTENTS</a>
<h3>Using JavaScript templates</h3>
<p>
The editor consist of 7 components. Putting all the applet definitions in your HTML page directly makes it very complex.
In order to release your HTML code from many applet definitions you can prepare JavaScript code which creates
the editor's GUI.
</p>
<p>
At the same time this resolves the issue of the Windows XP security update described here
<a href="http://izhuk.com/docs/ie7fix.html">http://izhuk.com/docs/ie7fix.html</a>
</p>
<p>An example of such code can be found here: <a href="template.js">template.js</a>, and below is an example how to use it.</p>
<pre>
<!-- include the template -->
<script language="javascript" src="<a href="../applet/applet.js">../applet/applet.js"</a>></script>
<script language="javascript" src=<a href="template.js">"template.js"</a>></script>
<script language="javascript">
var codebase = '../applet'; // location of the editor files
painter = new Painter(codebase);
painter.canvas.width = 640;
painter.canvas.height = 480;
painter.canvas.param.load = 'myimage.png'; // specify an image to load at startup (if it's necessary)
painter.canvas.param.save = 'save.php'; // specify your <a href="saving.htm">server-side script</a> to save the image.
painter.write();
</script>
</pre>
<!-- include the template files -->
<script language="javascript" src="../applet/applet.js"></script>
<script language="javascript" src="template.js"></script>
<script language="javascript">
var codebase = '../applet'; // location of the editor files
painter = new Painter(codebase);
painter.canvas.width = 640; // width of the canvas
painter.canvas.height = 480; // height of the canvas
// painter.canvas.param.load = 'myimage.png'; // specify an image to load at startup (if it's necessary)
// painter.canvas.param.save = 'save.php'; // specify your server-side script to save the image.
painter.write();
</script>
<p>The code below shows how to display cliparts using the template:</p>
<script language="javascript">
var cliparts = new Array( 'flower.gif', 'cherry.gif', 'ladybird.gif', 'carrot.gif', 'apple.gif' );
clipartPanel = new ClipartPanel(painter,cliparts,1,5,50,50);
clipartPanel.param.icondir = 'clipart'; // clipart dir (relative to the applet)
clipartPanel.write();
document.write(" "); // provide some space
var photos = new Array( 'photo1.jpg', 'photo2.jpg' );
photoPanel = new ClipartPanel(painter,photos,1,2,67,50);
photoPanel.param.icondir = 'clipart'; // clipart dir (relative to the applet)
photoPanel.param.insertat = '0,0';
photoPanel.write();
// this function can be used to retrieve the image data
function showImageData() {
var data = painter.getImage("PNG");
window.alert(data);
}
</script>
<pre>
<script language="javascript">
var cliparts = new Array( 'flower.gif', 'cherry.gif', 'ladybird.gif', 'carrot.gif', 'apple.gif' );
clipartPanel = new ClipartPanel(painter,cliparts,1,5,50,50);
clipartPanel.param.icondir = 'clipart'; // clipart dir (relative to the applet)
clipartPanel.write();
document.write("&nbsp;&nbsp;"); // provide some space
var photos = new Array( 'photo1.jpg', 'photo2.jpg' );
photoPanel = new ClipartPanel(painter,photos,1,2,67,50);
photoPanel.param.icondir = 'clipart'; // clipart dir (relative to the applet)
photoPanel.param.insertat = '0,0';
photoPanel.write();
// this function can be used to retrieve the image data
function showImageData() {
var data = painter.getImage("PNG");
window.alert(data);
}
</script>
</pre>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -