easyui 如何添加自定义图标

easyui 的图标除了必要的图标,其它拓展的图标就没有了,这样就感觉我们不够用是不是。为此,我们可以在其源文件添加一下代码就可以了:

1、到网上下载自己需要的16*16的png图标,把图片名称改为自己需要的,然后把图片复制到easyUI的 hemesicons目录下,即小图标icons目录,这个目录是专门存放easyUI中工具栏,状态栏,链接等用到的小图标,而每一个图标在css中都是唯一的,下面修改css,定义新添加的图标。

2、找到easyUI目录下的themes目录,在其根目录有一个名为icon.css的文件,这个文件用于定义小图标的,定义如下:

.icon-sound{
     background:url("icons/sound.png") no-repeat center center;
}

其中:icon-sound中的sound必须对应图片名称。

3、在html中引用,图标。

<div title="用户管理" data-options="selected:true,iconCls:‘icon-user‘" class="list">
   <ul>
         <li><a href="javascript:;" onclick="openTab(‘list‘)">用户列表</a></li>
  </ul>
</div>

其中iconCls:‘icon-user‘中的icon-sound就是css中的class名称。

转至http://www.qiandl.com/seo-519-seo_show.html

时间: 2024-08-27 23:47:15

easyui 如何添加自定义图标的相关文章

高德地图-添加自定义图标

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, wi

easyui添加自定义图标

最近用easyui发现图标挺少的,其实可以另外添加一个css样式,不过我偷懒,直接在easyui的css里面添加了. 下面是目录: icon.css是easyui的默认样式文件,ext_icons文件夹呢装有要添加的图标文件.这时候直接修改icon.css 1处就是对应的图标名,即data-options里面的iconCls名,如: <a href="javascript:void(0);" class="easyui-menubutton" data-opt

构建ASP.NET MVC5+EF6+EasyUI 1.4.3+Unity4.x注入的后台管理系统(52)-美化EasyUI皮肤和图标

系列目录 我很久以前就想更新系统的皮肤功能,Easyui 自带的皮肤已经无法满足客户的审美. 皮肤颜色来源于AdminLTE系统.我的颜色全部都这里取的.,所以一共取了11个颜色.1个皮肤=2个banner颜色和1个侧边栏颜色 利用chome的元素查看器可以获取AdminLTE颜色,或者用VS2013自带的吸色器(我是用后者) 我是怎么做的??? 我用了原EasyUI 的Gray作为基础皮肤.里面只有这套皮肤我觉得最适合作为基础皮肤 图中为文件结构,skin开头为自己的皮肤. 皮肤里面一定要覆盖

Nancy之给我们的网站添加自定义图标

当我们在做一个网站时,可能经常会有这样一个需求,要给我们做的网站添加一个自定义的图标. 在Nancy中,默认是的下面这样 一个妹子的头像,其实也是挺好看的!! 那么当我们想要替换这个默认的,应该要怎么做呢? 下面就来看看具体的实现 首先,准备一张名为 favicon.ico或 favicon.png 图片 这里有两种实现方法提供参考 方法一:替换默认的图标(IRootPathProvider的实现) 如果我们是使用默认的IRootPathProvider的实现,这个时候,我们直接添加图片在我们的

easyui combo+pagination 图标选择器

从数据库读取分页显示 $(function () { initTable(1, 180); $('#cc').combo({ editable: false, panelWidth: 'auto', panelHeight: 'auto' }); $('#iconSelectPanel').appendTo($('#cc').combo('panel')); $('#iconList').delegate('span', 'click', function () { var value = $(

easyui tree 更改图标

,onLoadSuccess: function (node, data) { $('#tt .tree-icon').css("background", "url(/Assets/jquery-easyui-1.5/themes/icons/man1.png) no-repeat center center"); }

EasyUi图标

虽然EasyUi提供的图标不多,不过在下眼拙,在官网中没找到图标对照文档,有时想要在某些特别设置中变化个图标有些不方便.所以简单整理了下easyui的图标与调用类的对照关系. EasyUi 版本:1.4.3 <a href="###" class="easyui-linkbutton" iconCls="icon-blank">icon-blank</a> <a href="###" class=

easyUI替换非16x16的图标

我们知道easyUI原生的图标是比較难看的.所以要达到较好的用户体验,那么就很有必要替换它的图标. 原生的easyUI的图标: 可是.easyUI中的组件easyui-linkbutton默认仅仅提供了对16x16图片的良好支持. 假设你替换成别的尺寸的,那么图片就会被缩放,这显然不是我们想要的. 于是我们须要对easyui-linkbutton解析出的html进行改写. 1.把要更改的图标构造成css中的一个class.便于我们使用 .icon-add-3 { background: url(

easyui icon的使用相关

easyui的默认图标有以下这些: .icon-blank{ background:url('icons/blank.gif') no-repeat; } .icon-add{ background:url('icons/edit_add.png') no-repeat; } .icon-edit{ background:url('icons/pencil.png') no-repeat; } .icon-remove{ background:url('icons/edit_remove.png