Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] Użycie styli zdefiniowanych w pliku CSS
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
starach
18.02.2009, 19:54:20
Jak w metodzie Fold.activate() mam pobrać styl :hover elementu <li> i przypisać go?
style.css
[HTML] pobierz, plaintext 
  1. <style>
  2. body { background:rgb(255,153,51); }
  3. div#wrapper { width:90%; height:100px; margin:0 auto; background:rgb(255,204,0); }
  4. ul#menu { width:100%; list-style:none; background:white; }
  5. ul#menu li { float:left; padding:0 2em; }
  6. ul#menu li#link_1, ul#menu li#link_2, ul#menu li#link_3 { cursor:pointer; }
  7. ul#menu li#link_1 { background:rgb(255,80,80); }
  8. ul#menu li#link_2 { background:rgb(125,255,0); }
  9. ul#menu li#link_3 { background:rgb(0,125,190); }
  10. ul#menu li#link_1:hover, div#panels div#item_1 { background:rgb(255,100,100); }
  11. ul#menu li#link_2:hover, div#panels div#item_2 { background:rgb(165,255,40); }
  12. ul#menu li#link_3:hover, div#panels div#item_3 { background:rgb(20,145,190); }
  13.  
  14. div#panels { width:100%; }
  15. div#panels div { width:100%; display:none; }
  16. </style>
[HTML] pobierz, plaintext

index.htm
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
  3. <head>
  4. 	<title>Strona</title>
  5. 		<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
  6.     <link rel="stylesheet" type="text/css" href="style/style.css" media="all" />
  7.     <script type="text/javascript" src="script/jquery-1.2.6.js"></script>
  8. 		<script type="text/javascript" src="script/menu.js"></script>
  9. </head>
  10. <body>
  11. 	<div id="wrapper">
  12. 		<ul id="menu">
  13. 			<li id="link_1">Pełne</li>
  14. 			<li id="link_2">Zakres</li>
  15. 			<li id="link_3">Filtry</li>
  16. 		</ul>
  17. 		<div id="panels">
  18. 			<div id="item_1"></div>
  19. 			<div id="item_2"></div>
  20. 			<div id="item_3"></div>
  21. 		</div>
  22. 	</div>
  23. </body>
  24. </html>
[HTML] pobierz, plaintext

menu.js
( To jest javascript ale użyłem tagu PHP bo inne rozwalają wcięcia kodzie. ) 
[PHP] pobierz, plaintext 
  1. <?php
  2. function Fold_Collection($default)
  3. {
  4.     this.folds = new Array();
  5.     this.default_ = $default;
  6.     var ths = this;
  7.  
  8.     this.append = function($fold)
  9.     {
  10.         this.folds[this.folds.length] = $fold;
  11.     }
  12.     this.load = function()
  13.     {
  14.         var $links = $("ul#menu");
  15.         var $panels = $("div#panels");
  16.         $links.each(function($i)
  17.         {
  18.             $fold = new Fold($($links.get($i)), $($panels.get($i)), ths);
  19.             $fold.setEvtClick();
  20.             ths.append($fold);
  21.         });
  22.     }
  23.     this.deactivate = function()
  24.     {
  25.         for(var $i = 0; $i < this.folds.length; $i++)
  26.         {
  27.             this.folds[$i].deactivate();
  28.         }
  29.     }
  30.     this.init = function()
  31.     {
  32.         $("document").ready(
  33.         function()
  34.         {
  35.             ths.load();
  36.         });
  37.     }
  38. }
  39. function Fold($anch, $fold, $parent)
  40. {
  41.     this.anch_ = $anch;
  42.     this.fold_ = $fold;
  43.     this.parent_ = $parent;
  44.     this.setEvtClick = function()
  45.     {
  46.         this.anch_.click(
  47.         function()
  48.         {
  49.             this.parent_.deactivate();
  50.             this.activate();
  51.         });
  52.     }
  53.     this.activate = function()
  54.     {
  55.         
  56.     }
  57.     this.deactivate = function()
  58.     {
  59.         
  60.     }
  61. }
  62.  
  63. $folds = new Fold_Collection(0);
  64. $folds.init();
  65. ?>
