Mostrando entradas con la etiqueta UI. Mostrar todas las entradas
Mostrando entradas con la etiqueta UI. Mostrar todas las entradas

2013-09-09

UIBox Sitio web con muchos rescursos listo para utilizar en nuestros desarrollos web.


UIBox es una página web que funciona a modo de librería o recopilación de muchos componentes, tratando de solucionar una de las mayores fortalezas y debilidades de Internet: su tamaño, a pesar que exista de todo, es tan grande que es difícil encontrarlo, el autor de la página web se encarga de recolectar los elementos manualmente, comprobar que tengan un Demo funcional, excelente documentación, y el soporte de varios navegadores, al encontrar un componente con estas características lo agrega a la librería haciéndolo más fácil de encontrar y posteriormente integrar en nuestros proyectos.
Así que la próxima vez que necesites algún componente rápido para tu proyecto solo entra a  UIBox y lo tendrás funcionando en minutos.

2013-04-14

40 Recursos para combinar con nuestro desarrollo web basado en Bootstrap


Diseño y tematización.

Uno de los principales critisms cuando se utiliza un marco con botones prediseñados y widgets - es que el producto final puede empezar a buscar cansinas. Bootswatch es un mercado libre tema que tiene por objeto evitar que, con un número de implementaciones de rutina de carga a medida disponibles para descargar de forma gratuita. Su todavía el producto Bootstrap núcleo - sólo con una piel diferente aplicado. Para los diseñadores que necesitan inspiración sobre qué nivel de personalización está disponible, Bootswatch es un buen lugar para comenzar.
Siguiendo en la misma línea - WrapBootstrap es un mercado temático comercial, en la que podrás comprar y vender su tema Bootstrap. Es un gran ejemplo de las crecientes comunidades de nicho en la web alrededor del producto, y ofrece la posibilidad de ver cómo muchas otras personas también han adquirido el mismo tema.
¿Te apetece un enfoque más DIY para requisitos particulares? Bootswatchr proporciona una interfaz visual para que usted pueda utilizar para personalizar los temas de rutina de carga desde cero. Piense en ello como un tema-rodillo (ala jQuery UI ) - que le permite ver de forma interactiva los elementos que se están personalizados en frente de tus ojos. Tres práctico.
También ofrece un conjunto de herramientas de personalización, con la ventaja de que las URL individuales creados se pueden compartir con los demás, mostrando su tema.
JetStrap ofrece una manera fácil extremadamente limpia para construir interfaces de bootstrap, y generar el código de trabajo Bootstrap por el otro lado. Está en algún lugar entre una maqueta y una herramienta de creación de la interfaz, que lleva el manual de codificación de distancia, y hace que sea muy fácil de arrastrar y soltar los componentes Bootstrap en su página y generar una interfaz de trabajo de HTML. Si se encuentra en las primeras etapas de desarrollo de productos, y estamos convencidos de que Manos a la Obra es el marco perfecto para usted en el futuro, entonces te encantará la rapidez JetStrap lo ponga en movimiento.
Ofertas PaintStrap y el enfoque alternativo a Bootstrap tematización. Si usted es un ávidoColourLovers  o Adobe Kuler  usuario, entonces usted simplemente puede introducir el tema directamente en PaintStrap, y Wacks un tema Bootstrap con esos colores bellamente escogidos. Una manera muy simple, pero muy eficaz para hacer que el sitio se vea la parte.
A menudo el caso con los marcos temáticos es que se centran en lo que se necesita desde la perspectiva del diseño FrontEnd. Jump Start han tomado el tema de Manos a la Obra, y lo aplicó a las interfaces de administración, que ofrece implementaciones de primera calidad Bootstrap diseñadas para hacer que sus sistemas backend realmente brillan.
BootTheme es otra herramienta de generación de Tema, sin embargo Boottheme ofrece un enfoque vista previa instantánea, lo que le permite ver los efectos de los cambios en tiempo real. También puede ver cómo los cambios se realizan directamente en varios dispositivos de una manera sensible, lo que lo hace útil en la toma de decisión inicial de diseño.
Kickstrap es un proyecto impulsado por la comunidad añadiendo mejoras a la interfaz Bootstrap marco de interfaz de usuario. Manos a la Obra ha sido adoptado con los brazos abiertos por la mayoría de los desarrolladores de la web. Si bien todas las funciones, algunos pensaron que podrían hacer mejor, y mientras sus sugerencias y peticiones no podría haber llegado a la central de distribución Bootstrap, se han encontrado un hogar en Kickstrap.

