[js] jquery tabs

0

witam, mam problem z jquery. ogolnie chce skorzystac z http://jqueryui.com/demos/tabs/ i wyswietlac kilka takich blokow, przy jednym bloku wszystko dziala ok ale przy dwoch juz nie (pierwszy dziala , ale drugi nie ) , link do kodu jest tutaj -> http://obelfrach.pl/dupa/plik.html no i wkleje tutaj jeszcze sam kod HMTL

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>SSS</title>
</style>
<link rel="stylesheet" href="css/jquery-ui.css" type="text/css" >
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jqueryUI.js"></script>
<script type="text/javascript">
	$(function() {
		$("#tabs").tabs();
	});
	</script>
</head>	
<body>      

<div class="demo">

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs">
	<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
		<li class="ui-corner-top ui-tabs-selected  ui-state-active"><a href="#tabs-0">1</a></li>
		<li class="ui-corner-top ui-state-default"><a href="#tabs-1">2</a></li>
		<li class="ui-corner-top ui-state-default"><a href="#tabs-2">3</a></li>
		<li class="ui-corner-top ui-state-default"><a href="#tabs-3">4</a></li>

		<li class="ui-corner-top ui-state-default"><a href="#tabs-4">5</a></li>
		<li class="ui-corner-top ui-state-default"><a href="#tabs-5">6</a></li>
	</ul>
	<div class="ui-tabs-panel ui-widget-content ui-corner-bottom " id="tabs-0">
		<p>a</p>
	</div>
	<div class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" id="tabs-1">

		<p>b</p>
	</div>
	<div class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" id="tabs-2">
		<p>c</p>
	</div>
	<div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-3">
		<p>d</p>

	</div>
	<div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-4">
		<p>e</p>
	</div>
	<div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-5">
		<p>f</p>
	</div>
</div>
</div>
<div class="demo">

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs">
	<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
		<li class="ui-corner-top ui-tabs-selected  ui-state-active"><a href="#tabs-6">1</a></li>
		<li class="ui-corner-top ui-state-default"><a href="#tabs-7">2</a></li>
		<li class="ui-corner-top ui-state-default"><a href="#tabs-8">3</a></li>

		<li class="ui-corner-top ui-state-default"><a href="#tabs-9">4</a></li>
		<li class="ui-corner-top ui-state-default"><a href="#tabs-10">5</a></li>
		<li class="ui-corner-top ui-state-default"><a href="#tabs-11">6</a></li>
	</ul>
	<div class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" id="tabs-6">
		<p>q</p>
	</div>

	<div class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" id="tabs-7">
		<p>w</p>
	</div>
	<div class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide" id="tabs-8">
		<p>e</p>
	</div>
	<div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-9">
		<p>r</p>

	</div>
	<div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-10">
		<p>t</p>
	</div>
	<div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-11">
		<p>y</p>
	</div>
</div>
</div>

</body>
</html>

z gory dzieki za jakakolwiek pomoc/wskazowki co moze byc nie tak.

0

Używasz w obu blokach id="tabs". Nie wolno tego robić. Atrybut id MUSI zawierać unikalny identyfikator, tj. w całym dokumencie HTML id nie może się powtarzać.

Zamiast id użyj klasy (dokument może zawierać wiele elementów o danej klasie) lub użyj dwóch różnych id.

0

problem w tym, ze funkcja jest w jquery i niedokonca wiem jak dziala , a jak zmienie id na "tabs1" i "tabs2" to nie dziala ;/ a co do klasy to zmienilem id na class i tez nie dziala (pewnie cos jeszcze musialbym w jsie zmienic, ale z jsem u mnie slabo ;/ )

moglbys jeszcze jakas wskazowke dac jak to naprawic ? :D

pzdr

0

To nie wiesz jak działa?

        $(function() {
                $("#tabs").tabs();
        });
        </script>

To do tutoriali,
Chcesz mieć drugi blok zakładek to dodajesz

