1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="author" content="Daniel Hagnoul">
<title>Forum jQuery</title>
<link href='http://fonts.googleapis.com/css?family=Sofia|Ubuntu:400|Kreon'>
<link rel="stylesheet" href="http://danielhagnoul.developpez.com/styles/dvjhRemBase.css">
<style>
.hyphens { -moz-hyphens:auto; -webkit-hyphens:auto; -ms-hyphens:auto; hyphens:auto; }
article { display:table-cell; text-align:justify; border:0.1rem dotted grey; }
.table1, .table2 { border-collapse:separate; border-spacing:3rem; }
.ligne { display:table-row; }
.table1 .ligne { height:25rem; }
.table1 article { width:40rem; vertical-align:top; }
/* TEST */
#example { margin: 1.2rem; padding: 0.6rem; width: 10rem; height: 10rem; border:0.1rem dotted red; }
#example span { color: blue; }
</style>
</head>
<body>
<h1>Forum jQuery</h1>
<h2>Titre 2</h2>
<section class="conteneur">
<section class="table1">
<section>
<article>
<div class="test" id="example">Le texte de la <span>division</span> incluse dans l'article.</div>
</article>
<article class="test">
<p>Un texte de contrôle.</p>
</article>
</section>
</section>
</section>
<footer itemscope itemtype="http://danielhagnoul.developpez.com/">
<time datetime="2012-12-09T20:25:46.702+01:00" pubdate>2012-12-09T20:25:46.702+01:00</time>
<span itemprop="name">Daniel Hagnoul</span>
<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
<a href="http://danielhagnoul.developpez.com/" itemprop="url">Mon cahier dexercices</a>
<a href="http://javascript.developpez.com/faq/jquery/" itemprop="url">FAQ</a>
<a href="http://javascript.developpez.com/cours/?page=frameworks#jquery" itemprop="url">Tutoriels</a>
</footer>
<script src="http://danielhagnoul.developpez.com/lib/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/color/jquery.color-2.1.1.min.js"></script>
<script src="http://danielhagnoul.developpez.com/lib/dvjh/base.js"></script>
<script>
"use strict";
/*
* Cliquez à l'extérieur !
* Special event clickOutside
*
* Daniel Hagnoul
* Code v1.0.0 2012-12-09
*
* L'événement requiert la transmission de l'attribut
* identity dans l'argument data du gestionnaire
* d'événement.
*
* L'attribut identity doit contenir un sélecteur
* jQuery valide correspondant à un ou des éléments
* du DOM.
*
* Exemple : "article", ".test1" ou "#example".
*
* L'événement ne se déclenche pas si
* le clic se produit dans un élément du DOM qui
* possède ce sélecteur ou si l'un de ses ascendants
* possèdent ce sélecteur.
*
* Pour un sélecteur non spécifique, comme une
* classe ou un tag, cela peut être vu comme un
* inconvénient, mais c'est aussi un comportement
* souhaitable dans de nombreux cas.
*
* Usage, exemple : $( document ).on( "clickOutside",
* { "identity" : "#monID" }, function( event ){...});
*/
( function( $ ){
var clickOutsideHandler = function( event ){
var identity = event.data.identity || "";
if ( $( event.target ).closest( identity )[ 0 ] === undefined ){
event.type = "clickOutside";
$.event.handle.apply( this, arguments );
}
};
$.event.special.clickOutside = {
setup : function( data, namespaces ){
jQuery( this ).on( "click", data, clickOutsideHandler );
},
teardown : function( namespaces ){
jQuery( this ).off( "click", clickOutsideHandler );
}
};
})( jQuery );
$(function(){
/*
* Selon l'endroit où l'on clique, un à trois effets
* peuvent se produiront.
*/
/*
* Cas : $( "section.conteneur" ) et { "identity" : "div" }.
*
* Comme il n'y a qu'une division dans le code de test, un clic
* dans le sélecteur, mais à l'extérieur de la division agit sur
* la division.
*/
$( "section.conteneur" ).on( "clickOutside", { "identity" : "div" }, function( event ){
$( event.data.identity ).css( "background-color", "lightgrey" );
});
/*
* Cas : $( document ) et { "identity" : ".test" }.
*
* Comme il y a deux éléments du DOM qui ont cette classe
* dans le code de test (la division et un tag article), seul
* un clic dans le sélecteur, mais à l'extérieur de ces
* éléments, agit sur la couleur du texte contenu dans ces
* éléments.
*/
$( document ).on( "clickOutside", { "identity" : ".test" }, function( event ){
$( event.data.identity ).css( "color", "green" );
});
/*
* Cas : $( "body" ) et { "identity" : "#example" }.
*
* Rappel : un ID doit être unique dans la page web.
*
* Un clic dans le sélecteur, mais à l'extérieur de la
* division ayant cet ID, agit sur la division.
*/
$( "body" ).on( "clickOutside", { "identity" : "#example" }, function( event ){
$( event.data.identity ).css({ "width" : "20rem", "height" : "20rem" });
});
});
</script>
</body>
</html> |
Partager