Fuentes y tipografía

Con las fuentes haciendo una diferencia fundamental con la aplicación BootStrap estándar, no hay excusa para no personalizar. Este gran artículo te llevará a través de los pasos para lograr que, con una biblioteca de iconos personalizados. En este caso particular, se ha utilizado la popular FamFam conjunto de iconos, pero usted sería factible usar otra cosa.
Fuente impresionante es un proyecto diseñado icono para agregar un cierto nivel de diferenciación de Manos a la Obra. Con la integración en un sinch Manos a la Obra, Font Impresionante también proporciona una hoja de estilo CSS personalizado para su proyecto, así que es una combinación de ambos códigos, y el icono snazziness.
Al igual que sus iconos más, así mínimos? Iconos OpenWeb comenzó a usar fuente impresionante de inspiración, pero se transformó en una colección de iconos de otros fantásticos, especialmente brillantes en escala de grises para más temas.
Esta herramienta le permite combinar WebFonts icónicos para su propio proyecto. Con fontello puede acceder a grandes conjuntos de iconos de calidad profesional de código abierto para su uso dentro de bootstrap.

Fragmentos de código.

BootSnippr proporciona gratuitamente fragmentos de HTML para su uso con Bootstrap. Con todo, desde formularios de registro de perfiles de usuario, que, literalmente, puede copiar y pegar juntos un prototipo de trabajo con el mínimo de código, lo que le permite seguir adelante con las cosas del lado del servidor.
Los fans de Joomla estarán encantados de encontrar que los temas de arranque, componentes y fragmentos de código para Joomla están disponibles en JooStrap. A debe marcar para los desarrolladores de Joomla.
BootStrap WordPress es - sí que has adivinado, un tema de WordPress BootStrap listo.

Plantillas de diseño

Si quieres ir a por todas y personalizar todo alrededor de arranque, entonces puede ser digno de conseguir su diseñador eche un vistazo a algunas de ellas. Con Adobe plantillas PSD, PNG escalabilidad con fuegos artificiales a la asistencia wireframing, estos enlaces deben ayudar con el aspecto más granular de personalización Bootstrap.
Este fantástico Adobe Fireworks ofrece un archivo de base de kit de herramientas de interfaz de usuario de Twitter Bootstrap con la interfaz de usuario completa recreado como imágenes vectoriales en Adobe Fireworks.
Los fans de Photoshop, no se preocupe - hay un montón de PSD que hay ahí fuera para la personalización de Manos a la Obra. Este uno de RepixDesign, es especialmente bien juntos y ser Vector base hace que sea fácilmente escalable.
OmniGraffle si usted no está familiarizado, es una maqueta brillante y una herramienta de wireframes. Esta plantilla proporciona ahora mucha necesidad UI Bootstrap y elementos de navegación a sus plantillas.
Si usted es más de un niño ilustrador, entonces esto EPS debe proporcionar un buen comienzo para la creación de diseños listos Bootstrap.

Componentes de interfaz de usuario

Combustible UX agrega algunos componentes adicionales ordenadas Javascript para Manos a la Obra, incluyendo un ComboBox, DataGrid, Fortín, Buscar y Spinner. Definitivamente vale la pena una visita incluso para un nivel adicional de uñas.

Botones

Proporciona 'Customiser' un botón similar al que se encuentra en algunas de las themers Bootstrap mencionadas antes
Bootstrap Toggle Buttons, por más sexy iPhone interruptores esq.

Editores WYSIWYG para Bootstrap

