[phpBB Debug] PHP Warning: in file [ROOT]/includes/crs/crs_misc_functions.php on line 37: mime_content_type(): Empty filename or path
[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

Zen Cart 源代码 read_me_onload.html




下载文件

文件名: read_me_onload.html
文件类型: HTML文件
文件大小: 5.58 KiB
MD5: 488d27402b8b6a0083dfe8b6f5aadc21

read_me_onload.html - 关闭高亮
  1. <!--
  2. /**
  3. * @package documentation
  4. * @copyright Copyright 2003-2006 Zen Cart Development Team
  5. * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
  6. * @version $Id: read_me_onload.html 3273 2006-03-27 16:48:29Z drbyte $
  7. */
  8. //-->
  9. <style type="text/css">
  10. <!--
  11. body, table{ font-family:Verdana, Arial, Helvetica, sans-serif; font-size:14px; }
  12. table.intro {border-color:C96E29; }
  13. td.intro{background-color:#EEEEEE ; border-color:5778ce; font-size:14px; }
  14. td.plainbox, div.callout {border: 1px dashed; border-color: C96E29; margin:5 40 5 40;}
  15. .heading {background-color:5778CE; font-weight:bold; font-size:14px;    width: 100%; }
  16.  
  17. .title1 {color:C96E29; font-weight:bold; font-size:22px; }
  18. .title2 {color:C96E29; font-weight:bold; font-size:13px; }
  19. .small {font-size:10px ;}
  20. .error {color:FF0000; }
  21. .filename {font-family: mono, "Courier New", Courier ; font-size:14px; color: c96e29;}
  22. .pseudolink {text-decoration:underline; color:5778CE;}
  23. h1.intro { color: #ffffff; border:1px solid #aca893; background-color: #c96e29;  font-size: 22px;   padding: 4px;}
  24. h1 { color: #ffffff;    border:1px solid #aca893;   background-color: #5778ce;   font-size: 20px;   padding: 4px;}
  25. h2 { color: #c96e29;    font-size: 18px;}
  26. h3 { color: #5778ce;    font-size: 16px; margin-bottom:0px;}
  27. h4 { color: #c96e29;    font-size: 14px;}
  28. .style1 {color: #CC0000}
  29. .style2 {color: #0033FF}
  30.  
  31. -->
  32. <title>OnLoad() Overrides in Zen Cart(tm)</title>
  33. <h1><strong>On_Load Override How-To</strong> </h1>
  34. <p><em>Another example of Zen Magic.</em><br />
  35. <br />
  36. Zen Cart's modular system can be used to insert <span class="filename">&lt;BODY&gt;</span> tag &quot;onload&quot; 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 />
  37. <br />
  38. Any <span class="heading">on_load_*.js</span> file in this directory can be used to
  39. modify the body tag with a javascript <code>on_load()</code> function.<br />
  40. <h2>Site-Wide Use</h2>
  41. <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.
  42. <h2>Page-Specific Use </h2>
  43. <p>For page-specific operation, put the file under the <code class="filename">/includes/modules/pages/{pagename}/</code> folder. <br />
  44. <h1>File Contents </h1>
  45. <p>NOTE: <span class="style1">on_load_*.js</span> files must contain ONLY the raw code to be inserted in the <code class="filename">&lt;body&gt;</code> tag in the <code class="filename">on_load=""</code> parameter.<br />
  46. <br />
  47. The effect is like this:<br />
  48. <code class="filename">&lt;body onload=&quot;WHATEVER_YOUR_FILE_CONTAINS_GOES_HERE&quot;&gt;</code><br />
  49. <br />
  50. Essentially, the contents of the file will be a function call to the DOM or to functions loaded in a jscript file.
  51. <h2><strong>OVERRIDE Operation:</strong></h2>
  52. <p>1. Checks the existence of "on_load" scripts for the <strong>individual page</strong> first <br />
  53. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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 />
  54. 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 />
  55. <h1>EXAMPLES</h1>
  56. <h3><strong>EXAMPLE #1 (per-page on_load coding)</strong></h3>
  57. <p> Two live examples of this exist for the default &quot;login&quot; and &quot;contact us&quot; pages in Zen Cart.<br />
  58. Let's look at the login page: </p>
  59. <p>You'll see that in /includes/modules/pages/login/on_load_main.js the code that is inserted into the &lt;body&gt; tag for that page is this:<br />
  60. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code class="filename">document.getElementById('email_address').focus();</code></p>
  61. <p>This is a DOM call to set focus on the &quot;email_address&quot; field on the page as the first spot where the cursor will be flashing when the page is opened.</p>
  62. <p>When the login page is loaded, the &lt;body&gt; tag will read like this:<br />
  63. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code class="filename">&lt;body id=&quot;login&quot; onload=&quot;document.getElementById('email_address').focus();&quot;&gt; </code><br />
  64. </p>
  65. <h3><strong>EXAMPLE #2 (on_load calls on all pages in your shop)</strong></h3>
  66. <p>Sometimes a designer wishes to preload rollover images on the page for menu purposes. In this case, the implementation is two-fold:</p>
  67. <p>1. Create a file with javascript function definitions for the preload activities, and place it in:<br />
  68. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code class="filename">includes/templates/<span class="style2">{template_directory}</span>/jscript/jscript_preloadimages.js</code></p>
  69. <p>2. Create a file for the onload code as:<br />
  70. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code class="filename">includes/templates/<span class="style2">{template_directory}</span>/jscript/on_load/on_load_image_preload.js</code><br />
  71. &nbsp;&nbsp;&nbsp;&nbsp;and in the file put just one function call to match the preload function definition in your js file, such as:<br />
  72. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<code class="filename">preloadImages();</code></p>
  73. <p>3. Of course, be sure to upload the real image files, etc to support the preload activities.
  74. </p>
  75. <br />
  76. </p>
  77.  


cron