Alternatief voor Jquery
iets anders:
http://www.gotoandlearn.com/
http://plugins.jquery.com/project/carousel3d
---------------------------------------------
http://www.prototypejs.org/
http://script.aculo.us/
http://demos.dojotoolkit.org/demos/fisheye/
http://developer.yahoo.com/yui/
http://labs.adobe.com/technologies/spry/home.html
--------------------
http://rialto.improve-technologies.com/wiki/
http://clean-ajax.sourceforge.net/
http://echo.nextapp.com/site/
http://www.extjs.com/
------------------------------------------------------
Second look Jquery
plugins en ui extenden JQ
html, css, eigen javascript, jquery is allemaal los van elkaar
eerst jq laden dan eigen js
$(document).ready{
function(){
alert("Hallo");
}
}
Voor DOM onderdelen hoeft het niet tussen ""
Voor id's enso wel.
ready bij jq is als de dom geladen is, maar niet elk element hoeft geladen te zijn.
Zo kunnen we een hoop doen voor de gebruiker de geheel geladen pagina ziet.
var x = new Date();
MyMaand = x.getMonth() + 1; // js is zero based dus moet + 1 bij
$("#NaamIDtxtBox").attr("value",functiediewaardereturned());
attr kan een waarde ophalen en setten, de tweede parameter (de functie) zorgd dat deze gezet word
met de return waarde van de functie.
als we de css willen veranderen
$("#NaamDiv").css("padding","10px");
als we hierarchische css willen veranderen
$("#NaamDiv>h1").css("padding","10px");
om iets te verstoppen
$("#NaamDiv>h1").hide();
als er in een select een option staat met als value niks
(bijvooreeld: "Kies een optie", dan kan je die hiermee instellen
(bij een reset van een form omdat niet alle browsers bij een refresh
of clear knop ook alle waarden resetten van de form
$("#naamSelect").val("");
Als we velden input objecten willen leegmaken, tussen de haken zetten we een filter neer dat
als het een input is die niet van type submit is, of van reset, dan maak het leeg.
$("input[type!='submit'][type!='reset']").attr("value","");
Alle inputboxen die een naam hebben die lijkt (like) op iets (zoals zoiets, nogiets )
worden hier van een nul voorzien.
$("input[name*='iets']").attr("value","0");
Als een checkbox gechecked is, uncheck het dan.
if ($("input").attr("checked","checked")){
$("input").attr("checked","");
}
Iets schrijven naar een html element:
$("#HtmlElementIDNaam").text(WaardeInVar of "LetterlijkeWaarde");
Als we een eventhandler willen maken voor checkboxes op onze pagina.
Het eerste gedeelte is een filter die aangeeft welke soort elementen we een click event voor willen maken:
checkboxen dus.
$("input:checkbox").click(function(){
// geef de idnaam van het element waar op geklikt is
// (this is dat automatisch)
var = rawTarg = $(this).attr("id");
//de naam van de txtbox die naast de checkbox staat heeft een naam die er op lijkt.
// door een string van de checkbox te bewerken weten we wat de naam is van de
// textbox die er naast staat. ZO kunnen we de focus naar de txtbox zetten.
// dat scheelt de gebruiker weer een klik.We maak ook de textbox leeg.
var targ = "#"+(rawTarg.substring(0,rawTarg.indexOf("W")))+"Hrs";
$(targ).attr("value", "").focus();
});
Als we alle input (txt) willen leegmaken binnnen een element (div of iets dergelijks) dan kunnen we dat zo doen:
Net als met css waar je een hierarchie aan kan geven waarvoor een bepaalde regel geldt.
$("#NaamVanID input").attr("value", "");
Animatie:
slideDown(mil sec)(laten zien)
slideUp (mil sec)(weg)
slideToggle(mil sec)
AJAX:
get is de jquery functie (waar er meer van zijn) die als parameters de pagina meekrijgt die aangeroepen word,
dan de naam van de waarde die meegegeven word (de value van de select) en dan de functie die iets met de teruggekomen data moet doen.
In het aangeroepen php kunnen we html terug geven die dan doormiddel van .html word gerenderd als html.
Dit is dus wat anders dan .text
$.get("database_processing.php", {name: $("#NaamSelect").val(), Callbackfunction(data){$("#NaamDIv").html(data);});
}}
plugins:
Datepicker werd er als een voorbeeld voor gedaan.
De benodigde (js) bestanden werden gedownload, en aangeroepen.
Dan werd er een .class toegevoegd aan de txtboxes waar we deze datapicker wilden zien.
Dan in de jquery aanroepen en pagina inisialisatie functie werd aan die class de date picker gehangen.
$(".datepickerclass").datePicker();
|
