Created
March 15, 2009 21:27
-
-
Save camwest/79541 to your computer and use it in GitHub Desktop.
Example of toElement in Prototype
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" | |
| "http://www.w3.org/TR/html4/strict.dtd"> | |
| <html lang="en"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| <title>Using Prototype to Inject Classes into the DOM</title> | |
| <meta name="generator" content="TextMate http://macromates.com/"> | |
| <meta name="author" content="Cameron Westland"> | |
| <!-- Date: 2009-03-15 --> | |
| </head> | |
| <body> | |
| <div id="results"></div> | |
| <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"></script> | |
| <script type="text/javascript" charset="utf-8"> | |
| var Tweet = Class.create({ | |
| initialize: function(data) { | |
| this.date = data.created_at; | |
| this.fromUser = data.from_user; | |
| this.text = data.text; | |
| this.imageSource = data.profile_image_url; | |
| this.id = data.id; | |
| }, | |
| toElement: function() { | |
| return new Element("div", { className: "tweet" }).insert( | |
| new Element("img", { src: this.imageSource }) | |
| ).insert( | |
| new Element("p").insert( | |
| new Element("a", { href: "http://twitter.com/" + this.fromUser }).update(this.fromUser) | |
| ).insert(" " + this.text + ", ").insert( | |
| new Element("a", { href: "http://twitter.com/" + this.fromUser + "/statuses/" + this.id }).update("#") | |
| ) | |
| ); | |
| } | |
| }); | |
| </script> | |
| <script type="text/javascript" charset="utf-8"> | |
| function callback(data) { | |
| data.results.each(function(result){ | |
| $('results').insert(new Tweet(result)); | |
| }); | |
| } | |
| </script> | |
| <script type="text/javascript" charset="utf-8" src="http://search.twitter.com/search.json?callback=callback&q=maxcameron"></script> | |
| <style type="text/css" media="screen"> | |
| body { | |
| font-family:sans-serif; | |
| font-size:14px; | |
| } | |
| .tweet { | |
| width:400px; | |
| height:45px; | |
| } | |
| .tweet img { | |
| float:left; | |
| margin-right:1em; | |
| } | |
| </style> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment