9159金沙游艺场

图片 3
利用轮播原理结合hammer.js实现简洁的滑屏功能

解决win10系统dpi放大后,部分网页文字颜色很浅的问题

angular语法

用Web Components构建单页面应用

2015/01/19 · JavaScript
· Web Components

本文由 伯乐在线 –
周进林
翻译,Mxt
校稿。未经许可,禁止转载!
英文出处:www.polymer-project.org。欢迎加入翻译组。

你是如何使用Polymer构建一个单页应用的?这个问题我们在Polymer团队里已经问过很多遍了。我们的答案(一如既往地)是“使用组件(component)!”。然而,使用新技术去解决现有的问题往往不会马上得到显著的效果。如何把一堆模块化组件组合到一个大型的实用的应用中去?

在本教程,我将会给你展示如何去构建一个功能完整的单页应用:

图片 1

  • 完全使用Polymer的核心元素构建
  • 使用响应式设计
  • 使用数据绑定特性过渡视图
  • 使用URL路由和深层链接特性
  • 可访问键盘
  • 按需动态载入内容(可选)

 打开演示

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);//总页数计算
  //获得当前页码——————-
  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.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属性

工具栏

工具栏横跨了页面顶部并包含了功能按钮图标。满足这种功能的完美元素是<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”变量

相关文章

No Comments, Be The First!
近期评论
    功能
    网站地图xml地图