Skip to content

@rmurphey /gist:721218
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<title>Refactoring Your jQuery</title>
<meta name="author" content="Rebecca Murphey">
<!-- CSS : implied media="all" -->
<link rel="stylesheet" href="css/style.css?v=1">
</head>
<body>
<div id="container">
<header>
<h1>Refactoring Your jQuery: Portlets</h1>
</header>
<div id="main">
<div class="portlet" data-id="paul">
<nav>
<li class="favorite">Favorite</li>
<li class="close">Close</li>
<li class="open">Open</li>
</nav>
<section class="content">
<img src="img/paul.png">
<h2>Paul Irish</h2>
<p>html5 and css3 aficionado, Google Chrome dev relations, jQuery
team member, interaction designer and front-end developer, music snob
on @Aurgasm</p>
</section>
</div>
<div class="portlet" data-id="adam">
<nav>
<li class="favorite">Favorite</li>
<li class="close">Close</li>
<li class="open">Open</li>
</nav>
<section class="content">
<img src="img/adam.png">
<h2>Adam Sontag</h2>
<p>i cohost the @yayquery podcast. i play synth in @bellevuesfinest.
i have a lot of monitors but have been known to code in the tub.</p>
</section>
</div>
<div class="portlet" data-id="alex">
<nav>
<li class="favorite">Favorite</li>
<li class="close">Close</li>
<li class="open">Open</li>
</nav>
<section class="content">
<img src="img/alex.png">
<h2>Alex Sexton</h2>
<p>yayQuery Co-host. JS Enthusiast. Labs Engineer at Bazaarvoice.
Superhero-like strength, srsly guys.</p>
</section>
</div>
<div class="portlet" data-id="rebecca">
<nav>
<li class="favorite">Favorite</li>
<li class="close">Close</li>
<li class="open">Open</li>
</nav>
<section class="content">
<img src="img/rebecca.png">
<h2>Rebecca Murphey</h2>
<p>JavaScript application developer</p>
</section>
</div>
</div>
</div> <!--! end of #container -->
<!-- Javascript at the bottom for fast page loading -->
<!-- Grab Google CDN's jQuery. fall back to local if necessary -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/lib/jquery.min.js"><\/script>')</script>
<script src="js/lib/jquery-ui-1.8.6/ui/jquery.ui.widget.js"></script>
<script src="js/portlet.js"></script>
<script>
$(function() {
var portlets = $('.portlet');
$('.portlet .favorite').click(function() {
var portlet = $(this).closest('.portlet'),
id = portlet.attr('data-id');
$.ajax({
url : '/services/favorite.json',
dataType : 'json',
data : { id : id },
success : function(resp) {
if (!resp.success) { return; }
portlets.removeClass('favorite').find('.favorite').show();
portlet.addClass('favorite').find('.favorite').hide();
}
});
});
$('.portlet .open').click(function() {
var portlet = $(this).closest('.portlet');
portlet.find('.content').show();
portlet.find('.close').show();
$(this).hide();
}).hide();
$('.portlet .close').click(function() {
var portlet = $(this).closest('.portlet');
portlet.find('.content').hide();
portlet.find('.open').show();
$(this).hide();
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.