diff options
Diffstat (limited to 'demos/quickstart/protected/pages/Advanced/Scripts2.page')
| -rw-r--r-- | demos/quickstart/protected/pages/Advanced/Scripts2.page | 144 |
1 files changed, 72 insertions, 72 deletions
diff --git a/demos/quickstart/protected/pages/Advanced/Scripts2.page b/demos/quickstart/protected/pages/Advanced/Scripts2.page index 6ee6a5d8..2c9ce220 100644 --- a/demos/quickstart/protected/pages/Advanced/Scripts2.page +++ b/demos/quickstart/protected/pages/Advanced/Scripts2.page @@ -9,13 +9,13 @@ Event.observe(element, name, observer, [useCapture]);
</com:TTextHighlighter>
-<p>Assuming for a moment that we want to observe when a link was clicked,
+<p>Assuming for a moment that we want to observe when a link was clicked,
we could do the following:</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
// <a id="clicker" href="http://foo.com">Click me</a>
Event.observe('clicker', 'click', function(event)
-{
+{
alert('clicked!');
});
</com:TTextHighlighter>
@@ -24,7 +24,7 @@ Event.observe('clicker', 'click', function(event) <com:TTextHighlighter Language="javascript" CssClass="source">
Event.observe('clicker', 'click', function(event)
-{
+{
alert(Event.element(event));
});
</com:TTextHighlighter>
@@ -35,8 +35,8 @@ Event.observe('clicker', 'click', function(event) <com:TTextHighlighter Language="javascript" CssClass="source">
Event.observe(document, 'keypress', function(event)
-{
- if(Event.keyCode(event) == Event.KEY_TAB)
+{
+ if(Event.keyCode(event) == Event.KEY_TAB)
alert('Tab Pressed');
});
</com:TTextHighlighter>
@@ -44,37 +44,37 @@ Event.observe(document, 'keypress', function(event) <p>And lets say we wanted to keep track of what has been typed :</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
-Event.observe('search', 'keypress', function(event)
-{
+Event.observe('search', 'keypress', function(event)
+{
Element.update('search-results', $F(Event.element(event)));
});
</com:TTextHighlighter>
-<p>Prototype defines properties inside the event object for some
-of the more common keys, so feel free to dig around in Prototype to
+<p>Prototype defines properties inside the event object for some
+of the more common keys, so feel free to dig around in Prototype to
see which ones those are.</p>
-<p>A final note on keypress events; If you'd like to detect a
+<p>A final note on keypress events; If you'd like to detect a
left click you can use <tt>Event.isLeftClick(event)</tt>.</p>
<h2 id="6704">Getting the coordinates of the mouse pointer</h2>
-<p>Drag and drop, dynamic element resizing, games, and
-much more all require the ability to track the X and Y location of
-the mouse. Prototype makes this fairly simple. The code below tracks
-the X and Y position of the mouse and spits out those values into
+<p>Drag and drop, dynamic element resizing, games, and
+much more all require the ability to track the X and Y location of
+the mouse. Prototype makes this fairly simple. The code below tracks
+the X and Y position of the mouse and spits out those values into
an input box named mouse.</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
Event.observe(document, 'mousemove', function(event)
{
- $('mouse').value = "X: " + Event.pointerX(event) +
+ $('mouse').value = "X: " + Event.pointerX(event) +
"px Y: " + Event.pointerY(event) + "px";
});
</com:TTextHighlighter>
-<p>If we wanted to observe the mouse location when it was
-hovering over a certain element, we'd just change the document argument to
+<p>If we wanted to observe the mouse location when it was
+hovering over a certain element, we'd just change the document argument to
the id or element that was relevant.</p>
<h2 id="6705">Stopping Propagation</h2>
@@ -83,33 +83,33 @@ the id or element that was relevant.</p> <h2 id="6706">Events, Binding, and Objects</h2>
-<p>Everything has been fairly straight forward so far, but things
-start getting a little tricker when you need to work with events in
-and object-oriented environment. You have to deal with binding and funky
+<p>Everything has been fairly straight forward so far, but things
+start getting a little trickier when you need to work with events in
+and object-oriented environment. You have to deal with binding and funky
looking syntax that might take a moment to get your head around.</p>
<p>Lets look at some code so you can get a better understanding of what I'm talking about.</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
EventDispenser = Class.create();
-EventDispenser.prototype =
+EventDispenser.prototype =
{
- initialize: function(list)
+ initialize: function(list)
{
this.list = list;
- // Observe clicks on our list items
- $$(this.list + " li").each(function(item)
+ // Observe clicks on our list items
+ $$(this.list + " li").each(function(item)
{
Event.observe(item, 'click', this.showTagName.bindEvent(this));
}.bind(this));
- // Observe when a key on the keyboard is pressed.
- // In the observer, we check for
+ // Observe when a key on the keyboard is pressed.
+ // In the observer, we check for
// the tab key and alert a message if it is pressed.
Event.observe(document, 'keypress', this.onKeyPress.bindEvent(this));
- // Observe our fake live search box. When a user types
- // something into the box, the observer will take that
+ // Observe our fake live search box. When a user types
+ // something into the box, the observer will take that
// value(-1) and update our search-results div with it.
Event.observe('search', 'keypress', this.onSearch.bindEvent(this));
@@ -117,65 +117,65 @@ EventDispenser.prototype = },
// Arbitrary functions to respond to events
- showTagName: function(event)
+ showTagName: function(event)
{
alert(Event.element(event).tagName);
},
- onKeyPress: function(event)
+ onKeyPress: function(event)
{
var code = event.keyCode;
- if(code == Event.KEY_TAB)
+ if(code == Event.KEY_TAB)
alert('Tab key was pressed');
},
- onSearch: function(event)
+ onSearch: function(event)
{
Element.update('search-results', $F(Event.element(event)));
},
- onMouseMove: function(event)
+ onMouseMove: function(event)
{
- $('mouse').value = "X: " + Event.pointerX(event) +
+ $('mouse').value = "X: " + Event.pointerX(event) +
"px Y: " + Event.pointerY(event) + "px";
}
}
</com:TTextHighlighter>
-<p>Whoa! What's going on here? Well, we've defined our a
-custom class <tt>EventDispenser</tt>. We're going to be using this class
-to setup events for our document. Most of this code is a
-rewrite of the code we looked at earlier except this time, we
+<p>Whoa! What's going on here? Well, we've defined our a
+custom class <tt>EventDispenser</tt>. We're going to be using this class
+to setup events for our document. Most of this code is a
+rewrite of the code we looked at earlier except this time, we
are working from inside an object.</p>
-<p>Looking at the <tt>initialize</tt> method, we can really see how
+<p>Looking at the <tt>initialize</tt> method, we can really see how
things are different now. Take a look at the code below:</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
-// Observe clicks on our list items
-$$(this.list + " li").each(function(item)
+// Observe clicks on our list items
+$$(this.list + " li").each(function(item)
{
Event.observe(item, 'click', this.showTagName.bindEvent(this));
}.bind(this));
</com:TTextHighlighter>
-<p>We've got iterators, binding and all sorts of stuff going on.
+<p>We've got iterators, binding and all sorts of stuff going on.
Lets break down what this chunk of code is doing.</p>
-<p>First we are hunting for a collection of elements based on
-it's Css selector. This uses the Prototype selector function <tt>$$()</tt>.
-After we've found the list items we are dealing with we send
+<p>First we are hunting for a collection of elements based on
+it's CSS selector. This uses the Prototype selector function <tt>$$()</tt>.
+After we've found the list items we are dealing with we send
those into an each iteration where we will add our observers.</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
Event.observe(item, 'click', this.showTagName.bindEvent(this));
</com:TTextHighlighter>
-<p>Now looking at the code above, you'll notice the <tt>bindEvent</tt> function.
-This takes the method before it <tt>showTagName</tt> and treats it as the
-method that will be triggered when, in this case,
+<p>Now looking at the code above, you'll notice the <tt>bindEvent</tt> function.
+This takes the method before it <tt>showTagName</tt> and treats it as the
+method that will be triggered when, in this case,
someone clicks one of our list items.</p>
-<p>You'll also notice we pass this as an argument to the <tt>bindEvent</tt> function.
-This simply allows us to reference the object in context <tt>EventDispenser</tt>
+<p>You'll also notice we pass this as an argument to the <tt>bindEvent</tt> function.
+This simply allows us to reference the object in context <tt>EventDispenser</tt>
inside our function <tt>showTagName(event)</tt>. If the <tt>showTagName</tt> function
requires additional parameters, you can attach them to the later parameters of <tt>bindEvent</tt>. For example</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
@@ -185,58 +185,58 @@ this.showTagName.bindEvent(this, param1, param2); showTime : function (event, param1, param2) { ... }
</com:TTextHighlighter>
-<p>Moving on, you'll see <tt>bind(this)</tt> attached to our iterator function.
-This really has nothing to do with events, it is only here to allow me to
-use <tt>this</tt> inside the iterator. If we didn't use <tt>bind(this)</tt>, I couldn't
+<p>Moving on, you'll see <tt>bind(this)</tt> attached to our iterator function.
+This really has nothing to do with events, it is only here to allow me to
+use <tt>this</tt> inside the iterator. If we did not use <tt>bind(this)</tt>, I could not
reference the method <tt>showTagName</tt> inside the iterator.</p>
-<p>Ok, so we'll move on to looking at our methods that actually get
+<p>Ok, so we'll move on to looking at our methods that actually get
called when an event occurs. Since we've been dealing with <tt>showTagName</tt>, lets look at it.</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
-showTagName: function(event)
+showTagName: function(event)
{
alert(Event.element(event).tagName);
}
</com:TTextHighlighter>
-<p>As you can see, this function accepts one argument--the event.
-In order for us to get the element which fired the event we need to
+<p>As you can see, this function accepts one argument--the event.
+In order for us to get the element which fired the event we need to
pass that argument to <tt>Event.element</tt>. Now we can manipulate it at will.</p>
-<p>This covers the most confusing parts of our code. The text above is also
-relevant to the remaining parts of our code. If there is anything about
+<p>This covers the most confusing parts of our code. The text above is also
+relevant to the remaining parts of our code. If there is anything about
this you don't understand, feel free to ask questions in the forum.</p>
<h2 id="6707">Removing Event Listeners</h2>
-<p>This one threw me for a loop the first time I tried to use it.
-I tried something similar to what I did in the <tt>Event.observe</tt>
-call with the exception of using <tt>stopObserving</tt>, but nothing seemed
+<p>This one threw me for a loop the first time I tried to use it.
+I tried something similar to what I did in the <tt>Event.observe</tt>
+call with the exception of using <tt>stopObserving</tt>, but nothing seemed
to change. In other words, the code below does <b>NOT</b> work.</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
-$$(this.list + " li").each(function(item)
+$$(this.list + " li").each(function(item)
{
Event.stopObserving(item, 'click', this.showTagName);
}.bind(this));
</com:TTextHighlighter>
-<p>What's the deal here? The reason this doesn't work is because there
+<p>What's the deal here? The reason this does not work is because there
is no pointer to the observer. This means that when we passed <tt>this.showTagName</tt>
-in the <tt>Event.observe</tt> method before hand, we passed it as an
-anonymous function. We can't reference an anonymous function
-because it simply doesn't have a pointer.</p>
+in the <tt>Event.observe</tt> method before hand, we passed it as an
+anonymous function. We can't reference an anonymous function
+because it simply does not have a pointer.</p>
-<p>So how do we get the job done? All we need to do is give the
-observing function a pointer, or the jargon free version: Set a variable
+<p>So how do we get the job done? All we need to do is give the
+observing function a pointer, or the jargon free version: Set a variable
that points to <tt>this.showTagName</tt>. Ok, lets change our code a bit.</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
this.showTagObserver = this.showTagName.bindEvent(this);
-// Observe clicks on our list items
-$$(this.list + " li").each(function(item)
+// Observe clicks on our list items
+$$(this.list + " li").each(function(item)
{
Event.observe(item, 'click', this.showTagObserver);
}.bind(this));
@@ -244,7 +244,7 @@ $$(this.list + " li").each(function(item) <p>Now we can remove the event listeners from our list like this:</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
-$$(this.list + " li").each(function(item)
+$$(this.list + " li").each(function(item)
{
Event.stopObserving(item, 'click', this.showTagObserver);
}.bind(this));
|