jQuery est de plus en plus important que nous le pensons, m

• Demo
• Agrandir
• Recharger
• New window

7. Collapsible panels

Let's combine the techniques from the previous examples and create a serie of collapsible panels (similar to the Gmail inbox panels). Notice I also used the same technique on Web Designer Wall comment list and Next2Friends message inbox? (view demo)

First line: hide all <div class="message_body"> after the first one.
Second line: hide all <li> element after the 5th
Third part: when the <p class="message_head"> is clicked, slideToggle the next <div class="message_body">
Fourth part: when the <a class="collpase_all_message"> button is clicked, slideUp all <div class="message_body">
Fifth part: when the <a class="show_all_message"> is clicked, hide this, show <a class="show_recent_only">, and slideDown all <li> after the fifth one.
Sixth part: when the <a class="show_recent_only"> is clicked, hide this, show <a class="show_all_message">, and slideUp all <li> after the 5th.

$(document).ready(function(){

	//hide message_body after the first one
	$(".message_list .message_body:gt(0)").hide();

	//hide message li after the 5th
	$(".message_list li:gt(4)").hide();

	//toggle message_body

	$(".message_head").click(function(){
	  $(this).next(".message_body").slideToggle(500)
	  return false;
	});

	//collapse all messages

	$(".collpase_all_message").click(function(){
	  $(".message_body").slideUp(500)
	  return false;
	});

	//show all messages
	$(".show_all_message").click(function(){
	  $(this).hide()
	  $(".show_recent_only").show()
	  $(".message_list li:gt(4)").slideDown()
	  return false;
	});

	//show recent messages only

	$(".show_recent_only").click(function(){
	  $(this).hide()
	  $(".show_all_message").show()
	  $(".message_list li:gt(4)").slideUp()
	  return false;
	});

});

8. Imitating the WordPress Comment Backend

I think most of you have probably seen the WordPress Ajax comment management backend. Well, let's imitate it with jQuery. In order to animate the background color, you need include the plugin. (view demo)

First line: will add "alt" class to even <div class="pane"> (to assign the grey background on every other <div >)
Second part: when <a class="btn-delete"> is clicked, alert a message, and then animate the backgroundColor and opacity of <div class="pane">
Third part: when <a class="btn-unapprove"> is clicked, first animate the backgroundColor of <div class="pane"> to yellow, then white, and addClass "spam"
Fourth part: when <a class="btn-approve"> is clicked, first animate the backgroundColor of <div class="pane"> to green, then white, and removeClass "spam"
Fifth part: when <a class="btn-spam"> is clicked, animate the backgroundColor to red and opacity ="hide"

//don't forget to include the Color Animations plugin

//<script type="text/javascript" src="/javascript/article/Essential_jQuery_Examples_for_Web_Designers/jquery.color.js"></script>

$(document).ready(function(){

	$(".pane:even").addClass("alt");

	$(".pane .btn-delete").click(function(){
	  alert("This comment will be deleted!");

	  $(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")
	  .animate({ opacity: "hide" }, "slow")
	  return false;
	});

	$(".pane .btn-unapprove").click(function(){
	  $(this).parents(".pane").animate({ backgroundColor: "#fff568" }, "fast")
	  .animate({ backgroundColor: "#ffffff" }, "slow")
	  .addClass("spam")
	  return false;
	});

	$(".pane .btn-approve").click(function(){
	  $(this).parents(".pane").animate({ backgroundColor: "#dafda5" }, "fast")
	  .animate({ backgroundColor: "#ffffff" }, "slow")
	  .removeClass("spam")
	  return false;
	});

	$(".pane .btn-spam").click(function(){
	  $(this).parents(".pane").animate({ backgroundColor: "#fbc7c7" }, "fast")
	  .animate({ opacity: "hide" }, "slow")
	  return false;
	});

});

9. Image replacement gallery

Suppose you have a portfolio where you want to showcase multi images without jumping to another page, you can load the JPG into the target element. (view demo)

First append an empty <em> to H2.

When a link within the <p class=thumbs> is clicked:
- store its href attribute into a variable "largePath"
- store its title attribute into a variable "largeAlt"
- replace the <img id="largeImg"> scr attribute with the variable "largePath" and replace the alt attribute with the variable "largeAlt"
- Set the em content (within the h2) with the variable largeAlt (plus the brackets)

$(document).ready(function(){

	$("h2").append('<em></em>')

	$(".thumbs a").click(function(){

	  var largePath = $(this).attr("href");
	  var largeAlt = $(this).attr("title");

	  $("#largeImg").attr({ src: largePath, alt: largeAlt });

	  $("h2 em").html(" (" + largeAlt + ")"); return false;
	});

});

10. Styling different link types

With most modern browsers, styling the link selector is very easy. For example, to style the link to .pdf file, you can simply use the following CSS rule: a[href $='.pdf'] { ... }. Unfortunately, IE 6 doesn't support this (this is another reason why we hate IE!). To get around this, you can do it with jQuery. (view demo)

The first three lines should be very straight foward. They just a CSS class to the <a> element according to their href attribute.

The second part will get all <a> element that does not have "http://www.webdesignerwall.com" and/or does not start with "#" in the href attribute, then addClass "external" and set target= "_blank".

$(document).ready(function(){

	$("a[@href$=pdf]").addClass("pdf");

	$("a[@href$=zip]").addClass("zip");

	$("a[@href$=psd]").addClass("psd");

	$("a:not([@href*=http://www.webdesignerwall.com])").not("[href^=#]")
	  .addClass("external")
	  .attr({ target: "_blank" });

});

• Code
• Imprimer

• Commentaire (0)
• Écrire

par Avant-première

Annuler réponse

Écrivez votre commentaire

Commentaires du client sera publié avant previwed
Donnez votre email réel pour obtenir des réponses notification ou commentaire sera supprimé

Votre nom *
Votre e-mail^g *
Votre site

Comment's Titre

J'assure à 100% je suis humain réel
Je le répète, je ne suis pas bot

• Sent (0)
• Nouveau