这是基于由姜毅及以上Panayiotis提供的信息,以及jquery ui button sample code:
当我在迁移较早JSP应用程序必须与每个按钮图像的工具栏,我想有内部的图像按钮声明本身,而不是为每个工具栏按钮创建一个单独的类。
<div id="toolbarDocs" class="tableCaptionBox">
<strong>Checked Item Actions: </strong>
<button id="btnOpenDocs" data-img="<s:url value="/images/multi.png"/>">Open Documents</button>
<button id="btnEmailDocs" data-img="<s:url value="/images/email.png"/>">Attach to Email</button>
</div>
当然,还有更多的按钮比上述两个更多。上述s个标签是一个Struts2的标签,但你可以只用任何URL
<button id="btnOpenDocs" data-img="/images/multi.png">Open Documents</button>
以下脚本查找从按钮标记的属性数据IMG,然后设置一个作为背景图片更换按钮。
它暂时设置ui-icon-bullet(任意现有的样式),然后稍后进行更改。
该类定义了临时样式(如果您打算使用这个选项卡,以便您的页面的其余部分不受影响,最好为特定工具栏添加更多选择器)。
button.ui-button .ui-icon {
background-image: url(blank.png);
width: 0;
height: 0;
}
和下面的JavaScript:实际的图像将通过下面的JavaScript来代替
$(document).ready(function() {
$("#toolbarDocs button").each(
function() {
$(this).button(
{ text: $(this).attr('data-img').length === 0? true: false, // display label for no image
icons: { primary: "ui-icon-bullet" }
}).css('background-image', "url(" + $(this).attr('data-img') +")")
.css('background-repeat', 'no-repeat');
});
});
这对我有效。注意你也可以使用精灵。 – 2011-06-10 02:05:58
@RobOsborne你如何使用精灵?它不适用于我 – 2013-08-27 16:48:44
谢谢!这是记录在jquery-ui文档?我无法在任何地方找到它。 – shimizu 2017-07-10 16:43:07