Skip to content

Instantly share code, notes, and snippets.

@pope

pope/gist:236588

Created November 17, 2009 02:52
Show Gist options
  • Save pope/236588 to your computer and use it in GitHub Desktop.
Save pope/236588 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Deletable Tabs</title>
<link type="text/css" href="jquery-ui/css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<style>
.delete {
cursor:pointer;
}
</style>
</head>
<body>
<div id="Tabs">
<ul>
<li><a href="#One">One</a></li>
<li><a href="#Two">Two <span class="delete">[x]</span></a></li>
<li><a href="#Three">Three <span class="delete">[x]</span></a></li>
</ul>
<div id="One">
<h2>One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
eleifend ultrices dictum. Quisque ac dui sapien. Duis purus tellus,
consequat a aliquet sit amet, laoreet ut lectus. Vivamus ut diam
eget nunc lacinia tincidunt. Cras posuere nisl eget arcu porta
sodales. Maecenas tempor molestie tincidunt. Pellentesque
consectetur dolor quis sapien sodales imperdiet nec nec nisl. Nam
vitae tellus ipsum. Duis eu risus sit amet lorem pretium rutrum et
sed sem. Maecenas scelerisque posuere nisl vel fermentum. Sed id
porttitor odio. Quisque vulputate enim nec dui congue auctor.
Mauris ornare pulvinar lacinia.</p>
</div>
<div id="Two">
<h2>Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
eleifend ultrices dictum. Quisque ac dui sapien. Duis purus tellus,
consequat a aliquet sit amet, laoreet ut lectus. Vivamus ut diam
eget nunc lacinia tincidunt. Cras posuere nisl eget arcu porta
sodales. Maecenas tempor molestie tincidunt. Pellentesque
consectetur dolor quis sapien sodales imperdiet nec nec nisl. Nam
vitae tellus ipsum. Duis eu risus sit amet lorem pretium rutrum et
sed sem. Maecenas scelerisque posuere nisl vel fermentum. Sed id
porttitor odio. Quisque vulputate enim nec dui congue auctor.
Mauris ornare pulvinar lacinia.</p>
</div>
<div id="Three">
<h2>Three</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
eleifend ultrices dictum. Quisque ac dui sapien. Duis purus tellus,
consequat a aliquet sit amet, laoreet ut lectus. Vivamus ut diam
eget nunc lacinia tincidunt. Cras posuere nisl eget arcu porta
sodales. Maecenas tempor molestie tincidunt. Pellentesque
consectetur dolor quis sapien sodales imperdiet nec nec nisl. Nam
vitae tellus ipsum. Duis eu risus sit amet lorem pretium rutrum et
sed sem. Maecenas scelerisque posuere nisl vel fermentum. Sed id
porttitor odio. Quisque vulputate enim nec dui congue auctor.
Mauris ornare pulvinar lacinia.</p>
</div>
</div>
<script src="jquery-ui/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery-ui/js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
(function($) {
$(function() {
var tabs = $("#Tabs").tabs({
add: function(evt, ui) {
tabs.tabs('select', '#' + ui.panel.id);
}
});
$("#Tabs .delete")
.live("click", function(evt) { console.log("fail"); })
.bind("click", function(evt) { console.log("works"); });
});
})(jQuery);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment