澳门在线威尼斯官方 > 威尼斯澳门在线 > 远程分页类,Components构建单页面应用

原标题:远程分页类,Components构建单页面应用

浏览次数:149 时间:2019-10-06

用Web Components创设单页面应用

2015/01/19 · JavaScript · Web Components

本文由 伯乐在线 - 周进林 翻译,Mxt 校稿。未经许可,禁绝转发!
乌Crane语出处:www.polymer-project.org。应接参与翻译组。

您是何等运用Polymer创设一个单页应用的?那些主题材料大家在Polymer团队里早已问过比较多遍了。我们的答案(一直以来地)是“使用组件(component)!”。可是,使用新才具去化解现存的标题屡次不会即时获得断定的功效。如何把一群模块化组件组合到三个大型的实用的施用中去?

在本教程,笔者将会给您来得怎么着去营造一个功力完全的单页应用:

威尼斯澳门在线 1

  • 全盘使用Polymer的大旨要素构建
  • 使用响应式设计
  • 利用数据绑定特性过渡视图
  • 运用UHighlanderL路由和深层链接特性
  • 可采访键盘
  • 按需动态载入内容(可选)

 张开演示

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

应用架构

设计布局是起头多少个门类的首要职责之一。作为核心因素群集的一某个,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>)和导航链接 (<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

应用数据绑定

我们具有了多少个应用,但那不值得说。那离DXC90Y还远着。类似的符号在那边重现:

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-*来声称事件管理器。

本文由澳门在线威尼斯官方发布于威尼斯澳门在线,转载请注明出处:远程分页类,Components构建单页面应用

关键词:

上一篇:【威尼斯澳门在线】优化手艺

下一篇:没有了