How to show/hide a set of elements?
2011-10-02 23:41
561 查看
Question:
根据指定的属性选出一批结点,将它们的父结点隐藏。
dojo已经支持到css3的查询,但遗憾的是,没有父结点选择器(css3不支持父结点选择器),这一点似乎不如jQuery,据称jQuery是可以支持父结点选择的。不过这也不是什么太难的事:
并不比jQuery来得复杂。
但是这个方案有一个问题,万一后面要回滚这个操作,怎么办?上述方案没有保存原来结点的display属性,因此也就不可能回滚回去。
如果使用visibility属性呢?它有两个取值,hidden和visible。看上去能很好地支持隐藏及显示,但试验一下,你会发现它最大的问题就是,当你隐藏一个元素时,它仍然在文档中占着位置!而多数情况下,当你想要隐藏一个结点时,总会希望藏得严严实实,不漏一丝痕迹--换用工程师的话来讲,它看上去就应该象是从来不存在,从文档中删除掉一样。
上面的话给出了一点提示。css中:position:absolute所起的作用,就正是可以将结点从它当前所处的文档位置中删除掉。但是直接修改position也是不行的,效果会跟直接修改display一样。
真正的解决方案是将要修改的属性包装在class中,再将这个class赋予这些结点。
为确保一定能隐藏这些元素,hideMe真是不遗余力。这样做是为了尽可能避免单一属生因竞争不过定义在其它class的属性而失效。现在,再次使用dojo:
当需要将隐藏的元素重新显示出来时,很简单,使用dojo.removeClass:
Dojo的开发人员曾经谈起过他们的API的风格设计是由专门的人来负责的,如何命名,归到什么样的package或者名字空间下会使得使用者易记、易懂、易用。从NodeList和上面提及的几个API来看的确做到了这一点。
最后,这篇文章Benchmark - Style vs className 提到一个非常有意思的话题:通过something.style.xx=‘attr'或者直接更改类名字,让CSS来生成元素的风格,谁更快?结论可能更有意思--除了在opera上,更改类名字的方法会更快一点。
根据指定的属性选出一批结点,将它们的父结点隐藏。
dojo已经支持到css3的查询,但遗憾的是,没有父结点选择器(css3不支持父结点选择器),这一点似乎不如jQuery,据称jQuery是可以支持父结点选择的。不过这也不是什么太难的事:
var queryString = "";// The CSS query string dojo.query(queryString).map(function(node){ return node.parentNode; }).style({display:'none'});
并不比jQuery来得复杂。
但是这个方案有一个问题,万一后面要回滚这个操作,怎么办?上述方案没有保存原来结点的display属性,因此也就不可能回滚回去。
如果使用visibility属性呢?它有两个取值,hidden和visible。看上去能很好地支持隐藏及显示,但试验一下,你会发现它最大的问题就是,当你隐藏一个元素时,它仍然在文档中占着位置!而多数情况下,当你想要隐藏一个结点时,总会希望藏得严严实实,不漏一丝痕迹--换用工程师的话来讲,它看上去就应该象是从来不存在,从文档中删除掉一样。
上面的话给出了一点提示。css中:position:absolute所起的作用,就正是可以将结点从它当前所处的文档位置中删除掉。但是直接修改position也是不行的,效果会跟直接修改display一样。
真正的解决方案是将要修改的属性包装在class中,再将这个class赋予这些结点。
1: .hideMe {
2: position : absolute;
3: top: -10000px;
4: display:none;
5: visibility:hidden;
6: }
为确保一定能隐藏这些元素,hideMe真是不遗余力。这样做是为了尽可能避免单一属生因竞争不过定义在其它class的属性而失效。现在,再次使用dojo:
var queryString = "";// The CSS query string dojo.query(queryString).map(function(node){ return node.parentNode; }).addClass('hideMe');
当需要将隐藏的元素重新显示出来时,很简单,使用dojo.removeClass:
var queryString = "";// The CSS query string dojo.query(queryString).map(function(node){ return node.parentNode; }).removeClass('hideMe');
Dojo的开发人员曾经谈起过他们的API的风格设计是由专门的人来负责的,如何命名,归到什么样的package或者名字空间下会使得使用者易记、易懂、易用。从NodeList和上面提及的几个API来看的确做到了这一点。
最后,这篇文章Benchmark - Style vs className 提到一个非常有意思的话题:通过something.style.xx=‘attr'或者直接更改类名字,让CSS来生成元素的风格,谁更快?结论可能更有意思--除了在opera上,更改类名字的方法会更快一点。
相关文章推荐
- How to hide and show elements based on a Content Control value change?
- How To Set Screen Elements Status.
- How to trigger editing of elements inside a reorderlist?
- How to set the title of UIButton as left alignment?
- How to setup a new Organization and Set of Books for a Payables Responsibility
- How to set up minimal Redhat 7.3 - [2]configuration of Network
- Sql Script To set the show sort of data ( up or down )
- How to set number of threads in OpenMP?
- How to customize authentication to my own set of tables in asp.net web api 2?
- How to set the font of CListCtrl header
- How to hide/show Toolbar when list is scroling (part 1)
- How to sort an arbitrarily large set of data using Hadoop?
- How can I set the background of UITableView (the tableview style is "Grouped") to use an image?
- GSR :the meaning of <load sharing elements> <refernce><refcount> in CEF and how to calculate them
- Ruby: How to find all indices of elements that match a given condition?
- How to get a notification from Linux when the set of network interfaces changes
- How to delete a Enhancement SET of standard component in CRM
- How to set up and test a simple OLEDB Linked Server in Microsoft® SQL Server to allow retrieval of d
- NHibernate Notes3_How to set a default value of column
- How to set colors of HTML tables