CODEWITHSUNDEEP
javascriptjquerycssjquery-ui
jribeiro
jribeiro

Reputation: 3463

jQuery UI - calling Highlight/Error

I'm sorry if this is too obvious but I can't find any proper answer anywhere...

Is there any way to place an highlight/error message like the ones on the bottom right of this page: http://jqueryui.com/themeroller/ by simply calling a jquery ui function?

I inspected the source code but can't seem to find the answer... Do they hardcode the html?

Thanks

----------------------------------------- SOLUTION ---------------------------------------

jQuery: (create a new file whatever.js and place the following code there

$(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: Simply create de divs that you want to place the messages like:

<div class="error"><b>ERROR:</b> The message goes here</div>

or for Notices:

<div class="notice"><b>NOTICE:</b> The message goes here</div>

you can then style the classes using css.

Hope this helps anyone.

----------------------------------------- SOLUTION ---------------------------------------

Upvotes: 13

Views: 23138

Answers (3)

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48600

Expanding on Guillaume's response, I created some jQuery plugins to convert a regular element into a jQuery UI error or highlight element.

const defaultOptions = { noCorners: false };

function errorHighlight($el, options) {
  const opts = $.extend(defaultOptions, options);
  const type = opts.type;
  let icon = opts.icon;
  if (!icon) {
    icon = type === 'highlight' ? 'ui-icon-info' : 'ui-icon-alert';
  }
  return $el.each(function() {
    const $self = $(this);
    const $wrapper = $('<div>')
      .addClass('ui-widget')
      .append($('<div>')
        .addClass(['ui-state-' + type, !opts.noCorners ? 'ui-corner-all' : ''])
        .append($('<p>')));
    $self.wrap($wrapper);
    $self.closest('p').prepend($('<span>').addClass(['ui-icon', icon]));
    $self.children().unwrap();
  });
}

(function($) {
  $.fn.error = function(options) {
    errorHighlight(this, $.extend({ type: 'error' }, options));
  };
  $.fn.highlight = function(options) {
    errorHighlight(this, $.extend({ type: 'highlight' }, options));
  };
})(jQuery);


$('.error').error();
$('.highlight').highlight({ icon: 'ui-icon-star', noCorners: true });
.ui-widget {
  margin-bottom: 1em;
}

.ui-widget>div {
  padding: 0 0.7em;
}

.ui-widget>div>p>.ui-icon {
  float: left;
  margin-right: .3em;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<!-- Error -->
<div class="ui-widget">
  <div class="ui-state-error ui-corner-all">
    <p>
      <span class="ui-icon ui-icon-alert"></span>
      <strong>Alert:</strong> Sample ui-state-error style.
    </p>
  </div>
</div>
<!-- Highlight -->
<div class="ui-widget">
  <div class="ui-state-highlight ui-corner-all">
    <p>
      <span class="ui-icon ui-icon-info"></span>
      <strong>Hey!</strong> Sample ui-state-highlight style.
    </p>
  </div>
</div>
<!-- jQuery plugin -->
<div class="error"><strong>Alert:</strong> Sample ui-state-error style.</div>
<div class="highlight"><strong>Hey!</strong> Sample ui-state-highlight style.</div>

Upvotes: 0

dSquared
dSquared

Reputation: 9825

There is no jQuery UI function to place an error on the page; however you can apply the error class using jQuery to elements like this:

$('#el').addClass('ui-state-error ui-corner-all'); // Rounded corners
$('#el').addClass('ui-state-error'); // Squared Corners

I hope this helps!

Upvotes: 14

Guillaume Cisco
Guillaume Cisco

Reputation: 2945

According to the documentation, after loading Jquery UI css, you can use some classes :

http://jqueryui.com/docs/Theming/API

For example, here the alert box is defined like that :

<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>

Upvotes: 2

Related Questions