Archiwum tagu: jQuery i CSS

Jak zmienić kolor komórki w tabeli po najechaniu na nią?

Na niektórych stronach internetowych można zauważyć bardzo ciekawy efekt, a mianowicie zmianę koloru tła komórki po najechaniu na nią kursorem myszy. W sumie, jest to efekt bardzo łatwy do uzyskania. Zapraszam poniżej.

Pierwszym krokiem jest stworzenie klasy w szablonie CSS z ustawieniem koloru tła. Nie jest to jednak konieczne, ale będzie o wiele wygodniejsze niż ustawianie stylu dla każdego wiersza. Więc, definiujemy styl w taki sposób, aby ustawiać kolor tła dla każdej komórki w wierszu.

<style type="text/css">
tr.highlight td {
    background-color: red;
}
</style>

Teraz stworzymy skrypt jQuery, który ma za zadanie dodanie klasy .highlight do wiersza po najechaniu myszką na dany wiersz.

<script type="text/javascript">
$(document).ready(function(){
    $("#tabelka tr").hover(function() {
        $(this).addClass("highlight");
    }, function() {
        $(this).removeClass("highlight");
    });
});
</script>

Mając styl i skrypt możemy napisać działający przykład. Oto on:

<style type="text/css">
    table.list {
        width: 100%;
    }
    table.list th {
        background-color:teal;
        color:#fff;
    }
    tr.highlight td {
        background-color: red;
    }
</style>
<script type="text/javascript" src="jQuery/jquery-1.3.2.min.js">
</script>
<script type="text/javascript">
    $(document).ready(function(){
        $("#tabelka tr").hover(function() {
            $(this).addClass("highlight");
        }, function() {
            $(this).removeClass("highlight");
        });
    });
</script>
<table id="tabelka" cellspacing="1" class="list">
<tr>
    <th>Lp.</th>
    <th>Imie</th>
    <th>Nazwisko</th>
</tr>
<tr>
    <td>1.</td>
    <td>Ala</td>
    <td>Kowalska</td>
</tr>
<tr>
    <td>2.</td>
    <td>Franek</td>
    <td>Nowak</td>
</tr>
<tr>
    <td>3.</td>
    <td>Karolina</td>
    <td>Chudzik</td>
</tr>
<tr>
    <td>4.</td>
    <td>Grzegorz</td>
    <td>Krasnal</td>
</tr>
<tr>
    <td>5.</td>
    <td>Henryk</td>
    <td>Marciniak</td>
</tr>
</table>

Myślę, że wyszło ciekawie :) a do tego możesz dowolnie modyfikować powyższy przykład uzyskując jeszcze lepsze efekty w kolorowaniu innych elementów strony.

źródło: porady-it.pl


Wysuwane/górne menu z jQuery i CSS

Wysuwane/górne menu to nie tylko zaokrąglone kształty, ale przede wszystkim  rozwijane menu po najechaniu na pole wyszukiwania. Dodatkowo pole oferuje różne opcje wyszukiwania, dzięki którym można wybrać i zawęzić wyszukiwanie.

jquery_16

ZOBACZ DEMO

Strukturę menu przedstawiam poniższy rysunek . Jak widać, menu oparte jest na liście nieuporządkowanej. Nasz UL składa się z czterech przedmiotów. Pierwszy z nich to logo z krótkim podmenu. Następnie logowanie, link z menu Pomoc i wyszukiwania przedmiotów z podmenu. Każde menu jest wyświetlany po najechaniu na odpowiedni link.

jquery_15

To jest struktura bazy, której użyjemy tutaj:

