Comment utiliser le plug-in de couche contextuelle Jquery ThickBox

Comment utiliser le plug-in de couche contextuelle Jquery ThickBox_jquery

WBOY

Libérer： 2016-05-16 16:28:07

original

1862 Les gens l'ont consulté

Thickbox est un plug-in pour jQuery. Sa fonction est de faire apparaître des boîtes de dialogue et des zones de page Web pour rendre l'expérience utilisateur plus agréable. Voici une brève introduction à son utilisation.
Avertissement : Il s’agit simplement d’un compte rendu personnel.
Travail de préparation : Vous avez besoin de trois fichiers : Thickbox.js, Thickbox.css, jquery.js, qui peuvent être téléchargés de n'importe où en ligne

Utilisation spécifique :

Première étape : Présentez ces trois fichiers à la page où vous souhaitez utiliser Thickbox

Copier le code Le code est le suivant :

La deuxième étape : une utilisation généralement simple consiste à ajouter des styles à l'étiquette Il existe également l'appel de fonction Thickbox : tel que tb_init(), tb_show(); voir ci-dessous.

Plusieurs utilisations différentes :

1. Cliquez pour afficher l'image :

ok, c'est ça

2. Cliquez sur le bouton ou le lien :

Copier le code Le code est le suivant :

Afficher le contenu modal caché.

Instructions : Ajoutez "#TB_inline?height=300&width=400&" au ou au bouton que vous souhaitez utiliser #TB_inline est une utilisation fixe de Thickbox. La hauteur et la largeur sont les paramètres de taille pour afficher la pop. -up boîte de dialogue. InlineId est Pour l'étiquette ou le composant que vous souhaitez afficher, modal est le choix entre mode et non modal. Bien sûr, vous pouvez également accepter de nombreux paramètres personnalisés

. 3. Généralement, la page qui est la plus souvent utilisée dans les projets est la page qui charge le formulaire. Par exemple, l'ajout et la modification se font sur la même page de liste. À ce stade, nous pouvons effectuer à la fois l'ajout et la modification sous forme de boîte épaisse. ci-dessous :

Comment faire est la même chose, ajoutez le style Thickbox au lien ajouté :

Ajouter

Le principe est que vous devez préparer la page que vous souhaitez afficher (add.shtml), puis préciser la taille que vous souhaitez afficher

L'édition est la même : extrayez d'abord les informations d'origine, puis laissez l'utilisateur les modifier :

Le même code :

Copier le code Le code est le suivant : Edit

4. Vous pouvez localiser vous-même les éléments qui nécessitent une boîte épaisse. Au lieu d'utiliser des styles, vous pouvez utiliser des fonctions telles que : 

Copier le code Le code est le suivant :

$(fonction() {
tb_init("#PicList a[img]");});

5. Pour les pages chargées via ajax, le style Thickbox sera invalide. Solution :
Exécutez simplement le code suivant après qu'AJAX ait chargé le code HTML et l'ait mis à jour sur la page :

tb_init('.thickbox');
6. Appel de fonction personnalisée :
Si vous cliquez sur la vignette, pour afficher la grande image, l'URL de la vignette ajoute simplement s :

avant le suffixe de l'URL de la grande image.

Copier le code Le code est le suivant :

$(fonction() {
$("#PicList img").click(function() {
tb_show("",this.src.substring(0,this.src.length-5) '.jpg',false);
});});

De plus, si vous souhaitez utiliser d'autres événements, vous pouvez également modifier le clic sur l'événement sur lequel vous souhaitez déclencher la Thickbox.

THICKBOX prend en charge les navigateurs suivants :
Windows IE 6.0, Windows IE 7, Windows FF 2.0.0.6, Windows Opera 9.0, Macintosh Safari 2.0.4, Macintosh FF 2.0.0.6, Macintosh Opera 9.10... Mais d'après mon expérience, IE6 a encore quelques problèmes !