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‘) no-repeat;   

}   

.icon-save{   

background:url(‘icons/filesave.png‘) no-repeat;   

}   

.icon-cut{   

background:url(‘icons/cut.png‘) no-repeat;   

}   

.icon-ok{   

background:url(‘icons/ok.png‘) no-repeat;   

}   

.icon-no{   

background:url(‘icons/no.png‘) no-repeat;   

}   

.icon-cancel{   

background:url(‘icons/cancel.png‘) no-repeat;   

}   

.icon-reload{   

background:url(‘icons/reload.png‘) no-repeat;   

}   

.icon-search{   

background:url(‘icons/search.png‘) no-repeat;   

}   

.icon-print{   

background:url(‘icons/print.png‘) no-repeat;   

}   

.icon-help{   

background:url(‘icons/help.png‘) no-repeat;   

}   

.icon-undo{   

background:url(‘icons/undo.png‘) no-repeat;   

}   

.icon-redo{   

background:url(‘icons/redo.png‘) no-repeat;   

}   

.icon-back{   

background:url(‘icons/back.png‘) no-repeat;   

}   

.icon-sum{   

background:url(‘icons/sum.png‘) no-repeat;   

}   

.icon-tip{   

background:url(‘icons/tip.png‘) no-repeat;   

}   

.icon-mini-add{   

background:url(‘icons/mini_add.png‘) no-repeat 2px 2px;   

}   

.icon-mini-edit{   

background:url(‘icons/mini_edit.png‘) no-repeat 2px 2px;   

}   

.icon-mini-refresh{   

background:url(‘icons/mini_refresh.png‘) no-repeat 3px 2px;   

}  

下载easyUI的压缩包后,解压后在theme文件夹下的icons文件夹是默认的图标,如果你觉得不够用,可以上网下载16x16大小的图片,放在icons文件夹下,然后更改theme文件夹下的icon.css

添加以下css代码即可

.icon-你的名称{

background:url(‘icons/图片名称.png‘no-repeat 3px 2px;

}

时间: 2025-01-21 23:33:11

easyui icon的使用相关的相关文章

EasyUI Icon 图标扩展(1775个)

最近在用EasyUI做项目是发现自带的Icon图标太少,而且不是很美观.于是就有了下面的东西. 直接上图:(纯属个人无聊之作勿喷) css及图标下载地址: http://download.csdn.net/detail/miracle98/7579723 EasyUI Icon 图标扩展(1775个)

easyui datagrid checkbox的相关属性整理

DataGrid其中与选择,勾选相关 DataGrid属性: singleSelect boolean 如果为true,则只允许选择一行. false ctrlSelect boolean 在启用多行选择的时候允许使用Ctrl键+鼠标点击的方式进行多选操作.(该属性自1.3.6版开始可用) checkOnSelect boolean 如果为true,当用户点击行的时候该复选框就会被选中或取消选中.如果为false,当用户仅在点击该复选框的时候才会呗选中或取消.(该属性自1.3版开始可用) tru

Easyui dialog

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="styleSheet" type="text/css" href="js/easyUI/metro/easyui.css"> <link rel=

EasyUI的使用经验——aa

恢复 1,EasyUI的使用本来要求两个小时完成,我用了一天,路漫漫啊! 下面来看下今天的收获吧! 主要是对EasyUI的增删改查 (1)首先是调用文件 <link href="~/Content/easyUI/icon.css" rel="stylesheet" /> <link href="~/Content/easyUI/default/easyui.css" rel="stylesheet" />

DataTables VS EasyUI DataGrid 基础应用 转

DataTables中文网推出了 第一篇 关于DataTables和其他表格插件比较后,为了把让这个比较更有意义,更能帮助到大家,DataTables中文网 做了问卷调查,根据小伙伴们的填写我归纳了一下,一个表格插件关注点在以下三个部分基础.高级的和进阶: 基础 排序 分页 搜索 美观 合理的配置 高级 单击和双击行事 选择高亮显示 增删改查 列宽拖动 数据导出 添加序号 进阶 支持的数据类型 行内编辑 合并单元格 自定义表头 高扩展性 易用的API 模块化 所以根据以上列出的这些功能点,Dat

【EasyUI】——可编辑的DataGrid

利用EasyUI做的可编辑的DataGrid大致分为两种类型.一种是启动行编辑的,一种是启动单元格编辑.且不说启动编辑的效果怎样.单启动编辑这一块它就封装的非常厉害.好些功能没有办法去更改.如今项目的一个需求就是在页面上使得DataGrid能够实现这种效果,单击选中行,双击可编辑单元格,失去焦点则保存数据.在研究了整整两天之后,大致能实现.可是差失去焦点保存数据.这篇文章就简单理解一下.可启动单元格编辑的DataGrid是怎样实现的. 首先得加入EasyUI的引用: <span style=&quo

Jquery EASYUI设计注意点

最近用了easyui做界面的相关设计,使用过程遇到了各种问题,例如 easyui combobox 在浏览器中的不兼容问题等;这里罗列一下遇到的问题; 1.select标签在chrome下下拉列表以及显示问题,官方demo如下 <select class="easyui-combobox" name="state" style="width:200px;"> <option value="AL">Ala

jQuery-EasyUI-CSS:Icon 图标

ylbtech-jQuery-EasyUI-CSS:Icon 图标 1.返回顶部 1. <table style="height: 100%"> <tr> <td><a class="easyui-linkbutton" data-options="iconCls:'icon-redo',plain:true" href="javascript:void(0)" onclick=&qu

使用TT模板+mvc+wcf实现简单查询

伴随着春姑娘调皮的脚步,小编接手的档案管理项目也渐渐步入正轨,从开始的需求分析,到使用Axure画原型图,再到使用powerdesigner设计实体,生成数据库,一直到昨天刚刚通了一条线,这一路走来,小编懂得了很多,无路学习还是和团队小伙伴的交流合作,有时候,总是会因为大家意见不统一,搞的大家吹胡子瞪眼,但有时也会因为某件事情圆满成功而欢欣鼓舞,小组中最开心的事儿莫过于有人开会迟到买吃的了,哈哈,暴露了小编的本质,开头说了这么多,接下来,小编就跟分享一下,如果利用TT模板+mvc+wcf实现简单