#### The picker tree 关于一个流程谱系图的展示,客户希望实现类似ios picker的效果,嗯...所以在网上搜了搜。 发现了dcloudio的mui,觉得以后的web mobile端都有救了.... github里有个很有趣的issue,[#我承认你们被apicloud抄得体无完肤#](https://github.com/dcloudio/mui/issues/275) 去参观了一下[apicloud](http://www.apicloud.com/)官网,学习了一下。感觉很不错。 ### Some new HTML5 API #### classList item() class name indexing / add() / remove() #### querySelector & querySelectorAll 功能类似于jQuery的选择器,无法查找带伪类状态的元素, the former returns single element, the laters returns elements. #### js related issues 修改main js的时候发现jshint的提示: Don't make functions within a loop 然后 [stackoverflow](http://stackoverflow.com/questions/3037598/how-to-fix-jslint-error-dont-make-functions-within-a-loop) @Skilldrick came up with a trick, to use the make_handler() to avoid recreating function for each iteration of the loop. ```javascript function make_handler(div_id) { return function () { alert(div_id); }; } for (i ...) { div_id = divs[i].id; divs[i].onclick = make_handler(div_id); } ```` ## picker js About perspective effect:``self.itemAngle = parseInt(self.calcAngle(self.itemHeight * 1.5));`` The original number is 0.8. I changed to 1.5 to make the list height larger. but the RotateX use the value = ``elf.endAngle = self.itemAngle * index;`` So it get larger too. The transform mainly related to two method: **translateZ & rotateX** To check the detailed effect [理解:translate rotate 与 perspective 暧昧关系](http://www.alloyteam.com/wp-content/uploads/2012/11/simpleDemo2.html) bcz frame was built with gulp-start | github, it require the sass, so I always use [css2sass](http://css2sass.herokuapp.com/)