Final session document with referenced documents.

CCISEL · Feb 10, 2011 · 46580fa · 46580fa
1 parent b903fbd
commit 46580fa
Show file tree

Hide file tree

Showing 6 changed files with 283 additions and 0 deletions.
diff --git a/Images/NinjaBook.jpg b/Images/NinjaBook.jpg
diff --git a/Images/jQueryBook.jpg b/Images/jQueryBook.jpg
diff --git a/Session.html b/Session.html
@@ -2,6 +2,87 @@
 <html>
 <head>
     <title>PrePrompt: JQuery</title>
+    <link rel="stylesheet" type="text/css" href="session.css" />
+    <script type="text/javascript" src="./Scripts/jquery-1.4.1.js">
+        /// <reference path="./Scripts/jquery-1.4.1.js" />
+    </script>
+    <script type="text/javascript">
+        // Setting hyperlinks' common properties
+        $(function () {
+            $("a[href^='http://']")
+                .attr("target", "_blank")
+                .not("[href*='jsfiddle.net']")
+                .after(function () {
+                    return "<code> [" + $(this).attr("href") + "]</code>"
+            });
+        });
+
+		// Set up animation
+		$(function() {
+			$("#books").children("li").click(function(event) {
+				$(this).addClass('selected').siblings("li").removeClass('selected');
+				var vMargin = 50;
+				var imgHeight = $(window).height()-vMargin*2;
+				var imgWidth = imgHeight/1.3; // Maintain aspect ratio
+				var hMargin = ($(window).width()-imgWidth)/2;
+				var this$ = $(this);
+				$("#CoverPlaceHolder")
+					.empty()
+					.css({
+						top: $(window).height()/2,
+						left: $(window).width()/2,
+						right: $(window).width()/2+1,
+						bottom: $(window).height()/2+1
+					})
+					.show()
+					.animate({
+						top: vMargin,
+						left: hMargin,
+						bottom: vMargin,
+						right: hMargin
+					}, 'slow', function() {
+						$("<img src='./Images/" + $(event.currentTarget).attr('id') + ".jpg' />")
+						.css({ width:'100%', height: '100%'})
+						.appendTo($(this));
+				})
+				.click(function(event) { 
+					$(this).hide().empty();
+					this$.removeClass('selected');
+				});
+			})
+			.end()
+			.after("<div id='CoverPlaceHolder'></div>");
+		});
+
+    </script>
+
+    <link rel="stylesheet" type="text/css" href="toc.css" />
+    <script type="text/javascript" src="./toc.js"></script>
+    <script type="text/javascript">
+        // Add a simple TOC to the page
+        $(function () {
+            $("section > h1").toc();
+        });
+    </script>
+
+
+    <script type="text/javascript">
+        // Collapse sections
+        function activateCollapse()
+        {
+            $("section > h1").click(function() {
+                $(this).parent().children().not(this).toggle();
+                //$(this).siblings().toggle();
+            });
+
+            // Hide all sections
+            $("section").children().not("h1").fadeOut();
+        }
+
+        $(function () {
+            //activateCollapse();
+        });
+    </script>
 </head>
 <body>
 
@@ -94,6 +175,87 @@ <h2>Exercício: Etapa 0 (<a href="Solved/Etapa0_Solved.html">Soluções</a>)</h2
         </ol>
     </section>
 
+    <section>
+        <h1>jQuery: Introdução</h1>
+
+        <h2>Aspectos avançados de JavaScript</h2>
+        <ul>
+            <li>prototypes</li><li>closures</li> <li>call-context</li>
+        </ul>
+        <p>
+            <a href="http://jsfiddle.net/palbp/7S88x/"> JavaScript Demo (Start)</a> /
+            <a href="http://jsfiddle.net/palbp/884rK/"> JavaScript Demo (Complete)</a> (Resolução da Etapa 0, Alínea 5.)
+        </p>
+
+        <h2>Exercício: Etapa 1 (<a href="Solved/Etapa1_Solved.html">Solução</a>)</h2>
+        <ol>
+            <li>
+                Implemente as função <code>bindToContext</code> de forma a viabilizar a seguinte utilização:
+                <iframe style="width: 99%; height: 310px" src="http://jsfiddle.net/cguedes/HxXgh/embedded/js,result/"></iframe>
+            </li>
+            <li>Acrescente à solução anterior o suporte necessário para que, cada chamada a <code>console.log</code>, para além 
+            de produzir a escrita na consola, acrescente ao final do documento HTML um <code>div</code> contendo a string recebida como parâmetro.</li>
+        </ol>
+
+        <h2>O modelo de programação jQuery</h2>
+        <ul>
+            <li>Wrapped element set: selecção, navegação e manipulação.</li>
+            <li>Modelo de eventos.</li>
+        </ul>
+        <p>
+            <a href="http://jsfiddle.net/palbp/7S88x/"> jQuery: Demo 1 (Start)</a> :
+            <a href="http://jsfiddle.net/palbp/884rK/"> (Complete)</a> (Script da página actual)
+        </p>
+		<p> 
+            <a href=""> jQuery: Demo 2 (Start)</a> :
+            <a href=""> (Complete)</a> (Modelo de eventos ilustrando event bubbling)
+			<!--<p style="background-color:red; color:white"><b>Por fazer...</p>-->
+        </p>
+
+        <h2>Exercício: Etapa 2 (<a href="Solved/Etapa2_Solved.html">Solução</a>)</h2>
+        <ol>
+            <li>Implemente, usando jQuery, as funcionalidades das alíneas 2 e 3 do exercício da etapa 0.</li>
+        </ol>
+    </section>
+
+    <section>
+		<h1>jQuery: Animações</h1>
+        <h2>Animações existentes</h2>
+		<p> 
+            <a href=""> jQuery: Demo 3 (Start)</a> :
+            <a href=""> (Complete)</a> (Brincando com jsFiddle)
+			<!--<p style="background-color:red; color:white"><b>Por fazer...</p>-->
+        </p>
+
+		<h2>Animações personalizadas</h2>
+        <ul>
+            <li>função <code>animate</code>.</li>
+			<li>As queues de animação (fx).</li>
+        </ul>
+		<p> 
+            <a href=""> jQuery: Demo 4 (Start)</a> :
+            <a href=""> (Complete)</a> (Script desta página)
+        </p>
+    </section>
+
+    <section>
+		<h1>jQuery: Anatomia de extensões</h1>
+        <ul>
+            <li>poluição do espaço de nomes global</li>
+            <li>opções e valores por omissão</li>
+        </ul>
+
+        <h2>Estrutura típica de uma extensão jQuery</h2>
+        <iframe style="width: 99%; height: 500px" src="http://jsfiddle.net/cguedes/UBw6H/embedded/js,result/"></iframe>
+
+    </section>
+
+<!--
+    <section>
+        <h1>jQuery: Suporte AJAX</h1>
+        <p style="background-color:red; color:white"><b>Por fazer... (Não sei se vale a pena. É trivial!) </p>
+    </section>
+-->
 
 </body>
 </html>
