ace-admin图标样式设置

背景:虽然博主手头的项目前端框架是使用的ace-admin,但是基本上都是写的后台业务逻辑,所以对于前台样式修改之类的倒是没怎么上心,偶然想要修改一个图标的样式,网上搜下讲解ace-admin的资料很少,但是,这里先说下一个百度文档,百度搜索:
ace-admin前框架介绍.docx,搜索出来的条目第一条就是了.
下面简单说下ace-admin的图标样式:

设置出来后,样式如下图:

里面控制样式的字符串是:fa-cogs.
那么更多的图标样式哪里找呢?百度搜索良久,在aceadmin网站上找到了结果,网站地址:http://ace.jeka.by/
值得一提的是,看下source,此网站前台框架就是用ace-admin写的,点击右侧菜单栏:UI&Element>>Button&Icons,然后下滑就可以看到诸多图标样式及值,如下图所示,博主上文所使用的fa-cogs就是标红显示的那个,其余多种样式可供选择:

然后再简单的说下点击密码右侧,可以进行密码的明文与密文的切换,效果如下面图片所示,很简单但是比较实用:
点击前效果:

点击后效果:

鼠标悬浮在指定图标上面会因为当前密码是否显示进行不同的title提示,可以持续点击切换效果,具体的代码如下:
设置的密码域:

    <label class="block clearfix form-group"><span class="block input-icon input-icon-right"><input type="password" class="form-control"  name="staff_pwd" id="staff_pwd" placeholder="密码" /><i class="ace-icon fa fa-eye" id="see_pwd"  title="查看密码"></i></span></label>

然后设定一个i标签点击事件,监听i标签的事件动向,根据不同的动向,来修改密码域的Input类型,以及赋值,还有就是i标签图标显示效果.具体js代码如下:

$('#see_pwd').bind("click", function() {var staffPwd = $('#staff_pwd').val();var iType = document.getElementById("staff_pwd").type;if(iType=="text"){document.getElementById("staff_pwd").type = "password";document.getElementById("see_pwd"). setAttribute("class", "ace-icon fa  fa-eye"); document.getElementById("see_pwd"). setAttribute("title", "查看密码"); }else{document.getElementById("staff_pwd").type = "text";document.getElementById("see_pwd"). setAttribute("title", "隐藏密码"); document.getElementById("see_pwd"). setAttribute("class", "ace-icon fa  fa-eye-slash"); }document.getElementById("staff_pwd").value = staffPwd;
});

这样就可以实现密码域明文与密文的转换查看,方便输入,一层窗户纸,说破很容易的.
接下来再啰嗦一句,浏览了下ace-admin网站,简直犹如发现新大陆,里面集成的功能挺多的,比如树形结构,fullCalendar,明信片,日程安排进度,表单,表格,相册之类的,内容很是丰富,让我这小后台领略了下前台风光,很是受益,不多说了,OVER!

ace-admin图标样式设置相关推荐

（转）基于MVC4+EasyUI的Web开发框架经验总结（14）--自动生成图标样式文件和图标的选择操作...
http://www.cnblogs.com/wuhuacong/p/4093778.html 在很多Web系统中,一般都可能提供一些图标的选择,方便配置按钮,菜单等界面元素的图标,从而是Web系统界 ...
css 实现app图标样式_uni-app开发一个小视频应用(一)
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,是一种终极的跨平台解决方案,这里的平台,主要指的是App平台(android.ios).小程序平台.H5平台.开发者编写一套代码,可发 ...
easy admin java_GitHub - zzccbb8/easyadmin: 简易的java后台管理框架，基于SpringBoot+FreeMark+ace admin+mysql...
easyadmin 简介一个简单好看的后台开发模板框架,目前具备用户管理,菜单管理和角色管理3个功能,也只打算做这3个,毕竟这是所有后台管理框架的核心,而本项目也只是打算做一个模板框架而已优点一 ...
spring admin mysql_easyadmin: 简易的java后台管理框架，基于SpringBoot+FreeMark+ace admin+mysql...
easyadmin 数据库一定要用utf8mb4编码,记得先执行manager.sql,再执行initdata.sql,其中tenant表不用管,这是我打算做的另外一个项目设计的表,因为直接复制的本项 ...
easyui前端框架模板_.NET Core基于Ace Admin的响应式框架
(给DotNet加星标,提升.Net技能) 转自:netnrcnblogs.com/netnr/p/12020660.html 前言 .NET Core的响应式框架基于Ace Admin框架菜单导航 ...
自定义QListWidget实现item被hover时改变图标样式（模仿网易云音乐选项列表）（方法一）
环境配置 :MinGW + QT 5.12 效果图: 这里需要说明一下:QListWidget是鼠标press时item就会被选中,自定义的TestListWidget类重写了mousePressEv ...
QPushButton/QLabel在鼠标悬浮（划过， hover）、选中（单击， pressed）状态下更换图标样式
环境配置 :MinGW + QT 5.12 三种图标样式(从左往右分别是normal,hover,pressed): 先上效果图: 1. 样式表第一种方法:在样式表中设置 border-image( ...
CSS样式设置语法全解，样式优先级、值和单位、字体、文本、块级元素，行内元素，替换元素、非替换元素、display、float、position、table、li、光标、边距边框、轮廓、颜色背景
全栈工程师开发手册 (作者:栾鹏) 一个demo学会css css选择器全解 css操作语法全解 CSS样式设置语法全解: 样式优先级 1. !important标记的样式 > 内联样式(sty ...
YII与Ace Admin 的集成
目录一. 前言... 1 二.为什么要使用YII+ace. 1 三.新建YII模块... 1 四.如何修改模板... 3 五.注意的地方... 4 六.整合的不足之处... 4 一. 前言 yii- ...

ace-admin图标样式设置

ace-admin图标样式设置相关推荐

最新文章

热门文章