Permalink
Browse files

Final session document with referenced documents.

  • Loading branch information...
1 parent b903fbd commit 46580faa5f7f69be1f3afd88dade74ad420ff538 @cguedes cguedes committed Feb 10, 2011
Showing with 283 additions and 0 deletions.
  1. BIN Images/NinjaBook.jpg
  2. BIN Images/jQueryBook.jpg
  3. +162 −0 Session.html
  4. +46 −0 session.css
  5. +25 −0 toc.css
  6. +50 −0 toc.js
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -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 @@
</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>
View
@@ -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;
+}
View
25 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;
+}
View
50 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);

0 comments on commit 46580fa

Please sign in to comment.