| 1 |
joko |
1.1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
| 2 |
|
|
<html> |
| 3 |
|
|
<head> |
| 4 |
|
|
<title>CBE</title> |
| 5 |
|
|
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> |
| 6 |
|
|
<meta name="author" content="Mike Foster, cross-browser.com"> |
| 7 |
|
|
<meta name="description" content="Cross-Browser DHTML API"> |
| 8 |
|
|
<link rel='stylesheet' type='text/css' href='cbe.css'> |
| 9 |
|
|
<script type='text/javascript' src='cbe_core.js'></script> |
| 10 |
|
|
</head> |
| 11 |
|
|
|
| 12 |
|
|
<body id="topofpage" marginwidth='0' marginheight='0'><a name="topofpage"></a> |
| 13 |
|
|
|
| 14 |
|
|
<!-- Title and Navbar --> |
| 15 |
|
|
<table width='100%' border='0' cellspacing='0' cellpadding='4'><tr> |
| 16 |
|
|
<td height='40' class='clsTitle'><img src="images/cb_x.gif" align="left" width="32" height="32" hspace="1" vspace="1"> |
| 17 |
|
|
CBE <script type='text/javascript'>document.write(cbeVersion)</script> |
| 18 |
|
|
</td> |
| 19 |
|
|
<td height='40' class='clsSubTitle'>Cross-Browser DHTML API </td> |
| 20 |
|
|
</tr></table> |
| 21 |
|
|
<div id="idMenuBar" class="clsMenuBar"> |
| 22 |
|
|
<table width="100%" border="0" cellspacing="0" cellpadding="4"><tr><td class="clsNav" height="22" align="left"> |
| 23 |
|
|
|
| 24 |
|
|
<a class="clsAMenu" href="#linkXmp" title="Programming Examples">Examples</a> | |
| 25 |
|
|
<a class="clsAMenu" href="#linkApp" title="Menu and Layout Frameworks">Applications</a> | |
| 26 |
|
|
<a class="clsAMenu" href="#linkDoc" title="Documentation and Basic Templates">Documents</a> | |
| 27 |
|
|
<a class="clsAMenu" href="#linkRes" title="Links to Online Resources">Resources</a> | |
| 28 |
|
|
<a class="clsAMenu" href="http://www.hftonline.com/forum/forumdisplay.php?forumid=16" title="Online Support Forum">Support Forum</a> | |
| 29 |
|
|
<a class="clsAMenu" href="http://cross-browser.com/" title="Home of CBE">Cross-Browser.com</a> |
| 30 |
|
|
|
| 31 |
|
|
</td></tr></table> |
| 32 |
|
|
</div> |
| 33 |
|
|
|
| 34 |
|
|
<table width='80%' align='center' cellspacing='10' cellpadding='10'><tr><td bgcolor='#ffffff'><!-- indentation table --> |
| 35 |
|
|
|
| 36 |
|
|
<p>Hi,</p> |
| 37 |
|
|
<p>CBE is going through some exciting changes! Currently CBE is being upgraded to use object-detection instead of browser-detection. Check the site often, there will be frequent minor releases during this testing period.</p> |
| 38 |
|
|
<p>Thank you for using CBE,</p> |
| 39 |
|
|
<p>Mike Foster</p> |
| 40 |
|
|
|
| 41 |
|
|
<p><a class="clsAMenu" name="linkXmp"></a></p> |
| 42 |
|
|
<h1>CBE Examples</h1> |
| 43 |
|
|
<h2>Basics</h2> |
| 44 |
|
|
<p><a href="examples/appearance.html">The Appearance Methods</a> - How to control the appearance of your objects with text and background color, background images, z-index, visibility, and innerHtml.</p> |
| 45 |
|
|
<p><a href="examples/size.html">The Size Methods</a> - How to control the actual and visible sizes of your objects.</p> |
| 46 |
|
|
<p><a href="examples/positioning1.html">The Position Methods</a> - Learn how to use the CBE positioning methods.</p> |
| 47 |
|
|
<p><a href="examples/positioning2.html">Position Viewer</a> - Displays real-time values for all the CBE positioning methods.</p> |
| 48 |
|
|
<p><a href="examples/clip0.html">The Clipping Methods</a> - Learn how to use the CBE clipping methods.</p> |
| 49 |
|
|
<h2>Sliding</h2> |
| 50 |
|
|
<p><a href="examples/slide0.html">Slide Basics</a> - Intro to the slide methods and their parameters.</p> |
| 51 |
|
|
<p><a href="examples/pe3.html">Linear Slide</a> - Time-based linear motion with sinusoidal rate using the slideTo() and slideBy() methods.</p> |
| 52 |
|
|
<p><a href="examples/pe4.html">Elliptical Slide</a> - Time-based elliptical motion using the ellipse() method.</p> |
| 53 |
|
|
<p><a href="examples/spinners.html">Spinners</a> - Another example using the ellipse() method.</p> |
| 54 |
|
|
<p><a href="examples/pe5.html">Corner Slide</a> - Time-based resize (corner slide) with sinusoidal rate using the slideCornerTo() and slideCornerBy() methods.</p> |
| 55 |
|
|
<p><a href="examples/sequence.html">Slide Sequence</a> - How to create a <i>sequence</i> of slides which occur one after the other.</p> |
| 56 |
|
|
<p><a href="examples/pe.html">parametricEquation()</a> - Experiments with the parametricEquation() method.</p> |
| 57 |
|
|
<h2>Dragging</h2> |
| 58 |
|
|
<p><a href='examples/drag0.html'>Basic Dragging</a> - The minimum requirements for dragging a CBE object.</p> |
| 59 |
|
|
<p><a href='examples/drag1.html'>Advanced Dragging</a> - Multiple, nested, drag objects with "bring to top" feature, using dragStart, drag, and dragEnd events.</p> |
| 60 |
|
|
<p>Making an Element <a href="examples/drag3.html">Resizeable <i>and</i> Draggable</a> - How to allow a user to resize an element by dragging the bottom-right corner.</p> |
| 61 |
|
|
<p>A simple <a href="examples/slider.html">Slider</a> example.</p> |
| 62 |
|
|
<h2>Events</h2> |
| 63 |
|
|
<p><a href="examples/event0.html">Basic Event Management</a> - How to start using the CBE event model.</p> |
| 64 |
|
|
<p><a href="examples/event_properties.html">Event Properties Viewer</a> - Allows you to add/remove a listener for different event types and watch the event properties.</p> |
| 65 |
|
|
<h2>Misc.</h2> |
| 66 |
|
|
<p>Dynamic <a href="examples/create_ele.html">Creation of Elements</a> - using the methods <i>createElement()</i> and <i>appendchild()</i>.</p> |
| 67 |
|
|
<p>The <a href="examples/anchor.html">Marker Technique</a> - how to place absolutely positioned elements relative to some element in the flow of html.</p> |
| 68 |
|
|
|
| 69 |
|
|
<p><a class="clsAMenu" name="linkApp" href="#topofpage">Top</a></p> |
| 70 |
|
|
<h1>CBE Applications</h1> |
| 71 |
|
|
<h2>Menus</h2> |
| 72 |
|
|
<p>Cascading Menu <a href="examples/menu9.html">explanation</a> and <a href="examples/menu9_template.html">template</a> - A mouseover dropdown menu with unlimited submenus.</p> |
| 73 |
|
|
<p><a href="examples/menu8_template.html">Panel Menu</a> template - A horizontal collapsible menu.</p> |
| 74 |
|
|
<h2>Interfaces</h2> |
| 75 |
|
|
<p><a href="templates/cbedi1.html">CBE Dynamic Interface #1</a> - Two columns with header and footer. Vertical, floating menu. Dynamically resizes to fit window and content.</p> |
| 76 |
|
|
|
| 77 |
|
|
<p><a class="clsAMenu" name="linkDoc" href="#topofpage">Top</a></p> |
| 78 |
|
|
<h1>Documents</h1> |
| 79 |
|
|
<h2>CBE Documentation</h2> |
| 80 |
|
|
<p><a href="docs/license.html">GNU LGPL License</a> - This license governs the usage and distribution of the CBE library. Before using CBE you must read the license and agree to its terms.</p> |
| 81 |
|
|
<p><a href='docs/getting_started.html'>Getting Started With CBE</a> - A step by step guide to starting development with CBE.</p> |
| 82 |
|
|
<p><a href='docs/core_om.html'>CBE Object Model</a> - Overview of the core objects and their relationships.</p> |
| 83 |
|
|
<p><a href='docs/event_om.html'>CBE Event Model</a> - Overview of event flow and event listeners.</p> |
| 84 |
|
|
<p><a target='cbeRefWin' href="docs/cbe_reference.html">CBE Object Reference</a> - A detailed reference for the methods, properties, and events of all public objects in CBE.</p> |
| 85 |
|
|
<h2>Basic Templates</h2> |
| 86 |
|
|
<p><a href="templates/cbe_xhtml_template.html">XHTML</a> - A basic CBE template which has an XHTML 1.0 Transitional doctype.</p> |
| 87 |
|
|
<p><a href="templates/cbe_html4_template.html">HTML 4</a> - A basic CBE template which has an HTML 4.01 Transitional doctype.</p> |
| 88 |
|
|
|
| 89 |
|
|
<p><a class="clsAMenu" name="linkRes" href="#topofpage">Top</a></p> |
| 90 |
|
|
<h1>Resources</h1> |
| 91 |
|
|
<h2>Online Resources</h2> |
| 92 |
|
|
<p>For the latest version of CBE visit <a href="http://cross-browser.com/">Cross-Browser.com</a>.</p> |
| 93 |
|
|
<p>For free technical support visit the <a href="http://www.hftonline.com/forum/forumdisplay.php?forumid=16">CBE Support Forum</a>.</p> |
| 94 |
|
|
<p>W3C.org <a href="http://www.w3.org/">CSS, HTML, DOM</a> Specifications</p> |
| 95 |
|
|
<p>Mozilla <a href="http://www.mozilla.org/docs/dom/domref">DOM Reference</a></p> |
| 96 |
|
|
<p>Netscape <a href="http://developer.netscape.com/docs/manuals/js/client/jsref/index.htm">Javascript Reference</a></p> |
| 97 |
|
|
<p>Microsoft <a href="http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/dhtml_reference_entry.asp?frame=true">HTML & DHTML Reference</a></p> |
| 98 |
|
|
<p>Opera <a href="http://www.opera.com/docs/specs/js/">Javascript Specs</a></p> |
| 99 |
|
|
<h2>Link To Us</h2> |
| 100 |
|
|
<p>If you use CBE, a link to Cross-Browser.com would be most appreciated. Feel free to use the following images.</p> |
| 101 |
|
|
<p>Special thanks to <a href="http://cyber-gish.com/">Kiffin</a> for the great button! I can't remember who made the X image (someone please remind me) - thanks!</p> |
| 102 |
|
|
|
| 103 |
|
|
<div> |
| 104 |
|
|
<span style="float:left"><img src="images/cb_x.gif" border="0" alt="Cross-Browser.com"></span> |
| 105 |
|
|
<span style="float:right"><img src="images/cbe-4.gif" border="0" alt="Cross-Browser.com"></span> |
| 106 |
|
|
</div> |
| 107 |
|
|
|
| 108 |
|
|
</td></tr></table><!-- end indentation table --> |
| 109 |
|
|
|
| 110 |
|
|
</body> |
| 111 |
|
|
</html> |
Parent Directory
| 
Revision Log