BootStrap vivo Editor
Tenedor PageDown desarrollado para ajustarse a los principios de Manos a la Obra.
Si en la edición de la página es más su cosa, "Manos a la Obra Editable" es un componente fantástico para el CMS.

Notificaciones / Popups

Aunque Bootstrap tiene su propio motor de notificación, el código para la creación de ellos no es tan simple como añadir una clase CSS. Esto es lo que notify BootStrap trae a la fiesta.
Bootbox.js es una pequeña biblioteca JavaScript que le permite crear cuadros de diálogo utilizando verbos modales programáticas de Twitter Bootstrap, sin tener que preocuparse por la creación, gestión o eliminación de cualquiera de los necesarios elementos DOM o JS controladores de eventos
Pensando en dar recorridos de productos dentro de la aplicación para los nuevos usuarios? Tour de Manos a la Obra es una herramienta fácil de configurar tu Web asistente que guía y orienta a su usuario en torno a su interfaz, enseñándoles las partes Tricker de su interfaz.
Casi todas las aplicaciones requieren una aplicación lightbox de algún tipo. Ya se trate de un cuadro de diálogo modal para iniciar sesión sin salir de la misma página, o para la exhibición de imágenes de gran tamaño.

Selectbox / Combobox / Pickers

Select2 es un reemplazo basado en jQuery para cuadros de selección. Es compatible con la búsqueda, los conjuntos de datos a distancia y el desplazamiento infinito de resultados. Ver y sentir de Select2 se basa en la excelente  Elegido  biblioteca.
Probablemente el Selector de fecha más cool gama encontrarás en la web, y listo de nuevo su mejor Bootstrap.
Si su solicitud tiene entrada sensible al tiempo, entonces TimePicker BootStrap es una mejora de la interfaz de usuario poco aseado que ayuda a asegurar lado más precisa cliente del usuario.
Combobox Bootstrap mejora la combinación estándar, permitiendo que los usuarios escriban su entrada en el teclado, y selecciona automáticamente la entrada correspondiente. Sutil, pero eficaz.
A colourpicker y datepicker de arranque. El colourpicker es particularmente agradable.

Otros extras

¿Necesitas flechas en su interfaz de usuario? Este plugin jQuery simple proporciona Manos a la Obra con una manera fácil de incluir flechas prediseñadas en cualquier ángulo dentro de sus diseños, todo a través del uso de determinadas clases CSS.
BootPag es un plugin jQuery paginación dinámico para bootstrap twitter.
Galería Bootstrap La imagen es una extensión para el cuadro de diálogo modal del conjunto de herramientas Bootstrap de Twitter, para facilitar la navegación entre un conjunto de imágenes de la galería. Cuenta con el ratón y el teclado de navegación, efectos de transición, modo de pantalla completa y la funcionalidad de presentación de diapositivas.
Inspirado por la última encarnación de Windows Metro apps, Bootmetro ofrece la apariencia de ontop Metro de la oferta Bootstrap núcleo. A pesar de que está claro que hay algunos problemas pendientes de ser resueltos (de una sensible POV) sigue siendo un recurso valioso para aquellos que buscan algo diferente estilo sabio.
Arrastrar y soltar constructor de formulario para arranque, que genera el código HTML que hay que traer a la vida. Handy.
Algunos diseños de página adicionales no incluidos en el marco de arranque. Las muestras se pueden ver rápidamente aquí. 

2012-06-28

RedactorJs una alternativa a CKEditor y TinyMCE que solo pesa 40Kb

Navegando por internet me encontre con este editor WYSIWYG, llamado Redactor que esta escrito en jQuery y el cual tiene las opciones mas utilizada de un editor y hasta permite subir fotos y que las agregue a nuestro contenido. 
Es compatible con IE8+, Opera, Chorme, Firefox, Safari, Ipad, Iphone, Android 4

2012-06-21

25 Sitios para aprender de otros las tendencias UI/UX para nuestros nuevos proyectos Web


MephoBox

UI Inspiration

UI Patterns

CSSbake – Ingredients

Quince UX Design Patterns Explorer

UI Inspiration

