Latest web development tutorials

jQuery UI par exemple - commutation (Toggle)

Utilisez des effets personnalisés pour afficher ou masquer les éléments appariés.

Pour plus d' informations sur .toggle() des détails sur les méthodes, consultez la documentation de l' API .toggle () .

.toggle () 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 - .toggle () 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 {
    largeur: 500px;
    hauteur: 200px;
  }
  #button {
    padding: .5em 1em;
    text-decoration: none;
  }
  #effect {
    position: relative;
    largeur: 240px;
    hauteur: 135px;
    padding: 0.4em;
  }
  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: 0};
      } Else if (selectedEffect === "taille") {
        options = {à: {width: 200, hauteur: 60}};
      }
 
      // Effets Run $ ( "#effect") .toggle (selectedEffect, options, 500);
    };
 
    // Définir la valeur en fonction des effets de menu sélectionnés $ ( «#button») .cliquez (function () {
      runEffect ();
      return false;
    });
  });
  </ 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"> commutation (Toggle) </ 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>

la