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 am
jak powiększyc promień???????????????????????????