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 ]
Listing
Ranga: Administrator serwisu Punktów: 0
-
-
Tre¶æ komentarza
-
