selecteurs jquery pour accroitre les capacites
Par aurelien gerits le mercredi, 22 juillet 2009, 02:14 - selecteurs jQuery - Lien permanent
La création de plugin jQuery est une manière simple, d'utiliser la puissance de jQuery.
Il existe cependant un moyen d'accroître les capacités des sélecteurs de jQuery en définissant ses propres sélecteurs
La librairie intègre désormais la class easySelectors qui permet de créer ses propres sélecteurs simple.
Cette méthode encore expérimental est un moyen efficace pour définir des sélecteurs très simplement tout en gardant une flexibilité dans vos conceptions.
Je ne vous cache pas que la création de sélecteurs jQuery peu s'avérer complexe suivant ce que l'on souhaite implémenter.
Pour exemple, j'ai créer un sélecteur qui sélectionne tous les éléments de type lien (a) avec une couleur rouge et les convertis en couleur bleu.
On instance easySelectors:
[PHP]
$selector = new magixcjquery_jquery_selectors_easySelectors();
On créer notre tableau pour le sélecteur
[PHP]
$array = array(
'red'=>'function('.magixcjquery_jquery_magixcjQuery::jQueryDom('dom','a').'){return '.magixcjquery_jquery_css::jCss('a','name',
'color',false) .'=== "red";}');
On lance la première étape qui implémente easySelectors (sinon on aura une erreur javascript)
[PHP] $t = $selector->iniJeasySelectors();
On créer notre sélecteur et on l'utilise directement :
[PHP]
$t .= '<script type="text/javascript">';
$t.= $selector->easyMultConstruct($array);
$t .= '</script>';
$t .= magixcjquery_jquery_magixcjQuery::startjQuery();
$t .= magixcjquery_jquery_css::jCss('"a:red"','value',array('color'=>'blue'));
$t .= magixcjquery_jquery_magixcjQuery::endjQuery();
print $t;
Pour la création d'un sélecteur, il faut procédé en deux étapes:
- Initialiser la fonction iniJeasySelectors() de la class easySelectors (afin d'utiliser easySelectors)
- Définir notre sélecteur avec easySimpleConstruct ou easyMultConstruct suivant le besoin
- easySimpleConstruct (construction d'un seul sélecteur)
- easyMultConstruct(construction de plusieurs sélecteurs)
La partie qui nous intéresse retourne ceci :
[javascript]
<script type="text/javascript">
$.easySelector({red:function(a){return $(a).css("color")=== "red";}});
</script>
<script type="text/javascript">
$(document).ready(function(){$("a:red").css("color","blue");})
</script>