diff --git a/session.css b/session.css
@@ -0,0 +1,46 @@
+body { 
+    line-height:1.4em;
+}
+
+section
+{
+    border: 1px solid #AFAFAF;
+    border-bottom: 2px solid #AFAFAF;
+    border-right: 2px solid #AFAFAF;
+    background-color: #FDFDFD;
+    padding: 5px;
+    margin-bottom:15px;
+}
+
+section h1 
+{ 
+    margin:0;
+    padding-top:6px;
+    padding-bottom:6px;
+    background-color: #FAFAFA;
+    border-bottom: 1px solid #E1E1E1;
+}
+
+ol li 
+{ 
+    margin-bottom: 1em;
+}
+
+#CoverPlaceHolder 
+{
+    display: none;
+    border: 1px solid grey;
+    background-color: lightgrey;
+    position: fixed;
+	cursor: pointer;
+}
+
+#books li 
+{
+	cursor: pointer;
+}
+
+#books li.selected
+{
+	background-color: lightgrey;
+}
diff --git a/toc.css b/toc.css
@@ -0,0 +1,25 @@
+.toc
+{
+    top: 5px;
+    right: 5px;
+    position: fixed;
+    display: inline-block;
+    width: 200px;
+    border: 2px solid #3E3E3E;
+    background-color: #E3E3E3;
+    padding: 10px;
+    font-size: 14px;
+}
+
+.toc div.title { 
+	font-size: 20px;
+	font-weight: bold;
+}
+
+a.toc-para
+{
+    font-size:14px;
+    margin-left:5px;
+    color: gray;
+    text-decoration:none;
+}
diff --git a/toc.js b/toc.js
@@ -0,0 +1,50 @@
+
+(function($) {
+
+	/*
+		TOC will be added to the top-right of the page with fixed position
+		
+		»»» Sample TOC HTML «««««««««««««««««««««««««««««««««««««««««««««««««««
+		<div class="toc">
+			<div class="title">TOC</div>
+			<ul>
+				<li><a href="#toc-1">TOC ITEM 1</a></li>
+				<li><a href="#toc-2">TOC ITEM 2</a></li>
+			</ul>
+		</div>
+
+		»»» Changes in selected elements  ««««««««««««««««««««««««««««««««««««««
+		Before (sample): 
+		    <h1>Apresentação</h1>
+		After:
+		    <h1 id="toc-1">Apresentação <a class='toc-para' href='#toc-1'>&para;</a></h1>
+
+		Note: We need to have caution with existing id value in selected element
+*/
+	$.fn.toc = function() {
+
+		var toc$ = $("<div class='toc'><div class='title'>TOC</div><ul></ul></div>");
+
+		this.each(function(i) 
+		{
+			var tocId = "toc-" + (i+1);
+			var tocText = $(this).text();
+
+			// Add TOC <li> elements to TOC UI
+			var li$ = $("<li><a></a></li>");
+			li$.find("a").attr("href", "#" + tocId).text(tocText);
+			toc$.find("ul").append(li$);
+
+			// Update selected toc elements UI
+			var para$ = $("<a>").addClass("toc-para").attr("href", "#" + tocId).html("&para;");
+			$(this).attr("id", tocId).append(para$);
+
+		});
+
+
+		// Add TOC UI to the page's body
+		$("body").append(toc$);
+		return toc$;	// ou this! (design option)
+	}
+
+})(jQuery);