Miller Columns describe un diseño de interfaz de usuario para navegar y editar listas jerárquicas . Algunas implementaciones notables incluyen:
Hay una serie de problemas con estas implementaciones.
Demostración y código . Esto es casi perfecto, el problema principal es que la jerarquía no se puede configurar de antemano. Idealmente, el código JSON se parecería a:
{ 'id': 'ID1', 'name': 'Name2', 'parent': false },
{ 'id': 'ID2', 'name': 'Name2', 'parent': 'ID1' },
Donde el segundo elemento ('ID2') se refiere a su ID principal ('ID1'). Desafortunadamente, el 'parent'parámetro toma un booleano para indicar si existe o no un padre. Esto significa que usar la biblioteca requiere registrar eventos e implementar los datos de la jerarquía como archivos separados (solicitudes), por lo que sé.
Demostración y código . Parece tener algunos errores graves (p. ej., al hacer clic en una categoría sin elementos secundarios, aparece un elemento secundario en la siguiente columna). Sin ganchos para operaciones de creación/actualización/eliminación.
Demostración y código . Los problemas abundan: interfaz de usuario incómoda (navegación por teclado usando el enfoque del campo de entrada), no estructurada en un diseño de varias columnas, gran cantidad de archivos de biblioteca JS para incluir, sin enlaces para operaciones de creación/actualización/eliminación.
Otras implementaciones que están cargadas de problemas:
Qué biblioteca de JavaScript cumple con los siguientes criterios:
Vanilla JS, jQuery, MooTools o Closure están bien.
Después de una búsqueda exhaustiva, no apareció ningún software Miller Columns convenientemente simple. Aquí está mi software que tiene la funcionalidad especificada:
Las operaciones de edición son igualmente triviales:
$(document).ready( function() {
$.getScript( "js/columns.js", function() {
var $current;
$("div.columns").millerColumns({
current: function( $item ) {
$current = $item;
}
});
/** Called when an edit link is clicked. */
update = function( link, def, undef ) {
$(link).on( "click", function( event ) {
event.preventDefault();
($current === undefined) ?
typeof undef === "function" && undef() :
typeof def === "function" && def();
return false;
});
}
update( "#new",
function() {
console.log( "new child of: " + $current );
},
function() {
console.log( "new root sibling" );
}
);
update( "#edit",
function() {
console.log( "edit" );
}
);
update( "#del",
function() {
console.log( "delete" );
}
);
});
});