用自己的图像更改jQuery UI按钮的图标

前端之家收集整理的这篇文章主要介绍了用自己的图像更改jQuery UI按钮的图标前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
目前我有以下jQuery UI按钮:
$('#button').button(
  {
    label: 'Test',icons: {primary: 'ui-icon-circle-plus',secondary: null}
  }
);

我想使用自己的图像为“custom.png”按钮。

我怎么能实现呢?

解决方法

自己定义一个风格:
.ui-icon-custom { background-image: url(images/custom.png); }

然后在调用.button()时使用它,像这样:

$('#button').button({
  label: 'Test',icons: {primary: 'ui-icon-custom',secondary: null}
});

这假设您的自定义图标位于CSS下的图像文件夹中…与jQuery UI图标映射通常相同的位置。当图标创建时,它会获得类似的类:class =“ui-icon ui-icon-custom”,而ui-icon类看起来像这样(可能是不同的图像,取决于主题):

.ui-icon { 
  width: 16px; 
  height: 16px; 
  background-image: url(images/ui-icons_222222_256x240.png); 
}

所以在你的风格,你只是覆盖这个背景图像,如果需要,改变宽度,高度等。

原文链接:https://www.f2er.com/jquery/183636.html

猜你在找的jQuery相关文章