Holocron: jQuery Lab

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
https://developers.google.com/speed/libraries/#jquery
https://developers.google.com/speed/libraries/#jquery-ui

Ref: Derek Banas

jQuery

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery Tutorial</title>

<style type="text/css">
.highlight { background-color: yellow; }
</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
<div id="wrapper">

<h1>Random Stuff</h1>

<p id="p_one"><img src="ntt-logo.png" id="logo2" alt="NTT Logo" height="180" width="180">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <em>Aenean pretium</em>, ipsum quis ultrices aliquet, lacus urna ultrices odio, eu interdum tortor tortor quis ligula. <a href="#">Morbi finibus</a> auctor ipsum vel tempus. Nullam gravida leo ac iaculis pretium. <b>In pretium varius nisi</b>, quis tristique ipsum semper vitae. Mauris eu aliquet odio. Pellentesque tristique sem turpis, id gravida nunc consequat vel. <a href="#">Nullam nec condimentum magna</a>. Sed dignissim interdum risus ac mattis. In hac habitasse platea dictumst. Vivamus placerat tristique vestibulum. Pellentesque quis eleifend nisl. Quisque mollis aliquam enim eu ullamcorper.</p>
<p id="p_two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pretium, ipsum quis ultrices aliquet, lacus urna ultrices odio, eu interdum tortor tortor quis ligula. <a href="mailto:derekbanas@verizon.net">Morbi finibus</a> auctor ipsum vel tempus. Nullam gravida leo ac iaculis pretium. In pretium varius nisi, quis tristique ipsum semper vitae. Mauris eu aliquet odio. Pellentesque tristique sem turpis, id <a href="http://google.com">gravida nunc consequat</a> vel. Nullam nec condimentum magna. Sed dignissim interdum risus ac mattis. <a href="http://www.newthinktank.com/wordpress/PersonalityTest.pdf">In hac habitasse</a> platea dictumst. Vivamus placerat tristique vestibulum. Pellentesque quis eleifend nisl. Quisque mollis aliquam enim eu ullamcorper. <a href="http://www.newthinktank.com/wordpress/PersonalityTest.pdf">Otro Agregado por mi</a></p>
esto ya no esta en el link, pero visite <a href="http://jalbertomr.blogspot.mx/">enlace a holocron</a>

<p id="p_three">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <i>Aenean pretium,</i> ipsum quis ultrices aliquet, lacus urna ultrices odio, eu interdum tortor tortor quis ligula.</p>

<table id="tableData">
<caption>Baseball</caption>
<thead>
<tr>
<td colspan="4">Best Baseball Players</td>
</tr>
</thead>
<tfoot>
<tr><td colspan="4">* Hall of Fame</td></tr>
</tfoot>
<tbody>
<tr>
<td></td>
<td>Average</td>
<td>RBIs</td>
<td>Homeruns</td>
</tr>
<tr>
<td><a href="#">Hank Aaron*</a></td>
<td>.305</td>
<td>2297</td>
<td>755</td>
</tr>
<tr>
<td><a href="#">Babe Ruth*</a></td>
<td>.342</td>
<td>2214</td>
<td>714</td>
</tr>
<tr>
<td><a href="#">Barry Bonds</a></td>
<td>.298</td>
<td>1996</td>
<td>762</td>
</tr>
</tbody>
</table>

<h2 id="bestSelling">Best Selling Childrens Books</h2>

<ol id="oListTypes">
<li>Harry Potter
<ol id="oListIndent">
<li>and the Sorcerer's Stone</li>
<li>and the Half-Blood Prince</li>
<li>and the Chamber of Secrets</li>
<li>Prisoner of Azkaban</li>
<li name="best_book">and the Goblet of Fire</li>
<li>and the Order of the Phoenix</li>
<li>and the Deathly Hallows</li>
</ol>
</li>
<li>The Very Hungry Caterpillar</li>
</ol>

<input type="text" id="yourName" size="50">

<input type="text" id="listStuff" size="50"><br />

<h2 id="trackEvents">Tracking Events</h2>

Mouse Click : X : <input type="text" id="mClickXPos">
Y : <input type="text" id="mClickYPos"><br />

Mouse Move : X : <input type="text" id="mMoveXPos">
Y : <input type="text" id="mMoveYPos"><br />

Key Pressed : <input type="text" id="keyPressed"><br />

<span id="formEvent">Form Event</span> : <input type="text" id="inputFormEvent"><br /><br />

<img src="1.jpg" id="accident" alt="accident">

<div id="jsonData"></div>

<button type="button" id="getData">Get Data</button>

<script type="text/javascript">

