public
Created

  • Download Gist
gistfile1.html
Liquid
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127
<!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>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.