Okrągłe rogi [mintAjax]
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)
- 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
opcje zaokrąglania:
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
w dniu styczeń 27, 2008 w dniu 1:50 przed południem
jak powiększyc promień???????????????????????????