图片 3

Components构建单页面应用,远程分页类

用Web Components创设单页面应用

2015/01/19 · JavaScript
· Web Components

本文由 伯乐在线 –
周进林
翻译,Mxt
校稿。未经许可,禁止转发!
葡萄牙语出处:www.polymer-project.org。款待参与翻译组。

您是怎么着利用Polymer构建二个单页应用的?那一个标题大家在Polymer团队里已经问过超级多遍了。大家的答案(长期以来地)是“使用组件(component)!”。但是,使用新技能去解决现成的标题往往不会即刻获得显明的效力。如何把一群模块化组件组合到三个重型的实用的利用中去?

在本教程,笔者将会给您出示怎样去构建二个职能完全的单页应用:

图片 1

  • 完全选择Polymer的中央成分构建
  • 动用响应式设计
  • 使用数据绑定性子过渡视图
  • 利用UOdysseyL路由和深层链接个性
  • 可访问键盘
  • 按需动态载入内容(可选)

 展开演示

page_total_rows – 每页体现数量 暗许值20
$total_rows – 总结多少条款数
$totpages – 总页数总括
$pages_current – 当前页面
采纳url参数字传送递 当前页码 url参数名称 pages
$style – 页码展示样式可以透过外界访谈样式属性进行退换
***********************应用办法**********************
调用该类
$pages = new pages;
调用该类后请修改数据集总条数
$pages->total_rows = $totrows;
//$pages->main(卡塔尔国;方法将回来limit需要的2个参数 关联数组的a,b2个要素
$limit = $pages->main();
通过访谈不相同措施就能够显示不一样的魔法!
接待商量指正 联系qq 5213606
*/
class pages{
public $page_total_rows = 20;//每页显示数量
public $total_rows;//总括多少条约数
public $totpages;//总页数
public $current_url;//当前页面名称
private $ask; //是或不是现身问号
public $style ='<style
type=”text/css教程”>
.pages_norename{width:50px; height:20px; float:left;
background-color:#e3eff3; margin-right:5px; text-align:center;
line-height:20px; border:1px solid #333333;}
.pages_norename a{display:block; width:50px; height:20px;
color:#333333; text-decoration:none;}
.pages_norename a:hover{background-color:#ff9900; color:#ffffff;}
.pages_nore_more{width:auto; height:20px; float:left;
margin-right:5px; line-height:20px; background-color:#e3eff3;
border:1px solid #333333;}
.pages_nore_more a{display:block; width:20px; height:20px;
color:#333333; text-decoration:none; text-align:center;}
.pages_nore_more a:hover{background-color:#ff9900; color:#ffffff;}
.pages_se{width:auto; height:20px; float:left;}
.pages_se select{margin:0px; padding:0px; font-family:arial, helvetica,
sans-serif; font-size:12px;}
</style>
‘;

1.angular  ng-repeat  orderBy 最后叁个desc参数平常是true和false,是或不是逆序,私下认可是false

<li ng-repeat=”item in data | orderBy:sort:desc”></li>

js中实现:

$scope.sort=’age’;

$scope.data=[{

        name:’mary’,

        age:24,

        sex:’female’,

        height:’170cm’,

        description:’Hi,everyBody,Nice to meet you’

    },    {

        name:’Jackey’,

        age:28,

        sex:’male’,

        height:’187cm’,

        description:’Hi,all,Nice to meet you’

    }];

采用构造

规划布局是始于一个品类的首要职务之风流倜傥。作为主导要素集结的意气风发部分,Polymer通过多少个构产生分 来支撑应用程序的构架(<core-header-panel>,
<core-drawer-panel>,
<core-toolbar>)。这一个零器件本人就很好用,可是为了越来越快地开头项目,大家筹算器重于<core-scaffold>。有了它你能够透过创设多少个基本的因素就会做出一个响应式的活动端布局。

<core-scaffold>的子成分可以是点名特定的成分或接收一定的竹签(或二者一齐使用)。比如,使用<nav>成分制造应用抽屉菜单。你能够在随意的成分里接收navigation属性(e.g
<core-header-panel navigation>)。工具栏通过工具属性标记。它的享有别的子成分都定义在十分重要内容区域里。

//主题总结 并以数组的样式再次来到查询sql 语句的必得值 limit a,b;
function main(){
  $this->totpages =
ceil($this->total_rows/$this->page_total_rows卡塔尔(英语:State of Qatar);//总页数计算
  //得到当前页码——————-
  if(!isset($_get[‘pages’]))
  {
  $this->pages_current = 1;
  }else
  {
   $this->pages_current = intval($_get[‘pages’]);
   //推断页面不为0
   if($this->pages_current < 1){
   $this->pages_current = 1;
   }
   //判别页面无法超过最大页码数量
   if($this->pages_current > $this->totpages){
   $this->pages_current = $this->totpages;
   }
   //注销url 参数 pages 和 total_rows 为了更加好的传递其余url参数
   if(isset($_get[‘pages’])){unset($_get[‘pages’]);}
   if(isset($_get[‘total_rows’])){unset($_get[‘total_rows’]);}
  
  }
  //取妥贴前页码——————–
  $limit[‘a’] = $start = ($this->pages_current –
1)*$this->page_total_rows;
  $limit[‘b’] = $this->page_total_rows;
  //获得当前页面名称
  $urlin =
explode(‘/’,$_server[‘php教程_self’]);
 
  $tot_url = sizeof($urlin);
  $this->current_url =$urlin[$tot_url-1];
  //取安妥前页面传递的url
  if(sizeof($_get) > 0){
   foreach($_get as $key=>$values){
    $urlsget .= $key.’=’.$values.’&’;
   }
   $this->current_url .= ‘?’.$urlsget;
   $this->ask = ”;
  }else{$this->ask = ‘?’;}
  //输出样式
  echo $this->style;
  return $limit;
}
//显示分页
//1 第一页
function firstpage(){
  echo ‘<div class=”pages_norename”><a
href=”‘.$this->current_url.'”>首页</a></div>’;
}
//2 上一页
function prepage(){
  echo ‘<div class=”pages_norename”><a
href=”‘.$this->current_url.$this->ask.’pages=’.($this->pages_current-1).'”>上一页</a></div>’;
}
//3 下一页
function nextpage(){
  echo ‘<div class=”pages_norename”><a
href=”‘.$this->current_url.$this->ask.’pages=’.($this->pages_current+1).'”>下一页</a></div>’;
}
//4 最后大器晚成页
function  lastpage(){
  echo ‘<div class=”pages_norename”><a
href=”‘.$this->current_url.$this->ask.’pages=’.($this->totpages).'”>尾页</a></div>’;
}
//中间过渡页
function morepage(){
  if($this->pages_current == 1){$newtj =
$this->pages_current+9;}
  elseif($this->pages_current  == 2){$newtj =
$this->pages_current+8;}
  elseif($this->pages_current == 3){$newtj =
$this->pages_current+7;}
  else{$newtj = $this->pages_current+6;}
   for($i=$this->pages_current-3;$i<=$newtj;$i++){
    if($i==$this->pages_current){$strong ='<strong>’; $strong2
='</strong>’;}else{$strong=”;$strong2=”;}
    if($i >=1){echo ‘<div class=”pages_nore_more”><a
href=”‘.$this->current_url.$this->ask.’pages=’.$i.'”>’.$strong.$i.$strong2.'</a></div>’;}
    if($i >= $this->totpages){
    break;
    }
   }
}
//跳转页面
function changepage(){
  echo ‘<div class=”pages_se”><select name=”dd”>’;
  for($i=1;$i<=$this->totpages;$i++){
  if($this->pages_current == $i){$selected = ‘
selected=”selected”‘;}else{$selected = ”;}
  echo ‘<option
value=”‘.$i.'”‘.$selected.’>第’.$i.’页</option>’;
  }
  echo ‘</select></div>’;
}
}
?>
该类能够自动识别 url 参数 制止了相同分页类 错过url参数难点
体制 能够经过style属性 实行退换
提供 首页 上意气风发页 下生龙活虎页 尾页 中间 过渡页 跳转菜单成效

2.angular    ui-sref使用

具体用法:<a
ui-sref=”XXXX”></a>,在那之中XXXX是路由的$state中名称为“XXXX”的state

<a
ui-sref=”app.system.template_bench({pageId:item.pageId,isDefault:resultData.length})”></a>

路由中的配置:

.state(‘app.system.template_bench’, {

            url: ‘/template_bench/:pageId/:isDefault’,

            templateUrl: ‘tpl/system/template_bench.html’,

            controller: ‘template_bench’,

当JavaScript再也生成网页时,它会招来$state中名叫“app.system.template_bench”的state,读取这些state的url,然后在a标签里生成href=”url”,

结果为:<a ui-sref=”XXXX” href=”#/XXXX.html”></a>

(1卡塔尔假如动态绑定:

<li repeat=”item in items”>

<a
ui-sref=”{{item.statePage}}”>{{item.state}}</a>那样是大谬不然的,

ui-sref不辅助动态绑定,那样的代码会报错。sref中你只可以利用state名,顶多加点参数。

(2卡塔尔引导参数的ui-sref  :

ui-sref=”app.system.template_bench({pageId:item.pageId,isDefault:resultData.length}卡塔尔(英语:State of Qatar)”对应路由中的参数配置,其实通$state.go(卡塔尔

例子

XHTML

<body unresolved fullbleed> <core-scaffold id=”scaffold”>
<nav>Left drawer</nav> <core-toolbar
tool>Application</core-toolbar> <div>Main
content</div> </core-scaffold> </body>

1
2
3
4
5
6
7
<body unresolved fullbleed>
  <core-scaffold id="scaffold">
    <nav>Left drawer</nav>
    <core-toolbar tool>Application</core-toolbar>
    <div>Main content</div>
  </core-scaffold>
</body>

让大家一起来深刻这一个剧情的每生龙活虎某个

3.angular   ui-sref-active

ui-sref-active=”select”

例如

<li ui-sref-active=”select”
ui-sref=”main”><span>首页</span></li>

//这些意思是说只要当前点击的路由是main的话,首先点击这一个路由会跳转到main的页面,

 //然后如若当前页面正是它的话,那么就能够含有select那几个样式类的称谓

<li ui-sref-active=”select”
ui-sref=”search”><span>附近</span></li>

抽屉菜单

你放在导航成分里的号子都定义在滑走的应用抽屉菜单里。为了大家的对象
,笔者百折不回运用标题(<core-toolbar>卡塔尔国和导航链接 (<core-menu>):

XHTML

<nav> <core-toolbar><span>Single Page
Polymer</span></core-toolbar> <core-menu selected=”0″>
<paper-item noink> <core-icon
icon=”label-outline”></core-icon> <a
href=”#one”>Single</a> </paper-item> <paper-item
noink> <core-icon icon=”label-outline”></core-icon> <a
href=”#two”>page</a> </paper-item> …
</core-menu> </nav>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<nav>
  <core-toolbar><span>Single Page Polymer</span></core-toolbar>
  <core-menu selected="0">
    <paper-item noink>
      <core-icon icon="label-outline"></core-icon>
      <a href="#one">Single</a>
    </paper-item>
    <paper-item noink>
      <core-icon icon="label-outline"></core-icon>
      <a href="#two">page</a>
    </paper-item>
    …
  </core-menu>
</nav>

只顾,今后<core-menu
selected=”0″>被硬编码为筛选第一个条约。大家之后会把它改为动态的。

4.angular ng-class

ng-class 指令用于给 HTML 成分动态绑定三个或几个 CSS 类。

有三种方式:

1、通过$scope绑定(不推荐)

2、通过对象数组绑定

3、通过key/value键值对绑定

第1种,通过$scope绑定:

function ctrl($scope) {   

$scope.className =”selected”;  }

相应的页面:<div class=”{{className}}”></div>

第2种, 通过对象数组绑定:

function ctrl($scope) {   

$scope.isSelected =true;  

}  

相应的页面:<div
ng-class=”{true:’selected’,false:’unselected’}[isSelected]”></div>
 
 当isSelected为true时,增加selected样式;当isSelected为false时,增加unselected样式。

第3种, 通过key/value键值对绑定:

function ctrl($scope) {   

$scope.isA =true;  

$scope.isB =false;  

$scope.isC =false;  

}  

对应的页面<div ng-class=”{‘A’:isA,’B’:isB,’C’:isC}”></div>  
 当isA为true时,扩张A样式;当isB为true时,扩张B样式;当isC为true时,扩大C样式。

比方说:<i
ng-class=”getIconClass(two卡塔尔国”></i>函数重临的是二个字符串,便是动态加多css属性

工具栏

工具栏横跨了页面最上端并包罗了效用开关Logo。满意这种意义的一揽子成分是<core-toolbar>:

XHTML

<!– flex makes the bar span across the top of the main content area
–> <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>

1
2
3
4
5
6
7
<!– flex makes the bar span across the top of the main content area –>
<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>

5.angular ng-include 和 data-ng-include

都以外部引进html页面,data-ng-include是h5的规范化写法,没分别

不容争辩注意双引号内包括单引号

<div data-ng-include=” ‘tpl/blocks/nav.html’ “></div>

<div ng-include=”‘tpl/common/modal.html'”></div>

ng-include写路线方法:

(1)<ng-include src=”‘views/sidepanel.html'”></ng-include>

  (2)  <div ng-include=”‘views/sidepanel.html'”></div>
 相符静态加载某些页面

  (3)  <div ng-include
src=”‘views/sidepanel.html'”></div>动态的加载平日选拔第两种格局

首要内容

终极一片段是为你的剧情而留的。它能够是别的的成分。<div>是贰个很好的拈轻怕重:

XHTML

<div layout horizontal center-center fit> <!– fill with pages
–> </div>

1
2
3
<div layout horizontal center-center fit>
  <!– fill with pages –>
</div>

fit属性表示重要区域的剧情会分布父成分的宽带和冲天,layout horizontal
center-center属性表示使用弹性框(flexbox)来使内容居花潮垂直居中。

6.angular ng-controller

绑定应用调节器,为$scope加强

抽离的nav.html中 ,设定ng-controller = “asideCtrl”,

<nav ng-controller=”asideCtrl”>

  <ul class=”nav”>

     <li class=”one-flag” ng-repeat=”item in
permissionList”>

  </ul>

</nav>

,然后对应在利用中main.js中

angular.module(‘app’)

.controller(‘AppCtrl’, [‘$scope’, ‘$localStorage’, ‘$window’,
‘LocalCache’, ‘$state’, ‘$rootScope’,’AgreeConstant’, function($scope,
$localStorage, $window, LocalCache, $state, $rootScope,AgreeConstant) {

.controller(“asideCtrl”, [‘$scope’, ‘LocalCache’,

      function($scope, LocalCache) {

        $scope.permissionList =
angular.fromJson(LocalCache.getSession(“permissionJson”));

        };

      }

    ])

}

从这之后,nav.html就能够运用asideCtrl调节器中得到的$scope.permissionList
的值进行页面渲染。

创建“视图”

多视图(大概多页面)能够运用<core-pages>或许<core-animated-pages>来创建。在一遍只呈现三个子成分时,多个成分都很有用。而采用<core-animated-pages>的裨益是,它提供了更加多的暗中认可和灵活的页面过渡。

下边包车型客车身体力行(demo)使用了<core-animated-pages>成分的slide-from-right过渡效果。首先,导入元素定义和slide-from-right过渡效果。

XHTML

<link rel=”import”
href=”components/core-animated-pages/core-animated-pages.html”>
<link rel=”import”
href=”components/core-animated-pages/transitions/slide-from-right.html”>

1
2
<link rel="import" href="components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="components/core-animated-pages/transitions/slide-from-right.html">

接下来插入你的剧情:

XHTML

<div layout horizontal center-center fit> <core-animated-pages
selected=”0″ transitions=”slide-from-right”> <section layout
vertical center-center> <div>Single</div>
</section> <section layout vertical center-center>
<div>page</div> </section> …
</core-animated-pages> </div>

1
2
3
4
5
6
7
8
9
10
11
<div layout horizontal center-center fit>
  <core-animated-pages  selected="0" transitions="slide-from-right">
    <section layout vertical center-center>
      <div>Single</div>
    </section>
    <section layout vertical center-center>
      <div>page</div>
    </section>
    …
  </core-animated-pages>
</div>

留意,现在<core-animated-pagesselected=”0″>那行代码是硬编码去选拔第黄金时代页。可是大家今后会把它写成动态的。

前段时间你应当享有了三个骨干的采用,可是此间有生机勃勃部分小的主题素材须求注意。多亏掉Polymer各类成分提供的构造属性和默许样式,你能够不写任何的CSS代码就可以实现三个响应式应用。当然,从material
design调色板里获取一些灵感,设置不到10
CSS规则就能够让这些相应变得更加赏心悦目。

展示:没设置CSS 
 
 展示:设置CSS

7.angular ng-click

ng-click=”reload(m.blockContentId)” 方法

ng-if=”item.pageName”变量

ng-model=”map.pageName”变量

运用数据绑定

咱俩全部了一个用到,但那不值得后生可畏提。那离D奥迪Q5Y还远着。相同的标志在这里间再一次现身:

XHTML

<nav> <core-menu selected=”0″> <paper-item noink>
<core-icon icon=”label-outline”></core-icon> <a
href=”#one”>Single</a> </paper-item> <paper-item
noink> <core-icon icon=”label-outline”></core-icon> <a
href=”#two”>page</a> </paper-item> <paper-item
noink> <core-icon icon=”label-outline”></core-icon> <a
href=”#three”>app</a> </paper-item> …
</core-menu> </nav>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<nav>
  <core-menu selected="0">
    <paper-item noink>
      <core-icon icon="label-outline"></core-icon>
      <a href="#one">Single</a>
    </paper-item>
    <paper-item noink>
      <core-icon icon="label-outline"></core-icon>
      <a href="#two">page</a>
    </paper-item>
    <paper-item noink>
      <core-icon icon="label-outline"></core-icon>
      <a href="#three">app</a>
    </paper-item>
    …
  </core-menu>
</nav>

那等同不是动态的。当客商挑选三个菜单条款时,页面不会更新。幸运的是,这一个主题素材都得以使用Polymer的多少绑定本性轻便消除。

8.angular json转换

var data =
‘{“procotol”:”HTTP”,”host”:”‘+activateUrl+'”,”encrypt”:false,”body”:{“requestType”:”PUT”,”tag”:”‘+activateUrl+'”,”upJson”:{“activationCode”:”‘+$scope.activeCode.text+'”}}}’;
//=====json字符串=====

angular.fromJson(data卡塔尔(英语:State of Qatar);  //===执行此操作调换到json对象

angualr.toJson(“json字符串”卡塔尔国//====实施此操作把json对象调换来json字符串

活动绑定模板(template)

为了利用<polymer-element>外的绑定数据,包装一个Yo应用?利用内部的机动绑定<template>成分:

XHTML

<body unresolved fullbleed> <template is=”auto-binding”>
<core-scaffold id=”scaffold”> … </core-scaffold>
</template> </body>

1
2
3
4
5
6
7
<body unresolved fullbleed>
  <template is="auto-binding">
    <core-scaffold id="scaffold">
      …
    </core-scaffold>
  </template>
</body>

唤醒,<template>自动绑定成分允许大家在关键页面里接受{{}},表达式和on-*来声称事件微电脑。

9.函数向上取整-Math.ceil

Math.ceil(3.5卡塔尔==》向上取整4

选拔数据模型( data model)简化标识

应用数据模型来产生标识可以大大方方裁减你写标志的数额。在我们的案例里,全数的菜系条款和页面都得以接受少年老成对<template
repeat>成分来显示。

XHTML

<core-menu valueattr=”hash” selected=”{{route}}”> <template
repeat=”{{page in pages}}”> <paper-item hash=”{{page.hash}}”
noink> <core-icon icon=”label-outline”></core-icon> <a
href=”#{{page.hash}}”>{{page.name}}</a> </paper-item>
</template> </core-menu> <core-animated-pages
valueattr=”hash” selected=”{{route}}” transitions=”slide-from-right”>
<template repeat=”{{page in pages}}”> <section
hash=”{{page.hash}}” layout vertical center-center>
<div>{{page.name}}</div> </section> </template>
</core-animated-pages>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<core-menu valueattr="hash" selected="{{route}}">
  <template repeat="{{page in pages}}">
    <paper-item hash="{{page.hash}}" noink>
      <core-icon icon="label-outline"></core-icon>
      <a href="#{{page.hash}}">{{page.name}}</a>
    </paper-item>
  </template>
</core-menu>
 
<core-animated-pages valueattr="hash" selected="{{route}}"
                     transitions="slide-from-right">
  <template repeat="{{page in pages}}">
    <section hash="{{page.hash}}" layout vertical center-center>
      <div>{{page.name}}</div>
    </section>
  </template>
</core-animated-pages>

地点的标志由上边包车型地铁数据模型来驱动:

XHTML

<script> var template =
document.querySelector(‘template[is=”auto-binding”]’); template.pages
= [ {name: ‘Single’, hash: ‘one’}, {name: ‘page’, hash: ‘two’}, {name:
‘app’, hash: ‘three’}, … ]; </script>

1
2
3
4
5
6
7
8
9
<script>
  var template = document.querySelector(‘template[is="auto-binding"]’);
  template.pages = [
    {name: ‘Single’, hash: ‘one’},
    {name: ‘page’, hash: ‘two’},
    {name: ‘app’, hash: ‘three’},
    …
  ];
</script>

注意,<core-animated-pages>和<core-menu>通过绑定它们的selected属性来波及在联合签名。今后,当客户点击七个导航条约时,页面会做出相应的换代。valueattr=”hash”设置告诉多个成分在种种条约里采用hash属性作为筛选的值。

XHTML

<!– data-bind the menu selection with the page selection –>
<core-menu valueattr=”hash” selected=”{{route}}”> …
<core-animated-pages valueattr=”hash” selected=”{{route}}”>

1
2
3
4
<!– data-bind the menu selection with the page selection –>
<core-menu valueattr="hash" selected="{{route}}">
<core-animated-pages valueattr="hash" selected="{{route}}">

展示

10.拿走页面成分

对应页面html中:

<div id=”itemsDiv”></div>

对应js页面中:

var itemsDov = document.getElementById(“itemsDiv“);

 itemsDov.style.width = $scope.itemsData.length * 360 +”px”;

UCRUISERL路由(U哈弗L routing)和深层链接

<flatiron-director>是一个包裹了flatiron director JS
library(一个JS库)的web组件。改动它的route属性把U奇骏L#号(ULANDL
hash)更新到均等的值。

当大家想在页面加载时保持上次的视图时,数据绑定再度派上用处。把路由(director.js里的director)、菜单和页面成分连接起来并使它们一同。当三个更新时,别的的同等跟着更新。

XHTML

<flatiron-director route=”{{route}}” autoHash> … <core-menu
selected=”{{route}}”> … <core-animated-pages
selected=”{{route}}”>

1
2
3
4
5
<flatiron-director route="{{route}}" autoHash>
<core-menu selected="{{route}}">
<core-animated-pages selected="{{route}}">

深层链接-当模板盘算好时,初始化路由。

XHTML

template.addEventListener(‘template-bound’, function(e) { // Use URL
hash for initial route. Otherwise, use the first page. this.route =
this.route || DEFAULT_ROUTE; };

1
2
3
4
template.addEventListener(‘template-bound’, function(e) {
// Use URL hash for initial route. Otherwise, use the first page.
this.route = this.route || DEFAULT_ROUTE;
};

11.成分定位

此外路由库

假诺您不爱好<flatiron-director>,能够尝试<app-router>或者<more-routing>。它们都以能够兑现更头眼昏花作用的路由(通配符,HTML5历史API,动态内容)。作者个人更赏识<flatiron-director>,因为它大致易用并且能够和<core-animated-pages>很好地合作使用

例子: <more-routing>

XHTML

<more-route-switch> <template when-route=”user”>
<header>User {{params.userId}}</header> <template if=”{{
route(‘user-bio’).active }}”> All the details about
{{params.userId}}. </template> </template> <template
when-route=”/about”> It’s a routing demo! <a _href=”{{
urlFor(‘user-bio’, {userId: 1}) }}”>Read about user 1</a>.
</template> <template else> The index. </template>
</more-route-switch>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<more-route-switch>
  <template when-route="user">
    <header>User {{params.userId}}</header>
    <template if="{{ route(‘user-bio’).active }}">
      All the details about {{params.userId}}.
    </template>
  </template>
  <template when-route="/about">
    It’s a routing demo!
    <a _href="{{ urlFor(‘user-bio’, {userId: 1}) }}">Read about user 1</a>.
  </template>
  <template else>
    The index.
  </template>
</more-route-switch>

例子: <app-router>

XHTML

<app-route path=”/home”
import=”/pages/home-page.html”></app-route> <app-route
path=”/customer/*”
import=”/pages/customer-page.html”></app-route> <app-route
path=”/order/:id” import=”/pages/order-page.html”></app-route>
<app-route path=”*”
import=”/pages/not-found-page.html”></app-route>

1
2
3
4
<app-route path="/home" import="/pages/home-page.html"></app-route>
<app-route path="/customer/*" import="/pages/customer-page.html"></app-route>
<app-route path="/order/:id" import="/pages/order-page.html"></app-route>
<app-route path="*" import="/pages/not-found-page.html"></app-route>

豆蔻梢头、absolute相对定位:

特点:

a.会从文书档案流中退出,不受其余因素影响,定位是纯属的,相对定位的成分在文书档案流中从不地点,从文书档案流中脱离了出来,会晤包车型客车要素会填充掉它原先的地点。

b.定位地方相对于先是个颇有一定属性(即:position为relative或然为absolute属性卡塔尔(英语:State of Qatar)的祖辈成分。

当给成分设置相对定位值时:

   
 该因素会延着DOM树向上查找,直到找到七个独具一定属性的上代成分,则一定会相对于该因素。

     若祖先成分都未有稳固属性,则会绝对于body体举行定点

c.相对固定的尖端本性:

 
 具有电动伸缩功能,将width设置为auto(或不设置,暗中同意为auto卡塔尔(英语:State of Qatar),相对定位元素会基于其left和right
自定伸缩其尺寸。举例:

注意:left、right必必要相等,且不超越其绝对成分减去该相对定位元素width的50%

键盘导航

键盘援助的根本不止是为了方便的访谈,它相通会使SPA客商刚到更开玩笑。

<core-a11y-keys>是贰个口径浏览器键盘事件的放置组件。它可以在你的使用里加多键盘帮助。这里有三个例子:

XHTML

<core-a11y-keys target=”{{parentElement}}” keys=”up down left right
space space+shift”
on-keys-pressed=”{{keyHandler}}”></core-a11y-keys>

1
2
3
<core-a11y-keys target="{{parentElement}}"
keys="up down left right space space+shift"
on-keys-pressed="{{keyHandler}}"></core-a11y-keys>

absolute应用—左右居中装置,margin左右auto

(1卡塔尔左右居中,定位元素展览会现居中状态,margin:0 auto +定宽+
左右left、right相等:

{ position:absolute;  left:0;  right:0;  width:50px;  margin:0 auto;}

(2卡塔尔定位成分占满父成分的肥瘦:

{ position:absolute;  left:0;  right:0 }

(3卡塔尔(英语:State of Qatar)优先取left值作为稳定标志,结合width宽度展现

{ position:absolute;  left:0;  right:0; width:50px;  }

注意

事件的target属性数据绑定到大家的电动绑定模块的parentElement属性。在这里个案例里,它是<body>成分。

key属性包蕴二个以空格分隔成分的列表,列表中包涵了要监听键位。当那一个构成的中间叁个被按下,<core-a11y-keys>触发二个keys-pressed事件并调用你的回调函数。

keys-pressed事件的微机使用<core-animated-pages>的selectNext/selectPrevious API去步向下后生可畏页或然再次来到上风度翩翩页:

JavaScript

template.keyHandler = function(e, detail, sender) { var pages =
document.querySelector(‘#pages’); switch (detail.key) { case ‘left’:
case ‘up’: pages.selectPrevious(); break; case ‘right’: case ‘down’:
pages.selectNext(); break; case ‘space’: detail.shift ?
pages.selectPrevious() : pages.selectNext(); break; } };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
template.keyHandler = function(e, detail, sender) {
  var pages = document.querySelector(‘#pages’);
 
  switch (detail.key) {
    case ‘left’:
    case ‘up’:
      pages.selectPrevious();
      break;
    case ‘right’:
    case ‘down’:
      pages.selectNext();
      break;
    case ‘space’:
      detail.shift ? pages.selectPrevious() : pages.selectNext();
      break;
  }
};

absolute应用—垂直居中设置,margin上下auto

{ position:absolute;  width:100px; height:50px;  margin:auto 0; top:0;
bottom:0; }

按需加载内容

假定您想顾客在您的应用里导航时动态加载内容要怎么办?只需一些变动,大家就足以支撑动态加载页面。

第风流浪漫,更新数据模型,使它饱含内容的U昂CoraL:

JavaScript

template.pages = [ {name: ‘Intro’, hash: ‘one’, url:
‘/tutorial/intro.html’}, {name: ‘Step 1’, hash: ‘two’, url:
‘/tutorial/step-1.html’}, … ];

1
2
3
4
5
template.pages = [
{name: ‘Intro’, hash: ‘one’, url: ‘/tutorial/intro.html’},
{name: ‘Step 1’, hash: ‘two’, url: ‘/tutorial/step-1.html’},
];

接下来校正菜单链接指向page.url实际不是#:

XHTML

<paper-item hash=”{{page.hash}}” noink> <a
href=”{{page.url}}”>{{page.name}}</a> </paper-item>

1
2
3
<paper-item hash="{{page.hash}}" noink>
<a href="{{page.url}}">{{page.name}}</a>
</paper-item>

终极,使用大家的<core-ajax>很好的朋友来博取内容:

XHTML

<core-ajax id=”ajax” auto url=”{{selectedPage.page.url}}”
handleAs=”document” on-core-response=”{{onResponse}}”>
</core-ajax>

1
2
3
<core-ajax id="ajax" auto url="{{selectedPage.page.url}}"
handleAs="document" on-core-response="{{onResponse}}">
</core-ajax>

您可以把<core-ajax>看作是四个内容调节器。它的url属性数据绑定到selectedPage.page.url。那代表,无论怎么时候三个新的美食指南条款被入选,XH奇骏(XMLHttpRequest的缩写,译者注卡塔尔(قطر‎就能够去获取相应的页面。当core-response触发时,onResponse就能把文书档案重返的风姿浪漫某个插入预先保留的容器里。

JavaScript

template.onResponse = function(e, detail, sender) { var article =
detail.response.querySelector(‘scroll-area article’); var pages =
document.querySelector(‘#pages’);
this.injectBoundHTML(article.innerHTML,
pages.selectedItem.firstElementChild); };

1
2
3
4
5
6
7
template.onResponse = function(e, detail, sender) {
  var article = detail.response.querySelector(‘scroll-area article’);
 
  var pages = document.querySelector(‘#pages’);
  this.injectBoundHTML(article.innerHTML,
                       pages.selectedItem.firstElementChild);
};

AJAX实例演示

二、相对稳固 relative

特点:

a.相对定位指的是它原先在文书档案流中的地点而开展的偏移

b.使用相对稳准时,无论是还是不是开展活动,成分如故攻克原本的上空

c.一贯绝没有错是它自个儿的起来地方

z-index
调治堆放顺序,
定位元素沿Z轴的职位,为正数则离客商更近,为负数,则离顾客更远。

特点:具备越来越高堆集顺序的要素总是处于堆集顺序相当低的要素的前边,更近乎顾客,可有负值,仅在固定成分上有效。z-index:1;接近客商在前,z-index:-1离家顾客,在后。

润饰和终结

此处有部分小技艺和法门你能够用来修正你的使用。

当多少个菜系条款被增选后,关闭应用的抽屉菜单(drawer):

JavaScript

<core-menu … on-core-select=”{{menuItemSelected}}”>

1
<core-menu … on-core-select="{{menuItemSelected}}">

JavaScript

template.menuItemSelected = function(e, detail, sender) { if
(detail.isSelected) { scaffold.closeDrawer(); } };

1
2
3
4
5
template.menuItemSelected = function(e, detail, sender) {
  if (detail.isSelected) {
    scaffold.closeDrawer();
  }
};

为导航选取条目款项设置区别的Logo:

XHTML

<paper-item noink> <ore-icon icon=”label{{route != page.hash ?
‘-outline’ : ”}}”></core-icon> <core-animated-pages …
on-tap=”{{cyclePages}}”>

1
2
3
<paper-item noink>
  &lt;ore-icon icon="label{{route != page.hash ? ‘-outline’ : ”}}">&lt;/core-icon>
<core-animated-pages … on-tap="{{cyclePages}}">

JavaScript

template.cyclePages = function(e, detail, sender) { // If click was on a
link, navigate and don’t cycle page. if (e.path[0].localName == ‘a’) {
return; } e.shiftKey ? sender.selectPrevious(true) :
sender.selectNext(true); };

1
2
3
4
5
6
7
8
template.cyclePages = function(e, detail, sender) {
  // If click was on a link, navigate and don’t cycle page.
  if (e.path[0].localName == ‘a’) {
    return;
  }
  e.shiftKey ? sender.selectPrevious(true) :
               sender.selectNext(true);
};

三、固定定位 fixed

特点:

a、成分position被安装为fixed时,那一个成分就被固化住了,被固化的要素不会随着滚动条的拖动而改正地方,在视线中,成分的职位是不会改动的。

b、定位的是离开浏览器的职位,始终不改变。

c 、常用于页面上的回来顶上部分按键

{ position:fixed; top:30px;  left:160px; width: 60px;  height:60px;  }

结束语

到现在,你应该通晓使用Polymer和web组件构建的单页应用的中坚构架了。这大概和构建守旧的行使有所不相同,但一言以蔽之,组件让事情变得轻松多了。当你重用(宗旨)组件和应用Polymer的多寡绑定特性时,你能够写越来越少的CSS/JS。能够写越来越少的代码的以为真好!

赞 收藏
评论

12、浮动 float

概念:

安装了float属性的因素为浮动成分,浮动成分会从经常看见文书档案流中分离,但转换成分影响的不独有是同心同德,它会潜移默化附近的因素对齐进行环绕。

包含块:浮动成分的饱含块正是离浮动成分近些日子的块级祖先成分。

至于我:周进林

图片 2

茫茫大海中的生机勃勃枚程序员,为了发展为叁个男神人类而使劲着。关怀java、python、linux、vim等(腾讯网博客园:@酒肉和尚–进林)

个人主页 ·
小编的散文 ·
20 ·
 

图片 3

块级元素-block element

各样块级元素暗中认可占生龙活虎行低度,生龙活虎行内扩展叁个块级成分后,日常不可能加多任何因素(成分浮动后除此之外),多个块级元素一而再再而三编辑时,会在页面自动换行显示,块级成分平日可嵌套块级成分或行内成分,宽度缺省为百分之百,除非设定宽度。

块级成分何奇之有:address blockquote块援用、center居中对齐块
、dir-目录列表  div   dl-定义列表

form-交互作用表单、 h-标题、    hr-水平分割线、menu-菜单列表 、ol-有种类表
 ul–冬天列表 p–段落

pre–格式化文本  table–表格

内联元素-inline element:

和其他因素都在豆蔻梢头行上,

高、行高、内边距、外边距不可退换,width、height无效,可设置line-height

上升的幅度就是它的文字或然图片的增长幅度,不可校正,宽度随内容的成形而变化

margin只有 margin-left,margin-right有效,上下无效

padding唯有padding-left,padding-right有效,上下无效

浮动成分的特色:

随意一个要素是行内成分依旧块级元素,大器晚成经棉被服装置了转换,这浮动元素会变卦叁个块级框,能够设置它的width和height
,
   由此float常用作制作横向排列的菜系,能够设置大小何况横向排列。

变动成分体现法则:

a、浮动成分在float的时候,其margin不会超越满含块的padding
,私下认可寻常状态下不会高于,但也可决定调换元素的margin为负值超过,碰撞到含有块的padding结束。

b、若是有八个变化成分,浮动成分会按顺序排下来而不会产生重叠的气象。

c、包括块成分的增长幅度丰裕大,多个因素一个向左float,二个向右float,相互无交集,

     
假使父包涵块的宽窄小于多少个变化成分的幅度总和,二个左float,三个右float,那么后边的元素将会向下转移,其上方是后边浮动框的底端。

发表评论

电子邮件地址不会被公开。 必填项已用*标注