Latest web development tutorials

przykłady jQuery UI - Show (Pokaż)

Użyj efektów niestandardowych pokazać pasujące elementy.

Aby uzyskać więcej informacji na temat .show() dane dotyczące metod można znaleźć w dokumentacji API .Show () .

.pokaż () Demo

Kliknij przycisk, aby wyświetlić podgląd efektów. 

<! DOCTYPE html>
<Html lang = "pl">
<Head>
  <Meta charset = "utf-8">
  <Title> 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: 240 piks; height: 135px; padding: 0.4em; position: relative;}
  #effect h3 {margin: 0; padding: 0.4em; text-align: center;}
  </ Style>
  <Script>
  $ (Function () {
    // Uruchom aktualnie wybrany runEffect Funkcja Efekt () {
      // Wyprowadź efektów typu var selectedEffect = $ ( "#effectTypes") .val ();
 
      // Większość działań nie trzeba wpisywać opcje domyślne opcje wysyłki var = {};
      // Niektóre efekty specjalne z wymaganymi parametrami if (selectedEffect === "skala") {
        options = {procent: 100};
      } Else if (selectedEffect === "rozmiar") {
        options = {z: {width: 280, wysokość: 185}};
      }
 
      // Run efekty $ ( "#effect") .Show (selectedEffect, opcje, 500, callback);
    };
 
    // Funkcja oddzwaniania Callback () {
      setTimeout (function () {
        $ ( "#effect Widoczne") .removeAttr ( "styl") .fadeOut ();
      }, 1000);
    };
 
    // Ustaw wartość w zależności od wybranych efektów menu $ ( "#button") .Kliknij (function () {
      runEffect ();
      return false;
    });
 
    $ ( "#effect") .hide ();
  });
  </ Script>
</ Head>
<Body>
 
<Div class = "wahacz">
  <Div id = "efekt" class = "widget-ui ui-content-corner-all">
    <H3 class = "widget-ui ui-header-corner-all"> Display (Pokaż) </ h3>
    <P>
      Etiam libero neque, luctus a, eleifend, gdzie indziej niesklasyfikowane, sempre się, lorem. Sed pede. Nulla ipsum Metusa, adipiscing UT, luctus sed vitae, hendrerit, MI.
    </ P>
  </ Div>
</ Div>
 
 <select name = "efekty" id = ""> effectTypes
  <Option value = "ślepe"> Shades efekty (Blind skutku) </ option>
  <Wartość Option = "bounce"> odbicia efekty (Bounce skutku) </ option>
  <Wartość Option = "klip"> Efekty zacisk (klips Effect) </ option>
  <Wartość Option = "drop"> Efekty Landing (spadek Effect) </ option>
  <Option value = "wybuchnąć"> Efekty wybuchowości (Explode Effect) </ option>
  <Wartość Option = "spasować"> składane efekty (Fold Effect) </ option>
  <Option value = "highlight"> Efekty podświetlenia (Highlight Effect) </ option>
  <Wartość Option = "puff"> efekty rozszerzalności cieplnej (Puff skutku) </ option>
  <Wartość Option = "pulsuje"> pokonać efekty (pulsować skutku) </ option>
  <Wartość Option = "skala"> efekty powiększenia (skala efektu) </ option>
  <Wartość Option = "wstrząsnąć"> efekty wibracji (drgań efektu) </ option>
  <Wartość Option = "size"> Efekty Size (wielkość efektu) </ option>
  <Wartość Option = "slide"> Efekty ślizgowe (zjeżdżalnia Effect) </ option>
</ Select>
 
<a href="#" id="button" class="ui-state-default ui-corner-all"> prowadzone efekty </a>
 
 
</ Body>
</ Html>