Autor Wątek: jQuery, pobieranie wskaźnika, dodawanie elementów html, onClick - Porady  (Przeczytany 4699 razy)

Offline TDM

  • Użytkownik

# Grudzień 05, 2016, 09:48:54
Cześć, mam kilka pytań co do poprawności pisania stron:

1. Menu nawigacyjne opiera się na liście, są tam przyciski wywołujące określoną akcję, tylko teraz pytanie czy trzeba dodawać <button></button> żeby mieć przycisk skoro można nawet tak <p id = "idd"></p ? i dodać funkcję obsługującą kliknięcie ? Efekt powinien być taki najeżdżamy kursorem na przycisk podświetla się animując (hover), gdy kursor jest poza animuje się w drugą stronę, gdy kliknie to za świeci się na chwilę np na biało, ale trzyma nowy stan dopóki nie zostanie od kliknięty, nasuwa się checkbutton lecz ja potrzebuję całego prostokąta z tekstem w środku a nie zaznaczaniem z lewej lub prawej strony.

2. jQuery, jak wykryś kliknięcie w pustym miejscu strony ? Tam gdzie nie ma żadnego div'a ani niczego innego.

3. jQuery, pobieram sobie element o jakimś id z DOM, i co ? Czy dobrą praktyką jest zapisanie go do zmiennej ? Czy lepiej za każdym razem wyszukiwać go poprzez id czy style ( $('#tabela') )?

4. jQuery, dodaję sobie wiersz do tabeli poprzez funkcję append, i czy jest możliwość żeby funkcja append zwróciła mi wskaźnik:


var wiersz =  "<tr>
                            <td>kolumna 1</td>
                            <td>kolumna 2</td>
                     </tr>";

$('#tabela').find('tbody').append( wiersz );
I jak teraz zdobyć wskaźnik tego dodanego wiersza i zapisać go w zmiennej żebym mógł przeprowadzić w przyszłości na nim jakieś operacje ?

5. jQuery, jak sensownie zablokować kliknięcie w wybrane elementy nawet w przyciski, normalnie przycisk reaguje na onClick ale co jeżeli przez chwilę nie chcę aby reagował na kliknięcie ? Usunąć z niego reakcje na onClick czy w ciele funkcji dodać zmienną var reaguj i jednego if'a ?

6. Jest jakaś konwencja która mówi jak nadawać id poszczególnym elementom w html, wiadomo tabela to id="tabela", ale co jeżeli mamy kilka tabel, i może odróżnić tą nazwę od stylu bo styl dla tabeli też może się tak nazywać ? id="id_Tabela" class="style_Tabela" ?

Offline Mr. Spam

  • Miłośnik przetworów mięsnych

Offline L

  • Użytkownik

# Grudzień 05, 2016, 12:55:54
Trochę odbiegając od pytań, zainteresuj się może jakimś combo typu bootstrap + angular. Nie wciskaj wszędzie jQuery na siłę, bo go nie potrzebujesz najczęściej.

Offline Xion

  • Moderator
    • xion.log

  • +2
# Grudzień 05, 2016, 18:50:57
1. Trzeba bo accessibility. Paragraf nie dostanie nigdy focusa po wciśnięciu Tab, ani nie będzie rozpoznawany jako element interaktywny przez czytniki głosowe.

2. Wykrywaj kliknięcie w <body>.

3. Pomyśl chwilę co jest(1) bardziej czytelne (2) mniej podatne na błędy (3) szybsze? Odpowiedź powinna być oczywista.

4. Skonwertuj ten HTML na DOM zanim go dodasz do tabeli:
var row = $('<tr>...</tr>');
$('#tabela tbody').append(row);
row.css('color', 'red)';  // czy co tam chcesz

5. Ustaw atrybut disabled na true. To kolejny powód, dla którego elementy interaktywne lepiej żeby były przyciskami zamiast jakimiś randomowymi paragrafami.

6. ID i klasy CSS (style to co innego) mają osobne przestrzenie nazw, więc możesz mieć zarówno element foo jak i klasę foo.

Cytuj
Trochę odbiegając od pytań, zainteresuj się może jakimś combo typu bootstrap + angular. Nie wciskaj wszędzie jQuery na siłę, bo go nie potrzebujesz najczęściej.
jQuery niepotrzebne, ale za to cały wielki framework tak? ;P
OP powinien raczej spróbować używać na razie wbudowanego przeglądarkowego API, bo póki co wszystko o co pyta da się w nim zrobić równie łatwo jak w jQuery.

Offline lethern

  • Użytkownik

# Grudzień 06, 2016, 12:04:53
odnośnie 1), różnica między button i input (type button) znajdziesz w necie (różnic prawie nie ma, nie licząc renderowania i podelementów), druga rzecz to przycisk vs div, i tu dochodzi kwestia wspomniana focusa