// When the document is ready execute the JQuery
$("document").ready(function() {

//cambiar atributos
// # para ids . para clases
$("#wrapper").css("width", 500)
$("#wrapper").css("margin", "auto")
$("#logo2").css("float","left")
$("#p_two").css("color","purple")

//para pasar multiples argumentos
$("#p_two").css({
"background":"url('repeatBkgrnd.png') repeat-y",
"color":"gray"
})

//seleccionar elementos por tag
$("a").css("color","red")

//seleccionar tags solo dentro de otros tags, clases, ids
$("#tableData a").css("color","green")

//seleccionar un elemento a solo despues de un elemento em
$("em + a").css("color","orange")

//seleccionar elementos hijos dentro de elementos
$("p > em").css("color", "gray")

//seleccionar el tercer elemento en una lista
$("#oListIndent li:nth-child(3)").css("color","red")

//cambiar el contenido del elemento li con atributo name
$("li[name]").html('cambiado el html del li con atributo name')

//cambiar el valor de un input
$("input[type='text']#yourName").val("Beto")

//seleccionar elementos que contengan un valor (*=)
$("a[href*='google']").css("font-weight","bolder")

//seleccionar imagen cuyo alt empieze con NTT y cambiar atributos
$("img[alt^='NTT']").css({
"border-color":"black",
"border-width":"1px",
"border-style":"solid"
})

//seleccionar elemento(s) a cuyo href empiece con ...
$("a[href^='http://g']").css("color","cyan");

//seleccionar elemento(s) a cuyo href empiece con ...
$("a[href^='mailto:']").css("color","yellow");

//seleccionar elemento(s) img cuya alt empiece con NTT cambiando varios atributos
$("img[alt^='NTT']").width(150).height(150);

//seleccionar elemento(s) cuya href termine con pdf y cambiar color
$("a[href$='pdf']").css("color", "rgb(247, 191, 190)");

//seleccionar renglones de tabla even (0,2,4) y odd (1,3,5) cambiar su color
$("#tableData tr:even").css("background-color", "#FFFDD0" );
$("#tableData tr:odd").css("background-color", "#F0F8FF");

//seleccionar el primer elemento match de tabla
$("#tableData tr:first").css({
"background-color": "#001A57",
"color": "white"
});

$("#tableData tr:last").css({
"background-color" : "#FFC0DB",
"color": "white"
});

//seleccionar elementos que no continene la palabra and en ellos
$("#oListTypes li:not(:contains(and))").css("color","orange");

//selectiona elementos a que contengan la palabra holocron
$("a:contains(holocron)").css("color", "blue");

//seleccionar elementos (p) que contenga otro elemento (i)
$("p:has(i)").hide();

//alert($("p:has(i)").html());

$("p:has(i)").html("<i>elemento i</i>").show();

$("p:has(i)").append(" agregado al final con append ");
$("p:has(i)").prepend(" agregado al inicio con prepend ");

$("p:has(i)").before("<p id='before_p'>un parrafo antes de p:has(i) </p>");
$("p:has(i)").after("<p id='after_p'>un parrefo despues de p:has(i) </p>");

$("#after_p").click(function(){
$(this).remove();
});

$("#before_p").click(function(){
$(this).replaceWith("<p>Este parrafo remplaza al anterior \' esta comita se puso con \\'</p>")
})

//hacer una tarea por cada elemento seleccionado
$("#oListIndent li").each(function(index){ //index no es necesario
//ir acumulando el contenido del input listStuff
var inputListStuff = $("#listStuff").val();

// agrega a listStuff el text del elemento li en turno
$("#listStuff").val(inputListStuff + ', ' + $(this).text());
})

$("#oListIndent li").addClass("Harry_PotterClass");

$(".Harry_PotterClass").css("color","#36454F");

$("#oListIndent li").click(function(){
$(this).toggleClass("highlight");

var bgcolor = $(this).css("background-color");

$("input[type='text']#yourName").val(bgcolor);
});

$("#logo2").click(function() {
var imgName = $(this).attr("src");
//alert(imgName);
$("input[type='text']#yourName").val(imgName);
})

$("#logo2").mouseover(function(){
$("#logo2").attr("src","ntt-logo-horz.png");
});

$("#logo2").mouseout(function(){
$("#logo2").attr("src","ntt-logo.png");
})

$("#logo2").dblclick(function(){
$(this).attr("src","ntt-logo-plastic.png");
});

$("h2").hover(function(){
var origColor = $(this).attr("color");
$(this).css("color","green");
}, function(){
$(this).css("color","black");
});

$(document).click(function(e){
$("#mClickXPos").val(e.pageX);
$("#mClickYPos").val(e.pageY);
});

$(document).mousemove(function(e){
$("#mMoveXPos").val(e.screenX);
$("#mMoveYPos").val(e.screenY);
});

$(document).keypress(function(e){
$("#keyPressed").val(String.fromCharCode(e.which));
});

$("#inputFormEvent").blur(function(){
$("#formEvent").text("Input Form Event desenfocado");
});

$("#inputFormEvent").change(function(){
$("#formEvent").text("Input Form Event change");
});

$("#inputFormEvent").focusin(function(){
$("#formEvent").text("Input Form Event Enfocado");
});

$("#inputFormEvent").select(function(){
$("#formEvent").text("Input Form Event Seleccionada");
});

function ShowWhatTouched(e){
alert(e.data.message);
}

var bestSellMsg = { message: "Best Selling Tocado"};
var trackEvents = { message: "Track Events Tocado"};

//$("#bestSelling").on("mouseover", bestSellMsg, ShowWhatTouched);
//$("#trackEvents").on("mouseover", trackEvents, ShowWhatTouched);

var accidentImages = ["1.jpg","2.jpg","3.jpg","4.jpg"]
var indexImg = 0;

$("#accident").click(function(){
var imagen = accidentImages[indexImg];

indexImg++;
if (indexImg > 3 ){ indexImg = 0}

$(this).attr("src", imagen);
})

/*
$("#p_one").click(function(){
$(this).hide();
});

$("#p_two").click(function(){
$(this).fadeOut(2000);

$("#p_one").fadeToggle(2000);
});

$("td:contains('Bonds')").click( function(){
$("tr:has(td:contains('Bonds'))").slideUp(1000);
});

$("td:contains('Hall')").click( function(){
$("tr:has(td:contains('Bonds'))").slideDown(1000);
});

*/
$("#p_one").click(function(){
$(this).css("position", "relative");

$("#p_one").animate({
left: 300,
opacity: .5,
'font-size': "22px",
width: 300
}, 2000, "easeInQuad", function(){alert("Hecho!");});
});

}); 

