在IE6 下,不支持 .parent > .children 的css选择器语法,所以基于IE6的树组件中一般都是单独使用img元素或者背景来显示树的图标。
在IE7 和其他的主流浏览器中,已经支持了以上的css选择器语法,这样我们就可以采用在span中用padding-left和span的背景图片的方案来解决树图标(展开、关闭、叶子、复选框等)的显示。
css 示例样式
.youi-tree li.treeNode >span{cursor: pointer;padding:1px 0px 0px 18px;-padding-top:2px;background: url(images/tree/leaf.gif) 0 0px no-repeat;line-height:16px;vertical-align:bottom;}
.youi-tree li.treeNode.root >span{background-image:url(images/tree/root.gif);}
.youi-tree li.treeNode.collapsable >span{background-image: url(images/tree/folder-open.gif);}
.youi-tree li.treeNode.expandable >span{background-image: url(images/tree/folder.gif);}
.youi-tree li.treeNode.selected >span a{color:red;}
.youi-tree li.treeNode.checked >span{background-image: url(images/tree/btn_check_checked.png);}
.youi-tree li.treeNode.partchecked >span{background-image: url(images/tree/btn_check_checked_part.png);}
.youi-tree li.treeNode.unchecked >span{background-image: url(images/tree/btn_check.png);}
.youi-tree li.treeNode.loading >span{background-image: url(images/tree/loading.gif);}
树最终有效的html
<li class="treeNode unchecked" title="查找0">
<div class="triggerHandle"/>
<span><a href="#">查找0</a></span>
</li>
- div.trigerHandle :用于expand和close
- span :存放文字,树节点图标样式
- a :提供上下左右箭头控制的焦点
效果图
代码未完成,风格也不太好,就不拿出来误导人了。
192个节点动态展开的本机测试耗时,比自己以前写的树快了不少。
IE6 :样式不支持
IE7 : 850ms
Opera 9: 240ms
firefox3:500ms
chrom:240ms
- 大小: 4.2 KB
分享到:
相关推荐
浏览器(Chrom+Firefox)
原生javascript自定义滚动条(兼容IE,火狐,chrom)
chrom58+chromedriver
提供的资源中包含所有函数的操作文档和示例,其他浏览器理论上可以支持(需要对应的驱动程序,驱动可从官网下载,例如谷歌的:chromedriver.exe),但是当前版本暂未测试过其他浏览器。
我们都知道,IE 6,7不支持新增加的CSS3属性,甚至与IE8是CSS3还没有完全准备好。你知道吗,今天给大家分享一个脚本工具,可以帮助您启用CSS3的支持IE浏览器(IE6)与新的CSS3属性,包括:border-radius属性,box-...
使用STM32 Chrom-GRC™进行图形存储器优化.pdf gfxmmu介绍 STM32 Chrom-GRC™(GFXMMU)外设是STM32微控制器的新成员 圆形显示的情况下,该外设存储图形帧缓冲器的内存需求可减少20%。
Delphi的Chrom内核控件经测可用,delphi 调用google chrome浏览器, Chromium组件最新版本,可代替webbrowser浏览器, 支持html5,与UC/360浏览器同等内核,是开发WEB终端显示最好用的浏览器组件、支持DELPHI7 DELPHI...
chrom浏览器 迅雷插件及使用方法
支持chrom ie ff 的js日历控件。版权KimSoft (jinqinghua@gmail.com)。在此基础上做如下修改: a) 为时间input控件加入onchange事件触发代码; b) 年选择的宽度从64px增加到66px; c)如果input值不为空,那么再次...
自用的chrom插件安装包,解压,打开chrom浏览器,打开开发者模式,加载已解压安装包即可
chrom zh cn adm 简体中文 chrom zh tw adm 繁体中文 chrom en us adm 美国英文 chrom adm chrom adm
VueDevTools-5.3.3,Chrom浏览器Vue调试插件目前最新版本,可再开发这工具中进行vue的前端代码调试工作 Chrome and Firefox DevTools extension for debugging Vue.js applications.
这个插件功能是键盘浏览网页,感觉vimperator太高深,命令太多不好记,还是觉得这个好用。
ChromeStandalone_54.0.2840.59_Setup,chrom的离线安装包,官方原版
https://blog.csdn.net/k3108001263/article/details/89604857 打开Stack Overflow登录页面https://stackoverflow.com/users/login登录不上,显示Stack Overflow ... 原因是某些链接被墙了 解决方案 下载并解压 ...
chrom浏览器驱动selenuim+chromedriver,使用自动化测试的浏览器驱动工具
selenium自动化测试,调用浏览器,适合win10系统使用,成功拉取浏览器,进行自动化点击,填充表单等完全模拟用户实时操作。可捕获弹出层等
IEDriverServer.exe chromedriver.exe selenium webdriver IE浏览器驱动
jquery 模仿实现的在线客服 提供基本的参数设置 节省代码开发量 实现集成插件的快速开发 兼用IE6+ firfox chrom opera