前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >easyUI自定义iconeasyUI自定义icon

easyUI自定义iconeasyUI自定义icon

作者头像
yukong
发布2018-08-21 10:17:18
5970
发布2018-08-21 10:17:18
举报
文章被收录于专栏:yukong的小专栏yukong的小专栏

easyUI自定义icon

首先我们需要下载好自己需要的标签并且放在一个文件中,然后把这个文件夹复制到easyui所在目录下的themes目录下 如图

存放路径

usericons:存放自定义icon文件夹 icons.css:配置自定义icon的css文件

代码语言:javascript
复制
/*配置icon的css*/
.icon-home{
    background:url('usericons/home.png') no-repeat center center;
}

.icon-item{
    background:url('usericons/item.png') no-repeat center center;
}

.icon-writeblog{
    background:url('usericons/writeblog.png') no-repeat center center;
}

.icon-bkgl{
    background:url('usericons/bkgl.png') no-repeat center center;
}

.icon-bklb{
    background:url('usericons/bklb.png') no-repeat center center;
}

.icon-plgl{
    background:url('usericons/plgl.png') no-repeat center center;
}

.icon-grxx{
    background:url('usericons/grxx.png') no-repeat center center;
}

.icon-grxxxg{
    background:url('usericons/grxxxg.png') no-repeat center center;
}

.icon-system{
    background:url('usericons/system.png') no-repeat center center;
}

.icon-modifyPassword{
    background:url('usericons/modifyPassword.png') no-repeat center center;
}

.icon-refresh{
    background:url('usericons/refresh.png') no-repeat center center;
}

.icon-download{
    background:url('usericons/download.png') no-repeat center center;
}

.icon-exit{
    background:url('usericons/exit.png') no-repeat center center;
}

.icon-submit{
    background:url('usericons/submit.png') no-repeat center center;
}

.icon-review{
    background:url('usericons/review.png') no-repeat center center;
}

.icon-link{
    background:url('usericons/link.png') no-repeat center center;
}

接下来我们可以iconCls中使用这些自定义的icon的css类了

代码语言:javascript
复制
 <div title="常用操作" data-options="selected:true,iconCls:'icon-item'" style="padding: 10px">
            <a href="javascript:openTab('写博客','writeBlog.jsp','icon-writeblog')" class="easyui-linkbutton"
               data-options="plain:true,iconCls:'icon-writeblog'" style="width: 150px">写博客</a>
            <a href="javascript:openTab('评论审核','commentReview.jsp','icon-review')" class="easyui-linkbutton"
               data-options="plain:true,iconCls:'icon-review'" style="width: 150px">评论审核</a>
        </div>
        <div title="博客管理" data-options="iconCls:'icon-bkgl'" style="padding:10px;">
            <a href="javascript:openTab('写博客','writeBlog.jsp','icon-writeblog')" class="easyui-linkbutton"
               data-options="plain:true,iconCls:'icon-writeblog'" style="width: 150px;">写博客</a>
            <a href="javascript:openTab('博客信息管理','blogManage.jsp','icon-bkgl')" class="easyui-linkbutton"
               data-options="plain:true,iconCls:'icon-bkgl'" style="width: 150px;">博客信息管理</a>
        </div>
        <div title="博客类别管理" data-options="iconCls:'icon-bklb'" style="padding:10px">
            <a href="javascript:openTab('博客类别信息管理','blogTypeManage.jsp','icon-bklb')" class="easyui-linkbutton"
               data-options="plain:true,iconCls:'icon-bklb'" style="width: 150px;">博客类别信息管理</a>
        </div>
        <div title="评论管理" data-options="iconCls:'icon-plgl'" style="padding:10px">
            <a href="javascript:openTab('评论审核','commentReview.jsp','icon-review')" class="easyui-linkbutton"
               data-options="plain:true,iconCls:'icon-review'" style="width: 150px">评论审核</a>
            <a href="javascript:openTab('评论信息管理','commentManage.jsp','icon-plgl')" class="easyui-linkbutton"
               data-options="plain:true,iconCls:'icon-plgl'" style="width: 150px;">评论信息管理</a>
        </div>
        <div title="个人信息管理" data-options="iconCls:'icon-grxx'" style="padding:10px">
            <a href="javascript:openTab('修改个人信息','modifyInfo.jsp','icon-grxxxg')" class="easyui-linkbutton"
               data-options="plain:true,iconCls:'icon-grxxxg'" style="width: 150px;">修改个人信息</a>
        </div>
        <div title="系统管理" data-options="iconCls:'icon-system'" style="padding:10px">
            <a href="javascript:openTab('友情链接管理','linkManage.jsp','icon-link')" class="easyui-linkbutton"
               data-options="plain:true,iconCls:'icon-link'" style="width: 150px">友情链接管理</a>
            <a href="javascript:openPasswordModifyDialog()" class="easyui-linkbutton"
               data-options="plain:true,iconCls:'icon-modifyPassword'" style="width: 150px;">修改密码</a>
            <a href="javascript:refreshSystemCache()" class="easyui-linkbutton"
               data-options="plain:true,iconCls:'icon-refresh'" style="width: 150px;">刷新系统缓存</a>
            <a href="javascript:logout()" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-exit'"
               style="width: 150px;">安全退出</a>
        </div>

运行一下验证自定义icon是否有效

运行结果

成功显示 代表配置成功!

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017.04.14 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • easyUI自定义icon
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档