Yesterday, I ran across an interesting blog entry written by Jeffery. The title and images caught my eye, but I had a hard time understanding the Chinese. The article talked about a "Mini jQuery Lab" and had pictures showing a cool playground webpage mixing CSS, HTML, and jQuery!
I sent the URL through Google Translate to try to find where I could download the tool, but I still had difficulty figuring out the translation. Finally, I left a comment and the author walked me through what to do.
Basically, I just download the jQueryDemo5.zip from the bottom of a MSDN article. Inside the zip file was the Mini jQuery Lab. I extracted just the Mini jQuery Lab part of the zip, and hosted it on my website for your download.
So, I thought I'd play around with the tool for a little while. I ended up making a real simple jQuery AJAX call to retrieve my latest tweets from Twitter and display them inside of an ordered list.
At any time you can click the 'View HTML Source' link at the top of the webpage to view a complete page with all your CSS, HTML, and jQuery showing inside a SyntaxHighlighter pre tag.
Here is the code if you are interested in what I was playing around with...
<html>
<head>
<style type='text/css'>
ul {
list-style-type: lower-greek;
padding-left: 25px;
font-size: 16px;
line-height: 2em;
}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js'></script>
<script type='text/javascript'>
$(function() {
$.get("http://twitter.com/statuses/user_timeline/9453872.rss",
function(xml) {
$(xml).find("item").each(function() {
var title = $(this).find("title").text();
$('#lstTweets').append('<li>' + title + '</li>');
});
},
"xml"
);
});
</script>
</head><body>
<h3>List of My Tweets</h3>
<ul id="lstTweets" />
</body>
</html>
I hope you find this a useful tool. I can see it very handy when playing around with small new tricks or showing some things off during a presentation.
Very nice Tool!
ReplyDeleteHi Elijah, thanks for your introduction of Mini jQuery Lab, I have put Mini jQuery Lab on http://www.darkthread.net/MiniJQueryLab now and will keep it to the latest version. Here's the release note.
ReplyDeleteThanks for this useful post, very nice!
ReplyDeleteA great tool for jQuery developers, especially beginners. Wouldn't have known about it if not for your post. Thanks a lot.
ReplyDeleteVery nice Elijah, keep up the good work :-)
ReplyDelete