Myślałem że już się odeszło od jQuery, widzę że to jeszcze trochę potrwa.. hm
co do 3. to jeśli wykonujesz to rzadko (np. rzadziej niż kilka razy na sekundę) to nie ma absolutnie znaczenia, przynajmniej staraj się nie mieć takiego kwiatka w pętli tylko przed pętlą

disabled nie pozwoli kliknąć w przycisk (i może zmienić jego wygląd, choć @css), oprócz tego możesz pomyśleć nad zwykłym zwróceniu false z funkcji (onclick) - dać return false, wtedy nie pójdzie submit. Choć pytanie nie jest zbyt jasne co chcesz zrobić
« Ostatnia zmiana: Grudzień 06, 2016, 12:31:23 wysłana przez lethern »

Offline TDM

  • Użytkownik

# Grudzień 12, 2016, 17:43:25
3. Pomyśl chwilę co jest(1) bardziej czytelne (2) mniej podatne na błędy (3) szybsze? Odpowiedź powinna być oczywista.
Po słowie szybsze stwierdzam że zapisanie tego w zmiennej, tylko konwencja nazw takiej zmiennej odrózniejącej jej od innej to var wsk_PrzysickZamykajacyOkienkoDialogowe = ... ? Bo lepiej już trzymać je wszystkie globalnie.

disabled nie pozwoli kliknąć w przycisk (i może zmienić jego wygląd, choć @css), oprócz tego możesz pomyśleć nad zwykłym zwróceniu false z funkcji (onclick) - dać return false, wtedy nie pójdzie submit. Choć pytanie nie jest zbyt jasne co chcesz zrobić
Wyświetlenie się okienka dialogowego "pływającego" i przyciemnienie strony żeby wyróżnić okienko, to już mam ale chcę zablokować użytkownikowi kliknięcia w coś innego.

Myślałem że już się odeszło od jQuery, widzę że to jeszcze trochę potrwa.. hm
To co jest teraz zamiast jQuery ?

Offline lethern

  • Użytkownik

# Grudzień 13, 2016, 11:01:49
przyciemnienie strony żeby wyróżnić okienko, to już mam ale chcę zablokować użytkownikowi kliknięcia w coś innego.
jeśli masz "przyciemnienie" jako div z przezroczystością zasłaniający całą stronę, to ten właśnie element blokuje użytkownika przed kliknięciem w cokolwiek (nie tylko w przycisk, ale w cokolwiek)

To co jest teraz zamiast jQuery
jeszcze większe frameworki.. no to chyba to, nie wiem, tych akurat nie używam. Lub "vanilla js" (czyli czysty JS), jeśli nie targetujesz w stare przeglądarki to jQuery w pewnej części jest zbędny (czyt. JS trochę ewoluował, jak i IE trochę ewoluowało, i naprawiły się niektóre problemy które rozwiązuje jQuery). Choć nadal zapewnia różne konstrukcje pozwalające pisać krócej.. Wydaje mi się że niektórych ludzi po prostu odrzuca od jquery i szukają dowolnej wymówki żeby go nie używać (np. ja) lub mają w jego miejsce inne coś
« Ostatnia zmiana: Grudzień 13, 2016, 14:17:36 wysłana przez lethern »

Offline TDM

  • Użytkownik

# Grudzień 17, 2016, 09:18:39
jeśli nie targetujesz w stare przeglądarki to jQuery w pewnej części jest zbędny
Czyli jQuery nie zapewnia mi kompatybilności ze starszymi przeglądarkami a vanilla.js tak ? Czytałem w " JavaScript i jQuery. Nieoficjalny podręcznik. Wydanie III " że jQuery w wersji 1.x.x zapewnia ową kompatybilność. vanilla.js jest tak samo darmowa ?

Offline lethern

  • Użytkownik

# Grudzień 18, 2016, 19:47:48
odczytałeś to odwrotnie niż miałem intencje napisać, a jquery jest potrzebny żeby ogarnąć stare przeglądarki, natomiast "vanilla js" to nie jest framework, to taka wymyślona nazwa do określenia kodzenia w JS bez żadnego frameworku

[edit]vanilla literówka
« Ostatnia zmiana: Grudzień 19, 2016, 14:24:32 wysłana przez lethern »

Offline Liosan

  • Redaktor

# Grudzień 18, 2016, 22:36:13

Offline TDM

  • Użytkownik

