您的位置:澳门新葡8455最新网站 > Web前端 > Components营造单页面应用,远程分页类

Components营造单页面应用,远程分页类

发布时间:2019-12-01 09:45编辑:Web前端浏览(79)

    用Web Components打造单页面应用

    2015/01/19 · JavaScript · Web Components

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

    您是怎么使用Polymer创设二个单页应用的?那些难点大家在Polymer团队里早已问过众多遍了。我们的答案(长久以来地)是“使用组件(component)!”。但是,使用新技能去解决现成的主题素材一再不会即时得到分明的效应。怎样把一批模块化组件组合到一个大型的实用的施用中去?

    在本教程,小编将会给您来得什么去创设三个意义完全的单页应用:

    澳门新葡8455最新网站 1

    • 一同选拔Polymer的主导要素构建
    • 使用响应式设计
    • 利用数据绑定天性过渡视图
    • 行使UEnclaveL路由和深层链接脾性
    • 可访问键盘
    • 按需动态载入内容(可选)

     展开演示

    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>
    ';

    行使布局

    澳门新葡8455最新网站,设计布局是始于三个类别的主要职务之意气风发。作为基本因素集结的蓬蓬勃勃部分,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卡塔尔(قطر‎;//总页数总计
      //得到当前页码-------------------
      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属性 进行改进
    提供 首页 上大器晚成页 下豆蔻梢头页 尾页 中间 过渡页 跳转菜单功用

    例子

    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>

    让咱们一块来深入那几个剧情的每生龙活虎部分

    抽屉菜单

    您身处导航成分里的符号都定义在滑走的行使抽屉菜单里。为了大家的目标,小编百折不回使用标题(<core-toolbar>卡塔尔(英语:State of Qatar)和导航链接 (<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″>被硬编码为筛选第叁个条文。我们随后会把它改为动态的。

    工具栏

    工具栏横跨了页面顶上部分并带有了效劳开关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>

    首要内容

    最后意气风发部分是为你的开始和结果而留的。它能够是其他的因素。<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)来使内容居杏月垂直居中。

    创建“视图”

    多视图(大概多页面)能够选取<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

    动用数据绑定

    我们富有了叁个施用,但这不值得风流浪漫提。那离DXC60Y还远着。近似的标识在这间再次现身:

    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的数码绑定本性自在消灭。

    机动绑定模板(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-*来声称事件微电脑。

    选取数据模型( 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}}">

    展示

    UOdysseyL路由(U牧马人L routing)和深层链接

    <flatiron-director>是二个包裹了flatiron director JS library(一个JS库)的web组件。退换它的route属性把UHavalL#号(U索罗德L 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;
    };

    别的路由库

    比如您反感<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>

    键盘导航

    键盘补助的珍重不止是为着便于的访谈,它相仿会使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>

    注意

    事件的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;
      }
    };

    按需加载内容

    假定你想客户在您的选取里导航时动态加载内容要如何做?只需一些转移,大家就足以支撑动态加载页面。

    首先,更新数据模型,使它包含内容的UPAJEROL:

    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实例演示

    润饰和终止

    此地有风流洒脱对小本领和诀要你能够用来校勘您的选取。

    当三个菜单条目款项被增选后,关闭应用的抽屉菜单(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);
    };

    结束语

    当今,你应有驾驭使用Polymer和web组件营造的单页应用的宗旨构架了。那也许和营造守旧的运用有所区别,但看来,组件让专门的学问变得轻易多了。当您重用(大旨)组件和接纳Polymer的数额绑定性猪时,你能够写更加少的CSS/JS。能够写越来越少的代码的感觉真好!

    赞 收藏 评论

    关于笔者:周进林

    澳门新葡8455最新网站 2

    茫茫大海中的风流浪漫枚技师,为了进步为贰个男神人类而努力着。关切java、python、linux、vim等(博客园今日头条:@酒肉和尚--进林) 个人主页 · 作者的篇章 · 20 ·  

    澳门新葡8455最新网站 3

    本文由澳门新葡8455最新网站发布于Web前端,转载请注明出处:Components营造单页面应用,远程分页类

    关键词:

上一篇:没有了

下一篇:没有了