¿Cómo uso los widgets de resaltado y error de jQuery UI?

Question

jQuery UI tiene algunos cómodos estilos CSS útiles para alertar y resaltar. Puedo verlo en the themeroller site - mira en el lado derecho. ¿Hay una interfaz de Javascript para estos estilos? ¿Usamos CSS codificado? ¿Dónde está esto documentado?

¿Hay una lista de métodos, un cheatsheat o algo más que los documentos interactivos en jQuery UI?

Answer 1

Aplicar las clases CSS apropiados para la señal deseada interacción de la página UI/Theming/API: estado .ui-culminante para resaltar y .ui-estado de error para el error. Puede hacerlo estáticamente o usar .addClass('ui-state-highlight') o .addClass('ui-state-error') para hacerlo de forma dinámica.

Answer 2

Son solo estilos CSS. Puede aplicarlos en el back-end o aplicarlos usando .addClass().

Answer 3

He adaptado una función jQuery corta para convertir un conjunto dado de divs (que contienen texto) en elementos de error/resaltado.

Puede verlo en acción en this jsFiddle.

Aquí está el javascript:

//function to create error and alert dialogs 
function errorHighlight(e, type, icon) { 
    if (!icon) { 
     if (type === 'highlight') { 
      icon = 'ui-icon-info'; 
     } else { 
      icon = 'ui-icon-alert'; 
     } 
    } 
    return e.each(function() { 
     $(this).addClass('ui-widget'); 
     var alertHtml = '<div class="ui-state-' + type + ' ui-corner-all" style="padding:0 .7em;">'; 
     alertHtml += '<p>'; 
     alertHtml += '<span class="ui-icon ' + icon + '" style="float:left;margin-right: .3em;"></span>'; 
     alertHtml += $(this).text(); 
     alertHtml += '</p>'; 
     alertHtml += '</div>'; 

     $(this).html(alertHtml); 
    }); 
} 

//error dialog 
(function($) { 
    $.fn.error = function() { 
     errorHighlight(this, 'error'); 
    }; 
})(jQuery); 

//highlight (alert) dialog 
(function($) { 
    $.fn.highlight = function() { 
     errorHighlight(this, 'highlight'); 
    }; 
})(jQuery); 

Answer 4

Me gustaría compartir una solución mucho más. Se basa en widgets personalizados y permite agregar un título y un icono personalizable. Pruebe Fiddle o busque debajo:

$.widget('custom.noteBox', { 
options: { 
    icon: true, 
    state: 'highlight' 
}, 
_create: function() { 
    var icon, note = $('<p>').html(this.element.html()); 
    if (this.options.icon === true) { 
     switch (this.options.state) { 
      case 'highlight': 
       icon = 'info'; 
       break; 
      case 'error': 
       icon = 'alert'; 
       break; 
      default: 
       icon = false; 
     } 
    } else { 
     icon = this.options.icon; 
    } 
    if (icon) note.prepend($('<span>') 
     .addClass('ui-icon ui-icon-' + icon) 
     .css({ 
     'float': 'left', 
     'margin-right': '.3em' 
    })); 
    var title = this.element.attr('title'); 
    if (title) note.prepend($('<strong>').text(title + ' ')); 
    this.element.addClass('ui-widget') 
     .replaceWith($('<div>') 
     .addClass('ui-state-' + this.options.state + ' ui-corner-all') 
     .css({ 
     'margin-top': '20px', 
     'padding': '0 .7em' 
    }) 
     .append(note)); 
    } 
}); 


$('.error').noteBox({ 
    state: 'error' 
}); 
$('.info').noteBox(); 
$('<div title="Note! ">I`m dynamically added #1</div>') 
    .appendTo('body').noteBox({ 
    icon: 'folder-open' 
}); 
$('<div title="Note! ">I`m dynamically added #2</div>') 
    .appendTo('body').noteBox({ 
    state: 'error' 
}); 
$('<div title="Note! ">I`m dynamically added #3</div>') 
    .appendTo('body').noteBox({ 
    state: 'error', 
    icon: 'trash' 
});