JQuery UI - вызов Highlight/Error
Извините, если это слишком очевидно, но я не могу найти ни одного правильного ответа в любом месте...
Есть ли способ разместить сообщение подсветки/ошибки, подобное тем, которые находятся в правом нижнем углу этой страницы: http://jqueryui.com/themeroller/, просто вызвав функцию jquery ui?
Я проверил исходный код, но не могу найти ответ... Они жестко кодируют html?
Спасибо
----------------------------------------- РЕШЕНИЕ ---------------------------------------
jQuery: (создайте новый файл whatever.js и разместите там следующий код
$(document).ready(function(){
if($("div.error")[0]){
createError($("div.error"));
}
if($("div.notice")[0]){
createHighlight($("div.notice"));
}
});
//functions start
function createHighlight(obj){
obj.addClass('ui-state-highlight ui-corner-all');
obj.html('<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right:.3em;"></span>'+obj.html()+'</p>');
}
function createError(obj){
obj.addClass('ui-state-error ui-corner-all');
obj.html('<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right:.3em;"></span>'+obj.html()+'</p>');
}
HTML:
Просто создайте div, которые вы хотите разместить, например:
<div class="error"><b>ERROR:</b> The message goes here</div>
или для уведомлений:
<div class="notice"><b>NOTICE:</b> The message goes here</div>
вы можете затем стилизовать классы с помощью css.
Надеюсь, это поможет кому угодно.
----------------------------------------- РЕШЕНИЕ ---------------------------------------
Ответы
Ответ 1
Нет функции jQuery UI для размещения на странице ошибки; однако вы можете применить класс ошибок с помощью jQuery к таким элементам:
$('#el').addClass('ui-state-error ui-corner-all'); // Rounded corners
$('#el').addClass('ui-state-error'); // Squared Corners
Надеюсь, это поможет!
Ответ 2
Согласно документации, после загрузки Jquery UI css вы можете использовать несколько классов:
http://jqueryui.com/docs/Theming/API
Например, здесь поле предупреждения определяется следующим образом:
<div class="ui-state-error ui-corner-all" style="padding: 0 .7em;">
<p>
<span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
<strong>Alert:</strong>
Sample ui-state-error style.
</p>
</div>