Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [css] zakładki
gosienkami
post 3.04.2009, 14:52:59
Post #1





Grupa: Zarejestrowani
Postów: 305
Pomógł: 1
Dołączył: 27.12.2007

Ostrzeżenie: (0%)
-----

hej
jak zrobić takie zakładki jak na onecie: dziś |polecamy|nareszczeie weekend
Go to the top of the page
+Quote Post
piotrooo89
post 3.04.2009, 14:55:47
Post #2


Newsman


Grupa: Moderatorzy
Postów: 4 005
Pomógł: 548
Dołączył: 7.04.2008
Skąd: Trzebinia/Kraków
coś rodzimego:
mintAJAX::Tabs
lub:
jQuery::Tabs


--------------------
Manual nie boli!

Profesjonalne Call Center

Ouzo Framework
Go to the top of the page
+Quote Post
pi_wo
post 3.04.2009, 15:07:21
Post #3





Grupa: Zarejestrowani
Postów: 36
Pomógł: 6
Dołączył: 18.03.2009

Ostrzeżenie: (0%)
-----

przy mniejszych stronach nie potrzeba AJAX'a, poczytaj o CSS-owym atrybucie display:

Ten post edytował pi_wo 3.04.2009, 15:07:47
Go to the top of the page
+Quote Post
piotrooo89
post 3.04.2009, 15:13:07
Post #4


Newsman


Grupa: Moderatorzy
Postów: 4 005
Pomógł: 548
Dołączył: 7.04.2008
Skąd: Trzebinia/Kraków
Cytat
przy mniejszych stronach nie potrzeba AJAX'a, poczytaj o CSS-owym atrybucie display:


pokaż mi miejsce w którym powiedziałem że potrzeba AJAX'a? w CSS nie zrobisz wszystkiego tak dopieszczonego jak w JS.


--------------------
Manual nie boli!

Profesjonalne Call Center

Ouzo Framework
Go to the top of the page
+Quote Post
K4mil94
post 3.04.2009, 15:18:18
Post #5





Grupa: Zarejestrowani
Postów: 302
Pomógł: 18
Dołączył: 10.03.2008
Skąd: Dębno

Ostrzeżenie: (0%)
-----

Takie pytanie. Skoro takie można zrobić w CSS to jak ?
Go to the top of the page
+Quote Post
pi_wo
post 3.04.2009, 15:29:48
Post #6





Grupa: Zarejestrowani
Postów: 36
Pomógł: 6
Dołączył: 18.03.2009

Ostrzeżenie: (0%)
----- 

[HTML] pobierz, plaintext 
  1. var from = "id pierwszej otwieranej zakładki";
  2.  
  3. function switchPanel(to)
  4. {
  5. document.getElementById(to).style.display='block';
  6. document.getElementById(from).style.display='none';
  7. from = to;
  8. }
[HTML] pobierz, plaintext


Powinno działać, pisałem "od ręki". Nie widzę potrzeby ładowania dużej biblioteki jeżeli można to rozwiązać w ten sposób, chyba że chcesz ładować dynamicznie ich zawartość. Jest to JavaScript, ale de facto operujesz na stylu css...

EDIT: oczywiscie parametr display nie przyjmuje wartosci 'hidden' tylko 'none'. Przepraszam za pomylke, wynik pewnych przywyczajen. W ramach przeprosin przyklad ponizej smile.gif

Ten post edytował pi_wo 3.04.2009, 19:06:29
Go to the top of the page
+Quote Post
gosienkami
post 3.04.2009, 16:00:45
Post #7





Grupa: Zarejestrowani
Postów: 305
Pomógł: 1
Dołączył: 27.12.2007

Ostrzeżenie: (0%)
-----

a masz jakis przykład z wyjasnieniem

Cytat(pi_wo @ 3.04.2009, 16:29:48 ) *
[HTML] pobierz, plaintext 
  1. var from = "id pierwszej otwieranej zakładki";
  2.  
  3. function switchPanel(to)
  4. {
  5. document.getElementById(to).style.display='block';
  6. document.getElementById(from).style.display='hidden';
  7. from = to;
  8. }
[HTML] pobierz, plaintext


