[phpBB Debug] PHP Warning: in file [ROOT]/includes/crs/crs_misc_functions.php on line 37: mime_content_type(): Empty filename or path Zen Cart 源代码 read_me_onload.html
-->
</style>
<title>OnLoad() Overrides in Zen Cart(tm)</title>
<h1><strong>On_Load Override How-To</strong> </h1>
<p><em>Another example of Zen Magic.</em><br />
<br />
Zen Cart's modular system can be used to insert <span class="filename"><BODY></span> tag "onload" event handling on a site-wide or per-page basis very easily. Within your <span class="filename">/includes/templates/YOURTEMPLATE</span> folder, you can create a <span class="heading">/jscript/on_load</span> folder for this purpose. <br />
<br />
Any <span class="heading">on_load_*.js</span> file in this directory can be used to
modify the body tag with a javascript <code>on_load()</code> function.<br />
<h2>Site-Wide Use</h2>
<p>For site-wide operation, just name the file <code class="filename">on_load.js</code> and store it in the <span class="filename">/includes/templates/YOURTEMPLATE/jscript/on_load </span>folder. Multiple files may be present, and can be added by adding an underscore and more letters to the filename.
<h2>Page-Specific Use </h2>
<p>For page-specific operation, put the file under the <code class="filename">/includes/modules/pages/{pagename}/</code> folder. <br />
<h1>File Contents </h1>
<p>NOTE: <span class="style1">on_load_*.js</span> files must contain ONLY the raw code to be inserted in the <code class="filename"><body></code> tag in the <code class="filename">on_load=""</code> parameter.<br />
<br />
The effect is like this:<br />
<code class="filename"><body onload="WHATEVER_YOUR_FILE_CONTAINS_GOES_HERE"></code><br />
<br />
Essentially, the contents of the file will be a function call to the DOM or to functions loaded in a jscript file.
<h2><strong>OVERRIDE Operation:</strong></h2>
<p>1. Checks the existence of "on_load" scripts for the <strong>individual page</strong> first <br />
Looks in "<code class="filename">/includes/modules/pages/<span class="style2">{PAGENAME}</span>/</code>" for files named "<span class="style1">on_load_*.js</span>"<br />
2. Then checks for site-wide overrides in "<code class="filename">includes/templates/<span class="style2">TEMPLATE</span>/jscript/on_load/<span class="style1">on_load_*.js</span></code>"<br />
<h1>EXAMPLES</h1>
<h3><strong>EXAMPLE #1 (per-page on_load coding)</strong></h3>
<p> Two live examples of this exist for the default "login" and "contact us" pages in Zen Cart.<br />
Let's look at the login page: </p>
<p>You'll see that in /includes/modules/pages/login/on_load_main.js the code that is inserted into the <body> tag for that page is this:<br />
<code class="filename">document.getElementById('email_address').focus();</code></p>
<p>This is a DOM call to set focus on the "email_address" field on the page as the first spot where the cursor will be flashing when the page is opened.</p>
<p>When the login page is loaded, the <body> tag will read like this:<br />
<code class="filename"><body id="login" onload="document.getElementById('email_address').focus();"> </code><br />
</p>
<h3><strong>EXAMPLE #2 (on_load calls on all pages in your shop)</strong></h3>
<p>Sometimes a designer wishes to preload rollover images on the page for menu purposes. In this case, the implementation is two-fold:</p>
<p>1. Create a file with javascript function definitions for the preload activities, and place it in:<br />
<code class="filename">includes/templates/<span class="style2">{template_directory}</span>/jscript/jscript_preloadimages.js</code></p>
<p>2. Create a file for the onload code as:<br />
<code class="filename">includes/templates/<span class="style2">{template_directory}</span>/jscript/on_load/on_load_image_preload.js</code><br />
and in the file put just one function call to match the preload function definition in your js file, such as:<br />
<code class="filename">preloadImages();</code></p>
<p>3. Of course, be sure to upload the real image files, etc to support the preload activities.
</p>
<br />
</p>