miércoles, 23 de junio de 2010

jQuery aprendiendo a manipular elementos y manejar conceptos basico - segunda parte

html: Podemos recuperar o reemplazar el contenido HTML de un elemento.


var variahtml =$("#idJQuery").html();
$("p").html("<a href="http://www.google.es">Google</a>");


text: Es muy parecido a html() pero este hace caso omiso al las etiquetas HTML.


$("p").text("<a href="http://www.google.es">Google</a>");


wrap: Inserta una estructura HTML en el interior de un elemento (envolver).

$("span").wrap("<div><div><p><em><b></b></em></p></div></div>");


unwrap: Remueve una estructura HTML del elemento

$("span").unwrap();
o
$("span").unwrap("<b/>");


wrapAll: Envuelve a todos los elementos juntos.


$("li").wrapAll("<div class="estilo1"></div>");



wrapInner:Envuelve una estructura HTML alrededor del contenido de cada elemento en el conjunto de los elementos coincidentes.


$("li").wrapInner("<div class="estilo1"></div>");


replaceWith: reemplaza los tags HTML de los elementos por el contenido que pasemos.


$("p").replaceWith("<div>"+ $("p").text()+"</div>");


replaceAll: Localiza todos los elementos en primera instancia. Esta función realiza la misma acción que replaceWith pero actua por cada elemento independientemente.


$("p").replaceAll("<div>"+ $("p").text()+"</div>");


clone: Simplemente duplica los elementos.


$("#idJQuery").clone().prependTo("p");


empty: Vacia el contenido de los elementos.

$("#idJQuery").empty();


remove: Elimina los elementos.


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

jQuery aprendiendo a manipular elementos y manejar conceptos basico

Vamos a ver como manipular elementos en JQuery asi que ahora a ver sus funciones

append: Lo utilizamos para añadir un codigo HTML al elemento que nos interese


$("li").append("Manipular el elemento ");
$("#idJQuery").append("con estos añadidos");


appendTo: Se usa para seleccionar un elemento y enviar sus caracteristicas a otro elemento que queremos hacer un añadido


$("li").appendTo("#parraf");


prepend:Basicamente realiza la misma accion que append, con la diferencia que este realiza la accion al principio del elemento.


$("li").prepend("Este texto que ira por delante ");


prependTo: Ahora va elemento seleccionado delante del elementoque hemos puesto en segundo lugar.


$("li").prependTo("p");


after: Inserta contenido especificado por el elemento despues de cada elemento


$("parraf").after("li");
$("p").after(" despues");


insertAfter: inserta el elemento despues del elemento al que se le hace referencia.


$('<h3>contenido</h3>').insertAfter('.clase');


before: Coloca el elemento antes del existente.


$('.clase').before('<p>Texto</p>');


insertBefore: Posiciona elementos antes del indicado.

$('<h3>contenido</h3>').insertBefore('.clase');

Como indexar un blogger y darlo de alta google

Para indexar un blogger y darlo de alta para que aparezca en el maravilloso buscador Google deberemos utilizar la Herramienta para webmasters que nos permitira subir el sitemap y este haga su funcion de mostrar todas nuestras paginas al buscador.

¿Pero como añadir un sitemap si blogger no lo usa?

Es simple podemos usar nuestro Feed como sitemap, el feed se encuentra en la dirección http://jquery total.blogspot.com/atom.xml

Bien llegados hasta aqui deberemos irnos a las herramientas para webmaster añadir nuestro sitio y en la informacion del sitio clickamos en sitemap hay insertaremos nuestra url y listo.

JQuery aprendiendo $.extend

Esta función coge los valores de dos variables con parámetros y los combina, siempre cogiendo como bueno el ultimo parámetro con valor y si no cogerá el valor del parámetro de la primera variable. $.extend puede ser mas conocido a la hora de crear plugins


var comentario = {
autor : 'megatron',
email : 'email@vivalared.com',
sitio_web : 'http://www.vivalared.com',
contenido : 'Me gusto mucho la pelicula en 3D',
post : 1099,
notificar_actualizaciones : 1,
fecha : '2010-05-21'
}

var actualizar_comentario = {
email : 'nuevomail@vivalared.com',
notificar_actualizaciones : 0,
autor : 'megatron',
fecha : '2010-05-28'
}

var nuevo_comentario = $.extend(comentario, actualizar_comentario);
console.info(nuevo_comentario.email);


Definir nuestros argumentos predeterminados como un objeto, y luego extenderlo con las propiedades


function mi_funcion(args){
opciones = jQuery.extend({
clase_activa : 'active',
animacion : 'slide',
duracion : 150,
idioma : 'es',
mensaje : 'bazinga!'
}, args);
}

//Y luego, al llamar a la función...

mi_funcion({ duracion: 200, idioma : 'en', mensaje : 'lorem ipsum' });

console.info(opciones.mensaje);

miércoles, 16 de junio de 2010

Plugin para cookies con JQuery

Esta es una biblioteca Javascript para acceder y manipular cookies HTTP del navegador web. Se puede obtener un o una lista de cookies, cookies, borrar las cookies.

cookie.js

/*jslint browser: true */ /*global jQuery: true */ /** * jQuery Cookie plugin * * Copyright (c) 2010 Klaus Hartl (stilbuero.de) * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * */ // TODO JsDoc /** * Create a cookie with the given key and value and other optional parameters. * * @example $.cookie('the_cookie', 'the_value'); * @desc Set the value of a cookie. * @example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true }); * @desc Create a cookie with all available options. * @example $.cookie('the_cookie', 'the_value'); * @desc Create a session cookie. * @example $.cookie('the_cookie', null); * @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain * used when the cookie was set. * * @param String key The key of the cookie. * @param String value The value of the cookie. * @param Object options An object literal containing key/value pairs to provide optional cookie attributes. * @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object. * If a negative value is specified (e.g. a date in the past), the cookie will be deleted. * If set to null or omitted, the cookie will be a session cookie and will not be retained * when the the browser exits. * @option String path The value of the path atribute of the cookie (default: path of page that created the cookie). * @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie). * @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will * require a secure protocol (like HTTPS). * @type undefined * * @name $.cookie * @cat Plugins/Cookie * @author Klaus Hartl/klaus.hartl@stilbuero.de */ /** * Get the value of a cookie with the given key. * * @example $.cookie('the_cookie'); * @desc Get the value of a cookie. * * @param String key The key of the cookie. * @return The value of the cookie. * @type String * * @name $.cookie * @cat Plugins/Cookie * @author Klaus Hartl/klaus.hartl@stilbuero.de */



jQuery.cookie = function (key, value, options) {

// key and value given, set cookie...
if (arguments.length > 1 && (value === null || typeof value !== "object")) {
options = jQuery.extend({}, options);

if (value === null) {
options.expires = -1;
}

if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}

return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? String(value) : encodeURIComponent(String(value)),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}

// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};


funciones js

$(function() {
var COOKIE_NAME = 'test_cookie';
var ADDITIONAL_COOKIE_NAME = 'additional';
var options = { path: '/', expires: 10 };

// set cookie by number of days
$('a').eq(0).click(function() {
$.cookie(COOKIE_NAME, 'test', options);
return false;
});

// set cookie by date
$('a').eq(1).click(function() {
var date = new Date();
date.setTime(date.getTime() + (3 * 24 * 60 * 60 * 1000));
$.cookie(COOKIE_NAME, 'test', { path: '/', expires: date });
return false;
});

// get cookie
$('a').eq(2).click(function() {
alert($.cookie(COOKIE_NAME));
return false;
});

// delete cookie
$('a').eq(3).click(function() {
$.cookie(COOKIE_NAME, null, options);
return false;
});

// set a second cookie
$('a').eq(4).click(function() {
$.cookie(ADDITIONAL_COOKIE_NAME, 'äöüß;foo=bar', { expires: 10 });
return false;
});

// get second cookie
$('a').eq(5).click(function() {
alert($.cookie(ADDITIONAL_COOKIE_NAME));
return false;
});

// delete second cookie
$('a').eq(6).click(function() {
$.cookie(ADDITIONAL_COOKIE_NAME, null);
return false;
});
});


html

<p> <a href="#">Set cookie (by number of days == 10)</a><br>
<a href="#">Set cookie (by date == 3 days)</a><br>
<a href="#">Get cookie</a><br>
<a href="#">Delete cookie</a><br>
<a href="#">Set additional cookie</a><br>
<a href="#">Get additional cookie</a><br>
<a href="#">Delete additional cookie</a></p>

viernes, 11 de junio de 2010

Espalnds cerrado

Han cerrado una de las webs mas importantes de descarga de juegos en todas sus versiones, (WII, PSP, Zone), no se que problema tienen con los enlaces, ya que segun todos los jueces poner enlaces es del todo legal, mientras no alojes en tu servidor los archivos, pero claro, cuando te enfrentas a segun que poderoso enemigo las leyes y las sentencias favorables parece que dejan de ser importantes.

via: VivalaRed

Crea un menú de acciones deplegable conjQuery

Tutorial en que se crea un menú de acciones con jQuery tiene ademas casillas de verificación que aparece cuando se seleccionan. Esta puede ser una propiedad de interfaz de usuario muy útil ya que no obligan al usuario a desplazarse hasta el lugar donde las acciones son - que acaba de aparecer siempre que el usuario los necesite.

http://tympanus.net/codrops/2010/05/31/sliding-checkbox-actions-menu-with-jquery/