Okrągłe rogi [mintAjax]

0wned — Sat, 29 Dec 2007 12:34:43 +0000

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> 
Podgląd

Podgląd (onClick)

ajax-tutoriale « WordPress.com Tag Feed

Okrągłe rogi [mintAjax]