Forum PHP.pl > Twitter bootstrap - problem z dropdown i tabs

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Twitter bootstrap - problem z dropdown i tabs

Forum PHP.pl > Forum > Po stronie przeglądarki

lukaskolista

2.07.2012, 07:15:30

Witam. Mam problem z dropdown buttonem. Chcialbym umiescic w nim tabs. Niestety tabs wewnatrz dropdown buttona nie dzialaja, natomiast gdy wyjme je poza przycisk to wszystko smiga jak trzeba. Prosze o porade, o ile w ogole da sie to zrobic.

[HTML] pobierz, plaintext 
<div class="btn-group">
	<button class="btn">Szukaj</button>
	<button class="btn dropdown-toggle" data-toggle="dropdown">
		<span class="caret"></span>
	</button>
	<div class="non-propagation dropdown-menu" style="padding: 15px;">
		<div class="tabbable">
			<ul class="nav nav-tabs">
				<li class="active"><a href="#tab111" data-toggle="tab">Section 1</a></li>
				<li><a href="#tab222" data-toggle="tab">Section 2</a></li>
			</ul>
			<div class="tab-content">
				<div class="tab-pane active" id="tab111">
					<p>I'm in Section 1.</p>
				</div>
				<div class="tab-pane" id="tab222">
					<p>Howdy, I'm in Section 2.</p>
				</div>
			</div>
		</div>
	</div>
</div>
 
<script type="text/javascript">
	// Blokowanie chowania dropdown-menu po kliknieciu w element
	$('.non-propagation').click(function(e) {
		e.stopPropagation();
	});
</script>
[HTML] pobierz, plaintext

ziqzaq

2.07.2012, 23:00:42

Spróbuj tak:

[JAVASCRIPT] pobierz, plaintext 
	$(function() {
		$('.dropdown-menu .nav-tabs li a').click(function(e){
			e.stopPropagation();
		});
		$('.nav-tabs a').click(function(e){
			$(this).tab('show');
		});
	});
[JAVASCRIPT] pobierz, plaintext

lukaskolista

3.07.2012, 08:21:30

Niestety nie dziala. Wyglada to tak, jakby bootstrap nie widzial w ogole tabsow wewnatrz dropdown-menu, tabsy wygladaja tak, jakby skrypt bootstrap-tabs.js nie byl dolaczony (oczywiscie jest dolaczony w <head> i wszystkie inne tabsy dzialaja).

ziqzaq

3.07.2012, 10:02:35

Sprawdziłem to w tym momencie dokładnie na kodzie który podałeś i podstawowym szablonie z bootstrap examples i wsio działa.
Najnowsza wersja bootstrapa (2.0.4).
Przeglądarki Fx13, IE8.
Sprawdź kilka razy czy nie został ci jakiś kod po testowaniu, który mógłby coś wykrzaczać. Poniżej masz szablon który testowałem:

[HTML] pobierz, plaintext 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="js/html5.js"></script>
    <![endif]-->
  </head>
 
  <body>
 
    <div class="container">
    <!-- TUTAJ TWÓJ KOD -->
    </div> <!-- /container -->
 
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap-transition.js"></script>
    <script src="js/bootstrap-alert.js"></script>
    <script src="js/bootstrap-modal.js"></script>
    <script src="js/bootstrap-dropdown.js"></script>
    <script src="js/bootstrap-scrollspy.js"></script>
    <script src="js/bootstrap-tab.js"></script>
    <script src="js/bootstrap-tooltip.js"></script>
    <script src="js/bootstrap-popover.js"></script>
    <script src="js/bootstrap-button.js"></script>
    <script src="js/bootstrap-collapse.js"></script>
    <script src="js/bootstrap-carousel.js"></script>
    <script src="js/bootstrap-typeahead.js"></script>
	<script type="text/javascript">
	$(function() {
		$('.dropdown-menu .nav-tabs li a').click(function(e){
			e.stopPropagation();
		});
		$('.nav-tabs a').click(function(e){
			$(this).tab('show');
		});
	});
	</script>
  </body>
</html>
[HTML] pobierz, plaintext

lukaskolista

3.07.2012, 13:12:51

Tabsy same w sobie dzialaja, jednak mam jeszcze problem z zaznaczeniem, ktory ma byc aktywny - klasa active nie daje efektu. Wiesz moze, co trzeba zmienic? Nie jestem mocny z frontendowych spraw, dlatego takie drobiazgi sprawiaja mi trudnosci.

ziqzaq

3.07.2012, 13:59:03

Klasa "active" daje efekt

Aby tab był aktywny dodaj klasę do <li> w liście <ul class="nav nav-tabs">. Aby była widoczna określona treść tab'a dodaj klasę do <div class="tab-pane">.
Przykładowo aktywny tab #tab222 i treść #tab222:

[HTML] pobierz, plaintext 
<div class="tabbable">
	<ul class="nav nav-tabs">
		<li><a href="#tab111" data-toggle="tab">Section 1</a></li>
		<li class="active"><a href="#tab222" data-toggle="tab">Section 2</a></li>
	</ul>
	<div class="tab-content">
		<div class="tab-pane" id="tab111">
		<p>I'm in Section 1.</p>
		</div>
		<div class="tab-pane active" id="tab222">
		<p>Howdy, I'm in Section 2.</p>
		</div>
	</div>
</div>
[HTML] pobierz, plaintext

lukaskolista

3.07.2012, 14:06:09

Nie o to mi chodzilo. Chodzilo mi o to, ze etykietka zakladki nie jest koloru niebieskiego (jak linki)

ziqzaq

3.07.2012, 21:10:17

Ok, rozumiem już. Trzeba dopisać odpowiednie style dla linków znajdujących się w ".dropdown-menu .nav-tabs li". Kolory to #0088CC i #555555. Reszta to podstawy css więc nie będę się już niepotrzebnie rozpisywał.
Tylko pamiętaj żeby te style były po bootstrap.css.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.