[[oktatas:web:jquery|< jQuery]] ====== JQuery példák ====== * **Szerző:** Sallai András * Copyright (c) Sallai András, 2012, 2013 * Licenc: GNU Free Documentation License 1.3 * Web: http://szit.hu ===== Űrlapkezelés ===== Az űrlapkezelést a hexadecagon területének számításával mutatom be:
Hexaéder
Vizsgáljuk meg az űrlap tartalmát: $("#szamitGomb").click(function(){ if ( $("#tomeg").val().trim().length > 0 ) { var tomeg = $.trim($("#tomeg").val()); var magassag = $("#magassag").val(); var tti = tomeg /Math.pow(magassag, 2); $("#eredmeny").text("Eredmény: " + tti); }else { $("#eredmeny").html("Üres"); } $("#eredmeny").slideToggle("slow"); }); ===== Űrlap név alapján =====
Hexaéder
===== Rádiógombok feldolgozása =====
Mitől dinamikus egy weboldal? Izlésesen elhelyezett animációkat tartalmaz.
Animációkat tartalmaz.
A felhasználó adatokat közöl a webszerverrel

 ===== Legördülő listadoboz kezelése =====
Válasszon járművet
===== Másként ===== $('select.foo option:selected').val(); $('select.foo').val(); $('input:checkbox:checked').val(); $('input:radio[name=bar]:checked').val(); ===== Inputmezők változása =====


$('.mezo').on('change', function(){ $('#egy').append("a"); }); ===== Menü ===== WebSandbox body { margin:0; padding:0; } #menupont { position:absolute; top: 30px; background-color: #6565f5; padding: 5px; display: none; } #menu { position: absolute; top: 0; background-color: #757580; padding: 5px; } #menupont ul { padding: 0; margin: 0; list-style-type: none; } #menupont ul a{ text-decoration: none; color: white; } $("#menu").click(function(){ $("#menupont").slideToggle(); }); Működés: Ha ez a példa nem működik, újra kell tölteni ezt a weboldalt. ===== Menü 2 ===== Menü Működés: