使用web components创建单页应用

原文 http://forjs.org/book/lkaK8WuNme/section/gJxDnDq4K8g 使用web components创建单页应用 ============================

创建基本框架

<body unresolved fullbleed>
<core-scaffold id="scaffold">
    <nav>右侧导航</nav>
    <core-toolbar>工具栏</core-toolbar>
    <div>主内容区</div>
</core-scaffold>
</body>

效果

unresolved 可以预防闪烁
fullbleed 填充整个页面

core-scaffold

core-scaffold 基本

core-scaffold 组件，内部有菜单 / 工具栏 / 内容区域
用属性 navigation / tool / fit 也可以定义

core-scaffold 属性

自适应的最小尺寸 responsiveWidth = “600px”
mode = “seamed” 设置默认滚动模式

core-scaffold 事件

scroll 事件，是由于主内容区滚动，event.detail.target 返回主内容区 dom 对象。

core-scaffold 方法

openDrader() / togglePanel() 没发现什么区别，都是在合并状态下打开 drawer
closeDrader() 关闭 drader

core-toolbar

core-toolbar 是水平式元素，可用于标签、导航、搜索和各种按钮操作。

他有个默认高度
通过 class="tall" 设置 x3 倍高度
medium-tall 设置 x2 高度

<core-toolbar class="tall">
    <!--<core-icon-button icon="menu"></core-icon-button>-->
    <div class="indent">Middle Title</div>
    <div class="middle indent">Middle Title</div>
    <div class="bottom indent">Bottom Title</div>
</core-toolbar>

如果 toolbar class="tall" 可以设置3行元素，而 medium-tall 可以设置两行。

OK, 研究了core-toolbar 我们继续开发左侧的 Navigation 。

开发左侧 Navigation

<nav>
    <core-toolbar><span> Forjs.org </span></core-toolbar>
    <core-menu selected="0">
        <paper-item icon="label-outline" label="《精通Node.js开发》">
            <a href="#nodejs"></a>
        </paper-item>
        <paper-item icon="label-outline" label="《Angular.js视频详解》">
            <a href="#angular"></a>
        </paper-item>
    </core-menu>
</nav>

先秀一下效果

下面要对 core-menu 元素进行分析

core-menu

core-menu 选择样式看起来像菜单

可以在它内部添加 core-item ，加入 core-selected

core-item.core-selected {
    color : red;
}

selectedItem 属性表示当前选中的值
selected 属性表示选那个item
core-select 事件，当选时fire。

core-item

<core-item icon="settings" label="Settings"></core-item>

属性

src 一个icon图片 url
icon
label

可以这样

<core-item icon="settings" label="Settings">
    <a href="#"></a>
</core-item>

peper-item

它和 core-item 差不多

iconSrc 等同于 core-item#icon

开发顶端工具栏

<core-toolbar tool flex>
  <!-- flex spaces this element and jusifies the icons to the right-side -->
  <div flex>Application</div>
  <core-icon-button icon="refresh"></core-icon-button>
  <core-icon-button icon="add"></core-icon-button>
</core-toolbar>

flex 的mean 是填充余下的部分

主内容区

<div layout horizontal center-center fit></div>

layout 属性表示要进行布局
horizontal 横向布局
center-center 横向和垂直都居中
fit 表示填充剩余区域

加入动态页面组件

<div layout center-center horizontal fit>
    <core-animated-pages  selected="0" transitions="slide-from-right">
        <section layout vertical center-center>
            <div>《精通Node.js开发》</div>
        </section>
        <section layout vertical center-center>
            <div>《Angular.js视频详解》</div>
        </section>
    </core-animated-pages>
</div>

并设置样式

core-animated-pages{
    width:85%;
    height: 85%;
    background-color: white;
}

core-selector 组件

core-animated-pages 继承自 core-selector 所以，要先研究core-selector。

该组件是用来表示可选择的component。

<core-selector selected="0">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</core-selector>

core-selector 是没有样式的，需要手工写。

core-selector 属性

selected=null 可以用索引，也可以用valueattr + label 方式来定位。