# Grudzień 21, 2016, 21:57:33
2. Wykrywaj kliknięcie w <body>.
Dobra, ale co jeżeli na środku strony mam elementy która reagują na kliknięcie ? Np. tabela, obraz który zostaje podświetlony, klikając poza te elementy dosłownie na pustym miejscu odwołuje pewne akcje np zaznaczenie owego obrazka. Dodając onClick na elemencie  body i w funkcji wpisze instrukcje kasującą zaznaczenie tracę możliwość zaznaczenia, bo obrazek zostaje zaznaczony i zaraz funkcja w body reagująca na kliknięcie kasuje mi owe zaznaczenie. Jak sobie z tym poradzić ?

Offline lethern

  • Użytkownik

# Grudzień 21, 2016, 23:28:56
wydaje mi się, że idea jest mniej więcej taka (choć jaka jest właściwa implementacja trochę się waham)
zamiast
  myElem.addListener( 'click', myElemOnClick ) robisz
  myElem._jakas_identyfikacja //

  body.addListener( 'click', function(event){
    if(event.target._jakas_identyfikacja) {
      myElemOnClick ()
    }
});
(Chyba że mi się to zupełnie źle skojarzyło? W każdym razie, u mnie przy setkach elementów z kilkoma listenerami każdy taka zamiana ma sens)

@down - to rozwiązuje problem, ale idea ogólna jest taka, żeby myElem nie miał listenera
« Ostatnia zmiana: Grudzień 22, 2016, 18:15:45 wysłana przez lethern »

Offline Stark

  • Użytkownik

# Grudzień 22, 2016, 15:37:27
Dobra, ale co jeżeli na środku strony mam elementy która reagują na kliknięcie ? Np. tabela, obraz który zostaje podświetlony, klikając poza te elementy dosłownie na pustym miejscu odwołuje pewne akcje np zaznaczenie owego obrazka. Dodając onClick na elemencie  body i w funkcji wpisze instrukcje kasującą zaznaczenie tracę możliwość zaznaczenia, bo obrazek zostaje zaznaczony i zaraz funkcja w body reagująca na kliknięcie kasuje mi owe zaznaczenie. Jak sobie z tym poradzić ?

myElem.addEventListener('click', function(event){
event.stopPropagation();
}
« Ostatnia zmiana: Grudzień 22, 2016, 15:46:48 wysłana przez Stark »

Offline TDM

  • Użytkownik

# Grudzień 22, 2016, 21:40:54
Dobra, teraz zauważyłem że pojawił się kolejny problem. Z bazy danych pobieram informacje o ilości tabel które będą na stronie, z każdą tabelą przeprowadzam pewną akcję np. reakcja na onClick więc każda tabela musi mieć swój ID. Skoro ilość tabel jest znana dopiero po wczytaniu informacji z bazy i nie mam jej po stronie przeglądarki tylko muszę ją przesłać to jak po stronie serwera wygenerować ID i kod javascript to obsługi tych tabel. Z każda tabelą będę przeprowadzał stałe akcje tzn. kod javascript się nie zmieni, zmieni się tylko id na której będę przeprowadzał akcje. I jak rozwiązać ten problem ?

EDIT: @UP I co jeżeli moje wywołanie wygląda tak:
'<tr onClick="selectRow(this)">';
}
Ponieważ operuje przez on click na wierszach tabeli, to jak mam wpakować tam event ?
« Ostatnia zmiana: Grudzień 22, 2016, 21:58:14 wysłana przez TDM »

Offline lethern

  • Użytkownik

# Grudzień 23, 2016, 12:59:41
http://stackoverflow.com/a/387843
(nie czytaj rozwiązań ze zmienną globalną event (window.event), bo ona jest tylko dla IE. (nie pomyl się, jako że my nazywamy pierwszy argument funkcji również event, a to co innego niż zmienna globalna event))
function myOnClick(e){
  var event1 = e;
  var event2 = window.event;  // tylko dla IE; "window.event" jest równoważne zapisowi "event" (jeśli JS chodzi w przeglądarce)
}

co do Twojego problemu z IDkami.. ja osobiście nie rozumiem opisu problemu, po co IDki? dlaczego tabela musi mieć ID?
(javascriptem możesz nadać ID zwykłym "mojaTabela.id = "mojeId")
« Ostatnia zmiana: Grudzień 23, 2016, 13:08:46 wysłana przez lethern »

Offline Stark

  • Użytkownik

# Grudzień 23, 2016, 14:30:59
EDIT: @UP I co jeżeli moje wywołanie wygląda tak:
'<tr onClick="selectRow(this)">';
}
Ponieważ operuje przez on click na wierszach tabeli, to jak mam wpakować tam event ?

Inline'owy onclick domyślnie posiada parametr event:
<div onclick="alert('aaa');"><a onclick="event.stopPropagation();alert('bbb');">Alert</a></div>
« Ostatnia zmiana: Grudzień 23, 2016, 14:33:44 wysłana przez Stark »