We are Colorblind – Patterns for the Color Blind

UI Inspiration

patternBrowser

inspireUX – words to inspire user experience designers

UI Inspiration

Ember – User Interface Design

Welie.com – Patterns in Interaction Design

UI Inspiration

GUIdebook: Graphical User Interface gallery

UI Inspiration

UI-patterns.com

UI Inspiration

Pattern Tap : Organized Web Design Collections

UI Inspiration

UI Pattern Factory

Konigi Showcase

UI on Smashing Magazine

UI Scraps: user interface designs found by Jason Robb

Yahoo! Design Pattern Library

UI Inspiration

Blink Design Library

Elements of Design: A Web Design Showcase

UIZEN – Showcase of best online/web application user interface design.

ecommr: a collection of e-commerce interface and design elements

UI Inspiration

Open Source Design Pattern Library

2011-12-04

WebP el nuevo formato de imagen desarrollado por Google superando a GIF, PNG, TIF y JPG



WebP La nueva promesa de Google para tener imagenes de menor pesos sin perder calidad.
Días atrás Google, dio a conocer las nuevas mejoras de WebP el nuevo formato de imágenes que intentará imponerse sobre los ya tradicionales JPG, TIF,  PNG y GIF.
Si bien es un proyecto que se viene desarrollando hace algún tiempo, según el último comunicado de Google este nuevo formato presenta ventajas funcionales sobre otros.  En esta última versión ante dos imágenes iguales la Webp puede llegar a ser hasta 45% más liviana lo que optimiza tiempos de carga de una página.

¿Como Funciona WebP
WebP EE.UU. la Codificación predictiva párrafo codificar Una imagen, La Misma Metodología utilizada Por El códec de vídeo VP8 párrafo comprimir Fotogramas clave en los vídeos. Predictivo de Codificación utiliza los Valores en bloques de píxeles vecinos párrafo predecir los Valores de la ONU bloque, y LUEGO codificación SÓLO La Diferencia (residual) Entre los Valores reales y la predicción.
Los Residuos Suelen Contener MUCHOS Valores cero, Lo Que Se Puede comprimir Mucho Más Eficaz. Los Residuos transforman en sí, cuantificada y la Entropía en el Código de como de costumbre. WebP also utiliza variables Tamaños de bloque.
Un Archivo WebP consiste en VP8 Datos de la imagen, y sin Recipiente Sobre la base de deRIFF . El Independiente libwebp Biblioteca es Una Implementacion de Referencia Para La especificación WebP y està available in this git repositorio y Como un Archivo COMPRIMIDO .
WebP Apoyo
WebP es compatible Con Una Variedad de Herramientas. ademas, Ahora es compatible de forma nativa en Google Chrome, El Marco de Google Chrome plug-en el párrafo Internet Explorer, Opera 11.10 Sandwich y Android Ice Cream.
Los desarrolladores also Han Añadido Soporte párrafo Una Variedad de Herramientas de Edición de Imágenes. This version also proporciona Codificación y decodificación Una de peso ligero de la Biblioteca, libwebp y Herramientas de Línea de comandos cwebp y dwebp párrafo convertir Imágenes y DESDE Hacia el Formato WebP . El Código Fuente Completo this available in ladescarga de page.
Convierte tu Colección de favoritos de PNG y JPEG WebP descargando El precompiladoscwebp Herramienta de Conversión párrafo Linux, Windows o Mac OS X .

Por el momento este nuevo formato no es compatible con todos los navegadores pero de a poco va ganando terreno.
Para conocer más detalles técnicos de Webp haz click AQUI

2011-09-08

jQuery: diseño personalizable mediante arrastrar y soltar



jQuery: diseño personalizable mediante arrastrar y soltar
Asombrado por las características como arrastrar y soltar, contenido personalizado y AJAX?Conozca cómo se pueden combinar para crear un diseño de página web personalizable, el ahorro de preferencia el uso de cookies.
¿Quieres ir al grano? Echa un vistazo en el ejemplo final, o descargarlos todos.

Requisitos

