Temat: Dodatkowy aktywny element do diva

Wiem, że temat nie jest dokładnie sprecyzowany, ale sam za bardzo nie wiem jak to się nazywa i pod jakim hasłem mam szukać :-) Potrzebuję zrobić coś takiego: załóżmy, że mam jakiś element div. Muszę gdzieś w jego otoczeniu (powiedzmy prawy górny róg) umiejscowić inny element, po kliknięciu w który będę mógł go usunąć. Ten element nie powinien się zawierać w bazowym divie, a być na jego zewnątrz... coś jak przyciski do zamykania wyskakujących reklam.
Czy ktoś mógłby mnie naprowadzić, pod jakimi hasłami szukać tego w necie? Z góry dzięki za pomoc!

Temat: Dodatkowy aktywny element do diva

Nie wiem jak w necie, ale jeśli nie masz nic przeciw jQuery to parę linijek:

function addButton(id) {

var elem = $("#"+id);

elem.before('<div>X</div>');



var btn = elem.prev();

btn.addClass("button");

btn.css("top", elem.offset().top - btn.outerHeight() + "px"); 

btn.css("left", elem.offset().left + elem.width() - btn.width() + "px");

btn.click(function() {

  $(this).next().remove();

  $(this).remove();

});



}

i css

.button {

  position: absolute;

  border: 1px solid black;

}

Pisane na szybko więc do przetestowania ale idea jest mniej więcej taka.Krzysztof Kawa edytował(a) ten post dnia 24.08.09 o godzinie 00:22

Temat: Dodatkowy aktywny element do diva

Krzysztof Kawa:
Nie wiem jak w necie, ale jeśli nie masz nic przeciw jQuery to parę linijek:

Szczerze mówiąc, to piszę projekt właśnie w jQuery, więc spadłeś mi z nieba! :-) Wielkie dzięki za oświecenie.

Temat: Dodatkowy aktywny element do diva

function addButton(id) {

	var elem = $("#"+id),

		btn = $('<div>X</div>');

	btn.addClass("button")

		.insertBefore(elem)

		.css({

			top: elem.offset().top - btn.outerHeight() + "px",

			left: elem.offset().left + elem.width() - btn.width() + "px"

		})

		.click(function() {

			$(this)

				.next().remove().end()

				.remove();

		})

}

Chaining Panowie, chaining!
Nie ma sensu odwoływać się kilka razy osobno do tego samego obiektu, jeśli można to zrobić jednym ciągiem.
A w css() można korzystać z notacji obiektowej, przy zmianie większej liczby atrybutów.

Temat: Dodatkowy aktywny element do diva

Bartek Stańkowski:
Chaining Panowie, chaining!
Nie ma sensu odwoływać się kilka razy osobno do tego samego obiektu, jeśli można to zrobić jednym ciągiem.

Nie ma sensu odwoływać się jednym ciągiem, jeśli można kilka razy osobno. Taka sama prawda..
Jaka jest różnica poza czytelnością między

btn.adhgaskgdkajsgkdagsdgagsjdghasgdgasgdja();

btn.bnfsdnfjsdfkhsldjfhjksdhfjhsdjfkhsdfhljskd();

btn.cdfhjlkhsdljfhsjdhfshdfkhsdkjhfk();

a

 btn. adhgaskgdkajsgkdagsdgagsjdghasgdgasgdja(). bnfsdnfjsdfkhsldjfhjksdhfjhsdjfkhsdfhljskd(). cdfhjlkhsdljfhsjdhfshdfkhsdkjhfk() 

A w css() można korzystać z notacji obiektowej, przy zmianie większej liczby atrybutów.

true

Temat: Dodatkowy aktywny element do diva

Krzysztof Kawa:
Jaka jest różnica poza czytelnością między
(...)

Czytelności to kwestia gustu chociaż chaining dla mnie jest czytelniejszy (jako .NETowiec lubiący Linq).
Natomiast różnica może być w kwestii implementacji. Nie mówię, że jest teraz, albo że w ogóle w jQuery kiedyś się pojawi. Np taki zapis:
obj.Where(o => o>5).Where(o => o>10)
może być zaimplementowany inteligentnie, czyli w efekcie jako:
obj.Where(o => o>10)
Tak to robi na dzień dzisiejszy Linq2Sql, kto wie co będzie jQuery robił za jakiś czas.
Skoro autorzy jQuery polecają chaining to warto Bartkowi podziękować za trafną sugestię, bo promuje dobre standardy.

Temat: Dodatkowy aktywny element do diva

Jaka jest różnica poza czytelnością między

btn.adhgaskgdkajsgkdagsdgagsjdghasgdgasgdja();

btn.bnfsdnfjsdfkhsldjfhjksdhfjhsdjfkhsdfhljskd();

btn.cdfhjlkhsdljfhsjdhfshdfkhsdkjhfk();

a

 btn. adhgaskgdkajsgkdagsdgagsjdghasgdgasgdja(). bnfsdnfjsdfkhsldjfhjksdhfjhsdjfkhsdfhljskd(). cdfhjlkhsdljfhsjdhfshdfkhsdkjhfk() 

Tutaj może tak wielkiej różnicy nie ma, bo obiekt, na którym się operuje jest w zmiennej, ale gdyby to był selektor (szczególnie w przypadku klasy) to różnice w wydajności mogą się zrobić znaczące.
Poza tym, mniej pisania, mniej bałaganu w kodzie (chociaż wiem, że czasami ciężej się połapać w łańcuchach).

ps. Bardzo zgrabny przykład...

Temat: Dodatkowy aktywny element do diva

coś w tym jest, ale mi np. ciężko się do chainingu przyzwyczaić, głównie dlatego, że c++ jest moim "głównym" językiem i intuicja podpowiada, że metody typu append zwracają utworzony obiekt, a nie ten, na którym były wywołane.. co tutaj nie jest prawdą.
może na przykładzie:

$("#aaa").append('<div id="bbb">bbb</div>').append('<div id="ccc">ccc</div>');

jest równoważne

$("#aaa").append('<div id="bbb">bbb</div>');

	$("#aaa").append('<div id="ccc">ccc</div>');

gdzie mi przynajmniej przy takim zapisie bardziej intuicyjne wydawałoby się

$("#aaa").append('<div id="bbb">bbb</div>');

	$("#bbb").append('<div id="ccc">ccc</div>');

Krzysztof Kawa edytował(a) ten post dnia 10.09.09 o godzinie 10:00

Temat: Dodatkowy aktywny element do diva

Ja wole tak:

element.getParent().getNext('div').destroy();

Niż

var parent = element.getParent();

var next = parent.getNext();

next.destroy();

Kwestia gustu, ale o tym się niedyskutuje.

Temat: Dodatkowy aktywny element do diva

Marcin Baran:
Ja wole tak:

element.getParent().getNext('div').destroy();

Niż

var parent = element.getParent();

var next = parent.getNext();

next.destroy();

Kwestia gustu, ale o tym się niedyskutuje.

tu masz oczywiście rację - unika się niepotrzebnej zmiennej, we wcześniejszych dyskusjach zmienna już istniała i tak więc to troszkę coś innego, ale to też kolejny dobry przykład na niekonsekwencję JQ o której mówiłem: w wyrażeniu element.getParent().append('aaa');
append('aaa') wykona się na parencie elementu, ale już element.append('<cokolwiek>').append('aaa') będzie to wykonane na elemencie a nie na tym co dodał pierwszy append...