Code d'effet d'invite jQuery Sharing_jquery

Code 1 :

Copier le code Le code est le suivant :

Astuce intégrée 1.

Astuce intégrée 2.

Copier le code Le code est le suivant :

$(fonction(){
               $(".tooltip").mouseenter(function(e){
This.mytitle=this.title
Ce.title=""
              var a="

" this.mytitle "

"
                  $("body").append(a);
                   $("div").css({
"top": (e.pageY y) "px",
"gauche": (e.pageX x) "px"
                   }).show("fast")
               }).mouseout(function(){
This.title= this.mytitle;
                   $("div").remove();
              });
})

Expérience d'apprentissage :

N'ajoutez pas d'éléments div sous la balise p, car un écart important se produira !

s'avère que c'est le cas ! Il y a une différence entre this et $("this"), si ce qui précède
La réécriture de this.title en $("this").attr("title") empêchera l'événement mouseout suivant d'accéder au titre enregistré

Code 2 :

Citation de CSS : jqueryui/css/ui-lightness/jquery-ui-1.8.18.custom.css

Citant js : jqueryui/js/jquery-ui-1.8.18.custom.min.js

Copier le code Le code est le suivant :

<script><br> $( "#dialog:ui-dialog" ).dialog( "destroy" );<br> ​  <br> $( "#dialog-message" ).dialog({<br>                                        <br> Hauteur : 120,<br>           largeur : 220,<br>         modal : vrai,<br> boutons : {<br> "Non": function() {<br>                        //faire quelque chose<br> $ (This) .dialog ("fermer"); <br>             },<br> "Oui": function() {<br>                        //faire quelque chose<br> $( this ).dialog( "close" );<br>             }<br> ><br> });<br> </script>

Code 3 :

Utiliser le composant de couche contextuelle javascript easyDialog

Après avoir utilisé easyDialog pendant un certain temps, nous avons résumé certains problèmes rencontrés lors de l'utilisation. Récemment, nous avons passé du temps à reconstruire et optimiser le code d'origine, et ajouté de nouvelles fonctions. La version originale visait simplement à réaliser les fonctions de base d'une simple couche contextuelle. Du point de vue du projet, il s'agissait de savoir comment terminer rapidement le projet. Cependant, cette version ne consiste pas seulement à réaliser les fonctions de base, mais considère également comment. pour rendre la couche contextuelle meilleure et plus efficace. Facilement appliqué aux projets.
Nouvelles fonctionnalités d'easyDialog v2.0 :

1. Ajout du modèle de contenu de la couche contextuelle par défaut. S'il ne s'agit que de quelques applications simples, vous n'avez pas besoin d'écrire la structure du contenu de la couche contextuelle, mais vous devez simplement transmettre quelques paramètres simples. La méthode d'utilisation originale :

Copier le code Le code est le suivant :

easyDialog.open({
conteneur : 'demoBox'
});

Utilisez le modèle de contenu par défaut, puis le paramètre conteneur peut être utilisé comme ceci :

Copier le code Le code est le suivant :

easyDialog.open({
conteneur : {
En-tête : 'Titre du calque contextuel',
Contenu : 'Bienvenue sur easyDialog : )',
ouiFn : btnFn,
NoFn : vrai
>
});

L'effet affiché est le suivant :

Si vous souhaitez modifier le style du modèle de contenu par défaut, vous pouvez modifier le fichier easydialog.css dans le document téléchargé pour obtenir le style souhaité.
2. Ajout d'un effet glisser-déposer pour que le calque contextuel offre une meilleure expérience utilisateur, et le contenu du calque contextuel peut être personnalisé pour obtenir facilement l'effet glisser-déposer.
3. Un système de mise en cache et un système de traitement des micro-événements ont été ajoutés en interne, et le contenu de la couche contextuelle a également été mis en cache pour améliorer les performances de la couche contextuelle.
De plus, le nom d'un paramètre a été modifié. L'isOverlay d'origine a été remplacé par overlay, et les identifiants de chaque élément de la couche contextuelle d'origine ont également été renommés pour éviter autant que possible les conflits.

Les 3 types d'effets d'invite ci-dessus sont couramment utilisés par moi. Vous pouvez les utiliser librement en fonction des besoins de votre propre projet

.