如何使用jQuery UI的Highlight和Error小部件？

Question

jQuery UI有一些不錯的方便的CSS樣式用於提醒和突出顯示。我可以在the themeroller site看到它 - 看在右邊。有這些樣式的Javascript接口嗎？我們使用硬編碼的CSS嗎？這在哪裏記錄？

是否有方法列表，cheatsheat，或除jQuery UI上的交互式文檔之外的任何東西？

Answer 1

應用適當的CSS類從UI/Theming/API頁所需的互動提示：的.ui狀態高亮的亮點和錯誤的.ui狀態錯誤。您可以靜態執行此操作，也可以使用.addClass('ui-state-highlight')或.addClass('ui-state-error')動態執行此操作。

Answer 2

它們只是CSS樣式。您可以將它們應用於後端，或使用.addClass（）應用它們。

Answer 3

我已經適應了一個簡短的jQuery函數來將給定的一組div（包含文本）轉換爲錯誤/高亮元素。

你可以在this jsFiddle上看到它的行動。

這裏是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

我想分享一個更多的解決方案。它基於自定義小部件，並允許添加標題和可定製圖標。嘗試Fiddle或看下面：

$.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' 
});