exemples jQuery UI - show (Afficher)
Utilisez des effets personnalisés pour afficher des éléments correspondants.
Pour plus d' informations sur .show()
des détails sur les méthodes, consultez la documentation de l' API .montrer () .
.montrer () Demo
Cliquez sur le bouton pour obtenir un aperçu des effets.
<! DOCTYPE html> <Html lang = "fr"> <Head> <Meta charset = "utf-8"> <Titre> jQuery UI Effects - .Show () Demo </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script> <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css"> <Style> .toggler {width: 500px; height: 200px;} #button {padding: .5em 1em; text-decoration: none;} #effect {width: 240px; height: 135px; padding: 0.4em; position: relative;} h3 #effect {margin: 0; padding: 0.4em; text-align: center;} </ Style> <Script> $ (Function () { // Exécuter actuellement sélectionné runEffect fonction de l'effet () { // Dérivez effets de type var selectedEffect = $ ( "#effectTypes") .val (); // La plupart des effets ne ont pas besoin de taper les options options de livraison par défaut var = {}; // Certains effets spéciaux avec les paramètres requis si (selectedEffect === "échelle") { options = {pour cent: 100}; } Else if (selectedEffect === "taille") { options = {à: {width: 280, height: 185}}; } // effets Run $ ( «#effect») .Show (selectedEffect, options, 500, rappel); }; // Fonction de rappel callback () { setTimeout (function () { $ ( "#effect: Visible") .removeAttr ( "style") .fadeOut (); }, 1000); }; // Définir la valeur en fonction des effets de menu sélectionnés $ ( «#button») .cliquez (function () { runEffect (); return false; }); $ ( "#effect") .hide (); }); </ Script> </ Head> <Body> <Class Div = "de toggler"> <Div id = "effet" class = "ui-widget-content ui-coin-all"> <Classe H3 = "ui-widget-tête ui-coin-all"> Display (Afficher) </ h3> <P> Etiam libero neque, luctus a, eleifend nec, semper à, lorem. Sed pede. Nulla lorem metus, ut adipiscing, luctus sed, hendrerit vitae, mi. </ P> </ Div> </ Div> <select name = "effets" id = "effectTypes"> <Option value = "aveugles"> Shades effets (aveugles Effect) </ option> <Option value = "rebond"> effets (Bounce effet) rebond </ option> <Option value = "clip"> Effets clip (Effet Clip) </ option> <Option value = "drop"> effets d'atterrissage (Effet goutte) </ option> effets d'explosion <valeur d'option = "exploser"> (Explode Effect) </ option> <Option value = "fold"> effets de pliage (Pliez Effect) </ option> effets de surbrillance <valeur Option = "highlight"> (Mettre Effect) </ option> <Option value = "bouffée"> effets de dilatation (Puff Effect) </ option> <Option value = "pulser"> effets (Pulsate Effect) battre </ option> <Option value = "échelle"> effets de zoom (échelle Effect) </ option> <Option value = "secouer"> effets de vibrations (Agiter Effect) </ option> <Option value = "taille"> Effets de taille (taille d'effet) </ option> <Option value = "slide"> effets de diapositives (Slide Effect) </ option> </ Select> <a href="#" id="button" class="ui-state-default ui-corner-all"> effets courir </a> </ Body> </ Html>