Powinno działać, pisałem "od ręki". Nie widzę potrzeby ładowania dużej biblioteki jeżeli można to rozwiązać w ten sposób, chyba że chcesz ładować dynamicznie ich zawartość. Jest to JavaScript, ale de facto operujesz na stylu css...
Go to the top of the page
+Quote Post
pi_wo
post 3.04.2009, 19:12:03
Post #8





Grupa: Zarejestrowani
Postów: 36
Pomógł: 6
Dołączył: 18.03.2009

Ostrzeżenie: (0%)
----- 

[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3.  
  4.     <script type="text/javascript">
  5.  
  6.     var from = "zak1";
  7.  
  8.     function switchPanel(to)
  9.     {
  10.         document.getElementById(from).className='ukryta_zakladka';
  11.         document.getElementById(to).className='zakladka';
  12.         from = to;
  13.     }        
  14.  
  15.     </script>
  16.  
  17.     <style type="text/css" media="all">
  18.     body{
  19.         font-family: Tahoma, Helvetica, sans-serif;
  20.         font-size: 10px;
  21.     }    
  22.  
  23.     div.przycisk{
  24.         background-color: #555;
  25.         font-family: Tahoma, Helvetica, sans-serif;
  26.         color:#FFF;
  27.         margin-right: 5px;
  28.         width: 80px;
  29.         height: 15px;
  30.         cursor: pointer;
  31.         float: left;
  32.         text-align: center;
  33.     }
  34.  
  35.     div.zakladka{
  36.         border: 1px solid #555;
  37.         display: block;
  38.         float: left;
  39.         clear: both;
  40.         width: 800px;
  41.  
  42.     }
  43.  
  44.     div.ukryta_zakladka{
  45.         display: none;
  46.         float: left;
  47.         clear: both;
  48.         width: 800px;
  49.     }
  50.  
  51.     </style> 
  52.  
  53. </head>
  54.  
  55. <body>
  56.  
  57. <div class="przycisk" onclick="switchPanel('zak1')">Zakładka 1</div>
  58. <div class="przycisk" onclick="switchPanel('zak2')">Zakładka 2</div>
  59. <div class="przycisk" onclick="switchPanel('zak3')">Zakładka 3</div>
  60. <div id="zak1" class="zakladka">Test zakładki 111111111111111111111111</div>
  61. <div id="zak2" class="ukryta_zakladka">Test zakładki 222222222222222222222222</div>
  62. <div id="zak3" class="ukryta_zakladka">Test zakładki 333333333333333333333333</div>
  63.  
  64. </body>
  65.  
  66. </html>
[HTML] pobierz, plaintext


Tak to widzę smile.gif Bez fajerwerków, ale działa całkiem sprawnie. W przeciwieństwie do wcześniejszego zamysłu tutaj zmieniam nazwe klasy. Ale założenie jest to samo.

Ten post edytował pi_wo 3.04.2009, 19:12:44
Go to the top of the page
+Quote Post
K4mil94
post 3.04.2009, 19:34:29
Post #9





Grupa: Zarejestrowani
Postów: 302
Pomógł: 18
Dołączył: 10.03.2008
Skąd: Dębno

Ostrzeżenie: (0%)
-----

Testowałem działa ;D Dzięki kolego tylko jeszcze powiedz jak to zrobić żeby się zakładka po najechaniu zmieniała ;]
Go to the top of the page
+Quote Post
piotrooo89
post 3.04.2009, 19:37:20
Post #10


Newsman


Grupa: Moderatorzy
Postów: 4 005
Pomógł: 548
Dołączył: 7.04.2008
Skąd: Trzebinia/Kraków
onMouseOver.


--------------------
Manual nie boli!

Profesjonalne Call Center

Ouzo Framework
Go to the top of the page
+Quote Post
K4mil94
post 3.04.2009, 19:40:28
Post #11





Grupa: Zarejestrowani
Postów: 302
Pomógł: 18
Dołączył: 10.03.2008
Skąd: Dębno

Ostrzeżenie: (0%)
-----

Dzięki ;]
Go to the top of the page
+Quote Post
gosienkami
post 4.04.2009, 14:51:27
Post #12





Grupa: Zarejestrowani
Postów: 305
Pomógł: 1
Dołączył: 27.12.2007

Ostrzeżenie: (0%)
-----

a co do tego dopisać zeby zakładki zmieniały sie same po jakis czasie
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 16.07.2025 - 06:36
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn