css jQuery UI -调用Highlight/Error

axkjgtzd 于 2023-06-25 发布在 jQuery

关注(0)|答案(3)|浏览(138)

我很抱歉，如果这是太明显，但我找不到任何适当的答案在任何地方...
有没有办法像本页右下角那样放置突出显示/错误消息：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样式化这些类。
希望这能帮助任何人。
------------------------------------------解决方案------------------------------------

css

来源：https://stackoverflow.com/questions/7998772/jquery-ui-calling-highlight-error

3条答案

按热度按时间

ecr0jaav1#

没有jQuery UI函数在页面上放置错误;但是，你可以使用jQuery将error类应用于元素，如下所示：

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

我希望这对你有帮助！

赞(0）回复(0）举报 2023-06-25

wn9m85ua2#

根据文档，加载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>

赞(0）回复(0）举报 2023-06-25

dffbzjpn3#

扩展Guillaume的响应，我创建了一些jQuery插件来将常规元素转换为jQueryUI错误或突出显示元素。

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>

赞(0）回复(0）举报 2023-06-25

我来回答

css jQuery UI -调用Highlight/Error

3条答案

相关问题

热门标签

最新问答