</script>

</div> 


</body>
</html>

jQueryUI

<!DOCTYPE HTML>

<head>

<title>JQuery Tutorial</title>

.highlight { background-color: yellow; }

#wrapper {

width: 500px;

margin: auto;

}

.ui-menu{

width: 15em;

}

#cartDiv{

border-style: solid;

border-width: 5px;

}

</style>

<body>

<ul>

<li><a href="JavaScript:void(0)">Angel</a></li>

<li><a href="JavaScript:void(0)">Cyclops</a></li>

<li><a href="JavaScript:void(0)">Beast</a></li>

<li><a href="JavaScript:void(0)">Marvel Girl</a></li>

<li><a href="JavaScript:void(0)">Iceman</a></li>

</ul>

</li>

<li><a href="JavaScript:void(0)">Defenders</a>

<ul>

<li><a href="JavaScript:void(0)">Doctor Strange</a></li>

<li><a href="JavaScript:void(0)">Namor</a></li>

<li><a href="JavaScript:void(0)">Silver Surfer</a></li>

</ul>

</li>

</ul><br />

<h4>Batman</h4>

<div>

Batman is a fictional superhero appearing in American comic books published by DC Comics. The character was created by artist Bob Kane and writer Bill Finger, and first appeared in Detective Comics #27 (May 1939). Originally named "the Bat-Man", the character is also referred to by such epithets as the "Caped Crusader",the "Dark Knight", and the "World's Greatest Detective".

</div>

<h4>Flash</h4>

<div>

The Flash is a fictional superhero appearing in American comic books published by DC Comics. Created by writer Gardner Fox and artist Harry Lampert, the original Flash first appeared in Flash Comics #1 (January 1940).

</div>

<h4>Superman</h4>

<div>

Superman is a fictional superhero appearing in American comic books published by DC Comics. The character is considered an American cultural icon. The Superman character was created by writer Jerry Siegel and artist Joe Shuster in 1933; the character was sold to Detective Comics, Inc. (later DC Comics) in 1938. Superman first appeared in Action Comics #1 (June 1938) and subsequently appeared in various radio serials, newspaper strips, television programs, films, and video games. With the character's success, Superman helped to create the superhero genre and establish its primacy within the American comic book.

</div>

</div><br />

<ul>

<li><a href="#spiderman">Spiderman</a></li>

</ul>