[PHP] pobierz, plaintext


Poradziłem sobie reorganizując style i dodając jedną klasę z takimi samymi ustawieniami jak :hover. Pobrać stylów dla :hover niestety nie zdołałem.
[HTML] pobierz, plaintext 
  1. <style>
  2. ul#menu { width:100%; list-style:none; background:white; }
  3. ul#menu li { float:left; padding:0 2em; }
  4. li#link_1, li#link_2,  li#link_3 { cursor:pointer; }
  5. li#link_1, div#item_1 { background:rgb(255,80,80); }
  6. li#link_2, div#item_2 { background:rgb(25,255,80); }
  7. li#link_3, div#item_3 { background:rgb(20,145,190); }
  8. li.link_active, li#link_1:hover, li#link_2:hover, li#link_3:hover
  9. { /*filter:alpha(opacity=100);*/ -moz-opacity:1; -khtml-opacity:1; /*opacity:1;*/ }
  10. li.link_inactive { /*filter:alpha(opacity=70);*/ -moz-opacity:0.7; -khtml-opacity:0.7; /*opacity:0.7;*/ }
  11. </style>
[HTML] pobierz, plaintext 


[HTML] pobierz, plaintext 
  1. <ul id="menu">
  2. 			<li id="link_1" class="link_inactive">Zakres</li>
  3. 			<li id="link_2" class="link_inactive">Filtry</li>
  4. 			<li id="link_3" class="link_inactive">Aktulizacja</li>
  5. 		</ul>
  6. 		<div id="panels">
  7. 			<div id="item_1" class="item_inactive">
  8. (...)
[HTML] pobierz, plaintext
mls
19.02.2009, 15:23:16
Pytanie może nieco odbiegające od tematu, ale... od kiedy nazwy zmiennych w JS zaczyna się znakiem $?
Rafal Filipek
19.02.2009, 15:47:06
@orglee z tego co wiem to nie ma takiej mozliwosci. Robi sie to wlasnie przez stworzenie dodatkowej klasy ( co jest i tak lepsze z uwagi na braki IE w temacie "hover" )
@mls : zawsze gdy programista sobie tego zażyczy. Jest to jak najbardziej poprawne.
bigZbig
19.02.2009, 15:48:06
Cytat(mls @ 19.02.2009, 15:23:16 ) *
Pytanie może nieco odbiegające od tematu, ale... od kiedy nazwy zmiennych w JS zaczyna się znakiem $?

A dlaczego nie? W prototypie po raz pierwszy (chyba) użyto $ jako zamiennika document.getElementById (nie wiem skąd ten pomysł) i jak widać w wersji rozbdowanej przyjęło się to m.in w jQuery. Zmierzam do tego, że skoro nie jest to zabronione to dlaczego nie używać dla zmiennych nazw analogicznych do tych z PHP?
Rafal Filipek
19.02.2009, 15:56:30
Jest drobna różnica
$() - funkcja która obecnie w większości frameworków stosowana jest do pobrania elementu lub ich grupy, tworzenia nowych elementów html, itp. Tuta pare przykładów z jQuery
Kod
$('#id_element'); // pobierz 1 element po id
$('.nazwa_klasy'); // pobierz 1 lub więcej elementów po nazwie klasy
$('<p><span>text</span></p>'); // tworzy nowy fragment ( 2 elementy) DOM
$([1,4,6,7,3]); pozwala wykorzystać na tablicy metode np. each

$ - zwykły znak od którego może zaczynać się nazwa zmiennej. Jest to dość powszechnie stosowane, np.
Kod
$('li').each(function(){
  // teraz this wskazuje na element li
  $this = $(this);
  $(this).find('span').click(function(){
    //tutaj this wskazuje na element span
    // wiec aby dostać się do rodzica nie uzywając metody parent(); najlepiej właśnie stworzyć sobie zmienną np. $this
    alert($this.attr('id'));
  });
});
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.