- 浏览: 530182 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
zfx1982:
楼主能把doubango和webrtc2sip的源码发我一份么 ...
CentOS下编译webrtc2sip实战 -
zfx1982:
请问在编译doubango的时候configure总是说少sr ...
CentOS下编译webrtc2sip实战 -
cgs1999:
845896876 写道老师你好,我发现// 自定义属性 ...
使用Java操作LDAP案例 -
845896876:
老师你好,我发现// 自定义属性 a ...
使用Java操作LDAP案例 -
myitela:
NAT即地址转换,也可以是内网地址与外网地址的转换。如nat1 ...
NAT与NAT穿越学习总结
关键词:
CSS,EasyUI,图标
摘 要:
本案例主要介绍,使用EasyUI实现CSS样式文件中图标的可视化,方便使用CSS样式文件中的图标。
1、案例描述
在开发项目过程中,界面使用了EasyUI框架,该框架自带了一些图标,如下图所示。
相关图标样式定义在icon.css文件中,样式内容如下所示:
上述有二十几个图标,另外,后续项目还会根据需要,增加自定义的图标。在开发时存在一个问题:不知道样式对应的图标是什么样的,需要查看对应的图标文件才能知道,开发时要找到合适的图标可能需要查看所有的图标文件,这样开发比较麻烦,且效率不高。
那么,能不能使样式文件中的所有图标可视化?这样开发人员可以直观、快速的找到所需要的图标及对应的样式,从而提高开发效率。
经过一番研究,笔者实现了相关功能,下面我们一起探讨分析和解决的过程。
2、案例分析
2.1 基本思路
对CSS样式文件的读取和解析,使用Web方式和JavaScript无疑是最方便的,要使JavaScript能够获取到样式文件和样式内容,那么,需要在Web页面中引用样式文件。另外,后续将自定义的图标样式文件引入到页面中,即可方便的查看样式文件中的图标。
样式文件中,需要区分图标样式和其它的样式,参考EasyUI自带的图标样式文件icon.css,所有图标样式统一以“.icon”作为前缀,通过该前缀来区分图标样式和其它的样式。
为方便使用,提供查看所有样式图标和查看指定样式文件图标两种功能,相关处理过程如下所示:
(1)查看所有样式图标的时序图
(2)查看指定样式文件图标的时序图
2.2 关键技术点
1、规约图标的样式,统一图标格式,如:统一增加“.icon”前缀;
2、获取页面中所有引用的样式文件;
3、获取指定样式文件中的所有图标样式;
3、解决过程
3.1 获取页面中所有的样式文件
注:返回的数组中,第一个为“全部”,索引值为-1,可通过该值查看所有的图标。
3.2 获取单个样式文件中的所有图标样式
注:参数index为页面中样式文件的索引值,从0开始。
3.3 获取所有样式文件中所有的图标样式
注:上面已获取到单个样式文件中的图标样式,那么获取所有的样式文件中的所有图标样式,只须遍历所有的样式文件,然后将结果合并即可。
3.4 使用ComboTree和TreeGrid来展示相关的图标
注:这里使用1个ComboTree和1个TreeGrid来实现整个界面,ComboTree用于列出页面中所有的样式文件,并可通过切换样式文件来查看指定样式文件中所包含的图标;而TreeGrid则用于展示图标,方便使用人员直观的查看图标及对应的样式和所在的样式文件地址。
3.5 引入自定义的样式文件
参考EasyUI的icon.css,编写自定义样式文件myicon.css,添加自定义样式对应的图标,并在页面中引入:
4、运行结果
1、使用ComboTree列出页面中所有样式文件,如下图所示:
2、查看所有样式图标,如下图所示:
3、查看指定样式文件图标,如下图所示:
5、总结
综上所述,相关的解决过程和结果,实现了CSS样式文件中图标的可视化,直观展示图标的效果、对应的样式名称以及所属的样式文件,方便了开发使用。上述的解决方案,还可应用于样式文件中其它类型图片或样式效果的可视化,这里就不再赘述。
6、源代码
下面附件为完整源代码,请将代码解压到任意的Web服务器下,即可访问查看效果。
(注: 本地直接打开运行会报错,无法查看到效果)
点击这里下载
7、参考资料
[1] js列举css中所有图标的实现代码
http://dev.128.com/document/32701.html
CSS,EasyUI,图标
摘 要:
本案例主要介绍,使用EasyUI实现CSS样式文件中图标的可视化,方便使用CSS样式文件中的图标。
1、案例描述
在开发项目过程中,界面使用了EasyUI框架,该框架自带了一些图标,如下图所示。
相关图标样式定义在icon.css文件中,样式内容如下所示:
.icon-blank{ background:url('icons/blank.gif') no-repeat center center; } .icon-add{ background:url('icons/edit_add.png') no-repeat center center; } ……(篇幅有限,这里省略) .icon-mini-refresh{ background:url('icons/mini_refresh.png') no-repeat center center; }
上述有二十几个图标,另外,后续项目还会根据需要,增加自定义的图标。在开发时存在一个问题:不知道样式对应的图标是什么样的,需要查看对应的图标文件才能知道,开发时要找到合适的图标可能需要查看所有的图标文件,这样开发比较麻烦,且效率不高。
那么,能不能使样式文件中的所有图标可视化?这样开发人员可以直观、快速的找到所需要的图标及对应的样式,从而提高开发效率。
经过一番研究,笔者实现了相关功能,下面我们一起探讨分析和解决的过程。
2、案例分析
2.1 基本思路
对CSS样式文件的读取和解析,使用Web方式和JavaScript无疑是最方便的,要使JavaScript能够获取到样式文件和样式内容,那么,需要在Web页面中引用样式文件。另外,后续将自定义的图标样式文件引入到页面中,即可方便的查看样式文件中的图标。
样式文件中,需要区分图标样式和其它的样式,参考EasyUI自带的图标样式文件icon.css,所有图标样式统一以“.icon”作为前缀,通过该前缀来区分图标样式和其它的样式。
为方便使用,提供查看所有样式图标和查看指定样式文件图标两种功能,相关处理过程如下所示:
(1)查看所有样式图标的时序图
(2)查看指定样式文件图标的时序图
2.2 关键技术点
1、规约图标的样式,统一图标格式,如:统一增加“.icon”前缀;
2、获取页面中所有引用的样式文件;
3、获取指定样式文件中的所有图标样式;
3、解决过程
3.1 获取页面中所有的样式文件
function getStyleSheets() { var data = []; data[data.length] = {id: -1, text: "全部"}; for ( var i = 0; i < document.styleSheets.length; i++) { var url = document.styleSheets[i].href; if (url) { data[data.length] = { id: i, text: url.substr(url.lastIndexOf("/") + 1) }; } } return data; }
注:返回的数组中,第一个为“全部”,索引值为-1,可通过该值查看所有的图标。
3.2 获取单个样式文件中的所有图标样式
function getIcons(index) { var data = []; var styleSheet = document.styleSheets[index]; var rules; if (styleSheet.cssRules) { rules = styleSheet.cssRules; } else { rules = styleSheet.rules; } for ( var j = 0; j < rules.length; j++) { // 样式中,规约以".icon"开头的即为图标 if (rules[j].selectorText.substr(0, 5) == ".icon") { data[data.length] = { id: index + "-" + j, text: rules[j].selectorText.substr(1), iconCls: rules[j].selectorText.substr(1), href: (styleSheet.href ? styleSheet.href : "") }; } } return data; }
注:参数index为页面中样式文件的索引值,从0开始。
3.3 获取所有样式文件中所有的图标样式
function getAllIcons() { var data = []; for ( var i = 0; i < document.styleSheets.length; i++) { data = $.merge(data, getIcons(i)); } return data; }
注:上面已获取到单个样式文件中的图标样式,那么获取所有的样式文件中的所有图标样式,只须遍历所有的样式文件,然后将结果合并即可。
3.4 使用ComboTree和TreeGrid来展示相关的图标
$(function() { $("#data-grid").treegrid({ idField: "id", treeField: "iconCls", rownumbers: true, striped: true, singleSelect: true, width: 800, height: 500, fitColumns: true, autoRowHeight: true, columns: [[{ field: "iconCls", title: "IconCls", halign: "center", width: 60, formatter: function(value, row, index) { return ""; } }, { field: "id", title: "ID", halign: "center", width: 60, hidden: true }, { field: "text", title: "Text", halign: "center", width: 100 }, { field: "href", title: "Href", halign: "center", width: 200 } ]] }); $("#css-list").combotree({ data: getStyleSheets(), onClick: function(node) { var id = node.id; var data = id<0 ? getAllIcons() : getIcons(id); $("#data-grid").treegrid("loadData", data); }, onLoadSuccess : function(node,data) { $('#css-list').combotree('setValue', -1); var data = getAllIcons(); $("#data-grid").treegrid("loadData", data); } }); });
注:这里使用1个ComboTree和1个TreeGrid来实现整个界面,ComboTree用于列出页面中所有的样式文件,并可通过切换样式文件来查看指定样式文件中所包含的图标;而TreeGrid则用于展示图标,方便使用人员直观的查看图标及对应的样式和所在的样式文件地址。
3.5 引入自定义的样式文件
参考EasyUI的icon.css,编写自定义样式文件myicon.css,添加自定义样式对应的图标,并在页面中引入:
<link rel="stylesheet" type="text/css" href="static/myicon.css">
4、运行结果
1、使用ComboTree列出页面中所有样式文件,如下图所示:
2、查看所有样式图标,如下图所示:
3、查看指定样式文件图标,如下图所示:
5、总结
综上所述,相关的解决过程和结果,实现了CSS样式文件中图标的可视化,直观展示图标的效果、对应的样式名称以及所属的样式文件,方便了开发使用。上述的解决方案,还可应用于样式文件中其它类型图片或样式效果的可视化,这里就不再赘述。
6、源代码
下面附件为完整源代码,请将代码解压到任意的Web服务器下,即可访问查看效果。
(注: 本地直接打开运行会报错,无法查看到效果)
点击这里下载
7、参考资料
[1] js列举css中所有图标的实现代码
http://dev.128.com/document/32701.html
- listcssicon.rar (582.8 KB)
- 下载次数: 80
发表评论
-
MySQL中Update的执行效率测试及验证
2016-12-06 16:22 67991、引言 某日,在讨论解决生产环境的问题时,一同事问说增加条件 ... -
MySQL定时器实战
2016-11-29 17:38 21151、引言 项目商用环境上,用户反馈有个统计存在问题,排查后 ... -
用Java实现N*N的标准数独及对角线数独解题
2016-10-11 11:25 34931、引言 前一段时间迷 ... -
在Spring项目中实现动态创建数据库
2017-06-21 16:31 51621、问题描述 在使用Sprin ... -
改进现有架构支持HTTPS服务
2016-06-23 16:57 01、引言 nginx使用ssl模块配置HTTPS支持 ht ... -
CentOS下从源码安装Asterisk实战
2016-05-20 20:23 35850、引言 在研究WebRTC服 ... -
EasyUI学习(1)- 入门
2015-12-14 17:20 00、引言 前段时间,在项目开发过程中使用了EasyUI的部分组 ... -
JS实现的3级联动例子
2015-06-17 23:10 1349朋友项目需要实现3级联动,需要JS实现的,网上找的例子有些复杂 ... -
JSBuilder2介绍及应用范例
2014-08-27 17:58 01、引言 Web项目开发过程中,使用到多个第三方的插件,同时, ... -
jquery选择器学习范例
2014-04-22 20:54 0http://www.w3school.com.cn/jque ... -
通过webrtc2sip实现web客户端sipML5与SIP客户端Jtisi对通
2014-01-13 19:53 00、引言 在研究WebRTC服 ... -
NAT与NAT穿越学习总结
2013-12-23 19:19 204401、引言网络地址转换 ... -
完全清除Desktop_1.ini和Desktop_2.ini
2013-12-06 17:21 71481、引言 Windows7工作机进入系统就会弹出“deskto ... -
CentOS下搭建Asterisk+SIPml5实战
2013-11-14 14:53 00、引言 在研究SIPml5信令处理时,需要搭建环境SIPml ... -
CentOS下编译webrtc2sip实战
2013-11-13 10:39 151850、引言 在研究WebRTC服 ... -
Java实现RTP流转发服务器
2013-10-24 17:36 00、引言 在做多方视频会议系统时,需要有代理服务器来转发视频平 ... -
利用mysql日志排查数据异常问题
2013-03-21 16:52 01、案例描述 2、MySQL日志 3、解决过程 (1) ... -
Java中通过MySQL的行锁解决并发写的问题
2012-12-22 12:45 01、案例描述 开发会议管理项目中,涉及会议管理系统和视频会议平 ... -
【算法】基于时间段的有限资源算法
2013-03-07 12:20 23821、案例描述 最近做会议管理系统,预约会议需要一个算法来判断在 ... -
API测试范例
2012-10-29 18:38 01、MessagesAPITest package com ...
相关推荐
校园电表大屏数据可视化:基于JavaScript开发,包含36个文件,包括17个PNG图像文件、10个JavaScript文件、2个CSS样式文件、2个GIF图像文件、2个HTML文件、1个Markdown文档、1个TTF字体文件和1个ICO图标文件。...
- CSS样式文件:36个,定义整体的视觉风格和布局 - HTML模板文件:27个,构成网页的基本结构 - Markdown文档:20个,提供项目相关的说明和帮助 - JSON配置文件:8个,存储配置信息 - SVG图形文件:6个,用于...
- .css: CSS样式文件,1个,定义了全局样式。 项目简述:此项目利用Vue.js框架结合vue-echarts插件,打造了一个数据可视化的交互式大屏,适用于各类数据监控与展示场景,实现数据的直观展现与高效分析。
项目概述:本项目是基于Python的Flask框架开发的一款豆瓣电影数据...本项目将爬取的豆瓣电影数据通过Flask框架进行整合,利用JavaScript和CSS实现动态和美观的数据可视化效果,为用户提供了便捷的电影信息浏览体验。
文件总数76个,具体包括:图片(png)18个,网页(html)18个,脚本(js)13个,Rust源文件(rs)7个,样式(css)5个,图标(ico)2个,配置文件(json)2个,文档(md)2个,以及.gitignore和lock文件各1个。Tauri分支基于Rust和...
这表明该卡具有卡型代码,该代码将不会在可视化编辑器中显示。用法造型卡通过将card_mod参数添加到卡配置中来设置卡样式。 以基本形式,此参数包含字符串,该字符串将注入的元素中。 注意:card-mod仅适用于包含ha-...
整个项目包含367个文件,其中主要包括压缩文件133个、JavaScript文件101个、Python文件32个、HTML文件27个、SVG图标20个、CSS样式表16个,以及其他各类资源配置文件。此博客平台集成了后台管理系统,支持数据可视化...
资产- 用于可视化的照片、imgs、图标、其他资产 css - 项目的样式 js - 项目的 javascript libs - 用于项目的库或插件 注释- 任何辅助注释或 .md,未包含在 README 中 ####可用链接 ####Active Demos [链接到演示 ...
scr / css 在此处添加您的样式,然后将其@import到条目文件中。 上市 编辑公用文件夹中的以适应您的需求。 将替换为您自己的图标。 公共/资产。 将您的资产添加到文件夹。 组态 您可以在文件夹中更改W
互动设计API状态源代码的当前状态正在进行中。描述这是给学校学生的一项作业,计入我期末的学分。... 响应式(首先移动工作) 使用CSS变量使用CSS网格系统状态的可见性(可视化交互) 进行简洁明了的表单验证
使用某些样式的样式化组件和全局CSS 样式化的组件 import styled from "styled-components" ; const ReactComponent = ( ) => { // logic here return { some content } < / Wrapper > } const Wrapper = ...
在TinyEditor的实际应用中,需要注意的是,在提交编辑器内容之前,一定调用instance.post()函数,以确保编辑区域中最新的可视化内容转化为标记文本。 查看示例:http://sandbox.leigeber.com/tinyeditor/
- 选中文件时,移动到屏幕可视区域(解决上下左右选中文件滚动条不一致问题) ###ver2.51 `2014/6/22` ---- ####fix bug:(bug解决和程序优化) - 登陆多次密码输入错误验证码bug解决 - 修复漏洞:创建副本加入...
11)修正及更新控件可视化配置工具(版本号1.0.2),增加了新版本中出现的新功能添加(代码清理及手动分页功能及修正生成上传配置文件中的错误)! 2008/5/20 Version 5.0.5 For VS2005/2008 Updates: 1)修正去掉代码...
Code Cola是一个可视化编辑在线页面css样式的chrome插件。 English Version: https://chrome.google.com/extensions/detail/lomkpheldlbkkfiifcbfifipaofnmnkn源码:https://github.com/zhouqicf/code-cola文档:...
可视化拖拽编辑器 直接的视觉菜单和按钮编辑器是轻松愉快的一起工作 完整的Web浏览器支持更新! 支持所有的现代和所有流行的,但旧的浏览器 CSS的唯一菜单更新! 如果JavaScript被关闭,菜单仍然在CSS-only模式的...
这让开发人员可以进入到鼠标输入的另一个层面,为高度可视化的应用带来更加丰富的体验。 Pseudo类锁定:这个特性让开发者可以方便的来查看与CSS pseudo类相关的样式。在页面检查器中选择一个元素,上下文菜单中会列...
11)修正及更新控件可视化配置工具(版本号1.0.2),增加了新版本中出现的新功能添加(代码清理及手动分页功能及修正生成上传配置文件中的错误)! 2008/5/20 Version 5.0.5 For VS2005/2008 Updates: 1)修正去掉...
风格:修改编辑器风格非常容易,只需修改一个 CSS 文件 兼容:支持大部分主流浏览器,比如 IE、Firefox、Safari、Chrome、Opera ver 4.0.4 (2011-12-11) 新增: 阿拉伯语语言包。 改善: 上传文件时显示上传中...