Permalink
Browse files

delegating click events

  • Loading branch information...
1 parent 11d9340 commit 8d35dde155d974e30d7aa5a65c10b76e23c1df3d @danielstocks committed Jun 30, 2010
Showing with 55 additions and 27 deletions.
  1. +21 −7 demo.html
  2. +30 −16 jquery.collapse.js
  3. +4 −4 test/test.html
View
@@ -6,11 +6,11 @@
<style type="text/css">
body {font-family: helvetica, arial; color:#000; background:#fff;}
#wrap {width: 720px; margin:0 auto;}
- h3 {margin-bottom:1px; padding-bottom:1px;}
+ h3 {margin-bottom:1px; padding-bottom:1px; background: #eee; cursor:pointer;}
ul {border-bottom: 2px solid #ccc; padding:10px 0; margin:0;}
ul li {list-style:none;}
- .active a {background: #eee;}
- .super-active a {background: #ffaaaa;}
+ .active {background: #ddd;}
+ .super-active {background: #ffaaaa;}
</style>
</head>
<body>
@@ -19,31 +19,36 @@ <h1>jQuery Collapse Demo</h1>
<p>With support for cookie monsters.</p>
<h2>First instance</h2>
<div class="demo">
- <h3><a href="#">Fruits</a></h3>
+ <h3>Fruits</h3>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
- <h3><a href="#">Vegetables</a></h3>
+ <h3>Vegetables</h3>
<ul>
<li>Carrot</li>
<li>Tomato</li>
<li>Squash</li>
</ul>
+ <h3>Drinks</h3>
+ <div>
+ <p>PG TIPS!!!</p>
+ </div>
</div>
<h2>Second instance</h2>
<div class="demo">
- <h3><a href="#">Colours</a></h3>
+ <h3>Colours</h3>
<ul>
<li>Green</li>
<li>Yellow</li>
<li>Orange</li>
</ul>
</div>
<h2>Third instance</h2>
+ <p>This one is opened by default</p>
<div class="demo-2">
- <h3><a href="#">Countries</a></h3>
+ <h3>Countries</h3>
<ul>
<li>Sweden</li>
<li>Jamaica</li>
@@ -52,13 +57,22 @@ <h3><a href="#">Countries</a></h3>
<li>Brazil</li>
</ul>
</div>
+ <h2>Fourth instance</h2>
+ <p>This one uses a div as a container instead of a list.</p>
+ <div class="demo-3">
+ <h3>Countries</h3>
+ <div>
+ <p>This is a paragraph inside a div</p>
+ </div>
+ </div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.collapse.js"></script>
<script src="jquery.cookie.js"></script>
<script>
$(".demo").collapse();
$(".demo-2").collapse({speed : 400, active: "super-active", cookie : "second-collapse", open : "true"});
+ $(".demo-3").collapse({speed : 0});
</script>
</body>
</html>
View
@@ -2,12 +2,14 @@
* Collapse plugin for jQuery
* ---
* @author Daniel Stocks (http://webcloud.se)
- * @version 0.1
- * @updated 28-JUN-2010
+ * @version 0.2
+ * @updated 30-JUN-2010
* ---
* Note: For cookie support you need to include
* the cookie plugin from here: http://plugins.jquery.com/project/cookie
* ---
+ * Project Page & Documentation:
+ * http://github.com/danielstocks/jQuery-Collapse/
*/
(function($) {
@@ -19,7 +21,7 @@
inactive : "inactive",
active : "active",
head : "h3",
- group : "ul",
+ group : "ul, div",
speed : 100,
cookieID : "collapse",
disableCookie : false
@@ -28,26 +30,31 @@
var op = $.extend(defaults, options),
cookie_counter = 0;
cookieEnable = false;
-
+
+ // Is cookie support available?
if($.cookie) {
var cookieEnable = true;
}
+ // Or disabled by user?
if(op.disableCookie) {
cookieEnable = false;
}
+ // Reference to the object
+ var obj = $(this);
+
// Event for showing
- $(this).bind("show", function(e, el) {
+ obj.bind("show", function(e, el) {
$.each(el, function() {
$(this).show().prev().removeClass(op.inactive).addClass(op.active);
});
});
// event method for hiding
- $(this).bind("hide", function(e, el) {
+ obj.bind("hide", function(e, el) {
$.each(el, function() {
$(this).hide().prev().removeClass(op.active).addClass(op.inactive);
- });
+ });
});
return this.each(function() {
@@ -77,29 +84,36 @@
}
}
}
- sections.bind("click", function(e) {
+ // Delegate click event to show/hide content
+ obj.bind("click", function(e) {
e.preventDefault();
+ var t = $(e.target);
+ if(!t.is(op.head)) {
+ return false;
+ }
var num = sections.index(this),
cookieName = cookie + num,
cookieVal = num,
- ul = $(this).next(op.group);
+ content = t.next(op.group);
// Hide
- if($(this).hasClass(op.active)) {
- ul.slideUp(op.speed, function() {
- $(this).trigger('hide', [$(this)]);
+ if(t.hasClass(op.active)) {
+ content.slideUp(op.speed, function() {
+ content.trigger('hide', [content]);
})
cookieVal += 'closed';
- if(cookieEnable)
+ if(cookieEnable) {
$.cookie(cookieName, cookieVal, { path: '/', expires: 10 });
+ }
return;
}
// Show
- ul.slideDown(op.speed, function() {
- $(this).trigger('show', [$(this)]);
+ content.slideDown(op.speed, function() {
+ content.trigger('show', [content]);
});
cookieVal += 'open';
- if(cookieEnable)
+ if(cookieEnable) {
$.cookie(cookieName, cookieVal, { path: '/', expires: 10 });
+ }
});
});
}
View
@@ -15,29 +15,29 @@ <h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="main" style="position:absolute; left:-100000px">
<div class="test">
- <h3><a href="#">Fruits</a></h3>
+ <h3>Fruits</h3>
<ul>
<li>Apple</li>
<li>Pear</li>
<li>Orange</li>
</ul>
- <h3><a href="#">Vegetables</a></h3>
+ <h3>Vegetables</h3>
<ul>
<li>Carrot</li>
<li>Tomato</li>
<li>Squash</li>
</ul>
</div>
<div class="test">
- <h3><a href="#">Colours</a></h3>
+ <h3>Colours</h3>
<ul>
<li>Green</li>
<li>Yellow</li>
<li>Orange</li>
</ul>
</div>
<div class="test-2">
- <h3><a href="#">Countries</a></h3>
+ <h3>Countries</h3>
<ul>
<li>Sweden</li>
<li>Jamaica</li>

0 comments on commit 8d35dde

Please sign in to comment.