Merge pull request #44 from robertbosse/master

API Doc: Updates for hashtag and vmouseover

Author: agcolom

entries/hashtag.xml

@@ -29,7 +29,7 @@
 			}); 
 		]]></code>
 	</pre>
-	<p>Click, and watch as the magic happens!
+	<p>iFrame source: <span id="hashtagIframeLink">example1.html</span>
 		<iframe id="hashtagIframe" src="/resources/hashtag/example1.html" style="width:100%;height:90px;border:0px"></iframe>
 	</p>
 	</longdesc>

entries/vmousecancel.xml

@@ -0,0 +1,47 @@
+<?xml version="1.0"?>
+<entry name="hashtag" type="event" return="jQuery">
+	<title>.vmousecancel()</title>
+	<desc>Virtualized mousecancel event handler.</desc>
+	<longdesc>
+		<p>The jQuery Mobile <code>.vmousecancel()</code> event handler is called whenever the system cancels a virtualized mouse event. This is fired when the user decides to scroll the contents of the screen.</p>
+		<xi:include href="../includes/core-extension-desc.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
+	</longdesc>
+	<added>1.0</added>
+	<signature>
+		<argument name="callback" type="Function" optional="true">
+			<desc>A function to invoke after the vmouseover event is fired.</desc>
+		</argument>
+	</signature>
+	<example>
+		<desc>A simple jQuery Mobile hashchange example.</desc>
+		<code><![CDATA[
+			$(function(){
+				// Bind an event to window.onhashchange that, when the hash changes, gets the
+				// hash and adds the class "selected" to any matching nav link.
+				$(window).hashchange( function(){
+				var hash = location.hash;
+
+				// Set the page title based on the hash.
+				document.title = 'The hash is ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';
+
+				// Iterate over all nav links, setting the "selected" class as-appropriate.
+				$('#nav a').each(function(){
+					var that = $(this);
+					that[ that.attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'selected' );
+					});
+				})
+				// Since the event is only triggered when the hash changes, we need to trigger
+				// the event now, to handle the hash the page may have loaded with.
+				$(window).hashchange();
+			}); 
+		]]></code>
+	</example>
+	<pre>
+		<code>
+			<p>Click, and watch as the magic happens!
+				<iframe src="/resources/hashtag/example1.html" style="width:100%;height:90px;border:0px"></iframe>
+			</p>
+		</code>
+	</pre>
+	<category slug="events"/>
+</entry>

entries/vmouseover.xml

@@ -1,9 +1,9 @@
 <?xml version="1.0"?>
-<entry name="hashtag" type="event" return="jQuery">
+<entry name="vmouseover" type="event" return="jQuery">
 	<title>.vmouseover()</title>
 	<desc>Virtualized mouseover event handler.</desc>
 	<longdesc>
-		<p>The jQuery Mobile <code>.vmouseover()</code> event handler simulates the "onmouseover" event handler on mobile devices.</p>
+		<p>The jQuery Mobile <code>.vmouseover()</code> event handler simulates the "onmouseover" event handler on mobile devices. This is fired on the initial touch of the screen on the device.</p>
 		<xi:include href="../includes/core-extension-desc.xml" xmlns:xi="http://www.w3.org/2003/XInclude"/>
 	</longdesc>
 	<added>1.0</added>
@@ -13,33 +13,17 @@
 		</argument>
 	</signature>
 	<example>
-		<desc>A simple jQuery Mobile hashchange example.</desc>
+		<desc>A simple jQuery Mobile vmouseover example.</desc>
 		<code><![CDATA[
-			$(function(){
-				// Bind an event to window.onhashchange that, when the hash changes, gets the
-				// hash and adds the class "selected" to any matching nav link.
-				$(window).hashchange( function(){
-				var hash = location.hash;
-
-				// Set the page title based on the hash.
-				document.title = 'The hash is ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';
-
-				// Iterate over all nav links, setting the "selected" class as-appropriate.
-				$('#nav a').each(function(){
-					var that = $(this);
-					that[ that.attr( 'href' ) === hash ? 'addClass' : 'removeClass' ]( 'selected' );
-					});
-				})
-				// Since the event is only triggered when the hash changes, we need to trigger
-				// the event now, to handle the hash the page may have loaded with.
-				$(window).hashchange();
-			}); 
+			$('p').vmouseover(function(){
+		      $(this).append('<span style="color:#00F;">Mouse Over.</span>');
+		    });
 		]]></code>
 	</example>
 	<pre>
 		<code>
 			<p>Click, and watch as the magic happens!
-				<iframe src="/resources/hashtag/example1.html" style="width:100%;height:90px;border:0px"></iframe>
+				<iframe src="/resources/vmouseover/example1.html" style="width:100%;height:90px;border:0px"></iframe>
 			</p>
 		</code>
 	</pre>

resources/hashtag/example1.html

@@ -72,6 +72,7 @@
             // To change src attribute of parent iframe element
             $('.hashExLink').on('click', function() { 
                 window.parent.document.getElementById( "hashtagIframe" ).src = "/resources/hashtag/example1.html" + $(this).attr( "href" );
+                window.parent.document.getElementById( "hashtagIframeLink" ).innerHTML = "example1.html" + $(this).attr( "href" );
             });
         }); 
     </script>

resources/vmouseover/example1.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>hashtag demo</title>
+    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css">
+    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
+    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
+</head>
+<body>
+    <p>Touch here to see what happens.</p>
+    <script>
+        $(function(){
+          $('p').vmouseover(function(){
+            $(this).append('<span style="color:#00F;">vmouseover fired.</span>');
+          });
+        }); 
+    </script>
+</body>
+</html>