<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>多图标背景按钮图标定位</title>
<style type="text/css">
body
{
background-color:#eef;
}
/* Tools */
.x-tool {
border-style: none;
border-width: 0;
width:15px;
height:15px;
cursor:pointer;
background: url('tool-sprites.gif');
}
.x-tool-close {
background-position:0 -0;
}
x-tool-close-over {
background-position:-15px 0;
}
.x-tool-minimize {
background-position:0 -15px;
}
.x-tool-minimize-over {
background-position:-15px -15px;
}
.x-tool-maximize {
background-position:0 -30px;
}
.x-tool-maximize-over {
background-position:-15px -30px;
}
.x-tool-restore {
background-position:0 -45px;
}
.x-tool-restore-over {
background-position:-15px -45px;
}
.x-tool-gear {
background-position:0 -90px;
}
.x-tool-gear-over {
background-position:-15px -90px;
}
.x-tool-prev {
background-position:0 -105px;
}
.x-tool-prev-over {
background-position:-15px -105px;
}
.x-tool-next {
background-position:0 -120px;
}
.x-tool-next-over {
background-position:-15px -120px;
}
.x-tool-pin {
background-position:0 -135px;
}
.x-tool-pin-over {
background-position:-15px -135px;
}
.x-tool-unpin {
background-position:0 -150px;
}
.x-tool-unpin-over {
background-position:-15px -150px;
}
.x-tool-right {
background-position:0 -165px;
}
.x-tool-right-over {
background-position:-15px -165px;
}
.x-tool-left {
background-position:0 -180px;
}
.x-tool-left-over {
background-position:-15px -180px;
}
.x-tool-down {
background-position:0 -195px;
}
.x-tool-down-over {
background-position:-15px -195px;
}
.x-tool-up {
background-position:0 -210px;
}
.x-tool-up-over {
background-position:-15px -210px;
}
.x-tool-refresh {
background-position:0 -225px;
}
.x-tool-refresh-over {
background-position:-15px -225px;
}
.x-tool-plus {
background-position:0 -240px;
}
.x-tool-plus-over {
background-position:-15px -240px;
}
.x-tool-minus {
background-position:0 -255px;
}
.x-tool-minus-over {
background-position:-15px -255px;
}
.x-tool-search {
background-position:0 -270px;
}
.x-tool-search-over {
background-position:-15px -270px;
}
.x-tool-save {
background-position:0 -285px;
}
.x-tool-save-over {
background-position:-15px -285px;
}
.x-tool-help {
background-position:0 -300px;
}
.x-tool-help-over {
background-position:-15px -300px;
}
.x-tool-print {
background-position:0 -315px;
}
.x-tool-print-over {
background-position:-15px -315px;
}
.x-tool-expand {
background-position:0 -330px;
}
.x-tool-expand-over {
background-position:-15px -330px;
}
.x-tool-collapse {
background-position:0 -345px;
}
.x-tool-collapse-over {
background-position:-15px -345px;
}
</style>
</head>
<body>
<input id="Button1" class="x-tool x-tool-close" type="button" />
<input id="Button2" class="x-tool x-tool-close-over" type="button" /><br>
<input id="Button3" class="x-tool x-tool-minimize" type="button" />
<input id="Button4" class="x-tool x-tool-minimize-over" type="button" /><br>
<input id="Button1" class="x-tool x-tool-maximize" type="button" />
<input id="Button2" class="x-tool x-tool-maximize-over" type="button" /><br>
<input id="Button3" class="x-tool x-tool-restore" type="button" />
<input id="Button4" class="x-tool x-tool-restore-over" type="button" /><br>
<input id="Button1" class="x-tool x-tool-gear" type="button" />
<input id="Button2" class="x-tool x-tool-gear-over" type="button" /><br>
<input id="Button3" class="x-tool x-tool-prev" type="button" />
<input id="Button4" class="x-tool x-tool-prev-over" type="button" /><br>
<input id="Button1" class="x-tool x-tool-next" type="button" />
<input id="Button2" class="x-tool x-tool-next-over" type="button" /><br>
<input id="Button3" class="x-tool x-tool-pin" type="button" />
<input id="Button4" class="x-tool x-tool-pin-over" type="button" /><br>
<input id="Button1" class="x-tool x-tool-unpin" type="button" />
<input id="Button2" class="x-tool x-tool-unpin-over" type="button" /><br>
<input id="Button3" class="x-tool x-tool-right" type="button" />
<input id="Button4" class="x-tool x-tool-right-over" type="button" /><br>
<input id="Button1" class="x-tool x-tool-left" type="button" />
<input id="Button2" class="x-tool x-tool-left-over" type="button" /><br>
<input id="Button3" class="x-tool x-tool-down" type="button" />
<input id="Button4" class="x-tool x-tool-down-over" type="button" /><br>
<input id="Button1" class="x-tool x-tool-up" type="button" />
<input id="Button2" class="x-tool x-tool-up-over" type="button" /><br>
<input id="Button3" class="x-tool x-tool-refresh" type="button" />
<input id="Button4" class="x-tool x-tool-refresh-over" type="button" /><br>
<input id="Button1" class="x-tool x-tool-plus" type="button" />
<input id="Button2" class="x-tool x-tool-plus-over" type="button" /><br>
<input id="Button3" class="x-tool x-tool-minus" type="button" />
<input id="Button4" class="x-tool x-tool-minus-over" type="button" /><br>
<input id="Button1" class="x-tool x-tool-search" type="button" />
<input id="Button2" class="x-tool x-tool-search-over" type="button" /><br>
<input id="Button3" class="x-tool x-tool-save" type="button" />
<input id="Button4" class="x-tool x-tool-save-over" type="button" /><br>
<input id="Button1" class="x-tool x-tool-help" type="button" />
<input id="Button2" class="x-tool x-tool-help-over" type="button" /><br>
<input id="Button3" class="x-tool x-tool-print" type="button" />
<input id="Button4" class="x-tool x-tool-print-over" type="button" /><br>
<input id="Button1" class="x-tool x-tool-expand" type="button" />
<input id="Button2" class="x-tool x-tool-expand-over" type="button" /><br>
<input id="Button3" class="x-tool x-tool-collapse" type="button" />
<input id="Button4" class="x-tool x-tool-collapse-over" type="button" />
</body>
</html>
相关推荐
- 在ExtJS应用中，可以使用`Icon`配置项在按钮、菜单项或其他组件上添加图标。例如，`{iconCls: 'add'}`将添加一个指定类名的图标，类名对应于CSS中的背景图像，通常存储在CSS文件中。 4. **图标集**： - "5000个...
在使用这些图标时，开发者通常会结合ExtJS的组件，如按钮（Button）、工具栏（Toolbar）或网格面板（Grid Panel），通过设置图标字段（iconField）或图标CSS类（iconCls）来添加图标。例如，你可以这样创建一个带有...
EXTJS 的图标库通常包括多个主题，比如经典主题（Classic）、现代主题（Neptune）和材料设计主题（Material）。这些主题中的图标设计都与EXTJS的组件样式相协调，确保整体视觉效果的一致性。此外，EXTJS支持动态更换...
ExtJS图标大全是一个集合了多种图标的资源库，特别适合用于Web开发，尤其是使用ExtJS框架构建用户界面时。ExtJS是一款强大的JavaScript UI框架，它提供了丰富的组件和工具，帮助开发者构建功能丰富的、响应式的Web...
例如，`保存</button>`，其中`icon-save`是一个预定义的CSS类，它设置按钮的背景图像为“保存”图标。 2. SVG图标：现代浏览器支持SVG格式的图标，这提供了更好的清晰度和缩放效果。图标可能作为SVG文件提供，可以...
不过，由于这里提到的是"压缩包子文件的文件名称列表"为"exticons"，我们可以推测这可能是一个包含多个PNG图像文件的文件夹，每个文件代表一个不同的图标。 使用这些图标素材时，开发者可以将它们整合到ExtJS应用中...
"extjs bug 图标大全" 指的是在ExtJS框架中与错误或问题相关的图标集合。这些图标通常用于表示程序中的错误状态、警告信息或者调试标志，帮助开发者和用户更好地理解应用的状态。 在ExtJS中，图标通常通过CSS类来...
在ExtJs中，图标是提升用户界面美观度和交互性的重要元素，尤其对于按钮、菜单项、工具栏等组件，图标能够直观地表示功能，增强用户的认知。 "ExtJs实用图标大全"包含了近千个专为ExtJs设计的小图标，尺寸为16x16...
"easyui,extjs图标icon图标大全"这个资源包含了2000个图标，为开发者提供了大量的选择，以满足不同场景下的需求。这些图标可能包括文件操作、导航、编辑、设置、警告等各种类别，覆盖了信息系统开发中的常见功能。...
- **雪碧图（Sprite Image）**：为了减少HTTP请求，ExtJS通常会将多个图标合并到一张图片（雪碧图）中，然后通过CSS定位显示需要的图标。 - **SVG图标**：使用SVG格式的图标可以实现响应式和高清晰度显示，且文件...
2. **ExtJS图标分类**：这些小图标可能包括了各种类型，如操作类（加减、保存、撤销等）、状态类（成功、警告、错误等）、导航类（前进、后退、刷新等）以及自定义业务相关的图标。它们可能有不同的格式，如SVG...
标题中的“2000多个extjs小图标适合jquery EasyUI”揭示了这个资源是针对Web开发中的图形用户界面设计的。EXTJS是一款强大的JavaScript框架，用于构建富客户端应用程序，而jQuery EasyUI则是一个基于jQuery的UI库，...
在ExtJS中，图标通常用于按钮、菜单项、工具栏等组件，以图形化的方式表示功能或状态。它们可以通过CSS类名或者直接使用图片URL来添加。ExtJS框架内建了多种预定义的图标，但这个压缩包提供的5000个小图标显然是为了...
在ExtJS中，图标是构建用户界面不可或缺的部分，它们用于美化按钮、菜单、工具栏等元素，增强用户体验。"extjs的图标1000个 icon icons"这个资源提供了一千个图标，专门针对ExtJS开发需求，帮助开发者快速找到适合的...
CSS类通常用于内置的EXTJS图标，通过设置组件的`iconCls`属性来引用，例如`' Ext-icon-calendar'`。这些预定义的CSS类在EXTJS框架内部定义，开发者可以直接使用，无需额外引入资源。而图片URL则需要开发者自行提供，...
1. **图标集成**：将图标集成到ExtJS应用中，通常可以通过CSS类或者JavaScript对象来实现。CSS类可以直接应用到元素上，而JavaScript对象则允许动态加载和切换图标。 2. **响应式设计**：由于图标可能用于不同尺寸...
在ExtJS中，图标通常被用作按钮、菜单项或其他UI元素的视觉表示。这些图标可以是基于字体的图标（Font Icons）或者SVG图片图标。字体图标通常通过CSS类来使用，具有响应式和可调整大小的优点；而SVG图标则提供了更高...
在ExtJS中，图标通常通过CSS类或者使用SVG图像来实现。这些图标可以是简单的图形，也可以是代表特定操作或状态的象形图。例如，一个加号（"+"）图标可能用于添加新项目，一个垃圾桶图标则表示删除操作。这些小图标...
ExtJS图标系统允许开发者为按钮、菜单项和其他UI元素添加视觉效果，增强其可识别性和美观性。这些图标通常通过CSS类名引用，可以是矢量图形，以确保在不同分辨率下都能清晰显示。 EasyUI则是一个基于jQuery的轻量级...