Ajouter image/icône sous forme d'une ligne de valeur dans les tables de données

Ça dépend un peu sur la façon dont l'info-bulle est mis en œuvre. Chaque 3e partie de "Fantaisie" JavaScript info-bulle de faire les choses différemment. L'exemple ici est de simplement montrer comment prendre deux morceaux de données (marque et modèle) et de les pousser dans l'attribut "title" de la cellule, qui sera le déclencheur d'un navigateur intégré dans les info-bulles.

J'imagine que vous allez être en utilisant une info-bulle plugin ou somesuch, de sorte que vous aurez à prendre les principes généraux de l'exemple et de les adapter aux spécificités de l'info-bulle. OK, assez de préambule.

--

C'est tout ce qui va se passer dans le fnRowCallback [mise à jour: 1.10 avant utilise juste "rowCallback"], qui est une propriété dans les tables de données de l'objet que vous pouvez définir lors de l'initialisation. En faisant cela, ce qui va se passer est que chaque ligne est affichée, vous avez la possibilité de modifier le HTML (nRow) et le retourner après modification, de sorte qu'il peut être poussé dans les DOM.

(remarque: lorsqu'il contribue à la lisibilité, j'ai tendance à faire plus de variables que celles qui sont strictement nécessaires. Je garde aussi le iDisplayIndex et iDisplayIndexFull qui traînent. Vous devriez être en mesure de les supprimer si vous le souhaitez)

"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
  var theMake = aData[1],
      theModel = aData[2];

  var imgTag = '<img href="/images/icon.png" title="' + theMake + ' ' + theModel + '" class="hoverImage"/>'; 
  /* result example: <img href="/images/icon.png" title="Honda CRV" class="hoverImage"/> */

  $('td:eq(3)', nRow).html(imgTag); //replace the word "data" with the new image markup

  return nRow;
}

Maintenant, lorsque vous survolez l'image, l'info-bulle de montrer la marque et le Modèle.

Encore une fois, ce n'est pas faire n'importe quoi pour une info-bulle spécifique du plugin, si votre peut-être l'aide d'un plugin qui obtient aussi ses informations à partir du titre, qui serait à portée de main. Pour ces plugins, il vous suffit d'ajouter une classe à l'imageTag (class="info-bulle" ou quoi que ce soit) qui déclenche le plugin.

[mise à jour]

Donc à l'aide de jQuery UI du dialogue comme un exemple: beaucoup de dialogue personnalisées fonctions créer un "conteneur" nœud à la volée, et ensuite appeler dialog() sur elle. Je préfère avoir un générique réutilisable contenant nœud dans le document de base, puis de le remplir en cas de besoin.

Je tiens à mettre la mienne, avant que le corps de ferme, parce que c'est là jQuery UI va coller lorsque vous avez terminé avec elle de toute façon:

  <!-- ... -->
  <div id="dialogContainer"></div>
</body>

Dans votre CSS, vous définissez à être masqué par défaut ( #dialogContainer { display:none } ).

Maintenant que vous avez le conteneur, vous pouvez utiliser le .dialog() fonction sur elle. À l'aide de l'exemple ci-dessus (note j'ai ajouté la catégorie "hoverImage" pour elle), vous devez remplir aData[3] dans le titre de l'image à la place de ce qui est dans mon exemple. Le titre agissant en qualité de "stockage" pour aData[3] données.

Maintenant, totalement à l'extérieur des tables de données d'initialisation, dans votre document prêt de fonction (vous avez probablement déjà un), vous pouvez lier le mouseenter événement:

$('#tableContainer').on('mouseenter', '.hoverImage', function(e) {
  e.preventDefault; //if you want to prevent the browser tooltip
  var dialogContainer = $('#dialogContainer');
  dialogContainer.html(this.title); //replace contents of dialog with the title of the image
  dialogContainer.dialog({ /* options */ });
});