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 1.4.2
- jQuery UI 1.8.0
- jQuery 1.0 Galletas (cambiar el nombre a jquery.cookie.js)
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 la
contenció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.
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!
No hay comentarios:
Publicar un comentario