Posiadam stronę z prawie 2000 elementami DOM (węzłów), na której znajduje się między innymi prosta tabela napisana za pomocą jQuery z ponad 300 linkami do innych podstron (wzorowana na:)
http://php.net/https://jqueryui.com/tabs/#default, plaintext
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> <script> $( function() { $( "#tabs" ).tabs(); } ); </script>
<script> <!-- onload=function(){ for(i=0;d=document.getElementsByTagName('a')[i++];){ if (d.href.match(/.*hotel\d+\.html/)){ d.onclick=function(){window.open(this.href,'a','width=740px, height=750px, resizable=yes, scrollbars=yes, left=20px, top=20px');return false} } } } //--> </script>
A po co tam tabele?
A dlaczego nie?
Po prostu taka tabelka ładnie wygląda.
A mogę poprosić o odpowiedzi na moje pytania?
Odpowiedzi są w manualu, do którego zresztą podałeś link.
https://jqueryui.com/tabs/#ajax
Tak, wiem, ale żeby załadować kolejne tablice musi być dodany jakiś kod Java Script.
Ja zaś JS w ogóle nie znam, stąd prośba o pomoc.
Wiem, że w głównym katalogu ma być tylko pierwsza tablica - <li><a href="#tabs-1" >Al-Ar</a></li>
A cała reszta w kolejnym lub kolejnych tablicach, ale jak dodać resztę to już nie wiem.
I we wzorcu podają między innymi link do swojej strony "demos", którego ja nie dodaję do swojej strony.
Poza tym chciałbym aby zawsze nowe podstrony otwierały sięw określonej skryptem wielkości.
Przecież pod spodem jest " view source" z przykładem
Dzięki za "otworzenie oczu".
Pokombinowałem i udało się adaptować przykład do moich celów, ale pozostał jeszcze jeden problem.
Otóż nowe okno z wybranym hotelem otwiera się w określonym miejscu i określonych wymiarach TYLKO na pierwszej tablicy, która otwiera się na głównej stronie.
Na kolejnych, dołączanych stronach, powiedzmy wg przykładu, np.
http://php.net/ajax/content1.php, plaintext
https://www.audero.it/blog/2018/05/16/event-delegation-in-javascript/
i ogólnie:
https://www.google.com/search?q=javacript+delegate+events+anchors
Dodałem ten skrypt:
function onClick(event) { // Prevent the default action event.preventDefault(); // Store the link of the clicked anchor const url = event.target.href; // Update the results by sending an Ajax request // to the URL specified in the "url" variable // Update the anchors in the pagination widget // and remove the event listener on the deleted anchors console.log('Fetching results at ' + url); } const anchors = document.querySelectorAll('.#tab a'); for (let i = 0; i < anchors.length; i++) { anchors[i].addEventListener('click', onClick); }
#tabs
To ma być selektor CSS określający, który nadrzędny element (nieładowany poprzez Ajax) będzie przechwytywał zdarzenia, a nie wartość atrybutu href.
Czyli ten drugi skrypt w przykładzie.
Tam oprócz sprawdzania tagu, należy dodać sprawdzanie klasy (musisz nadać klasy elementom <a> w tabeli, aby odróżnić je od elementów <a> w zakładkach.
Porównaj swoją procedurę z nową, dokładnie widać gdzie ma być otwieranie okna.
Może zadaję banalne pytania, ale kompletnie nie znam JavaScript, stąd prośba o pomoc.
Zgodnie z poradą zmieniłem skrypt:
<script> function onClick(event) { // If the event is not triggered on one of the anchors, // there is nothing we want to do if (event.target.nodeName !== 'A') { } // Prevent the default action event.preventDefault(); // Store the link of the clicked anchor const url = event.target.href; // Update the results by sending an Ajax request // to the URL specified in the "url" variable // Update the anchors in the pagination widget console.log('Fetching results at ' + url); } const pagination = document.querySelector('#tabs'); pagination.addEventListener('click', onClick); } <script>
A jak komórkom w tabeli nadałeś klasę td1?
Normalnie, w css...
.td1 { border-bottom: 1px solid black; border-left: 1px solid #482306; color: #482306; font: 16px Tahoma, 'Courier New CE', 'Times New Roman', Times, serif; padding:5px 0 5px 2px; text-align : left; text-decoration: none; width: 97%; }
A nie wydaje Ci się, że klasy nadałeś w HTML?
Nie. Są w pliku*.css
Nie bardzo rozumiem pytanie.
Mam plik *.php i plik *.css ze stylami.
A nie wydaje Ci się, że klasy nadałeś w HTML?
Może nie rozumiem pytania?
Może bardziej łopatologicznie? Nie jestem programistą! A na JS nie znam się kompletnie!
Jeśli uważasz, że nadałeś klasy dla tych elementów <td> w CSS, to spróbuj nadać w CSS klasy dla elementów <a>, które chcesz, aby po kliknięciu otwierały okno.
Podpowiem Ci już dalszy krok, po rozwiązaniu powyższego:
if (event.target.nodeName !== 'A' && !event.target.classList.contains('nadana_klasa')) { } i tu kod otwierania okna
Zrobiłem tak:
<script> function onClick(event) { if (event.target.nodeName !== 'A' && !event.target.classList.contains('this.href,.match(/.*hotel\d+\.html/')) { return; } event.preventDefault(); const url = event.target.href; console.log('Fetching results at ' + url); } const pagination = document.querySelector('#tabs'); pagination.addEventListener('click', onClick); } </script>
if (event.target.nodeName !== 'A' && !event.target.classList.contains('this.href,'a'')) {
if (event.target.nodeName !== 'A' && !event.target.classList.contains('.td1','a'')) {
a { background-color: transparent; text-decoration: none; } .td1 { border-bottom: 1px solid black; border-left: 1px solid #482306; color: #482306; font: 16px Tahoma, 'Courier New CE', 'Times New Roman', Times, serif; padding:5px 0 5px 2px; text-align : left; text-decoration: none; width: 97%; } .td1 a { background-color: transparent; text-decoration: none; }
Zrobiłem tak:
zmieniłem tabelę
<http://december.com/html/4/element/div.html id="tabs"> <http://december.com/html/4/element/ul.html class="site-tabs"> <http://december.com/html/4/element/li.html class="site-tabs-item"><http://december.com/html/4/element/a.html href="#tabs-1" >Al-Aq</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> <http://december.com/html/4/element/li.html class="site-tabs-item"><http://december.com/html/4/element/a.html href="ajax/content1.php" >Aq-D</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> <http://december.com/html/4/element/li.html class="site-tabs-item"><http://december.com/html/4/element/a.html href="ajax/content2.php" >E-Ha</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> <http://december.com/html/4/element/li.html class="site-tabs-item"><http://december.com/html/4/element/a.html href="ajax/content3.php" >Hi-J</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> <http://december.com/html/4/element/li.html class="site-tabs-item"><http://december.com/html/4/element/a.html href="ajax/content4.php" >K-Mi</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> <http://december.com/html/4/element/li.html class="site-tabs-item"><http://december.com/html/4/element/a.html href="ajax/content5.php" >Mo-Ro</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> <http://december.com/html/4/element/li.html class="site-tabs-item"><http://december.com/html/4/element/a.html href="ajax/content6.php" >Ro-Sp</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> <http://december.com/html/4/element/li.html class="site-tabs-item"><http://december.com/html/4/element/a.html href="ajax/content7.php" >St-Su</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> <http://december.com/html/4/element/li.html class="site-tabs-item"><http://december.com/html/4/element/a.html href="ajax/content8.php" >T-Z</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html></http://december.com/html/4/element/ul.html>
<script> function onClick(event) { if (event.target.nodeName !== 'A' && !event.target.classList.contains('.site-tabs-item ')) { return; } event.preventDefault(); const url = event.target.href; console.log('Fetching results at ' + url); } const pagination = document.querySelector('#tabs'); pagination.addEventListener('click', onClick); </script>
.site-tabs { background-color: LightCyan; list-style: none; padding: 0; width: 200px; border: 1px solid LightBlue; } .site-tabs .site-tabs-item { border-bottom: 1px solid LightBlue; padding: 5px; } .site-tabs .site-tabs-item:last-child { border-bottom: 0; } .site-tabs .site-tabs-item a { color: black; text-decoration: none; } .site-tabs .site-tabs-item a:hover { text-decoration: underline; }
Klasę powinieneś nadać elementowi <a>, przecież od kilku postów o tym piszemy.
Funkcja wyświetla wyłącznie: "Fetchning...", bo taki jest jej kod.
Gdzie tam jest otwieranie okna?
Zmieniłem
if (event.target.nodeName !== 'A' && !event.target.classList.contains('.site-tabs-item ')) {
]if (event.target.nodeName !== 'A' && !event.target.classList.contains('.site-tabs .site-tabs-item a ')) {
Classlist to taki worek na klasy (lista klas na elemencie). Contains sprawdza czy dana klasa jest w zbiorze (wystarczy poświęcić minutę na znalezienie czegokolwiek o tym). Czy według ciebie jakaś ścieżka do węzła "a" to klasa?
W końcu pojąłem...
Ale nie spotkałem się nigdzie wcześniej z klasą dla <a>. Może to mnie w jakimś stopniu tłumaczy.
Zrobiłem tak:
<http://december.com/html/4/element/div.html id="tabs"> <http://december.com/html/4/element/ul.html class="site-tabs"> <http://december.com/html/4/element/li.html class="site-tabs-item"><http://december.com/html/4/element/a.html class="hotel" href="#tabs-1" >Al-Aq</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> <http://december.com/html/4/element/li.html class="site-tabs-item"><http://december.com/html/4/element/a.html class="hotel" href="ajax/content1.php" >Aq-D</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> <http://december.com/html/4/element/li.html class="site-tabs-item"><http://december.com/html/4/element/a.html class="hotel" href="ajax/content2.php" >E-Ha</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> <http://december.com/html/4/element/li.html class="site-tabs-item"><http://december.com/html/4/element/a.html class="hotel" href="ajax/content3.php" >Hi-J</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> <http://december.com/html/4/element/li.html class="site-tabs-item"><http://december.com/html/4/element/a.html class="hotel" href="ajax/content4.php" >K-Mi</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> <http://december.com/html/4/element/li.html class="site-tabs-item"><http://december.com/html/4/element/a.html class="hotel" href="ajax/content5.php" >Mo-Ro</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> <http://december.com/html/4/element/li.html class="site-tabs-item"><http://december.com/html/4/element/a.html class="hotel" href="ajax/content6.php" >Ro-Sp</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> <http://december.com/html/4/element/li.html class="site-tabs-item"><http://december.com/html/4/element/a.html class="hotel" href="ajax/content7.php" >St-Su</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> <http://december.com/html/4/element/li.html class="site-tabs-item"><http://december.com/html/4/element/a.html class="hotel" href="ajax/content8.php" >T-Z</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html></http://december.com/html/4/element/ul.html>
<script> function onClick(event) { if (event.target.nodeName !== 'A' && !event.target.classList.contains('hotel')) { return; } event.preventDefault(); const url = event.target.href; console.log('Fetching results at ' + url); } const pagination = document.querySelector('#tabs'); pagination.addEventListener('click', onClick); </script>
a.hotel:link, a.hotel:visited { background-color: transparent; color: navy; text-decoration: underline; } a.hotel:hover, a.hotel:focus, a.hotel:active { background-color: red; } .site-tabs { background-color: LightCyan; list-style: none; padding: 0; width: 200px; border: 1px solid LightBlue; } .site-tabs .site-tabs-item { border-bottom: 1px solid LightBlue; padding: 5px; } .site-tabs .site-tabs-item:last-child { border-bottom: 0; } .site-tabs .site-tabs-item a { color: black; text-decoration: none; } .site-tabs .site-tabs-item a:hover { text-decoration: underline; }
Przecież kod do otwierania okna jest we wcześniejszym skrypcie, który pokazałeś i stosowałeś.
Ten?
<script> <!-- onload=function(){ for(i=0;d=document.getElementsByTagName('a')[i++];){ if (d.href.match(/.*hotel\d+\.html/)){ d.onclick=function(){window.open(this.href,'a','width=740, height=750, resizable=yes, scrollbars=yes, left=20, top=20');return false} } } } //--> </script>
Nie chodzi o to, abyś ten kod jako całość wkleił znów na stronę, bo przecież przygotowałeś nowy skrypt od obsługi linków.
Chodzi tylko o otwieranie okna, a to jest dokonywane poprzez window.open
Poddaję się.
Wierz mi, że próbowałem. kilkadziesiąt różnych wariantów, ale efekt - żaden.
Jeszcze raz napiszę - KOMPLETNIE NIE ZNAM JAVASCRIPT.
Dla tego jednego skryptu nie będę uczył się całego kursu JS.
Jeśli możesz dać jakąś konkretną wskazówkę, będę wdzięczny, jeśli nie, to trudno. Strona będzie większa.
Podałem Ci wskazówkę w poprzednim poście.
Wymęczyłem (czytaj - znalazłem i trochę zmieniłem) takie dwa skrypty:
<script> function onclick(event) { if (event.target.nodeName !== 'A' && !event.target.classList.contains('hotel')) { } event.preventDefault(); const url = event.target.href; console.log('Fetching results at ' + url); } const pagination = document.querySelector('a'); pagination.addEventListener('click', onclick); </script> <script> var myHTML = document.querySelector('html'); myHTML.onclick = onload=function(){ for(i=0;d=document.getElementsByTagName('a')[i++];){ if (d.href.match(/.*hotel\d+\.html/)){ d.onclick=function(){window.open(this.href,'a','width=740, height=750, resizable=yes, scrollbars=yes, left=20, top=20');return false} } } } </script>
<script> <!-- onload=function(){ for(i=0;d=document.getElementsByTagName('a')[i++];){ if (d.href.match(/.*hotel\d+\.html/)){ d.onclick=function(){window.open(this.href,'a','width=740, height=750, resizable=yes, scrollbars=yes, left=20, top=20');return false} } } } //--> </script>
<http://december.com/html/4/element/div.html id="tabs"> <http://december.com/html/4/element/ul.html> <http://december.com/html/4/element/li.html><http://december.com/html/4/element/a.html class="hotel" href="#tabs-1" >Al-Aq</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> <http://december.com/html/4/element/li.html><http://december.com/html/4/element/a.html class="hotel" href="ajax/content1.php" >Aq-D</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> <http://december.com/html/4/element/li.html><http://december.com/html/4/element/a.html class="hotel" href="ajax/content2.php" >E-Ha</http://december.com/html/4/element/a.html></http://december.com/html/4/element/li.html> itd...
Nie wiem dlaczego uparcie wklejasz stary kod, skoro napisałem abyś tego nie robił.
<http://december.com/html/4/element/script.html> function onClick(event) { if (event.target.nodeName !== 'A' && !event.target.classList.contains('hotel')) { return; } event.preventDefault(); window.open(event.target.href, 'a','width=740, height=750, resizable=yes, scrollbars=yes, left=20, top=20'); } const pagination = document.querySelector('#tabs'); pagination.addEventListener('click', onClick); </http://december.com/html/4/element/script.html>
A przeczytałeś, że KOMPLETNIE NIE ZNAM JAVASCRIPT?
Właśnie dlatego wklejałem na czuja ten kod. I udało się, bo na szczęście znalazłem w necie poniższy (ten drugi) skrypt:
<script> function onclick(event) { if (event.target.nodeName !== 'A' && !event.target.classList.contains('hotel')) { } event.preventDefault(); const url = event.target.href; console.log('Fetching results at ' + url); } const pagination = document.querySelector('html'); pagination.addEventListener('click', onclick); </script> <script> var myHTML = document.querySelector('html'); myHTML.onclick = onload=function(){ for(i=0;d=document.getElementsByTagName('a')[i++];){ if (d.href.match(/.*hotel\d+\.html/)){ d.onclick=function(){window.open(this.href,'a','width=740, height=750, resizable=yes, scrollbars=yes, left=20, top=20');return false} } } } </script>
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)