Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [JavaScript] Dodanie opcji drop down
Popeye
post
Post #1





Grupa: Zarejestrowani
Postów: 17
Pomógł: 0
Dołączył: 3.08.2008

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

Witam chciałbym dodać w divie o id result standardowe pole np. "{wars:navlist}", a gdy kliknę w rozsuwanym menu na daną pozycję zmieniało treść diva na wybraną - ta opcja działa. I co można zrobić żeby ukryć adres linka typu "#", ablo co zrobić żeby po kliknięciu nie przenosiło na górę strony.

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" >
  3. <head>
  4.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  5.     <script type="text/javascript">
  6.         $(document).ready(function() {
  7.             $(".dropdown dt a").click(function() {
  8.                 $(".dropdown dd ul").toggle();
  9.             });
  10.  
  11.             $(".dropdown dd ul li a").click(function() {
  12.                 var text = $(this).html();
  13.                 $(".dropdown dt a span").html(text);
  14.                 $(".dropdown dd ul").hide();
  15.                 $("#result").html(getSelectedValue("sample"));
  16.             });
  17.  
  18.             function getSelectedValue(id) {
  19.                 return $("#" + id).find("dt a span.value").html();
  20.             }
  21.  
  22.             $(document).bind('click', function(e) {
  23.                 var $clicked = $(e.target);
  24.                 if (! $clicked.parents().hasClass("dropdown"))
  25.                     $(".dropdown dd ul").hide();
  26.             });
  27.  
  28.         });
  29.     </script>
  30. </head>
  31. <body>
  32.  
  33.  
  34.     <dl id="sample" class="dropdown">
  35.         <dt><a href="#"><span>Games</span></a></dt>
  36.         <dd>
  37.             <ul>
  38.                 <li><a href="#">CoD 4<span class="value">{wars:navlist1}</span></a></li>
  39.                 <li><a href="#">CS 1.6<span class="value">{wars:navlist2}</span></a></li>
  40.                 <li><a href="#">FIFA<span class="value">{wars:navlist3}</span></a></li>
  41.                 <li><a href="#">TM<span class="value">{wars:navlist4}</span></a></li>
  42.             </ul>
  43.         </dd>
  44.     </dl>
  45.     <div id="result"></div>
  46. </body>
  47. </html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 4)
erix
post
Post #2





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
Cytat
I co można zrobić żeby ukryć adres linka typu "#", ablo co zrobić żeby po kliknięciu nie przenosiło na górę strony.

Zwracaj w funkcji false albo wykonuj metodę preventDefault wewnątrz zdarzenia.
Go to the top of the page
+Quote Post
Popeye
post
Post #3





Grupa: Zarejestrowani
Postów: 17
Pomógł: 0
Dołączył: 3.08.2008

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

Jak byś mógł mi napisać jeszcze co zmienić (IMG:style_emoticons/default/snitch.gif)
Go to the top of the page
+Quote Post
erix
post
Post #4





Grupa: Moderatorzy
Postów: 15 467
Pomógł: 1451
Dołączył: 25.04.2005
Skąd: Szczebrzeszyn/Rzeszów
A googlałeś to, o czym napisałem? (IMG:style_emoticons/default/tongue.gif)
Go to the top of the page
+Quote Post
Popeye
post
Post #5





Grupa: Zarejestrowani
Postów: 17
Pomógł: 0
Dołączył: 3.08.2008

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

Tak, ale jak to dodać to nie mam pojęcia. Używam gotowych skryptów.
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

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

 

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

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

RSS Aktualny czas: 22.08.2025 - 19:40
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn