O melhor tutorial jQuery UI exemplo - comutação (Alterar) em 2024. Neste tutorial você pode aprender .toggle () Demonstração,
Use efeitos personalizados para mostrar ou ocultar os elementos correspondentes.
Para mais informações sobre .toggle()
Os detalhes dos métodos, consulte a documentação da API .toggle () .
Clique no botão para visualizar efeitos.
<! DOCTYPE html> <Html lang = "PT"> <Head> <Charset Meta = "utf-8"> <Title> jQuery UI Efeitos - .toggle () Demonstração </ 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 { position: relative; width: 240px; height: 135px; padding: 0.4em; } h3 {#effect margin: 0; padding: 0.4em; text-align: center; } </ Style> <Script> $ (Function () { // Executar a função de efeito runEffect atualmente selecionado () { // Derivar efeitos Tipo var selectedEffect = $ ( "#effectTypes") .val (); // A maioria dos efeitos não precisa digitar as opções Opções de entrega padrão var = {}; // Alguns efeitos especiais com os parâmetros necessários if (selectedEffect === "escala") { options = {cento: 0}; } Else if (selectedEffect === "tamanho") { options = {a: {width: 200, height: 60}}; } // Efeitos executar $ ( "#effect") .toggle (selectedEffect, opções, 500); }; // Definir o valor de acordo com os efeitos de menu $ selecionados ( "#button") .click (function () { runEffect (); return false; }); }); </ Script> </ Head> <Body> <Div class = "toggler"> <Div id = "efeito" class = "-ui-widget conteúdo ui-canto-all"> <H3 class = "ui-widget-header-ui-corner todos"> comutação (Alterar) </ h3> <P> Etiam libero neque, luctus um, eleifend nec, sempre em, lorem. Sed Pede. Metus Nulla lorem, adipiscing ut, luctus sed, hendrerit vitae, mi. </ P> </ Div> </ Div> <select name = "efeitos" id = ""> effectTypes <Option value = "cegos"> Shades efeitos (Cego efeito) </ option> <Option value = "salto"> rebote efeitos (Bounce efeito) </ option> <Option value = "grampo"> efeitos do clipe (Clip Effect) </ option> <Option value = "queda"> efeitos de aterragem (efeito de gota) </ option> <Option value = "explodir"> efeitos de explosão (Explode Effect) </ option> <Option value = "dobrar"> Efeitos de dobrar (Dobre Effect) </ option> <Option value = "highlight"> efeitos de realce (Salienta Effect) </ option> <Opção value = "puff"> efeitos de expansão (Puff efeito) </ option> <Option value = "pulsar"> efeitos (pulsar efeito) bater </ option> <Option value = "escala"> efeitos de zoom (Escala efeito) </ option> <Option value = "shake"> efeitos de vibrações (Agite efeito) </ option> <Option value = "tamanho"> efeitos Size (tamanho do efeito) </ option> <Option value = "slides"> efeitos de slides (Deslize Efeito) </ option> </ Select> <a href="#" id="button" class="ui-state-default ui-corner-all"> efeitos executados </a> </ Body> </ Html>