zoukankan      html  css  js  c++  java
  • 关于采用css样式将多余的文字隐藏,以及实现树形菜单

    前不久根据项目需要,需要写个页面,在页面中需要动态的实现一个树形的菜单,经过问度娘,选择使用一个treeTable的js插件。http://zhanchaojiang.com/demo/demo/treeTable.html这是对该插件的介绍地址。在这个插件中有如下几个树形:theme:default或者是vsStyle,默认为default,差别应该在样式上,default是加减号,vsStyle是三角。expandLevel:默认展开的层数,默认值为1.也就是刷新该页面时树状图展开的层次。column:可控制的列的序号,默认是0.beforeExpand:展开子节点触发的事件,这个地方可以使用ajax进行异步请求。onSelect: function {拥有controller自定义属性的元素的点击事件,return false则中止展开.

    在使用该插件时需要引入jquery.js和treeTable.js,除此之外还需要引入相应的css样式文件,以及用到的图片。

    在使用这个插件的时候还碰到了一个问题,那就是给ajax请求到的数据进行渲染的时候,用jquery的click绑定事件,有“延迟”现象,也就是第一次点击没有触发绑定的事件,第二次点击才触发。解决办法是使用live进行事件的绑定,因为live是为现在和将来的某个元素绑定某个事件。

    除此之外还碰到了需要将树形菜单中多余的文字隐藏并用“...”代替的问题。使用css进行解决的办法是:

    <style>
    table td{white-space:nowrap;overflow:hidden; text-overflow:ellipsis;}
    table {table-layout:fixed;}
    </style>

    之后再对每一个td加上title属性,这样就可以在鼠标移动上去的时候显示出来多余的被隐藏的文字。

    这些只是工作中碰到的一点点小问题的解决办法,对于我这样刚入行的菜鸟来说,一点一点学习,才能逐渐变为大神。加油~

  • 相关阅读:
    vue实现语音播报功能
    vue使用vueCropper裁剪功能,代码复制直接使用
    阿里云服务器安装mongodb并且启动
    脚手架安装react
    PHP 和Apache的安装和配置
    CentOS yum 源的配置与使用
    Linux -Yum 命令详解
    (干货)Linux学习资源推荐
    linux学习书籍推荐linux学习书籍推荐
    一些C++内容的总结(2013.10.17)
  • 原文地址:https://www.cnblogs.com/blogofgyh/p/4052651.html
Copyright © 2011-2022 走看看