Mi enfoque incluye el uso de jQuery, junto con el plugin de jQuery UI se puede ordenar para arrastrar y soltar y el plugin de jQuery cookies para almacenar las posiciones tema.
Estos archivos se utilizan en los ejemplos sobre este artículo.
jQuery se debe cargar antes de jQuery UI y Cookie jQuery.
script de tipo "text / javascript" src "jquery-1.4.2.min.js" > < script de >
script de tipo "text / javascript" src "jquery-ui-1.8.custom.min.js" > < /script de >
script de tipo "text / javascript" src "jquery.cookie.js" > < escritura >
Nota: No olvides que las cookies y JavaScript debe estar habilitado!

1. Introducción a las listas se pueden ordenar

Antes de que podamos crear un diseño personalizable que tenemos que ser capaces de cambiar el orden de los elementos.

Una clasificación ordenada única

Usando el plugin se puede ordenar de jQuery UI, podemos crear una "lista ordenable", que le permite a los elementos para volver a la lista usando arrastrar y soltar.
/ / Sintaxis
'selector' ) se pueden ordenar. ) ;
/ Uso / Ejemplo
'ul.sortable-lista' ) se pueden ordenar. ) ;

Listas se pueden ordenar y conectar

Utilizando el parámetro connectWith (jQuery selector) se puede definir que otras listas que los elementos de una lista se puede arrastrar y soltar para.
/ / Sintaxis
'selector' ) . ordenable {
    connectWith: 'selector'
) ;
/ Uso / Ejemplo
'ul.sortable-lista' ) . ordenable {
    connectWith: "ul.another-se puede ordenar la lista"
) ;
Ahora bien, esto no es exactamente lo que usted llamaría un diseño personalizable, sin embargo, es un paso en la dirección correcta. Imagina que la lista estaba llena de elementos barra lateral en lugar de contenedores normal.
Lo que queda es de alguna manera para obtener, guardar y cargar las posiciones de partida, pero antes de cubrir la forma de hacer eso, voy a hacer una breve demostración de algunas de las otras opciones disponibles para Sortables.

Listas se pueden ordenar y conectar con ayuda visual

El uso de un asistente visual para indicar que el elemento se colocará en caso de caída es bueno para la facilidad de uso. Esto es posible utilizando la opción de marcador de posición (de clase CSS).
/ / Sintaxis
'selector' ) . ordenable {
    marcador de posición: "el nombre de clase '
) ;
/ Uso / Ejemplo
'ul.sortable-lista' ) . ordenable {
    marcador de posición: "mi-marcador de posición '
) ;

Listas se pueden ordenar y conectable (dentro de un envase)

A veces es necesario ser capaz de arrastrar elementos libremente alrededor de un sitio web, utilizando lacontención (elemento DOM, 'padre', 'documento', 'ventana', o jQuery selector) opción podemos elegir contraindicaciones arrastre dentro de los límites de la elemento especificado.
/ / Sintaxis
'selector' ) . ordenable {
    contención: 'selector'
) ;
Uso / / Ejemplo 1
'ul.sortable-lista' ) . ordenable {
    marcador de posición: '# restringido de arrastrar la zona "
) ;
/ / Ejemplo de uso 2
'ul.sortable-lista' ) . ordenable {
    marcador de posición: "padre"
) ;

2. Guardar y cargar los elementos

Beeing capaces de personalizar un diseño es grande, sin embargo es inútil si tuviera que personalizar de nuevo cuando vuelva a visitar la página. Tenemos que recordar las posiciones de los artículos, aquí es donde el plugin de jQuery cookies entra en juego

Obtener los elementos

En primer lugar, necesitamos un método para recuperar los elementos dentro de una clasificación ordenada. Debido a que indend para guardar los elementos en una cookie, es necesaria una representación de cadena de los artículos.
Esto se puede lograr mediante la combinación de la función JavaScript join () , que une todos los elementos de un array separados por un separador especificado, con el . ordenable ("serializar") método que serializa el ordenable de Identificación del elemento en una matriz.
ul id "mi lista de" >
    li id "A" > Un elemento li >
    li id "B" > Artículo B li >
    li id "C" > Artículo C li >
