GoldenLine
Zaloguj się
Wojciech Mazurek

Wojciech Mazurek właściciel, PPHU
Neuron

Temat: jQuery - objekt na objekcie

Witam

Zastanawiam się jak rozwiązać taki problem

powiedzmy że mamy taki kod HTML (fragment)

<img src="plan.png" ID='Plan'>
<div ID="x1"> </div>
<div ID="x2"> </div>
<div ID="x3"> </div>

i fragment skryptu
MakeX('#x1');
MakeX('#x2');
MakeX('#x3');

gdzie MakeX coś tam w tym DIVie robi - dodaje grafikę, dodaje timery, wiąże z obsługą ajaxa- nie ważne - powiedzmy

Załóżmy że MakeX wygląda tak:

function MakeX(x){
$(x).html( "<img src='x.png'>")
}

I teraz pytanie bo kombinuje jak koń pod górę i jakoś nie mogę nic wymśleć
Jak napisać taką funkcję która będzie miała taką definicję:

MakeX(x,y,klasa_rodzica, klasa_objektu);

i która ustawi mi stworzony objekt według współrzędnych XY liczonych bezwzględnie w/g lokalizacji klasy rodzica i to w miarę możliwości bez zewnętrznych arkuszy styli ?

Czyli w tym przykładzie ustawi graficzki x.png na odpowiednich współrzędnych grafiki plan.png
Link do wypowiedziLink
Łukasz Z.

Łukasz Z. Specjalista ds
Informatyki w Mentor
S.A.

Temat: jQuery - objekt na objekcie

Użyj metody http://api.jquery.com/offset/ do odczytania współrzędnych lewego, górnego rogu rodzica. Potem traktuj te współrzędne jako punkt odniesienia (twój nowy punkt 0,0) i pozycje dziecka wylicz względem tego punktu.
Pozycje dzieci możesz ustawić np. poprzez znacznik http://api.jquery.com/css/ .

Mogłoby to przybrać postać taką (pisane na wyrost aby pokazać o co chodzi):
function MakeX(x, y, rodzic, dziecko)

{

    //określenie punktu (0,0)

    var x0 = rodzic.offset().left;

    var y0 = rodzic.offset().top;



    //wyliczenie współrzędnych dziecka

    var xd = x0 + x;

    var yd = y0 + y;



    //przesunięcie dziecka na pozycję przy pomocy CSS

    dziecko.css({

       'position': 'absolute',

       'left': xd,

       'top': yd

    });

}
Łukasz Z. edytował(a) ten post dnia 18.06.12 o godzinie 14:52
Link do wypowiedziLink
Wojciech Mazurek

Wojciech Mazurek właściciel, PPHU
Neuron

Temat: jQuery - objekt na objekcie

Łukasz Z.:
Użyj metody http://api.jquery.com/offset/ do odczytania współrzędnych lewego, górnego rogu rodzica.
No tak. Na razie koncentruje się na samej logice obiektowej i programowaniu - jestem do cna przesiąknięty pascalem i obiectpascalem.
W wekkend będę musiał sobie na spokojnie przejrzeć wszystkie metody jQuery bo .css juz poznałem (choć samych arkuszy styli jeszcze nie tak do końca łapię, znaczy się kojarzą mi się cały czas z parametrami a nie klasami) ale metoda offset jakoś mi uleciała ....

Kilaka pytań uzupełniających
1)Jakie jest ryzyko "rozjechania" się takiego pozycjonowania, np w niektórych browserach

2) Czy jest jakaś metoda do manipulowania kolejnością "w Z" - pisząc testową funkcję w oparciu o kolegi przykład zrobiłem babola i w pierwszym momencie myślałem że się dzieci schowały pod rodzicem. Później w kodzie html próbowałem zmieniać kolejność kontenera dziecka i rodzica i nic się nie zmieniało
Link do wypowiedziLink
Łukasz Z.

Łukasz Z. Specjalista ds
Informatyki w Mentor
S.A.

Temat: jQuery - objekt na objekcie

Wojciech Mazurek:
Kilaka pytań uzupełniających
1)Jakie jest ryzyko "rozjechania" się takiego pozycjonowania, np w niektórych browserach

Nie spotkałem się z takimi problemami, ale nie traktuj tej deklaracji jako wyroczni.
Wojciech Mazurek:
2) Czy jest jakaś metoda do manipulowania kolejnością "w Z" - pisząc testową funkcję w oparciu o kolegi przykład zrobiłem babola i w pierwszym momencie myślałem że się dzieci schowały pod rodzicem. Później w kodzie html próbowałem zmieniać kolejność kontenera dziecka i rodzica i nic się nie zmieniało