<core-selector valueattr="label" selected="foo">
  <div label="foo"></div>
  <div label="bar"></div>
  <div label="zot"></div>
</core-selector>

multi="false"
valueattr="name"
selectedClass="core-selected"
selectedProperty="" ，选者后设置的item元素的属性值例如：selectedProperty="checked"

    <input type="radio" name="color" checked="checked" value="red">

selectedAttribute="active" 属性值
selectedItem 被选择的dom对象
selectedModel 这个属性没弄明白 doto
selectedIndex
excludedLocalNames 设置不包括的元素

<core-selector excludedLocalNames="h3 hr">
  <h3>Header</h3>
  <core-item>Item1</core-item>
  <core-item>Item2</core-item>
  <hr>
  <core-item>Item3</core-item>
  <core-item>Item4</core-item>
</core-selector>

target 默认是容器
itemsSelector

<core-selector target="{{$.myForm}}" itemsSelector="input[type=radio]"></core-selector>
<form id="myForm">
  <label><input type="radio" name="color" value="red"> Red</label> <br>
  <label><input type="radio" name="color" value="green"> Green</label> <br>
  <label><input type="radio" name="color" value="blue"> Blue</label> <br>
  <p>color = {{color}}</p>
</form>

activateEvent="tap"

<core-selector id="test" itemsSelector="input[type=radio]"
               selected="green" valueattr="value" selectedProperty="checked"
               activateEvent="change"></core-selector>
<form id="myForm">
    <label><input type="radio" name="color" value="red"> Red</label> <br>
    <label><input type="radio" name="color" value="green"> Green</label> <br>
    <label><input type="radio" name="color" value="blue"> Blue</label> <br>
</form>

notap=false 设置true 将关闭 activateEvent 功能
items 返回全部的 sub dom

core-selector 事件

core-select 当有item状态改变了，就触发，所以它有可能，选一下，激发2个 core-select ，一个是被选，一个是取消选。 detail.isSelected( boolean ) detail.item( Object )
core-activate 当item被选了触发 detail.item( Object )

core-selector 方法

selectPrevious 选上一个，只有单选可用。return true 表示到达第一个了
selectNext

core-animated-pages 组件

用于显示多个子页面其中之一，并在切换之间提供过度效果，这些效果可以使用core核心的，也可以自己开发实现。

注意下面两种写法：

// 这是不工作的，因为容器是不参与工作的。
<core-animated-pages transitions="cross-fade">
  <section cross-fade></section>
  <section cross-fade></section>
</core-animated-pages>

// 这才正确
<core-animated-pages transitions="cross-fade">
  <section>
    <div cross-fade></div>
  </section>
  <section>
    <div cross-fade></div>
  </section>
</core-animated-pages>

core-animated-pages 属性

transitions = ‘’ 转换方式
lastSelected 选择的最后一页dom 对象

core-animated-pages 事件

core-animated-pages-transition-prepare 页面转换之前被触发
core-animated-pages-transition-end

数据绑定

<body unresolved fullbleed>
  <template is="auto-binding">

  </template>
</body>

这里的 is="auto-binding" 是快速创建一个 polymer 元素，元素本身就是这个 template dom。

导航

<nav>
    <core-toolbar><span> Forjs.org </span></core-toolbar>
    <core-menu selected="{{route}}">
        <template repeat="{{page in pages}}">
            <paper-item icon="label-outline"  label="{{page.label}}">
                <a href="#"></a>
            </paper-item>
        </template>
    </core-menu>
</nav>

内容区

 <core-animated-pages selected="{{route}}" valueattr="label" transitions="slide-from-right">
    <template repeat="{{page in pages}}">
        <section layout vertical center-center label="page.label">
            <div>
                {{page.label}}
            </div>
        </section>
    </template>
</core-animated-pages>

route代码

<script>
    window.addEventListener("polymer-ready", function () {
        var templ = document.querySelector("template[is='auto-binding']");
        templ.pages = [
            {label:"《精通Node.js开发》"},
            {label:"《Angular.js视频详解》"}
        ]
    })
</script>

效果