<!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 JAVA EXTJS BUTTON 图标
EXT按钮图标，这个是由我们项目组美工专门设计的，在网上应该找不到，这是ext按钮图标。
EXTJS图标现在找的很累 我将自己收集起来的都丢上来吧
NULL 博文链接：https://xiaomy.iteye.com/blog/2280263
Ext 小图标素材. 文件操作图标，表格操作图标，工具栏图标，邮件操作图标，RSS操作图标.
这是使用 ExtJS5 的图标字体示例。 这是使用以下字体的示例。
用钩子函数实现的自定义MessageBox，可以修改按钮的文字等属性
环境为java,struts2,extjs3.0 ...extjs俩页面传参，定义函数，创建按钮，按钮打开新窗口，mailto功能，页面显示分辨图标，列表搜索框条件联动，功能很全，从项目里直接拷出来的代码，绝对好用，经过测试
最后利用一个商品信息管理系统和一个企业任务管理系统，向读者演示了ExtJS在实际项目中的应用以及实现流程。 《精通JS脚本之ExtJS框架》附有配套光盘，提供了书中实例的源代码和视频教学文件。此外，读者还可以...
所有ext图标及相应的编码名称。.png文件可无限放大。
一、基本按钮，三种方式实现按钮事件 40 二、带图标菜单 41 三、带分割线的按钮 43 四、菜单式按钮 44 四、按钮组合 45 第六章 Ext.MessageBox 消息对话框 46 一、警告对话框和确认对话框 46 二、输入对话框 47 三、...
最后利用一个商品信息管理系统和一个企业任务管理系统，向读者演示了ExtJS在实际项目中的应用以及实现流程。 《精通JS脚本之ExtJS框架》附有配套光盘，提供了书中实例的源代码和视频教学文件。此外，读者还可以...
EXTJS-Tab.rplib facebook-like.rplib laxurelOS9矢量图标元件库.rplib laxureRP8扩展元件库V1.2读者版.rpliblaxuresVG矢量图标元件库V1.21版.rplibIcons_Audio.rplib icon-UX People.rplib iOS iPad线框。rplib iOS...
本案例实现了节点树 用ext+asp.net实现的，需要的请看
mwtjs一个小而美的前端框架，参照ExtJs架构实现，提供PC端和移动端常用的UI组件。【编译】npm run installsh build.sh【运行开发服务】sh rundev.sh 或 npm run devv4.0 更新内容开发架构变更,采用webpack进行模块化...
EXTJS-Tab.rplib facebook-like.rplib icon-UX_People.rplib Icons_Audio.rplib iOS iPad Wireframe.rplib ipad.rplib iPhone-Bodies.rplib iPhone-Horizontal.rplib iPhone-UI.rplib JQuery Mobile.rplib Mobile-...
+为所有Panel（包括Grid,Tree,Form等）增加枚举类型Icon，其中包含1700多个小图标。 -如果Panel具有IconUrl属性，则IconUrl优先于Icon。 -所有Icon的列表在icon.aspx。 -为Button,MenuItem(MenuButton,...
+为所有Panel（包括Grid,Tree,Form等）增加枚举类型Icon，其中包含1700多个小图标。 -如果Panel具有IconUrl属性，则IconUrl优先于Icon。 -所有Icon的列表在icon.aspx。 -为Button,MenuItem(MenuButton,...