ul >
var $ items = '# mi lista " ) se pueden ordenar. 'toArray' ) ;
/ / Items = array ('A', 'B', 'C')
var = itemStr artículos. unirse a ',' ) ;
/ / ItemStr = 'A, B, C'
Eso está bien, pero también necesitamos una forma de almacenar los artículos en que se han conectado las listas (columnas). Podemos hacer esto por recorrer a través de cada lista y dentro de un contenedor para cada lista de sus elementos y luego unirse a todos los elementos, junto con un separador.
div id "wrapper" >
    ul clase "columna puede ordenar la lista" >
        li id "A" > Un elemento li >
        li id "B" > Artículo B li >
    ul >
    ul clase "columna puede ordenar la lista" >
        li id "C" > Artículo C li >
        li id "D" > Artículo D li >
    ul >
    ul clase "columna puede ordenar la lista" >
        li id "E" > Artículo E li >
    ul >
div >
/ / Obtener todos los elementos de un contenedor
función getItems ( contenedor )
{
    var columnas = ] ;
    $ ( contenedor + "ul.column ' ) . cada uno función {
        . columnas push ( $ este ) se pueden ordenar. 'toArray' ) . unirse a (',' ) ;
    ) ;
    retorno . columnas unirse '|' ) ;
}
var = itemStr getItems '# wrapper' ) ;
/ / ItemStr = 'A, B | C, D | E'
Ahora tenemos la cadena de producto puede ser!

Guardar los elementos

El uso de cookies jQuery para obtener, establecer y borrar cookies - es un pedazo de la torta;).
/ / Sintaxis
Galletas $. 'name' ) ; / / Obtener galletas
Galletas $. 'name' , valor ) ; / / Set cookies
Galletas $. 'name' , null ) ; / / Eliminar cookies
/ Uso / Ejemplo
Galletas $. 'items' , getItems '# wrapper' ) ;
. / / $ Cookie ("artículos") = "tema-A, punto B-| tema-C, elemento-D | tema-E '

Guardar elementos automaticamente

No queremos presionar "Guardar las posiciones" botón cada vez que hemos cambiado el orden de los elementos, en lugar que queremos que suceda automáticamente.
El evento se puede ordenar de actualización , se ejecuta cada vez la clasificación se ha producido, sólo tenemos que introducir un poco de código que guarda el orden de partida a una cookie cada vez que este evento se dispara.
/ / Sintaxis
'selector' ) . ordenable {
    actualización: la función ( caso, ui { ... }
) ;
/ Uso / Ejemplo
'selector' ) . ordenable {
    actualización: la función {
        Galletas $. 'items' , getItems '# wrapper' ) ;
    }
) ;
Ahora, cuando la clasificación se ha producido, las posiciones de partida se guarda en una cookie llamada "elementos".
Nota: no es necesario incluir los parámetros de eventos y la interfaz de usuario , ya que no los está usando.

Elementos de la carga

La carga de objetos es un poco lo contrario de guardar los elementos, tenemos que extraer las columnas y los artículos de nuestra cadena de elementos y luego hacer que cada elemento.
He separado el proceso de carga en dos funciones, loadItemsFromCookie () y renderItems () .
/ / Cargar los elementos
función loadItemsFromCookie ( nombre )
{
    si ( $. cookies ( nombre ) ! = null )
    {
        renderItems ( $ cookie. ( nombre ) , '# wrapper' ) ;
    }
    más
    {
        alerta "No hay elementos guardados en el" ' + nombre + "." ) ;
    }
}
/ / Elementos de procesamiento
función renderItems ( artículos, contenedores )
{
    var html = '' ;
    var = columnas de elementos. split '|' ) ;
    de var c en columnas )
    {
        html + = '<div class="column"> <ul class="sortable-list">' ;
        si ( columnas [ c ] ! = '' )
        {
            var elementos = columnas [ c ] . split '' ) ;
            de var i en artículos )
            {
                html + = '<li id = "' + elementos [ i ] + ""> Artículo ' + elementos [ i ] + "</ li>
;
            }
        }
        html + = '</ ul> </ div>' ;
    }
    $ '#' + contenedor ) . html ( html ) ;
}
/ / Utilice un botón para cargar los elementos
'# mi botón " ) . haga clic en función {
    loadItemsFromCookie 'elementos' ) ;
) ;
La ejecución de este código se traduciría en el mismo HTML que teníamos antes:
div id "wrapper" >
    ul clase "columna puede ordenar la lista" >
        li id "A" > Un elemento li >
        li id "B" > Artículo B li >
    ul >
    ul clase "columna puede ordenar la lista" >
        li id "C" > Artículo C li >
        li id "D" > Artículo D li >
    ul >
    ul clase "columna puede ordenar la lista" >
        li id "E" > Artículo E li >
    ul >
