ace-admin图标样式设置

「爱情、让人受尽委屈。」 2022-05-24 09:27 501阅读 0赞

背景:虽然博主手头的项目前端框架是使用的ace-admin,但是基本上都是写的后台业务逻辑,所以对于前台样式修改之类的倒是没怎么上心,偶然想要修改一个图标的样式,网上搜下讲解ace-admin的资料很少,但是,这里先说下一个百度文档,百度搜索:  
ace-admin前框架介绍.docx,搜索出来的条目第一条就是了.  
下面简单说下ace-admin的图标样式:  
  
设置出来后,样式如下图:  
![这里写图片描述][70]  
里面控制样式的字符串是:fa-cogs.  
那么更多的图标样式哪里找呢?百度搜索良久,在aceadmin网站上找到了结果,网站地址:[http://ace.jeka.by/][http_ace.jeka.by]  
值得一提的是,看下source,此网站前台框架就是用ace-admin写的,点击右侧菜单栏:UI&Element>>Button&Icons,然后下滑就可以看到诸多图标样式及值,如下图所示,博主上文所使用的fa-cogs就是标红显示的那个,其余多种样式可供选择:  
![这里写图片描述][70 1]  
然后再简单的说下点击密码右侧,可以进行密码的明文与密文的切换,效果如下面图片所示,很简单但是比较实用:  
点击前效果:  
![这里写图片描述][70 2]  
点击后效果:  
![这里写图片描述][70 3]  
鼠标悬浮在指定图标上面会因为当前密码是否显示进行不同的title提示,可以持续点击切换效果,具体的代码如下:  
设置的密码域:

然后设定一个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!

[70]: /images/20220524/911359a938e9406f8c293d2ce67c79a0.png
[http_ace.jeka.by]: http://ace.jeka.by/
[70 1]: /images/20220524/5ffda31b07114070bfaacccd16bced92.png
[70 2]: /images/20220524/0c0f8c178c2841f29172bb8a4b69272c.png
[70 3]: /images/20220524/fcd1fc8971694450bf253a49dc5c8955.png