adding mouseenter/mouseleave example for accordion

caridy · Jan 20, 2011 · 04a2862 · 04a2862
1 parent bf926cc
commit 04a2862
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 0 deletions.
diff --git a/examples/gallery-node-accordion/accordion-mouseenter-mouseleave.html b/examples/gallery-node-accordion/accordion-mouseenter-mouseleave.html
@@ -0,0 +1,109 @@
+<!doctype html>
+<html>
+<head>
+    <title>YUI Plugin: gallery-node-accordion </title>
+    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.2.0/build/cssfonts/fonts-min.css&3.2.0/build/cssreset/reset-min.css&3.2.0/build/cssbase/base-min.css">
+    <link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/gallery-2010.05.21-18-16/build/gallery-node-accordion/assets/skins/sam/gallery-node-accordion.css" />
+    <style>
+        /* module examples */
+        div#demo {
+                position:relative;
+                width:22em;
+                padding: 10px;
+        }
+        .yui3-accordion .yui3-accordion-item {
+                text-align: left;
+        }
+                .yui3-accordion .yui3-accordion-item .yui3-accordion-item-bd p {
+                    padding: 5px;
+                }
+    </style>
+</head>
+<body class="yui3-skin-sam">
+    <div id="doc">
+
+        <div id="demo">
+            <div class="hd">
+                <h3 class="title">Accordion using synthetic events (mouseenter/mouseleave) to expand and collapse elements on mouse move.</h3>
+                <p>More information about gallery-node-accordion here: <br /><a href="http://yuilibrary.com/gallery/show/node-accordion">http://yuilibrary.com/gallery/show/node-accordion</a></p>
+            </div>
+            <div class="bd">
+
+                <div id="myaccordion" class="yui3-accordion">
+
+                        <div class="yui3-module yui3-accordion-item first-of-type">
+
+                                    <div class="yui3-hd yui3-accordion-item-hd">
+                                        <a href="#" class="yui3-accordion-item-trigger">item 1</a>
+                        </div>
+                                    <div class="yui3-bd yui3-accordion-item-bd">
+                                        <p>
+                                item 1 content here...
+                                    </p>
+                            </div>
+
+                    </div>
+                        <div class="yui3-module yui3-accordion-item">
+
+                                    <div class="yui3-hd yui3-accordion-item-hd">
+                                        <a href="#" class="yui3-accordion-item-trigger">item 2</a>
+                        </div>
+                                    <div class="yui3-bd yui3-accordion-item-bd">
+                                        <p>
+                                item 2 content here...
+                                    </p>
+                            </div>
+
+                    </div>
+                    <div class="yui3-module yui3-accordion-item">
+
+                                    <div class="yui3-hd yui3-accordion-item-hd">
+                                        <a href="#" class="yui3-accordion-item-trigger">item 3</a>
+                        </div>
+                                    <div class="yui3-bd yui3-accordion-item-bd">
+                                        <p>
+                                item 3 content here...
+                                    </p>
+                            </div>
+
+                    </div>
+
+                </div>
+
+            </div>
+        </div>
+
+    </div>
+
+<!-- YUI 3 Seed //-->
+<script type="text/javascript" src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js"></script>
+<!-- Initialization process //-->
+<script type="text/javascript">
+    YUI({
+            //Last Gallery Build of this module
+            gallery: 'gallery-2010.05.21-18-16'
+    }).use('node', 'gallery-node-accordion', 'event-mouseenter', function (Y) {
+
+        var node = Y.one("#myaccordion");
+        node.plug(Y.Plugin.NodeAccordion, {});
+
+        // expanding on mouseenter
+        node.delegate ('mouseenter', function (e) {
+             node.accordion.expandItem(e.currentTarget);
+        }, '.yui3-accordion-item');
+        // collapsing on mouseleave
+        node.delegate ('mouseleave', function (e) {
+             node.accordion.collapseItem(e.currentTarget);
+        }, '.yui3-accordion-item');
+
+        // finally, we might want to have a mouseleave event at the global level to collapse all items 
+        // when the mouse is out of the accordion area to guarantee no problems
+        // collapsing all items on mouseleave
+        node.on ('mouseleave', function (e) {
+            node.accordion.collapseAllItems();
+        });
+
+    });
+</script>
+</body>
+</html>
diff --git a/examples/gallery-node-accordion/index.html b/examples/gallery-node-accordion/index.html
@@ -28,6 +28,7 @@ <h2><a href="http://github.com/caridy/yui3-gallery/">YUI3 Gallery Modules</a>: N
         <p><strong>Examples:</strong></p>
         <ul>
           <li><a href="accordion-with-skin.html">Accordion using the default skin + Easing animation</a></li>
+          <li><a href="accordion-mouseenter-mouseleave.html">Accordion using synthetic events (mouseenter/mouseleave) to expand and collapse elements on mouse move</a></li>
           <li><a href="custom-style.html">Custom skin + custom properties</a></li>
           <li><a href="horizontal.html">Horizontal Accordions (beta)</a></li>
         </ul>