This section is intended to briefly introduce how to use the plug-in in HTML portal. Some samples are provided to guide you through the basic steps required. Note: yourplugin is created within the plug-in.
<html> <body> <form> <input type="button" value="fun()" onclick='alert(yourplugin.fun())'> </form> </body> </html>or
<html> <body> <form> <input type="button" value="fun()" onclick='alert(embed_id.fun())'> </form> </body> </html>
<html> <body> <form> <input type="button" value="alert(prop)" onclick='alert(yourplugin.prop)'> </form> </body> </html>or
<html> <body> <form> <input type="button" value="alert(prop)" onclick='alert(embed_id.prop)'> </form> </body> </html>
<html> <body> <form> <input type="button" value="prop='XXX'" onclick='yourplugin.prop="XXX"'> </form> </body> </html>or
<html> <body> <form> <input type="button" value="prop='XXX'" onclick='embed_id.prop="XXX"'> </form> </body> </html>
<html> <body> <script> var embed_id = document.getElementById('embed_id'); embed_id.addEventListener( "yourPluginEvent", function() { document.getElementById("result").innerHTML += "<p>" + "received yourPluginEvent" + "</p>"; }, false); </script> <form> <input type="button" value="yourplugin.event()" onclick='yourplugin.event()'> </form> </body> </html>or
<html> <body> <script> var embed_id = document.getElementById('embed_id'); embed_id.addEventListener( "yourPluginEvent", function() { document.getElementById("result").innerHTML += "<p>" + "received yourPluginEvent" + "</p>"; }, false); </script> <form> <input type="button" value="yourplugin.event()" onclick='embed_id.event()'> </form> </body> </html>
This section is intended to briefly introduce how to use the plug-in in SVG portal. Some samples are provided to guide you through the basic steps required.
<svg> <foreignObject id="embed_id" requiredExtensions="application/your-plugin-mimetype"></foreignObject> </svg>
<svg onload="init()"> <g id="pluginContainer"/> <script type="text/ecmascript"> function createPlugin() { var embed_id; embed_id = document.createElement("foreignObject"); embed_id.setAttribute("id", "embed_id"); embed_id.setAttribute("requiredExtensions", "application/your-plugin-mimetype"); var container = document.getElementById("pluginContainer"); container.appendChild(embed_id); } function init() { createPlugin(); } </script> </svg>
<svg> <g focusable="false"> <use id="button_id" xlink:href="#button"> <set attributeName="stroke-width" to="2" begin="focusin" end="focusout"/> </use> <text text-anchor="middle" x="60" y="14">fun()</text> <handler type="application/ecmascript" ev:event="keypress"> alert(yourplugin.fun()); </handler> </g> </svg>or
<svg> <g focusable="false"> <use id="button_id" xlink:href="#button"> <set attributeName="stroke-width" to="2" begin="focusin" end="focusout"/> </use> <text text-anchor="middle" x="60" y="14">fun()</text> <handler type="application/ecmascript" ev:event="keypress"> alert(embed_id.fun()); </handler> </g> </svg>
<svg> <g focusable="false"> <use id="button_id" xlink:href="#button"> <set attributeName="stroke-width" to="2" begin="focusin" end="focusout"/> </use> <text text-anchor="middle" x="60" y="14">alert(prop)</text> <handler type="application/ecmascript" ev:event="keypress"> alert(yourplugin.prop); </handler> </g> </svg>or
<svg> <g focusable="false"> <use id="button_id" xlink:href="#button"> <set attributeName="stroke-width" to="2" begin="focusin" end="focusout"/> </use> <text text-anchor="middle" x="60" y="14">alert(prop)</text> <handler type="application/ecmascript" ev:event="keypress"> alert(embed_id.prop); </handler> </g> </svg>
<svg> <g focusable="false"> <use id="button_id" xlink:href="#button"> <set attributeName="stroke-width" to="2" begin="focusin" end="focusout"/> </use> <text text-anchor="middle" x="60" y="14">prop='XXX</text> <handler type="application/ecmascript" ev:event="keypress"> yourplugin.prop="XXX"; </handler> </g> </svg>or
<svg> <g focusable="false"> <use id="button_id" xlink:href="#button"> <set attributeName="stroke-width" to="2" begin="focusin" end="focusout"/> </use> <text text-anchor="middle" x="60" y="14">prop='XXX</text> <handler type="application/ecmascript" ev:event="keypress"> embed_id.prop="XXX"; </handler> </g> </svg>
<svg> /*add the event handler for the plug-in object */ <handler type="application/ecmascript" ev:event="yourPluginEvent"> addText("received yourPluginEvent"); </handler> </svg>
</svg> <script type="text/ecmascript"> embed_id.addEventListener("yourPluginEvent", addText("received yourPluginEvent"),false); </script> </svg>
<svg> <g focusable="false"> <use id="button_id" xlink:href="#button"> <set attributeName="stroke-width" to="2" begin="focusin" end="focusout"/> </use> <text text-anchor="middle" x="60" y="14">yourplugin.event()</text> <handler type="application/ecmascript" ev:event="keypress"> yourplugin.event(); </handler> </g> </svg>or
<svg> <g focusable="false"> <use id="button_id" xlink:href="#button"> <set attributeName="stroke-width" to="2" begin="focusin" end="focusout"/> </use> <text text-anchor="middle" x="60" y="14">yourplugin.event()</text> <handler type="application/ecmascript" ev:event="keypress"> embed_id.event(); </handler> </g> </svg>