EasyUI的iconCls如何加入img标签 - Java Web开发当前位置:& &&&EasyUI的iconCls如何加入img标签EasyUI的iconCls如何加入img标签&&网友分享于：&&浏览：112次EasyUI的iconCls怎么加入img标签?
$('#nav').accordion('add',&{
&&&&&&&&&&&&title:&n.text,
&&&&&&&&&&&&content:&menulist,
border:false,
iconCls:&'icon&icon-add'
&&&&&&&&});
现在我想把iconCls这里直接写成img标签，如：
$('#nav').accordion('add',&{
&&&&&&&&&&&&title:&n.text,
&&&&&&&&&&&&content:&menulist,
border:false,
iconCls:&'&img&src="images/icon2.png"/&'
&&&&&&&&});
但是这样写是错误的，请问应该如何写?------解决方案--------------------这样不对，Easyui有规定的样式文件，你要遵循人家的规则。
你找EasyUI下的themes文件夹下的icon.css，里面定义了图标的样式，你也可以对其拓展。
这是人家官方定义的格式，你要自定义图标的话就起个class名，然后依照格式再写一个新的class
.icon-add{
background:url('icons/edit_add.png')&no-repeat&center&
iconCls属性是在icon.css里面找的。------解决方案--------------------引用:Quote: 引用:
这样不对，Easyui有规定的样式文件，你要遵循人家的规则。
你找EasyUI下的themes文件夹下的icon.css，里面定义了图标的样式，你也可以对其拓展。
这是人家官方定义的格式，你要自定义图标的话就起个class名，然后依照格式再写一个新的class
.icon-add{
background:url('icons/edit_add.png')&no-repeat&center&
iconCls属性是在icon.css里面找的。
这样怎么能实现动态修改上传图片?
这个应该是没法动态，你想啊图标这种东西谁天天改啊，改的话只能改css。用前台框架就是这样。
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 12345678910 Copyright & &&版权所有jQuery EasyUI开发参考_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
jQuery EasyUI开发参考
上传于||文档简介
&&j​Q​u​e​r​y​ ​E​a​s​y​U​I​ ​A​P​I
阅读已结束，如果下载本文需要使用
想免费下载本文？
下载文档到电脑，查找使用更方便
还剩7页未读，继续阅读
你可能喜欢EasyUI学习之menu and button(菜单和按钮) - 推酷
EasyUI学习之menu and button(菜单和按钮)
& & 今天下午的天气感觉格外的气闷,整个人有一种黏糊糊的感觉,格外的不舒服。加之马上要放假了了
,感觉自己完全坐不住呢(节前综合症么)。不过学习还是的继续的。
原定计划这篇文章本来应该是关于searchBox的介绍的,
不过鉴于easyloader里面的依赖关系,searchBox依赖于menubutton,menubutton又依赖于menu和linkbutton。于是乎,打算先对easyui组件中的菜单和按钮进行学习了解。
LinkButton(链接按钮)
& & &对于链接按钮由于前面已经做过相关介绍了,这里就不再赘述了.参考&EasyUI基础入门之pagination&即可。
Menu(菜单)
& & &使用$.fn.menu.defaults重载默认值。
& & &菜单通常是用于上下文菜单的。这是基本组件构建其他菜单组件如menubutton、splibutton。它还可以用于导航和执行命令。
菜单项(menu item)
& & &菜单项代表的是一个单独的项目,是显示在一个菜单里的。包含如下属性:
描述信息 & & &&
菜单项&id&
菜单项名称
一个css类在菜单项右边显示一个16*16图标
设置点击菜单项的链接
定义是否禁止菜单项
单击菜单项函数
& & 到最新版本,菜单具有如下的一些属性:
描述信息 & &
菜单的z-index样式，从第一个菜单开始递增(默认值如此大,基本保证了所有菜单项在最上层)
菜单的左边距
菜单的顶边距
菜单的最小宽度
hideOnUnhover
当设置为true时,鼠标退出时自动的隐藏菜单
描述信息 & & & & & & & & & & &
当一个菜单被显示的时候触发。
当一个菜单被隐藏的时候触发。
当一个菜单被点击时触发。下面的例子显示了如何处理所有菜单项的点击事件
&div class=&easyui-menu& data-options=&onClick:menuHandler& style=&width:120&&
&div data-options=&name:'new'&&New&/div&
&div data-options=&name:'save',iconCls:'icon-save'&&Save&/div&
&div data-options=&name:'print',iconCls:'icon-print'&&Print&/div&
&div class=&menu-sep&&&/div&
&div data-options=&name:'exit'&&Exit&/div&
&script type=&text/javascript&&
function menuHandler(item){
alert(item.name)
& & &对菜单的操作都会有一些方法,比如打开&File&菜单,这一操作什么时候被触发,了解这些在处理起来会更加的心应手(后期查API也是可以的啦)。
描述信息 & & & & & & & & & & & & & & & & & && & & & & & &
返回菜单的options参数对象
在一个特定的位置显示菜单
隐藏一个菜单
销毁一个菜单
获得菜单项数据并将其返回,数据包含以下属性:
target:DOM对象,菜单项目。
id:字符串,分配给元素的ID。
text：字符串,菜单项的文本。
href:字符串,超链接的地址。
disabled:boolean,菜单项是否启用。
onclick:function,点击菜单时将执行的函数。
iconCls:字符串,图标css类。
下面是一个简单的例子:
&div id=&mm& class=&easyui-menu& style=&width:120&&
&div id=&m-new&&New&/div&
&span&Open&/span&
&div style=&width:150&&
&div&&b&Word&/b&
&div&Excel&/div&
&div&PowerPoint&/div&
&div data-options=&iconCls:'icon-save'&&Save&/div&
&div class=&menu-sep&&&/div&
&div&Exit&/div&
var itemEl = $('#m-new')[0]; // the menu item element
var item = $('#mm').menu('getItem', itemEl);
console.log(item);
之后我们在打开chrome浏览器按F12即可看到如下效果:
设置特定菜单的文本,'param'参数包含2个属性:
target:DOM对象,将要被设置的菜单项
text:字符串,新的文本值
一个简单的示例:
$(function () {
var item = $('#mm').menu('findItem', 'Save');
$('#mm').menu('setText', {
target: item.target,
text: 'Saving'
原本的菜单项字符串属性值为&Save&,执行上述代码之后变为了&Saving&这里就不再贴图了,可尝试之。
设置特定的菜单项的图标,'param'参数包含两个属性
target:DOM对象,菜单项目。
iconCls:新的图标css类。
一个简单的例子:
$('#mm').menu('setIcon', {
target: $('#m-open')[0],
iconCls: 'icon-closed'
根据给定的text查找特定的菜单项,与getItem返回相同的数据
一个简单例子:
// find 'Open' item and disable it
var item = $('#mm').menu('findItem', 'Open');
$('#mm').menu('disableItem', item.target);
appenditem
添加一个新的菜单项,参数表示新条目属性。默认情况下,添加的项目将成为一个顶级菜单项，附加的子菜单。附加的子菜单项,父属性应该设置为指定父条目元素,已经有字条目
'param'参数包含如下属性:
parent:待添加新菜单的DOM对象,如果没有被设置,新菜单项将作为顶级菜单添加。
text:字符串,菜单项文本。
href:字符串,超链接地址。
onclick:字符串或者函数,当用户点击菜单项时将要被执行的脚本代码。
iconCls:图标类。
一个简单的示例:
// append a top menu item
$('#mm').menu('appendItem', {
text: 'New Item',
iconCls: 'icon-ok',
onclick: function () {
alert('New Item')
// append a sub menu item
var item = $('#mm').menu('findItem', 'Open'); // find 'Open' item
$('#mm').menu('appendItem', {
parent: item.target, // the parent item element
text: 'Open Excel',
iconCls: 'icon-excel',
onclick: function () {
alert('Open Excel')
removeitem
移除指定的菜单项。
enableitem
启用指定的菜单项。
disableitem
禁用菜单项。
Tips: 上面代码示例中使用了(console.log),console是控制台打印日志信息的,主要是用于调试的。这里也是建立使用console方式来调试(FF,Chrome)。新手一般使用alert进行调试，这样不仅会是程序中断执行(如果alert在loop中,呵呵累死你),而且打印的信息太简单，并不适合调试。
console可以完美纠正。
1、创建菜单
& & &使用html标签创建菜单必须对&div&标签引用'easyui-menu'类,每个菜单项都将使用&div&标签创建。为菜单添加'iconCls'属性可以指定一个显示在菜单项左侧的图标。对菜单引用'menu-sep'类将生成一条菜单分隔线。
&div id=&mm& class=&easyui-menu& style=&width:120&&
&div&New&/div&
&span&Open&/span&
&div style=&width:150&&
&div&&b&Word&/b&&/div&
&div&Excel&/div&
&div&PowerPoint&/div&
&div data-options=&iconCls:'icon-save'&&Save&/div&
&div class=&menu-sep&&&/div&
&div&Exit&/div&
& & & &使用脚本创建菜单并且监听'onClick'事件。
$('#mm').menu({
onClick: function (item) {
if(item.text==&保存&)
alert(&你点击了保存按钮&);
2、显示菜单
& & &当一个菜单创建完毕后,默认情况下它是隐藏而不可见的,调用show方法可以显示菜单
$('#mm').menu('show', {
left: 200,
& & & & 对于菜单的学习基本上也就这样了,更加详细的内容和Demo可以去easyui官网了解学习。
MenuButton(菜单按钮)
& & & 有了linkbutton和menu的基础之后接下来就可以进入到MenuButton的学习中了。菜单按钮可以说是下拉菜单的一部分，由一个链接按钮盒菜单组成。这个链接菜单默认将隐藏显示在菜单内。当用户点击或鼠标移动到链接按钮时,菜单将显示且允许点击它。
& & & 继承$.fn.linkbutton.defaults,使用$.fn.menubutton重载默认值。
& & & 依赖于menu和linkbutton
& & & &继承linkbutton的属性,也有菜单按钮的独有属性。
描述信息 & & & & & & & & & & & & & & & & & & & && & &
设置为true的时候将显示简洁效果(链接菜单没有边框)
用来创建一个相应菜单的选择器
菜单的对齐方式,从1.3.6开始,可选值为left、right
定义鼠标划过按钮时显示菜单所需要的时间,单位毫秒(几秒之后显示,点击按钮即可马上显示)
& & & 这些方法继承至linkbutton,下面的是为splitbutton添加和重写的。
描述信息 & & & & & & & & & &
返回属性对行啊 & & & & & & & & & & & & & & & & & & & & & & & & & & &&
禁用菜单按钮
启用菜单按钮
注销菜单按钮
1、通常情况下使用html创建按钮:
&div id=&mm& style=&width:150&&
&div data-options=&iconCls:'icon-undo'&&Undo&/div&
&div data-options=&iconCls:'icon-redo'&&Redo&/div&
&div class=&menu-sep&&&/div&
&div&Cut&/div&
&div&Copy&/div&
&div&Paste&/div&
&div class=&menu-sep&&&/div&
&div data-options=&iconCls:'icon-remove'&&Delete&/div&
&div&Select All&/div&
2、使用javascript创建:
&a href=&javascript:void(0)& id=&mb&&Edit&/a&
&div id=&mm& style=&width:150&&
&div data-options=&iconCls:'icon-undo'&&Undo&/div&
&div data-options=&iconCls:'icon-redo'&&Redo&/div&
&div class=&menu-sep&&&/div&
&div&Cut&/div&
&div&Copy&/div&
&div&Paste&/div&
&div class=&menu-sep&&&/div&
&div data-options=&iconCls:'icon-remove'&&Delete&/div&
&div&Select All&/div&
$(function () {
$('#mb').menubutton({
iconCls: 'icon-edit',
menu: '#mm'
& & & & &关于一些demo,这里就不再做演示了,官网的例子也是比较简单易懂的啦。
SlitButton(分隔按钮)
& & & &移动到分隔或者点击才下拉的菜单按钮,分隔按钮有链接按钮和菜单组长。菜单按钮被分为两部分。当鼠标移动到分隔符上,一个split会显示出来。菜单显示时鼠标光标位于链接按钮邮册部分。
& & & &继承$.fn.linkbutton.defaults,使用$.fn.splitbutton.defaults重载默认值。
& & & &依赖于菜单和链接按钮。
& & & 属性继承链接按钮,也有其独有属性,独有属性和菜单按是一样的,这里我就不再展示了,可参考上面菜单按钮的属性表。
描述信息 & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & & &
返回属性对象
禁用分隔按钮。示例:
$('#sb').splitbutton('disable');
启用分隔按钮
注销分隔按钮
使用及Demo
&1、使用标签创建分隔按钮:
&meta charset=&UTF-8&&
&title&Basic Draggable - jQuery EasyUI Demo&/title&
&link rel=&stylesheet& type=&text/css& href=&jquery-easyui-1.3.6/themes/metro/easyui.css&&
&link rel=&stylesheet& type=&text/css& href=&jquery-easyui-1.3.6/themes/icon.css&&
&link rel=&stylesheet& type=&text/css& href=&jquery-easyui-1.3.6/demo/demo.css&&
&script type=&text/javascript& src=&jquery-easyui-1.3.6/jquery.min.js&&&/script&
&script type=&text/javascript& src=&jquery-easyui-1.3.6/jquery.easyui.min.js&&&/script&
&a href=&javascript:void(0)& id=&sb& class=&easyui-splitbutton&
data-options=&menu:'#mm',iconCls:'icon-ok'& onclick=&javascript:alert('ok')&&Ok&/a&
&div id=&mm& style=&width:100&&
&div data-options=&iconCls:'icon-ok'&&Ok&/div&
&div data-options=&iconCls:'icon-cancel'&&Cancel&/div&
2、使用脚本创建:
&a href=&javascript:void(0)& id=&sb& onclick=&javascript:alert('ok')&&Ok&/a&
&div id=&mm& style=&width:100&&
&div data-options=&iconCls:'icon-ok'&&Ok&/div&
&div data-options=&iconCls:'icon-cancel'&&Cancel&/div&
$(function () {
$('#sb').splitbutton({
iconCls: 'icon-ok',
menu: '#mm'
已发表评论数()
已收藏到推刊！
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
排版有问题
没有分页内容
视频无法显示
图片无法显示4165人阅读
整理几个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;
background:url('icons/ok.png')&no-repeat;
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;
版权声明：本文为博主原创文章，未经博主允许不得转载。
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：78256次
积分：1006
积分：1006
排名：千里之外
原创：28篇
转载：14篇
评论：12条
(1)(3)(2)(2)(1)(2)(1)(1)(4)(1)(2)(1)(2)(1)(1)(2)(2)(9)(4)4403人阅读
1、添加图标的两小步：
&&&&&&& 先到themes目录下的icon.css中，添加新图标对应的CSS类选择器，参照已有的图标类，只要指定图标对应的路径即可，如下所示：
.icon-forward{
background:url('icons/forward.png') no-
&&&&& 然后将图标文件放置到icons目录下即可。
2、应用新图标不生效的问题
&&&&&&& 已经按上述的步骤处理了，但是用到窗口上时，一直都没效果。后来查看网页的源码得知，引入的jquery-easyui-1.2.6/themes/icon.css文件中没有加载新的样式类，当前使用的是firefox浏览器，估计可能是缓存的原因，所以清了一下缓存后重新刷了一下就有效果了。
版权声明：本文为博主原创文章，未经博主允许不得转载。
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：404210次
积分：6367
积分：6367
排名：第1855名
原创：167篇
转载：396篇
评论：156条
(3)(1)(2)(5)(12)(6)(6)(10)(9)(12)(21)(19)(34)(27)(57)(79)(67)(28)(14)(10)(5)(29)(1)(2)(2)(1)(12)(3)(10)(2)(4)(6)(27)(14)(7)(6)(1)(1)(7)(1)}