Loading:

Książka Zend Framework 3. Poradnik Programisty.

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


Ten wpis posiada swój wątek na forum

Wszystkie pytania prosimy kierować właśnie tam ponieważ komentarze to miejsce na poprawki do kodu lub alternatywne rozwiązania i pytania nie będą publikowane

http://forum.funkcje.net/forum/viewtopic.php?f=2&t=4316

Dane do logowania na forum są takie same jak na funkcje.net



Dodano przez: igor
Ranga: Administrator serwisu Punktów: 28716
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-17 v.1.5 | design: diviXdesign & rainbowcolors