Archívum

‘css’ cimkével ellátott bejegyzés

jQuery.addClass() használata

január 17th, 2014 Nincsenek hozzászólások

Ezzel az egyszerű jQuery függvénnyel egyszerűen és gyorsan tudod megváltoztatni a html tag-ek css stílusosztályát.

1
2
3
jQuery(this).addClass("minta") //Stílusosztály hozzáadása
jQuery(this).removeClass("minta") //Stílusosztály törlése
jQuery(this).hasClass("minta") //Stílusosztály vizsgálata.

Konkrét példa:

Feladat: Kattintásra változtassuk meg a gomb hátterét pirosra, majd újbóli kattintásnál vegyük le róla a piros színt.

Css stílusosztályok:

1
2
3
4
<style>
.red{  background:red; }
.blue{ background:blue; }
</style>

html kód:

1
<input type="button" class="blue" id="gomb" value="Nyomd meg"/>

jQuery kód

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
jQuery(document).ready(function(){
//Kattintás
jQuery("#gomb").click(function(){
      //Ha kék a háttér
       if(jQuery(this).hasClass("blue")){
          //Levesszük a blue osztályt, és hozzáadjuk a red-et
          jQuery(this).removeClass("blue").addClass("red");
       }else{ //Egyébként
          //Levesszük a red-et, hozzáadjuk a blue-t.
          jQuery(this).removeClass("red").addClass("blue");
       }
});
});
</script>

Minta


Categories: jQuery Tags: ,

Értékelés avagy Csillag rating

május 8th, 2009 5 hozzászólás

starMindenkinek az álma, hogy szép csillagokkal tudja értékelni a képeket, hozzászólásokat! Egy jó kis script amivel ezt könnyedén megtehetjük!
Olvass tovább…

Categories: Download, PHP programozás, Style Tags: ,

Div sarkok formázása II.

április 27th, 2009 Nincsenek hozzászólások

Még egy div sarok stílus, ez olyan bemélyülős effekt in 3D:)
Olvass tovább…

Categories: Style Tags: , ,

DIV sarkok formázása I.

április 25th, 2009 Nincsenek hozzászólások

Az alábbi kód segítségével a div sarkait tudod lekerekíteni, 3D-s látszatot keltve az árnyékolásokkal.
Olvass tovább…

Categories: Style Tags: , ,