Webmasterka


Okrągłe rogi [mintAjax]

Posted in Ajax,Tutoriale - autor: ToMas w dniu Grudzień 29, 2007
Tags: , , , , , ,

Jest mnóstwo sposobów aby zaokrąglać narożniki na naszej stronie. Najbardziej do gustu przypadło mi proste i przejrzyste rozwiązanie jakie oferuje nam darmowa biblioteka JavaScript – mintAjax.

Pobieramy skompresowaną bibliotekę mintAjax

Tworzymy dowolny folder a w nim pliki:

  • index.html
  • mintajax.js (wcześniej już pobrana)
  • round.js
  • style.css

<head></head> pliku index.html musi zawierać te linijki kodu:
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="mintajax.js" type="text/javascript"></script>
<script src="round.js" type="text/javascript"></script>

body pliku index.html
<body onLoad="Round()">
<div id="rogi" class="rogi">
Dzięki mintAjax możemy zaokrągląć rogi
</div>
<br />
<div id="rogi2" class="rogi">
Dzięki mintAjax możemy zaokrągląć rogi
</div>
<br />
<div id="rogi3" class="rogi">
Dzięki mintAjax możemy zaokrągląć rogi
</div>
<br />
<div id="rogi4" class="rogi">
Dzięki mintAjax możemy zaokrągląć rogi
</div>
</body>

Funkcja w pliku round.js
function Round() {
mint.fx.Round("rogi");
mint.fx.Round("rogi2", "top", null, 80);
mint.fx.Round("rogi3", "all", "large");
mint.fx.Round("rogi4", "tl br", "small", true);
}

Plik style.css
.rogi {
padding:6px;
color:#666666;
background-color:#eadb75;
width:200px;
text-align:center;
}

Dzięki <body onLoad=”Round()”> aktywujemy funkcję „Round” którą umieściliśmy w pliku round.js. W rezultacie otrzymujemy okrągłe rogi.

  • mint.fx.Round (identyfikator lub element, narożniki, promień oraz określenie zachowania wysokości)
  • opcje zaokrąglania:

  • all – wszytstkie,
  • top – górne,
  • bottom – dolne,
  • tl – górny lewy,
  • t – górny prawy,
  • bl – doly lewy,
  • br – dolny prawy
  • „tr br” – będą zaokrąglone tylko po prawej stronie

Funkcję tą można również wywoływać poprzez kliknięcie:
<a onclick="Round()">Zaokrąglij</a>
<!--
musimy pamiętać aby zamienić <body onLoad="Round()"> na <body>

-->

Podgląd

Podgląd (onClick)

Jedna odpowiedź to 'Okrągłe rogi [mintAjax]'

Subscribe to comments with RSS lub TrackBack to 'Okrągłe rogi [mintAjax]'.

  1. webking said,

    jak powiększyc promień???????????????????????????


Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Log Out / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Log Out / Zmień )

Facebook photo

Komentujesz korzystając z konta Facebook. Log Out / Zmień )

Google+ photo

Komentujesz korzystając z konta Google+. Log Out / Zmień )

Connecting to %s


%d bloggers like this: