开发Tree HTML元素
原文 http://forjs.org/book/lkaK8WuNme/section/eJxjV_qljUl 开发Tree HTML元素 ================
推荐：《精通Node.js开发》 《Angular.js视频详解》
可加作者QQ 1405491181 交流Node.js & HTML5 相关技术
基本结构
<template is="auto-binding" id="tree">
<core-menu selected="0">
<core-submenu icon="settings" label="Topics">
<core-item label="Topic 1"></core-item>
<core-item label="Topic 2"></core-item>
</core-submenu>
<core-submenu icon="settings" label="Favorites">
<core-item label="Favorite 1"></core-item>
<core-item label="Favorite 2"></core-item>
<core-item label="Favorite 3"></core-item>
<core-submenu label="Topics">
<core-item label="Topic 1"></core-item>
<core-item label="Topic 2"></core-item>
</core-submenu>
</core-submenu>
</core-menu>
</template>
效果
分离到单独文件 leogiese-tree.html
需要创建一个leogiese-tree.html 表示一个html元素类。
该元素继承了core-menu
<polymer-element extends="core-menu" name="leogiese-tree">
<template>
<core-menu selected="0">
<core-submenu icon="settings" label="Topics">
<core-item label="Topic 1"></core-item>
<core-item label="Topic 2"></core-item>
</core-submenu>
<core-submenu icon="settings" label="Favorites">
<core-item label="Favorite 1"></core-item>
<core-item label="Favorite 2"></core-item>
<core-item label="Favorite 3"></core-item>
<core-submenu label="Topics">
<core-item label="Topic 1"></core-item>
<core-item label="Topic 2"></core-item>
</core-submenu>
</core-submenu>
</core-menu>
</template>
<script>
Polymer('leogiese-tree', {
ready: function () {
}
});
</script>
</polymer-element>
在网页上只要输入：
<body unresolved>
<leogiese-tree></leogiese-tree>
</body>
即可显示出相同效果，但如果 … …
<body unresolved>
<leogiese-tree style="float: left"></leogiese-tree>
<leogiese-tree style="float: left"></leogiese-tree>
</body>
就会显示出
8 回复
