Skip to content

Instantly share code, notes, and snippets.

@pavenuto

pavenuto/new-jquery-data-experiment.html

Created October 17, 2010 22:54
Show Gist options
  • Save pavenuto/631411 to your computer and use it in GitHub Desktop.
Save pavenuto/631411 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
new-jquery-data-experiment.html
<!DOCTYPE html>
<html>
<head>
<title>Experimental data stuff</title>
<style>
* {margin: 0; padding: 0; color: rgba(0,0,0,1);}
body { font-size: 62.5%; line-height: 1.7;}
article {margin: 12px auto; border: 1px solid #ccc; width: 470px; padding: 20px 40px;}
.initialized {background: rgba(255,255,0, 0.2);}
header {font-size: 2.2em; letter-spacing: 0.08em; margin: 0.333em 0; font-family: palatino;}
ul { font-size: 1.3em; font-family: 'courier';}
</style>
</head>
<body>
<article data-title="This is a post title" data-tags='{"Music":"Amon Dull II","Film":"Le Samurai","Website":"mubi.com"}'>
</article>
<article data-title="The corrosive effects of time redefine everything against our will" data-tags='{"Music":"Brian Auger&#39;s Oblivion Express","Film":" Sans soleil","Website":"butdoesitfloat.com"}'>
</article>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('article').each(function(index) {
var $this = $(this),
title = $(this).data("title"),
tags = $(this).data("tags"),
$header = $('<header />').text(title).appendTo($this),
$tag_list = $('<ul />').addClass('tags').appendTo($this);
$.each(tags, function(category, value) {
$('<li />').text(category + ': '+value).appendTo($tag_list);
});
$this.addClass('initialized')
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment