Loading:


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 ]



Napisz Artyku³

Listing

niema




Dodano przez: igor
Ranga: Administrator serwisu Punktów: 0
Komentarze użytkowników
    • Tre¶æ komentarza
      Kod do komentarza (opcjonalnie)
      PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
      Autor
      Token
      token

       

       








funkcje.net
Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-2024 v.1.5 | design: diviXdesign & rainbowcolors