Jest - http://www.quackit.com/css/properties/css_z-index.cfm
Link do wypowiedziLink
Wojciech Kopycki

Wojciech Kopycki CEO at CopySky

Temat: jQuery - objekt na objekcie

1. Aby poprawnie obliczyć współrzędne elementów funkcję "offset()" uruchamiaj dopiero po załadowaniu wszystkich elementów DOM i wczytaniu plików graficznych - "window.onload".
http://javascript.about.com/library/blonload.htm

2. Do sterowania pozycją elementu według osi z służy CSS - właściwość "z-index".
http://www.w3schools.com/cssref/pr_pos_z-index.aspWojciech Kopycki edytował(a) ten post dnia 19.06.12 o godzinie 12:50
Link do wypowiedziLink
Łukasz Z.

Łukasz Z. Specjalista ds
Informatyki w Mentor
S.A.

Temat: jQuery - objekt na objekcie

Wojciech Kopycki:
1. Aby poprawnie obliczyć współrzędne elementów funkcję "offset()" uruchamiaj dopiero po załadowaniu wszystkich elementów DOM i wczytaniu plików graficznych - "window.onload".
http://javascript.about.com/library/blonload.htm

Fakt, zapomniałem tego dodać a jest to ważne :)

Korzystając z jquery można też skorzystać z konstrukcji 
$(function(){ [...] });
opisanej tutaj -> http://api.jquery.com/ready/
Link do wypowiedziLink
Wojciech Kopycki

Wojciech Kopycki CEO at CopySky

Temat: jQuery - objekt na objekcie

Jeszcze nie do końca tak. "document.ready()" i "window.onload()" różnią się tym, że ready() jest odpalane od razu po załadowaniu elementów DOM bez czekania na wczytanie obrazków, a "onload()" czeka na wszystko. ;)
Link do wypowiedziLink
Łukasz Z.

Łukasz Z. Specjalista ds
Informatyki w Mentor
S.A.

Temat: jQuery - objekt na objekcie

Wojciech Kopycki:
Jeszcze nie do końca tak. "document.ready()" i "window.onload()" różnią się tym, że ready() jest odpalane od razu po załadowaniu elementów DOM bez czekania na wczytanie obrazków, a "onload()" czeka na wszystko. ;)

Zgadza się, ale czy nie jest czasem tak, że miejsce na obrazy jest już zarezerwowane przy ready i onload zaczeka tylko na ich pobranie (co w przypadku samych pozycji nie ma dla nas w zasadzie już znaczenia)?
Link do wypowiedziLink
Wojciech Kopycki

Wojciech Kopycki CEO at CopySky

Temat: jQuery - objekt na objekcie

A skąd skrypt będzie wiedział, jakie są wymiary obrazka, jeśli go najpierw nie pobierze? ;)

http://stackoverflow.com/questions/307679/using-jquery...

Zrób sobie test. Weź jakikolwiek szablon strony z grafikami i napisz skrypt, który pobierze "offset()" dowolnego elementu (najlepiej któregoś na dole strony pod obrazkami) najpierw po "document.ready()", a później po "window.onload()" i daj znać czy będą różnice. ;)Wojciech Kopycki edytował(a) ten post dnia 19.06.12 o godzinie 16:16
Link do wypowiedziLink
Łukasz Z.

Łukasz Z. Specjalista ds
Informatyki w Mentor
S.A.

Temat: jQuery - objekt na objekcie

Nie sprzeczam się, ja na poważnie się pytałem i dziękuję za rozwianie moich wątpliwości :)
Spodziewałem się, że serwer przesyła najpierw nagłówki dla plików takich jak obrazy. Jak widać jednak, jeśli się w kodzie samemu nie określi wymiarów to przeglądarka faktycznie może "nie wiedzieć" jaka tam będzie wielkość :)Łukasz Z. edytował(a) ten post dnia 19.06.12 o godzinie 23:08
Link do wypowiedziLink

konto usunięte

Temat: jQuery - objekt na objekcie

Wojciech Kopycki:
A skąd skrypt będzie wiedział, jakie są wymiary obrazka, jeśli go najpierw nie pobierze? ;)

http://stackoverflow.com/questions/307679/using-jquery...

- jeżeli kontener obrazka ma zadany wymiar - można się nim posłużyć,
- jeżeli obrazek ma w CSS zadane wymiary - można z nich skorzystać,
- można podać obrazkowi (tzn. tagowi img) dodatkowe atrybuty np. data-width i data-height i na nich bazować,

Jeżeli żadne z powyższych - to trzeba czekać aż obrazek się wgra.

Choć można też wymusić rozmiar ... tylko może dziwnie potem wyglądać :)
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy





Wyślij zaproszenie do
Anuluj