开发Tree HTML元素
发布于 3个月前 作者 leogiese 510 次浏览 来自 分享

原文 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 回复

很流b的样子,虽然不会弄

@node007 主要是 polymer 牛

polymer 是什么啊?没听过啊

polymer 是google开发的 web components 支持库

web components 查了一下,说是未来趋势 ?

是的,webcomponent,我认为肯定是未来的趋势了

也不知道什么时候能学会,哎

google 一下 polymer

回到顶部