给jui(dwz)的toolbar添加漂亮的图标

前面两篇把菜单树和navTab的图标都换了。今天来添加toolbar的图标。

因为JUI(DWZ)自带的toolbar图标就三四个,根本不够用。于是只能是进行自定义添加

这是系统自带的图标,也就4个。

自定义的两个图标,一个excel图标,一个打印机的图标。是不是挺好看呢?

接下来就发出关键代码。

其实只要修改相应的CSS样式文件就可以了。

打开JUI(DWZ)主题目录下面的CSS文件夹,找到core.css并打开。

找到/* Grid */,会看到系统定义的四个图标信息了。

.panelBar .toolBar a.add span { background-position:0 -696px;}
.panelBar .toolBar a.delete span { background-position:0 -746px;}
.panelBar .toolBar a.edit span { background-position:0 -796px;}
.panelBar .toolBar a.icon span { background-position:0 -846px;}

那就照着写吧。我在后面添加了两个图标

.panelBar .toolBar a.excel span { background:url(images/excel.png) no-repeat;background-position:0 3px;}
.panelBar .toolBar a.printer span { background:url(images/printer.png) no-repeat;background-position:0 3px;}

然后,你懂的,就直接在前台界面上引用就可以实现了。

这里要提醒一下,因为JUI(DWZ)本身有多个主题,每个主题下面有一个CSS文件,相应的/* Grid */下面有引用相对应的图标文件,我这里偷了一个懒,就直接在core.css里面设置了,这样切换主题时,就不会改变色彩了。

不过,我觉得你能比我做得更好。

时间: 2024-10-18 20:29:53

给jui(dwz)的toolbar添加漂亮的图标的相关文章

给jui(dwz)的navTab换一套漂亮的图标

上次讲了给jui(dwz)的菜单树换一套漂亮的图标,这次讲一下在点击菜单后,怎么把设置的漂亮图标带到navTab上去. 官方的navTab是这样显示的,除了默认的我的主页外,tab页上只有标题没有图标. 而修改后的是这样的,相应的都带上了上次讲过的漂亮的图标了. 想要实现这种效果,我们需要修改JUI(DWZ)的核心JS,打开dwz.js,找到$("a[target=navTab]", $p) $("a[target=navTab]", $p).each(functi

给WebView添加漂亮的加载进度条

为了增强用户体验,所有在WebView头部给加了个进度条,看起来不错哦. 布局XMl:activity_main.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent&q

Ubuntu Dash 添加 Sublime Text 图标

http://blog.csdn.net/johnnycode/article/details/17848291 经常在Ubuntu下安装绿色软件,之前只能将快捷方式放到桌面上,感觉不方便. 其实设置很简单,总结一下,好脑子不如烂笔头! 1.在 /usr/share/applications 目录下增加 sublime.desktop 文件,注意权限! [plain] view plaincopy $ sudo vim /usr/share/applications/sublime_test.d

为网站添加favicon.ico图标

前言 貌似每次都是等到网站快收尾时才做favicon.ico的,这次也不例外.这年代-- 步骤 1.PS制作正方形图标,格式为jpg.jpeg.gif或png. 2.将图标转换为ICO格式,网上有很多在线转换工具,如http://www.ico.la/old.html . 3.将转换好的ICO格式图标放到网站中. 4.网页代码<head></head>之间添加: <link rel="shortcut icon" href="images/fav

Bootstrap 表单和图片 (内联表单,表单合组,水平排列,复选框和单选框,下拉列表,校验状态,添加额外的图标,控制尺寸,图片)

一.表单 基本格式 注:只有正确设置了输入框的 type 类型,才能被赋予正确的样式. 支持的输入框控件 包括:text.password.datetime.datetime-local.date.month.time.week. number.email.url.search.tel 和 color. <form> <div class="form-group"> <label>电子邮件</label> <input type=&

【15.03.13】手动快速在Linux桌面上添加一个程序图标快捷方式

部分Linux发行版提供了在桌面上添加某个程序图标的快捷操作方法,但有的发行版可能没有提供,或者说刚上手某个发行版,暂时还没找到在哪里操作.这个时候,我们可以手动在Linux桌面上添加一个快捷方式的程序图标. Linux桌面程序图标的文件名是"XXX.desktop",当然,这个文件名并不是我们在桌面上看到的图标的名字.关于desktop文件的详细结构,如果想了解,可以参考这篇技术文献:Linux Desktop Entry 文件深入解析. 但是对于普通用户来说,我们没必要了解那么多的

给网页标题添加icon小图标

so easy: 给网页标题添加icon小图标: 直接在html文件的head部分添加下面代码(注意href的路径): <link rel="icon" type="image/x-icon" href="../static/images/brand.jpg" /> 原文地址:https://www.cnblogs.com/zkkysqs/p/9536886.html

vuecli2和vuecli3项目中添加网页标题图标

vuecli2中添加页面标题图标 1. 将favicon.ico放到项目文件夹根目录下; 2. build/ webpack.dev.conf.js, build/ webpack.prop.conf.js中配置: const HtmlWebpackPlugin = require('html-webpack-plugin') new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', favicon: path

Android之Toolbar的三个问题:修改左边箭头颜色、怎样修改右边以及子activity中的toolbar添加返回箭头

1)怎样修改左边这个小箭头的颜色? 2)怎样修改右边这三个点的颜色.怎样把这三个点替换成我自己的图标? 3)怎样让"交易清单"这4个字居中显示? 首先设置Theme为AppCompat.NoActionBar. (1)toolbar可以通过设置setNavigatetionIcon,传入一个icon替换掉最左边的小箭头,但是需要自己实现其动作. (2)在你自己的Theme定义中加入 [html] view plain copy print? <item name="ac