<ul id="menu">
  <li class="logo">
     <img style="float:left;" alt="" src="menu_left.png"/>
     <ul id="main">
     <li>Welcome to
     <b>Create Vimeo-like top navigation</b> tutorial!</li>
       </ul>
  </li>
    <li><a href="#">Login</a>
    </li>
    <li><a href="#">Help</a>
      <ul id="help">
         <li><a href="#">General help</a></li>
         <li><a href="#">Posts</a></li>
         <li><a href="#">Pages</a></li>
      </ul>
    </li>
    <li class="searchContainer">
  <div>
  <input type="text" id="searchField" />
  <img src="magnifier.png" alt="Search" onclick="alert
                    ('You clicked on search button')" /></div>
  <ul id="search">
    <li><input id="cbxAll" type="checkbox" />All</li>
    <li><input id="Articles" type="checkbox" />Articles</li>
    <li><input id="Tutorials" type="checkbox" />Tutorials</li>
    <li><input id="Reviews" type="checkbox" />Reviews</li>
    <li><input id="Resources" type="checkbox" />Resources</li>
      </ul>
    </li>
</ul>
<img style="float:left;" alt="" src="menu_right.png"/>

oraz styl CSS:

/* menu */
#menu{ margin:0px; padding:0px; list-style:none; color:#fff;
                line-height:45px; display:inline-block;
    float:left; z-index:1000; }
#menu a { color:#fff; text-decoration:none; }
#menu > li {background:#172322 none repeat scroll 0 0;
                cursor:pointer; float:left; position:relative;
    padding:0px 10px;}
#menu > li a:hover {color:#B0D730;}
#menu .logo {background:transparent none repeat scroll 0% 0%;
                padding:0px;
    background-color:Transparent;}
/* sub-menus*/
#menu ul { padding:0px; margin:0px; display:block;
                                    display:inline;}
#menu li ul { position:absolute; left:-10px; top:0px;
                margin-top:45px; width:150px; line-height:16px;
    background-color:#172322; color:#0395CC; /* for IE */
                display:none; }
#menu li:hover ul { display:block;}
#menu li ul li{ display:block; margin:5px 20px;
              padding: 5px 0px; border-top: dotted 1px #606060;
    list-style-type:none; }
#menu li ul li:first-child { border-top: none; }
#menu li ul li a { display:block; color:#0395CC; }
#menu li ul li a:hover { color:#7FCDFE; }
/* main submenu */
#menu #main { left:0px; top:-20px; padding-top:20px;
               background-color:#7cb7e3; color:#fff;
    z-index:999;}
/* search */
.searchContainer div { background-color:#fff; display:inline;
                padding:5px;}
.searchContainer input[type="text"] {border:none;}
.searchContainer img { vertical-align:middle;}

Nasze menu musi posiadać jeszcze zaokrąglone narożniki. Nic prostszego, rozwiązanie opisane jest na obrazku poniżej:

jquery_171

Dla przykładu weźmy podmenu Pomoc:

<li><a href="#">Help</a>
 <ul id="help">
   <li>
     <img class="corner_inset_left"
                 alt="" src="corner_inset_left.png"/>
      a href="#">General help</a>
     <img class="corner_inset_right"
                 alt="" src="corner_inset_right.png"/>
   </li>
     <li><a href="#">Posts</a></li>
     <li><a href="#">Pages</a></li>
     <li class="last">
      <img class="corner_left" alt="" src="corner_left.png"/>
      <img class="middle" alt="" src="dot.gif"/>
      <img class="corner_right" alt="" src="corner_right.png"/>
     </li>
 </ul>
</li>

Dodaliśmy dwa zdjęcia umieszczone wewnątrz pierwszej LI, żeby stworzyć “łopatki”. Ponadto, mamy jeszcze jedną LI do końca listy, która zawiera dwa absolutnie pozycjonowany rogach i jeden 1×1px rozciągnięte zdjęcie, aby wypełnić puste miejsce. Do tego potrzebne są dodatkowe style:

/* corners*/
#menu .corner_inset_left {position:absolute; top:0px;
                                             left:-12px;}
#menu .corner_inset_right {position:absolute; top:0px;
                                             left:150px;}
#menu .last {background:transparent none repeat scroll 0% 0%;
                                      margin:0px; padding:0px;
    border:none; position:relative; border:none; height:0px;}
#menu .corner_left {position:absolute; left:0px; top:0px;}
#menu .corner_right {position:absolute; left:132px; top:0px;}
#menu .middle {position:absolute; left:18px; height: 20px;
                                      width: 115px; top:0px;}

Źródło: www.jankoatwarpspeed.com