Eftersom jag fått bra svar på de senaste två jQueryfrågorna jag ställt här så provar jag en gång till. Hej Per! p.s. ett komplett exempel: Hej Henry, Schysst Per! Tack för tipset om Custom build med bara Draggable och Core, jag vågade inte göra det först (säkrast att ta allt :-), men nu när du föreslog det så testade jag, och filen krympte från 240 kb till 40 kb :-)jQuery, ytterligare frågor
Jag har en metod som ligger i en HTC-fil (behaviour) som jag behöver får bort. Det handlar om att resiza kolumner i en lista och är kopplat till CSS-klassen LCSepHandle via en behaviour-tag.
<PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="init();" />
...
var LC_Main;
function init()
{
LC_Main=eval(element.CM);
element.attachEvent("ondragend",onDragEnd);
element.attachEvent("ondrag",onDrag);
element.attachEvent("ondragstart",onDragStart);
}
Mina frågor i samband med denna kod är:
1. Hur gör man en init()-metod (ondocumentready eller oncontentready) i jQuery. Jag har testat med t ex
$(".LCSepHandle").ready(function (e) {
...
}
dvs, och detta verkar fungera, jag vet bara inte om detta är exakt samma sak? Inträffar detta event då endast en gång för alla element som har klassen LCSepHandle, dvs att man då måste loopa igenom en lista med alla LCSepHandle-element och koppla på eventen på varje element?
2. I detta kontext, är "element" samma sak som "$(this)"? Det verkar inte som det då jag försökt med
$(this).attachEvent("ondragstart", onDragStart);
och det fungerar inte för mig? Jag har även försökt att koppla på eventet med
$(document).on("ondragstart", ".LCSepHandle", function (e) {
...
}
men inte heller det verkar funka.
3. Hur gör man en avslutning (motsatsen till en init()) på en HTC-fil? För en HTC-fil finns ju eventet ondetach, vad är motsvarigheten i jQuery om man vill t ex göra en massa detachEvent?
Jag får nog avbryta frågestunden här så att detta inlägg inte blir för långt, det kan alltså komma fler inlägg :-)
Sv: jQuery, ytterligare frågor
Skriv gärna lite mer info om vad du vill uppnå: Är det t.ex. en div eller ruta som ska kunnas "dra"?
I jQuery så blir ondocumentready:
$(document).ready(function () {
// din kod här
});
Om du ska göra något "draggable" och du vill koda i jQuery så krävs det jQueryUI.
Då skulle koden se ut så här:
$(function() {
$( ".LCSepHandle" ).draggable();
});
Du kan därmot binda till drag-eventen (dragstart, drag, dragend) (tillsammans med jQueryUI) t.ex.:
$('.LCSepHandle').bind('dragstart', function(e) {
// gör någonting här
});
(man kan också göra "unbind" för att koppla isär händelserna vid senare tillfälle)
vill du koppla tillsammans flera stycken behöver du inte skriva om hela koden, utan du kan göra så här:
$('.LCSepHandle')
.bind('dragstart', function(e){
// gör någonting här
})
.bind('drag',function(e) {
// gör någonting här
})
.bind('dragend',function(e) {
// gör någonting här
});
I detta kontext, om du skulle skriva: $(this).
(där det står "gör någonting här", så skulle det referera till: $('.LCSepHandle')
fast, finns det flera element med samma class:namn så kommer det bara beröra den nuvarande som man håller på att hantera.
Skriv gärna lite mer om vad det är du vill uppnå så kanske dyker upp fler.
Mvh,
Henry Tang Kai - Frontendutvecklare - OnTrax AB
Sv:jQuery, ytterligare frågor
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title></title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>
$(document).ready(function () {
$( ".LCSepHandle" ).draggable();
$('.LCSepHandle')
.bind('dragstart',function( event ){
// gör något här
})
.bind('drag',function( event ){
// gör något här
})
.bind('dragend',function( event ){
// gör något här
});
});
</script>
</head>
<body>
<div class="LCSepHandle" style="width: 100px; height: 100px; background: #f00">test</div>
</body>
</html>
Sv: jQuery, ytterligare frågor
(Sorry för det sena svaret, men jag jobbar bara med detta 3 dagar i veckan, mån till ons)
Hur som helst, kanonsvar! jQuery UI funkade klockrent, och ca 65 rader javascriptkod i en HTC-fil kunde ersättas med 3 rader jQuery-kod :-)
$().ready(function () {
$(".LCSepHandle").draggable();
});
Gillar jQuery mer och mer :-) Vet inte varför jag inte tänkte på jQuery UI själv, men jag antar att jag snöade in mig på att försöka ändra så lite kod som möjligt...gammal programmeringsskada :-)
/Per
Sv:jQuery, ytterligare frågor
Själv tycker jag att UI kan bli lite för mycket extra kod som ligger och skräpar, i vilket fall en s.k. "custom build" ( http://jqueryui.com/download/ ) med just den funktionaliteten man ska använda den till (t.ex. "draggable" + core) - är bättre än att inkludera hela biblioteket.
När det gäller HTC-filer så kan det var mycket väl värt det dock. Speciellt om flera delat av jQuery/UI är relevanta till projektet.
Ett problem som jag har upplevt med jQuery är just när de släpper nya milestone versioner och tar bort/ersätter funktioner t.ex. "live" som blev ersatt av "on" när de släpte v1.9.x. Därför är deras release-notes ganska viktiga att skimma igenom innan man uppgraderar till en ny milestone.
Kul att resultatet blev så pass bra!
Mvh,
Henry Tang Kai - Frontendutvecklare - OnTrax ABSv: jQuery, ytterligare frågor