Home > jQuery > Pokaż lub ukryj elementy

Pokaż lub ukryj elementy

Dodane przez: piciu
opis:
Pokaż lub ukryj elementy wykorzystujące efekty niestandardowe.
Kod:
  1. <! DOCTYPE html>
  2. < html lang = "pl" >
  3. < głowy >
  4. < meta charset = "utf-8" >
  5. < title > jQuery UI Efekty - Przełącz Demo </ title >
  6. < Link rel = "stylesheet" href = "//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" >
  7. < script src = "//code.jquery.com/jquery-1.10.2.js" ></ script >
  8. < script src = "//code.jquery.com/ui/1.11.4/jquery-ui.js" ></ script >
  9. < Link rel = "stylesheet" href = "/resources/demos/style.css" >
  10. < style >
  11. .toggler {
  12. Szerokość : 500 px;
  13. Wysokość : 200 px;
  14. }
  15. #button {
  16. wyściółka : . 5 em 1 em;
  17. text-decoration : none;
  18. }
  19. #effect {
  20. Stanowisko : relative;
  21. Szerokość : 240 px;
  22. Wysokość : 135 px;
  23. wyściółka : 0,4 em;
  24. }
  25. #effect h3 {
  26. margines : 0 ;
  27. wyściółka : 0,4 em;
  28. text-align : center;
  29. }
  30. </ style >
  31. < script >
  32. $ ( funkcja () {
  33. // Uruchomić aktualnie wybranego efektu
  34. Funkcja runEffect () {
  35. // Uzyskać efekt typ z
  36. var selectedEffect = $ ( "#effectTypes" ) .val ();
  37.  
  38. // większość typów efektów nie potrzebują domyślnie opcje przekazywane
  39. var options = {};
  40. // Nie wymagane parametry pewne efekty
  41. jeśli (selectedEffect === "skala" ) {
  42. Opcje = {procent: 0 };
  43. } else , jeśli (selectedEffect === "rozmiar" ) {
  44. Opcje = {z: {szerokość: 200 , wysokość: 60 }};
  45. }
  46.  
  47. // Uruchomić efekt
  48. $ ( "#effect" ) .toggle (selectedEffect, opcje, 500 );
  49. };
  50.  
  51. // Ustaw efekt z menu wybierz wartości
  52. $ ( "#button" ) .Kliknij ( funkcja () {
  53. runEffect ();
  54. });
  55. });
  56. </ script >
  57. </ głowy >
  58. < ciało >
  59.  
  60. < div class = "wahacz" >
  61. < div id = "efekt" class = "widget-ui-ui-rogu zawartości wszystko" >
  62. < h3 class = "ui-widget-header ui rogu-all" > Włącz </ h3 >
  63. < p >
  64. Etiam libero neque, luctus się, eleifend, gdzie indziej niesklasyfikowane, sempre się, Lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed hendrerit vitae, km.
  65. </ p >
  66. </ div >
  67. </ div >
  68.  
  69. < wybierz nazwę = "efekty" id = "effectTypes" >
  70. < opcja wartość = "ślepa" > Blind </ opcja >
  71. < opcja wartość = "bounce" > Bounce </ opcja >
  72. < opcja wartość = "klip" > Klip </ opcja >
  73. < opcja wartość = "drop" > spadek </ opcja >
  74. < opcja wartość = "wybuchnąć" > Explode </ opcję >
  75. < opcja wartość = "spasować" > Złożyć </ opcja >
  76. < opcja wartość = "highlight" > Zaznacz </ opcja >
  77. < opcja wartość = "puff" > Puff </ opcja >
  78. < opcja wartość = "pulsuje" > Pulsowanie </ opcja >
  79. < opcja wartość = "skala" > Skala </ opcja >
  80. < opcja wartość = "potrząsnąć" > wstrząsnąć </ opcja >
  81. < opcja wartość = "rozmiar" > Rozmiar </ opcja >
  82. < opcja wartość = "slide" > Przesuń </ opcja >
  83. </ wybierz >
  84.  
  85. < button id = "button" class = "ui-state-default ui rogu-all" > Uruchom Effect </ button >
  86.  
  87.  
  88. </ ciało >

©