Je dois implémenter la fonctionnalité d'info-bulle pour la liste déroulante. De plus, l'info-bulle ne sera pas un texte statique, elle devrait être la valeur sélectionnée de la liste déroulante. Comment puis-je faire cela dans jQuery?Comment ajouter une info-bulle à un menu déroulant/une liste déroulante?
J'ai obtenu le soultion:
Juste au cas où vous vouliez savoir comment je l'ai fait: -
jQuery('#myDropDownID').hover(function(e){
var tipX = e.pageX + 12;
var tipY = e.pageY + 12;
jQuery("body").append("<div id='myTooltip' class='portal-tool-tip' style='position: absolute; z-index: 100; display: none;'>" + jQuery("OPTION:selected", this).text() + "</div>");
if(jQuery.browser.msie) var tipWidth = jQuery("#myTooltip").outerWidth(true)
else var tipWidth = jQuery("#myTooltip").width()
jQuery("#myTooltip").width(tipWidth);
jQuery("#myTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");
}, function(){
jQuery("#myTooltip").remove();
}).mousemove(function(e){
var tipX = e.pageX + 12;
var tipY = e.pageY + 12;
var tipWidth = jQuery("#myTooltip").outerWidth(true);
var tipHeight = jQuery("#myTooltip").outerHeight(true);
if(tipX + tipWidth > jQuery(window).scrollLeft() + jQuery(window).width()) tipX = e.pageX - tipWidth;
if(jQuery(window).height()+jQuery(window).scrollTop() < tipY + tipHeight) tipY = e.pageY - tipHeight;
jQuery("#myTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");
});
Voir ici: http://jsbin.com/owoka
Vous pouvez implémenter la liste déroulante dans javascript en tant que div. Une fois que vous faites cela, vous pouvez ajouter les info-bulles en utilisant quelque chose comme: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/
Quelque chose comme ça?
selectElement.addEventListener('change', function (e) {
selectElement.title = selectElement.value;
});
Alsciende, ce n'est pas ce que je m'attendais. :) L'info-bulle doit être affichée de manière agréable. Le titre affiché par le navigateur ne semble pas bon. Info-bulle: http://dev.mariusilie.net/content/simple-tooltip-jquery-plugin –
Eh bien, je suppose que vous pouvez appeler votre propre tooltip-api au lieu de ".title". – Alsciende
JAVASCRIPT ET JQUERY.
Vous étiez précis sur infobulle pour que la valeur sélectionnée pour toutes les listes déroulantes dans la page à la fois ..
<script language="javascript">
function dropDwnToolTips() {
var drpdwnlst = document.getElementsByTagName("Select");
for(i=0;i<drpdwnlst.length;i++){
drpdwnlst[i].title = drpdwnlst[i].options[drpdwnlst[i].selectedIndex].text;
}
}
</script>
Dans le code ci-dessous j'ajoute infobulle pour toutes les valeurs dans le menu déroulant et comme la valeur sélectionnée. Ceci dans le script java aussi bien et cela aussi pour toutes les listes déroulantes dans la page à la fois.
<script language="javascript">
function dropDwnToolTips() {
var drpdwnlst = document.getElementsByTagName("Select");
for(i=0;i<drpdwnlst.length;i++){
for(j=0;j<drpdwnlst[i].length;j++){
drpdwnlst[i][j].title = drpdwnlst[i].options[j].text;
}
drpdwnlst[i].title = drpdwnlst[i].options[drpdwnlst[i].selectedIndex].text;
}
}
</script>
pour l'une ou l'autre fonction, Procédez comme suit pour la déclencher.
<body onload="dropDwnToolTips()">
...
</body>
ou,
<script language="javascript">
window.onload=function() {
... script code goes here...
}
ou si vous utilisez dojo,
<script language="javascript">
dojo.ready(function() {
... script code goes here...
});
ou
jQuery fait tout le script encore plus simple ..
$(document).ready(function() {
$("select").each(function() {
var s = this;
for (i = 0; i < s.length; i++)
s.options[i].title = s.options[i].text;
if (s.selectedIndex > -1)
s.onmousemove = function() { s.title = s.options[s.selectedIndex].text; };
});
});
Je vous suggère d'utiliser la fonction sur l'événement onChange de la liste déroulante au lieu de l'événement document prêt.
Y at-il une autre approche au lieu de créer la div pour dérouler –