开发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>

就会显示出

开发Tree HTML元素

推荐：《精通Node.js开发》 《Angular.js视频详解》

基本结构

效果

分离到单独文件 leogiese-tree.html

回复 (8)

推荐：《精通Node.js开发》《Angular.js视频详解》