about using CSS styles to hide unwanted text, and to implement a tree menu

Source: Internet
Author: User

Not long ago According to project needs, need to write a page, in the page need to dynamically implement a tree-shaped menu, after asking Niang, choose to use a treetable JS plugin. Http://zhanchaojiang.com/demo/demo/treeTable.html This is an introductory address to the plugin. In this plug-in has the following tree: Theme:default or Vsstyle, default, the difference should be in style, default is plus minus, Vsstyle is a triangle. expandlevel: The number of layers that are expanded by default, the default value is 1. That is, the level at which the tree expands when the page is refreshed. Column: The ordinal of the columns that can be controlled, which is 0 by default. BeforeExpand: Expands the event triggered by the child node, which can be used for asynchronous requests using AJAX. onSelect: function {A Click event for the element that owns the controller custom attribute, and return false to abort the expansion.

You need to introduce jquery.js and treetable.js when using the plugin, in addition to the corresponding CSS style files, as well as the images used.

In the use of this plugin also encountered a problem, that is, to the AJAX request to the data rendering, with jquery Click Binding event, there is a "delay" phenomenon, that is, the first click does not trigger the binding event, the second click to trigger. The workaround is to use live to bind the event, because live is binding an event for an element now and in the future.

In addition, I encountered the need to hide the extra text in the tree menu and replace it with "...". The solution using CSS is:

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

Then add the title attribute to each TD, so that you can display the extra hidden text when the mouse moves up.

These are just a little bit of work in the solution to the small problem, for me so just the novice, 1.1 points to learn, can gradually become the great God. Cheer Up ~

about using CSS styles to hide unwanted text, and to implement a tree menu

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.