Columnizer: plugin jQuery pentru pus textul pe coloane


Poate unii vor considera comic un astfel de subiect: păi CSS3 nu permite aşa ceva fără plugin jQuery?! Ba da. Am văzut şi un generator care ne ajuta să avem un text pe coloane în câteva secunde, care, pe atunci (era 2011, cred că foloseam IE 9) nu mergea corect sub IE. Acum însă, sub IE10 merge bine. Cei care nu vor să îşi bată capul cu care navigator cât de bine suportă facilitatea numită coloane din CSS3, vor prefera o soluţie jQuery, chiar dacă şi ea, întorcându-ne înapoi în timp sub navigatoare din epoca de piatră, nu e perfectă.

imagine

Am folosit recent Columnizer, un plugin atât de uşor de folosit încât ajunge o singură linie de cod (a 25-a mai jos; opţional şi linia 8) şi un DIV cu text masiv devine imediat aranjat pe coloane. Dar dincolo de simplu de folosit pluginul este şi puternic, plin de opţiuni, putând Dvs defini un fel de break-uri pe coloane şi diverse opţiuni pe care le găsiţi explicate în pagina pluginului.  Pagina demonstrativă o vedeţi aici. Intenţionat am pus sub şi soluţia CSS. Iată şi codul, evident mai puţin partea de text care e irevelant.

<!DOCTYPE HTML>
<html>
<head>
    <title>Untitled</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="jquery.columnizer.js"></script>
    <style type="text/css">
        .column *{ padding: 0px 15px; }
        #textullung2 {
            -moz-column-count: 3;
            -webkit-column-count: 3;
            -moz-column-gap: 2em;
            -webkit-column-gap: 2em;
            column-count: 3;
            -moz-column-rule-style: solid;
            -moz-column-rule-color: #000;
            -moz-column-rule-width: 2px;
            -webkit-column-rule-style: solid;
            -webkit-column-rule-color: #000;
            -webkit-column-rule-width: 2px;
        }
    </style>
    <script>
    $().ready(function(){
        $('#textullung').columnize({columns:3});
    });
    </script>
</head>
<body>
<div id="textullung">
<p>...</p>
</div>
<br clear="all" />
<div id="textullung2">
<p>...</p>
</div>
</body>
</html>


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (3 evaluări, media: 5,00 din 5)
Loading...Loading...

0 comentarii


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *