polymer入门例子-已过时
这个教程挺不错！：http://blog.csdn.net/renfufei/article/details/37040883 过时了，现在的版本已经为1.0了
一：创建APP结构
本教程会使用预先构建好的polymer元素：toolbar，tabs，panel
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
//提供缺少的平台特性
//<script src="../components/platform/platform.js">
//该引入的是这个，而不是platform.js
<script src="../components/webcomponentsjs/webcomponents.js"></script>
//引入html文件
<link rel="import" href="../components/font-roboto/roboto.html">
//unresolved为了防止，浏览器中没有原生支持的无样式元素，而发生的闪烁。
<body unresolved touch-action="auto">
<core-header-panel>
<core-toolbar>
//valueattr="name"指会根据子元素的name属性来确定选择哪一个；selected="all"指选择name为all的作为初始的选项卡;self-end什么意思？
<paper-tabs id="tabs" valueattr="name" selected="all" self-end>
<paper-tab name="all">所有</paper-tab>
<paper-tab name="favorites">收藏</paper-tab>
</paper-tabs>
</core-toolbar>
<!-- 主要的页面内容将会放在这里 --> </core-header-panel>
<script>
var tabs = document.querySelector('paper-tabs');
// 添加事件监听, 很明显,你需要chrome浏览器来运行
// 这里每次切换会触发2次,前一个tab取消选中,以及新tab被选中
tabs.addEventListener('core-select', function(e) {
//e = {detail:object}
var detail = e["detail"] || {};
//e.detail = {isSelected:false; item:paper-tab}
var item = detail["item"] || {};
var isSelected = detail["isSelected"];
//item = paper-tab.innerText, tabs.selected = paper-tabs的selected属性的值
console.log(
"Tab(\""+ item["innerText"] + "\") changeTo: "+ isSelected +"; [" + tabs.selected + "] isSelected "
);
});
</script>
</body>
二：自定义元素：<script>写在template外面
调用自定义元素
<post-card>
<img src="">
<h2>孙飞鹏</h2>
<h3>you are the best</h3>
</post-card>
影子DOM：局部的DOM树添加到某个DOM元素中，局部的DOM样式跟全局的web独立
<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/core-icon-button/core-icon-button.html">
//<polymer-element>自定义新元素的方式，创建的元素叫post-card
<polymer-element name="post-card">
//<polymer-element>直接子元素中只能有一个<template>,但是<template>可以嵌套<template>,创建的元素不会出现在宿主元素的children中
<template>
<style>
//:host指<post-card>
:host {
display: block;
position: relative;
background-color: white;
padding: 20px;
width: 100%;
font-size: 1.2rem;
font-weight: 300;
}
.card-header {
margin-bottom: 10px;
}
polyfill-next-selector { content: '.card-header h2'; }
//::content h2指通过插入点<content>派发的h2,不能对插入点设置自身样式，所以::content伴随后代选择器
.card-header ::content h2 {
margin: 0;
font-size: 1.8rem;
font-weight: 300;
}
polyfill-next-selector { content: '.card-header img'; }
.card-header ::content img {
width: 70px;
border-radius: 50%;
margin: 10px;
}
core-icon-button {
position: absolute;
top: 3px;
right: 3px;
color: #636363;
}
:host([favorite]) core-icon-button {
color: #da4336;
}
</style>
//添加div和content，layout horizontal center创建flexbox的方式，<img>会访入第一个content
<div class="card-header" layout horizontal center>
<content select="img"></content>
<content select="h2"></content>
</div> <core-icon-button
id="favicon"
icon="favorite"
on-tap="{{favoriteTapped}}">
</core-icon-button> <content></content>
</template>
<script>
Polymer({
publish: {
favorite: {
value: false,
reflect: true
}
},
favoriteTapped: function(event, detail, sender) {
this.favorite = !this.favorite;
this.fire('favorite-tap');
}
});
</script>
</polymer-element>
三：数据获取和绑定
post-list
<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../post-service/post-service.html">
<link rel="import" href="post-card.html">
//创建一个名为show的发布属性
<polymer-element name="post-list" attributes="show">
<template>
<style>
:host {
display: block;
width: 100%;
}
post-card {
margin-bottom: 30px;
}
</style>
//posts="{{posts}}"在<post-service>和自定义元素间加了数据绑定：<post-service>有一个属性posts，也就是这里的{{posts}}
//id可以随便写
<post-service id="service" posts="{{posts}}"></post-service> <div layout vertical center>
<template repeat="{{post in posts}}">
<post-card
favorite="{{post.favorite}}"
on-favorite-tap="{{handleFavorite}}"
hidden?="{{show == 'favorites' && !post.favorite}}">
<img src="{{post.avatar}}" width="70" height="70">
<h2>{{post.username}}</h2>
<p>{{post.text}}</p>
</post-card>
</template>
</div>
</template> <script>
Polymer({
handleFavorite: function(event, detail, sender) {
var post = sender.templateInstance.model.post;
this.$.service.setFavorite(post.uid, post.favorite);
}
});
</script>
</polymer-element>
其实也挺简单的，通过<post-service>连接前端和后端。
前端引入预设和自定义的元素，后端通过ajax来获取数据。中间通过发布属性来连接。
教程：http://blog.csdn.net/renfufei/article/details/38349971 很不错 介绍了四个布局元素
把browser调整为移动设备
<cored-header-panel>
header部分：<core-toolbar>或者div.core-header。有很多种模式。需要指定高度
content部分：
<core-toolbar>
工具栏，容器。通过.medium .tall改变高度
<core-drawer-panel>
通过togglePanel方法来切换状态
nav部分：left, right。drawer属性
content部分：main属性
<core-scaffold>
可以包含以上三个元素
把这个教程重新做一遍：http://blog.csdn.net/renfufei/article/details/37040883
创建APP结构做好
开始做自定义元素:script写在template外面
获取，绑定数据:
link html元素是使用href;
post-service--post-list--post-card--index；
post-list.html <polymer-element>有一个发布属性attributes="show",在index.html中使用show="all"
post-list.html <post-service>有一个属性publish="{{itmes}}":publish来自于post-service.html的<polymer-element attributes="publish">，在post-service.html的方法中，可以使用this.publish来接受返回的响应；itmes用在post-list.html中，来表示返回对象的数组。
收尾工作：
黑色变为红色，是通过color属性
很特殊的问题
<paper-tabs selected="all"></paper-tabs>
var tabs = document.querySelector("paper-tabs");
tabs.selected为all。 不能用jquery获取：$("paper-tabs")，获取后，取不到selected的值。
只能通过document.querySelector();
添加事件的方法：tabs.addEventListener('core-select', function(e){});
post-card
<div class="card-header" layout horizontal center>
<content select="img"></content>
<content select="h2"></content>
</div> <core-icon-button
id="favicon"
//选择心形图标
icon="favorite"
//tap（触摸）时，调用favoriteTapped方法
on-tap="{{favoriteTapped}}">
</core-icon-button> <content></content>
<script>
Polymer({
//发布属性的一种方式
publish: {
favorite: {
value: false,
//属性值发生变化时 favorite 属性会被更新
reflect: true
}
},
favoriteTapped: function(event, detail, sender) {
this.favorite = !this.favorite;
//每个自定义元素原型的工具方法之一，触发自定义事件
this.fire('favorite-tap');
}
});
</script>
post-list
//favorite-tap 事件 的 事件处理程序 是 handleFavorite, hidden?="{{}}"如果绑定的表达式计算值为true则设置该属性
<post-card favorite="{{post.favorite}}" on-favorite-tap="{{handleFavorite}}" hidden?="{{show=='favorites' && !post.favorite}}">
<img src="{{post.avatar}}" width="70" height="70">
<h2>{{post.username}}</h2>
<h2>{{post.text}}</h2>
</post-card>
Polymer({
handleFavorite: function(event, detail, sender) {
//post-list接受post-service传过来的值，是这样获取的。
var post = sender.templateInstance.model.post;
this.$.service.setFavorite(post.uid, post.favorite);
}
});
polymer入门例子-已过时的更多相关文章
- 一个简单的iBatis入门例子
一个简单的iBatis入门例子,用ORACLE和Java测试 目录结构: 1.导入iBatis和oracle驱动. 2.创建类Person.java package com.ibeats;import ...
- 【Bootstrap Demo】入门例子创建
本文简单介绍下如何来使用 Bootstrap,通过引入 Bootstrap,来实现一个最基本的入门例子. 在前一篇博文[Bootstrap]1.初识Bootstrap 基础之上,我们完全可以更加方便快 ...
- 【Bootstrap】入门例子创建
本文简单介绍下如何来使用 Bootstrap,通过引入 Bootstrap,来实现一个最基本的入门例子. 在前一篇博文[Bootstrap]1.初识Bootstrap 基础之上,我们完全可以更加方便快 ...
- spring boot入门例子
最近学习spring boot,总结一下入门的的基础知识 1新建maven项目,修改pom.xml <project xmlns="http://maven.apache.org/PO ...
- 解决Maven项目编译时提示：源值1.5已过时，将在未来所有版本中删除
每次编译项目时,都提示:源值1.5已过时,将在未来所有版本中删除 查了一些资料,发现是因为IDEA默认把项目的源代码版本设置为jdk1.5,目标代码设置为jdk1.5 解决方案: 修改Maven的S ...
- 某些输入文件使用或覆盖了已过时的 API
android出现注: 某些输入文件使用或覆盖了已过时的 API. 注: 有关详细信息, 请使用 -Xlint:deprecation 重新编译. 注: 某些输入文件使用了未经检查或不安全的操作. 注 ...
- MINA经典入门例子----Time Server
原文地址 http://blog.sina.com.cn/s/blog_720bdf0501010b8r.html 貌似java的IO.NIO的入门例子都有相关的Time Server Demo.本例 ...
- 【转】android出现注: 某些输入文件使用或覆盖了已过时的 API。 注: 有关详细信息, 请使用 -Xlint:deprecation 重新编译。 注: 某些输入文件使用了未经检查或不安全的操作。 注
使用Android studio打包应用程序出现如下错误: 注: 某些输入文件使用或覆盖了已过时的 API. 注: 有关详细信息, 请使用 -Xlint:deprecation 重新编译. 注: 某些 ...
- JPA入门例子(采用JPA的hibernate实现版本) 转
JPA入门例子(采用JPA的hibernate实现版本) jpahibernate数据库jdbcjava框架(1).JPA介绍: JPA全称为Java Persistence API ,Java持久化 ...
随机推荐
- Python自然语言处理（1）：初识NLP
由于我们从美国回来就是想把医学数据和医学人工智能的事认真做起来,所以我们选择了比较扎实的解决方法,想快速出成果的请绕道.我们的一些解决方法是:1.整合公开的所有医学词典,尽可能包含更多的标准医学词汇: ...
- 管道和FIFO 二
前面我们学习了一下进程,我们知道多,进程间的地址空间相对独立.进程与进程间不能像线程间通过全局变量通信. 如果想进程间通信,就需要其他机制. 常用的进程间通信方式有这几种 A.传 ...
- php的静态变量的实现
1.静态变量的结构 php脚本编译之后会生成执行opcode组成的opcode_array,执行每个zend_op_array都会生成一个单独的zend_execute_data结构. php的局部变 ...
- 寒武纪-1005 Travel(树形DP)
一.题目链接 http://aiiage.hustoj.com/problem.php?id=1005 二.题面 PDF:http://aiiage.hustoj.com/upload/file/20 ...
- 管理Linux服务器的用户和组
管理Linux服务器的用户和组 Linux操作系统是一个多用户多任务的操作系统,允许多个用户同时登录到系统,使用系统资源. 为了使所有用户的工作顺利进行,保护每个用户的文件和进程,规范每个用户的权限, ...
- asp.net利用QQ邮箱发送邮件，关键在于开启pop并设置授权码为发送密码
public static bool SendEmail(string mailTo, string mailSubject, string mailContent) { ...
- 当前触发事件的两种方式（onclick) 和 （'id') 获取
1. <input type='text' onclick = 'Clickon(this)'> <script> function Clickon(num){ num.sty ...
- MyBait 符号大于 小于理解
EQ 就是 EQUAL等于 NQ 就是 NOT EQUAL不等于 GT 就是 GREATER THAN大于 LT 就是 LESS THAN小于 GE 就是 GREATER THAN OR EQUAL ...
- 听说去了BAT的 Linuxers 都做过这套面试题！
本部分为单项选择题,每道题仅有一个答案,每题2分. 1. cron 后台常驻程序 (daemon) 用于: A. 负责文件在网络中的共享 B. 管理打印子系统 C. 跟踪管理系统信息和错误 D. ...
- javascript中defer的作用
javascript中defer的作用 <script src="../CGI-bin/delscript.js" defer></script>中的def ...