Iron Man (Tony Stark) is a fictional superhero appearing in American comic books published by Marvel Comics, as well as its associated media. The character was created by writer and editor Stan Lee, developed by scripter Larry Lieber, and designed by artists Don Heck and Jack Kirby. He made his first appearance in Tales of Suspense #39 (cover dated March 1963).

</div>

The Hulk is a fictional superhero appearing in American comic books published by Marvel Comics. The character was created by Stan Lee and Jack Kirby, and first appeared in The Incredible Hulk #1 (May 1962). Throughout his comic book appearances, the Hulk is portrayed as a large green humanoid that possesses immense superhuman strength and great invulnerability, attributes that grow more potent the angrier he becomes. Hulk is the alter ego of Bruce Banner, a socially withdrawn and emotionally reserved physicist who physically transforms into the Hulk under emotional stress and other specific circumstances at will or against it; these involuntary transformations lead to many complications in Banner's life.

</div>

Thor is a fictional superhero that appears in American comic books published by Marvel Comics. The character, based on the Norse mythological deity of the same name, is the Asgardian god of thunder and possesses the enchanted hammer Mjolnir, which grants him the ability of flight and weather manipulation amongst his other superhuman attributes.

</div>

Spider-Man is a fictional superhero appearing in American comic books published by Marvel Comics existing in its shared universe. The character was created by writer-editor Stan Lee and writer-artist Steve Ditko, and first appeared in the anthology comic book Amazing Fantasy #15 (Aug. 1962) in the Silver Age of Comic Books. Lee and Ditko conceived the character as an orphan being raised by his Aunt May and Uncle Ben, and as a teenager, having to deal with the normal struggles of adolescence in addition to those of a costumed crime-fighter.

</div>

</div><br />

<p>A random dialog box that contains important information</p>

</div>

<a href="JavaScript:void(0)" id="openDialog" title="Open Dialog Box">Open Dialog</a><br /><br />

Present:<br />

<option>Video Game</option>

<option>Money</option>

</select><br />

Birthday:<br />

<p class="numOfPresents">Number of Presents</p>

<legend>Number of Presents</legend>

</div>

</fieldset>

<br />

</div>

</form>

$(document).ready(function() {

$("#shMenu").menu({

position: {

my: "center top",

at: "center bottom"

}

});

$("#accordion").accordion({

animate: 300,

active: 0,

collapsible: true,

event: "click",

heightStyle: "content"

});

$("#shTabs").tabs({

event: "click",

show: "fadeIn",

hide: "fadeOut",

active: 3,

collapsible: true,

heightStyle: "content" /*"auto"*/

});

$("#customDialog").dialog({

draggable: true,

resizeable: false,

height: 300,

width: 300,

modal: true,

position: {

my: 'center top',

at: 'center bottom',

of: '#openDialog'

show: 300,

hide: 300,

autoOpen: false,

buttons: {

"OK": function(){

$("#openDialog").html("Se presiono OK");

$(this).dialog("close");

"CANCELAR": function(){

$("#openDialog").html("Se presiono CANCELAR");

$(this).dialog("close");

}

});

$("#openDialog").click(function(){

$("#customDialog").dialog("open");

});

//$([title]).toolTip();

$("#present").selectmenu({

width: 300

});

$("#birthday").datepicker({

changeMonth: true,

changeYear: true,

dateFormat: "MM dd, yy",

numberOfMonths: 1,

maxDate: 365,

minDate: -3650

});

$("#radioPresents").buttonset();

$("#randButton").button();

$("#sampForm").draggable();

$("#toy1").draggable();

$("#toy2").draggable();

$("#toy3").draggable();

$("#cartDiv").droppable({

activeClass: "highlight",

hoverClass: "hoverDroppable",

drop: function(event, ui){

ui.helper.hide("hide");

var itemAlt = $(ui.draggable).attr("src");

alert("En el carrito: " + itemAlt);

accept: ".toy",

disabled: false,

activate: function(event, ui){

$("#cartMsg").remove();

$(this).append("<span id='cartMsg'>Pon el juguete aqui!</span>")

deactivate: function(event, ui){

$("#cartMsg").remove();

$(this).append("<span id='cartMsg'>Se que lo quieres!</span>")

over: function(event, ui){

$("#cartMsg").remove();

$(this).append("<span id='cartMsg'>Sueltalo!</span>")

out: function(event, ui){

$("#cartMsg").remove();

$(this).append("<span id='cartMsg'>Nooooooo</span>")

}

});

}); // End of JQuery

</script>

</div>

</body>

</html>

https://github.com/jalbertomr/jQueryLab.git

Holocron

Navegación

lunes, 2 de abril de 2018

jQuery Lab

No hay comentarios:

Publicar un comentario