instances.htm

来自「applet在線上繪圖,允許在瀏覽器上繪圖,最後儲存成各式的圖檔」· HTM 代码 · 共 131 行

HTM
131
字号
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <title>Multiple instances</title>
<link REL ="stylesheet" TYPE="text/css" HREF="stylesheet.css" TITLE="Style">
</head>

<script language="javascript" src="../applet/applet.js"></script>

<body>
<a href="./index.htm">CONTENTS</a>

<h3>How to place several instances of the editor on a single webpage</h3>

<p>You can place several editors on a signle webpage. In that case each <a href="placing.htm#DrawCanvas">DrawCanvas</a>
must have the parameter <i>instance</i>. The parameter's value can be any string, but it must be UNIQUE for each canvas
on the page.</p>

For example:
<pre>
 for one canvas
    &lt;param name="instance" value="A"&gt;
 for another canvas
    &lt;param name="instance" value="B"&gt;
</pre>

<p>Each control panel (such as <a href="placing.htm#Tool">ToolPanel</a>, <a href="placing.htm#Color">ColorPanel</a>, etc..)
must also have the parameter <i>instance</i>, and it's value must be the same that the canvas instance the panel serves for.
</p>

<table border="0" cellpadding="4">

<tr>
  <th align="left">canvas instance A</th>
  <th>&nbsp</th>
  <th align="left">canvas instance B</th>
</tr>

<tr>
    <td>
	<script language="javascript"><!--
	  // We use JavaScript to output the applet tags
	  // due to the IE security issue descibed here:
	  // http://izhuk.com/docs/ie7fix.html

	  var painter = new Applet();

	  painter.attr['archive']  = 'painter.jar';
	  painter.attr['codebase'] = '../applet';
	  painter.attr['code']   = 'DrawCanvas.class';
	  painter.attr['width']  = 208;
	  painter.attr['height'] = 100;

	  painter.param['instance'] = 'A';
  
	  painter.write();
	//--></script>
    </td>
    <td>&nbsp</td>
    <td>
	<script language="javascript"><!--

	  var painter = new Applet();

	  painter.attr['archive']  = 'painter.jar';
	  painter.attr['codebase'] = '../applet';
	  painter.attr['code']   = 'DrawCanvas.class';
	  painter.attr['width']  = 208;
	  painter.attr['height'] = 100;

	  painter.param['instance'] = 'B';
  
	  painter.write();
	//--></script>
    </td>
</tr>

<tr>
    <td>
	<script language="javascript"><!--
	  var painter = new Applet();
	  painter.attr['archive']  = 'painter.jar';
	  painter.attr['codebase'] = '../applet';

	  painter.attr['code']   = 'ControlPanel.class';
	  painter.attr['width']  = 208;
	  painter.attr['height'] = 26;
  
	  painter.param['rows']    = 1;
	  painter.param['columns'] = 8;
	  painter.param['tools'] = 'curve,line,rect,oval,rect_filled,oval_filled,eraser,text';
	  painter.param['default'] = 'curve';
	  painter.param['instance'] = 'A';
  
	  painter.write();
	//--></script>
    </td>
    <td>&nbsp</td>  
    <td>
	<script language="javascript"><!--
	  var painter = new Applet();
	  painter.attr['archive']  = 'painter.jar';
	  painter.attr['codebase'] = '../applet';

	  painter.attr['code']   = 'ControlPanel.class';
	  painter.attr['width']  = 208;
	  painter.attr['height'] = 26;
  
	  painter.param['rows']    = 1;
	  painter.param['columns'] = 8;
	  painter.param['tools'] = 'curve,line,rect,oval,rect_filled,oval_filled,eraser,text';
	  painter.param['default'] = 'line';
	  painter.param['instance'] = 'B';
  
	  painter.write();
	//--></script>
    </td>
</tr>

<tr>
    <td>tool panel works for the canvas <b>A</b></td>
    <td>&nbsp</td>
    <td>tool panel works for the canvas <b>B</b></td>
</tr>

</table>


</body>
</html>

⌨️ 快捷键说明

复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?