$("#other_tabs).tabs()

w powyższej funkcji.

0

problem w tym ze ja dokonca nie bede wiedzial ile bedzie tych blokow, bo to maja byc komentarze do strony (wiec raz moze byc jeden , raz dwa itd ...), mozna ew programowo tez funkcje stworzyc, ale chyba jest jakies prostrze rozwiazanie tego problemu ?

pzdr

0

No to w takim razie użycie class wydaje się oczywiste.
Poza tym nie bardzo widzę sens używania w takiej sytuacji zakładek, ale nie wiem dokładnie co chcesz uzyskać.

0

@Cywek:
Co to za projekt? Robisz stronę non-profit dla siebie, czy komercyjnie?

Nie chcę Ci podawać gotowca, szczególnie w tym drugim przypadku, bo jestem przeciwko wstawianiu kodu na pałę i bez nawet chęci zrozumienia. Przez takie podejście jakość stron jest lipna, a JavaScript miał złą opinię -- po prostu używali go ludzie, którzy nie mieli zielonego pojęcia o tym co robią.

Funkcji $ przekazujesz zwykły selektor CSS. #tabs to selektor ID -- wybiera element o atrybucie id równym tabs. Zamiast selektora ID użyj selektora klasy i zastąp w kodzie id klasami (atrybut class). Czy może podstaw CSS też nie znasz i nie chcesz poznać? Są na ten temat w necie materiały, tutoriale. Są książki.

Pewnych rzeczy nie da się obejść. Chociaż nie, jest sposób, by nie musieć się tego uczyć, a jednak mieć działający kod: zatrudnić webdevelopera. Można zawsze szukać pomocy, podpowiedzi na forum, ale tu zwykle daje się właśnie takie podpowiedzi, a nie gotowce.

Zauważ proszę, że i tak nie musisz przyswoić aż tak wiele tej wiedzy -- podstawowe selektory CSS powinien znać każdy, kto tworzy dzisiaj strony www. A selektor klasy to być może najczęściej używany selektor. Jeśli chodzi o JavaScript, to też na razie nie będziesz mógł powiedzieć, że "zrobiłeś zakładki". Przepaść pomiędzy użyciem jednej gotowej funkcji z jQuery a własnoręcznym napisaniem zakładek jest jednak spora. Więc ciesz się, że nie musisz się przekopywać przez DOM, wyrażenia regularne i samo programowanie (choćby) strukturalne w JavaScripcie ;).

0

zrobilem tym sposobem z dopisywaniem intrukcji do funkcji, tylko ze nie jest to dokonca dobre rozwiazanie, bo musialbym przy kazdym nowym komentarzu dopisywac do tej funkcji intrukcje ;/ co do umiejetnosci to JSa tylko nie dokonca znam (tzn znam ale bardzo slabo)

0

@Cywek:
W takim razie przestań używać tego rozwiązania. Trzeci raz to napiszę: używaj klasy (takiej samej dla wszystkich elementów #tabs), a nie kilku ID. To nie jest nawet kwestia związana z JavaScriptem, tylko z HTML-em i CSS.

Próbowałeś z tymi klasami? Nie masz pojęcia co to jest atrybut class i jak wygląda selektor klas? Przecież używasz klas w kodzie HTML! Czy może spróbowałeś to zrobić i nie działa?

0

z tymi klasami to probowalem , pozamienialem wszystko na klasy itd ale cos nie dziala ;/

pzdr

0

Ech... Widzę, że inaczej się nie da.

Widzę, że w kodzie HTML masz już odpowiednie klasy, więc zrób po prostu tak...

Zmień tę linijkę:

$("#tabs").tabs();

na taką:

$(".ui-tabs").tabs();

Czyli zamiast id tabs wybierasz elementy o klasie ui-tabs.

Widzisz? Działa! Co robiłeś źle? Ważne jest, byś zrozumiał, a nie pytał się potem na forum o każdą jedną linijkę JavaScriptu. Co zrozumiesz, to już będzie Twoje!

0

dzieki :) teraz faktycznie dziala :) ja robilem
$(".tabs").tabs();
zamiast
$(".ui-tabs").tabs();

jeszcze raz dzieki za pomoc :D

0
bswierczynski napisał(a)

Ech... Widzę, że inaczej się nie da.

Widzę, że w kodzie HTML masz już odpowiednie klasy, więc zrób po prostu tak...

Zmień tę linijkę:

$("#tabs").tabs();

na taką:

$(".ui-tabs").tabs();

A ja go chciałem zmusić do samodzielności....(:

0

@GhostDog:
Hej, ja też próbowałem! Pomyślałem w końcu, że ma jakąś literówkę, czy coś. Sam jednak powinien być w stanie to sprawdzić, no ale cóż.

@Cywek:
Ale wiesz czemu Ci nie działało i czemu teraz działa? Po prostu nie miałeś w HTML-u elementów o klasie "tabs". Mogłeś dorzucić tę klasę do elementów w ten sposób:

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs"> <!-- tak miałeś -->
<div class="tabs ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs"> <!-- tak powinieneś mieć, z klasą tabs -->

Albo mogłeś zamiast tego zauważyć, że wszystkie elementy, którym dałbyś klasę tabs, mają już klasę ui-tabs. Wystarczyło więc skorzystać z tej istniejącej klasy ui-tabs, bez potrzeby dodawania nowej.

Dodatkowo, można było usunąć id="tabs", bo było już niepotrzebne. A poza tym dwa elementy na stronie nie mogą mieć tego samego ID.

1 użytkowników online, w tym zalogowanych: 0, gości: 1