Loading:

Rozwiń skrzydła w branży IT [Książki drukowane -35%| Ebooki -50%]

Ostatnio dodane

php Upload dodaw PHP Tworzenia mi Logowanie obiekt Prosty system sz Lista plików z Jak zbudować pr Jak zamienić w IP uzytkownika Obiekt Timer [AS Proste skrypty w

Top 10

1.stop() 2.system 3.gzfile() 4.jpeg2wbmp 5.feof() 6.arsort() 7.lcg_value 8.idate() 9.strtok() 10.pow

56853.05

Jak zrobić zaokrąglone rogi za pomocą CSS i JavaScript - JQuery Corner

Zaokrąglone rogi dla div, kompatybilne ze wszystkimi przeglądarkami.

Zaokrąglone rogi nie trzeba robić poprzez tworzenie obrazków 4 rgów i zabawę w ustawianie ich, jest to rozwiązanie już przestarzałe teraz z pomocą przychodzi nam rozszerzenie do JQuery o nazwie Corner (róg).

Ponieważ w ciąż mało o tym na polskich serwisach postaram sie wam opisać jak tego używać.

Na początek musimy pobrać pacze w której znajdują sie 4 pliki: 3 javascript i 1 css.

[ Pobierz ]

- jq.css;

- jquery.js;

- jquery-1.js;

- urchin.js;

Pliki te wgrywamy na serwer i przechodzimy do działania.

Zrobimy sobie teraz taki testowy plik HTML aby pokazać jak to działa.

<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-2">
<script type="text/javascript" src="jquery/jquery-1.js"></script>
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
// test auto-ready logic - call corner before DOM is ready
$('#readyTest').corner();

$(function(){
$('#dynCorner').click(function() {
$('#dynamic').corner();
});
$('#dynUncorner').click(function() {
$('#dynamic').uncorner();
});

$('div.inner').wrap('<div class="outer"></div>');
$('p').wrap("<code></code>");

$('div.demo, div.inner').each(function() {
var t = $('p', this).text();
eval(t);
});

// fixed/fluid tests
$("div.box, div.plain").corner();
$("#abs").corner("cc:#08e");

$('.myCorner').corner();
});
</script>
</head>
<body>

<div class="myCorner" id="myCorner" style="background:#000000; height:400px;">Metadata Example</div>
<script type="text/javascript">
// script - no options passed to corner function
$("#myCorner").corner();
</script>
</body>
</html>

Ten kod wyświetli nam div z zaokrąglonymi rogami.

Jak widać całość polega na zaciągnięciu plików JavaScript, stworzeniu div o unikalnym id i prostym kodzie wywołującym: $("#myCorner").corner();

Jest to jednak początek możliwości tej biblioteki, skoro wiecie już jak sie z tego kożysta zapraszam do strony projektu tam macie mnóstwo przykładów z którymi teraz na pewno sobie poradzicie.

[ Strona Projektu z Przykładami ]