miscelanea software

layouts Drag&drop con Jquery

gridster.js, es un plugin jQuery para hacer tus layouts draganddropeables, y que quiere decir esto pues que permite la construcción de diseños intuitivos que pueden arrastrarse a partir de elementos que abarcan varias columnas.

Sencilla de utilizar;  se puede incluso  agregar y quitar elementos de la grid  dinámicamente  con apenas cuatro métodos y una docena de atributos  bien documentados ,  ademas cuenta con  licencia MIT. Fue Desarrollada y liberada por la gente de Ducksboard en Github.

Como  utilizar esta libreria:

Include dependencies

Gridster is currently written as a jQuery plugin, so you need to include it in the head of the document. Download the latest release at jQuery.

<script type=”text/javascript” src=”libs/jquery.js”></script>
<script type=”text/javascript” src=”jquery.gridster.js”></script>

HTML Structure

Class names and tags are customizable, gridster only cares about data attributes. Use a structure like this:

<div class=”gridster”>
    <ul>
        <li data-row=”1″ data-col=”1″ data-sizex=”1″ data-sizey=”1″></li>
        <li data-row=”2″ data-col=”1″ data-sizex=”1″ data-sizey=”1″></li>
        <li data-row=”3″ data-col=”1″ data-sizex=”1″ data-sizey=”1″></li>
        <li data-row=”1″ data-col=”2″ data-sizex=”2″ data-sizey=”1″></li>
        <li data-row=”2″ data-col=”2″ data-sizex=”2″ data-sizey=”2″></li>
        <li data-row=”1″ data-col=”4″ data-sizex=”1″ data-sizey=”1″></li>
        <li data-row=”2″ data-col=”4″ data-sizex=”2″ data-sizey=”1″></li>
        <li data-row=”3″ data-col=”4″ data-sizex=”1″ data-sizey=”1″></li>
        <li data-row=”1″ data-col=”5″ data-sizex=”1″ data-sizey=”1″></li>
        <li data-row=”3″ data-col=”5″ data-sizex=”1″ data-sizey=”1″></li>
        <li data-row=”1″ data-col=”6″ data-sizex=”1″ data-sizey=”1″></li>
        <li data-row=”2″ data-col=”6″ data-sizex=”1″ data-sizey=”2″></li>
    </ul>
</div>

Lo vi en http://develop.sitescm.com/

Para  descargarte gridster.js: gridster.net

About the author

Avatar

uriel

Alguien que vive en algun lugar de Oaxaca y que le gusta pensar mucho y hacer poco… Amante de la Tecnologia y de la Filosofia del software libre

Agregar Comentario

Click here to post a comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

clickxti
Elegant Themes
Hootsuit
Publisuite