div >
Que es básicamente la misma, ahora sabemos cómo ordenar, guardar y cargar los elementos. Esto es todo lo que necesita saber para crear un diseño personalizable. Por último, podemos poner nuestro conocimiento y poner juntos y aplicarlo a un diseño real.

3. Implementación de un diseño real de

He optado por utilizar una versión modificada de mi Organización plantilla de página web simple para este ejemplo.
jQuery: diseño personalizable mediante arrastrar y soltar
Hacer este diseño personalizable es realmente sencillo, los únicos cambios que tenemos que hacer es poner todos los elementos que queremos cusomtize en las listas se puede ordenar y cambiar nuestras funciones un poco. Por ejemplo, no es necesario preocuparse acerca de las columnas (listas conectado).

Cargar contenido con AJAX

Para hacerlo más realista, tengo que poner el contenido de los artículos personalizable en distintos archivos HTML y cargarlos usando AJAX en el proceso de renderizado. Todo lo que tenemos que hacer es cambiar un poco de código en renderItems () .
/ / Elementos de procesamiento
función renderItems ( id, itemStr )
{
    var lista = $ '#' + id + "lista" ) ;
    var elementos = itemStr. split '' )
    de var i en artículos )
    {
        html = '<li class = "ordenable-item' ;
        si ( id == 'splash' )
        {
            html + = "izquierda col3 ' ;
        }
        html + = "" id = "' + elementos [ i ] + ""> <div class="loader"> </ div>
</ Li>
;
        list.append ( html ) ;
        / / Cargar archivo html
        $ '#' + elementos [ i ) de la carga. 'content / " + elementos [ i ] +'html'. ) ;
    }
}
El div con la clase Loader (carga de imágenes spinner) se reemplaza con el contenido del archivo HTML, tan pronto como la llamada AJAX se ha completado.

Opciones adicionales

Para el último ejemplo, he utilizado algunas opciones que no he explicado antes:
Código de ejemplo
/ / Sidebar
'# sidebar. ordenable-list' ) . ordenable {
    eje: 'y' ,
    de contención: "padre" ,
    forceHelperSize: verdad ,
    forcePlaceholderSize: verdad ,
    manejar: '. sección-título " ,
    opacidad: 0,8 ,
    marcador de posición: "marcador" ,
    actualización: la función {
        Galletas $. 'sidebar-cookie' , getItems "sidebar" ) ;
    }
) ;
  • manejar (jQuery selector) - define el lugar donde en un elemento de arrastre es posible.
  • eje (x / y) - define en qué dirección se le permite arrastrar.
  • opacidad (float) - opacidad del elemento beeing arrastrado.
  • forceHelperSize (boolean) - Las fuerzas de la ayuda (área lanzables) que tienen un tamaño.
  • forcePlaceholderSize (boolean) - Las fuerzas del marcador de posición (ayudante visible) que tienen un tamaño.
Obtenga más información sobre estas opciones, entre otros en la documentación que se puede ordenar jQuery .

El Fin

Espero que hayan disfrutado de mi artículo y que el haber aprendido algo. Soy nuevo en la redacción de artículos por lo que cualquier opinión es muy apreciada .
Buena suerte con la creación de diseños personalizados!