一 : Angular2 PrimeNG分页模块学习
Angular2 PrimeNG源码学习
Paginator分页组件
GITHUB地址
首先分析一下分页功能的需求：
HTML模板代码：
部分代码片段
第一页按钮：
复制代码 代码如下:
<a href="#" #firstlink class="ui-paginator-first ui-paginator-element ui-state-default ui-corner-all" (mouseenter)="hoveredItem = $event.target" (mouseleave)="hoveredItem = null" (click)="changePageToFirst($event)" [ngClass]="{'ui-state-disabled':isFirstPage(), 'ui-state-hover':(firstlink === hoveredItem && !isFirstPage())}" [tabindex]="isFirstPage() ? -1 : null"> <span class="fa fa-step-backward"></span> </a>
这段代码涉及几个事件。
1.鼠标移入移出更改hoveredItem变量，并以此更改样式
2.点击click事件，调用changePageToFirst(event)处理
上一页，下一页，最后一页和第一页类似
分页按钮：
复制代码 代码如下:
<span class="ui-paginator-pages">
<a href="#" #plink *ngFor="let pageLink of pageLinks" class="ui-paginator-page ui-paginator-element ui-state-default ui-corner-all"(mouseenter)="hoveredItem = $event.target" (mouseleave)="hoveredItem = null" (click)="changePage(pageLink - 1, $event)"
[ngClass]="{'ui-state-hover':(plink === hoveredItem), 'ui-state-active': (pageLink-1 == getPage())}">{{pageLink}}
</a>
</span>
分页按钮是通过*ngFor从分页按钮数组中循环出来的，所以我们需要去确定这个数组
下面处理数组，和各个按钮的事件
//每页显示条目，默认0 @Input() rows: number = 0; //显示分页按钮数量，默认5 @Input() pageLinkSize: number = 5; //点击按钮后向父组件发送事件 @Output() onPageChange: EventEmitter<any> = new EventEmitter(); //调整每页显示条目数量的下拉菜单 @Input() rowsPerPageOptions: number[]; //定义分页按钮 pageLinks: number[]; _totalRecords: number = 0; _first: number = 0; //数据总数 @Input() get totalRecords(): number { return this._totalRecords; } set totalRecords(val: number) { this._totalRecords = val; this.updatePageLinks(); } //高亮按钮位置 @Input() get first(): number { return this._first; } set first(val: number) { this._first = val; this.updatePageLinks(); }
//获取一共多少页 getPageCount() { return Math.ceil(this.totalRecords / this.rows) || 1; } //获取当前页,0为第一页 getPage(): number { return Math.floor(this.first / this.rows); } //是否为第一页 isFirstPage(): boolean { return this.getPage() === 0; } //是否为最后一页 isLastPage(): boolean { return this.getPage() === this.getPageCount() - 1; }
//确定当先需要显示的起始分页和结束分页 calculatePageLinkBoundaries() { let numberOfPages = this.getPageCount(); let visiblePages = Math.min(this.pageLinkSize, numberOfPages); let start = Math.max(0, Math.ceil(this.getPage() - (visiblePages / 2))); let end = Math.min(numberOfPages - 1, start + visiblePages - 1); const delta = this.pageLinkSize - (end - start + 1); start = Math.max(0, start - delta); return [start, end]; } //更新需要显示的分页条目 updatePageLinks(): void { this.pageLinks = []; let boundaries = this.calculatePageLinkBoundaries; const start = boundaries[0]; const end = boundaries[1]; for (let i = start; i <= end; i++) { this.pageLinks.push(i + 1); } } //点击分页 changePage(p: number, event) { var pageCount = this.getPageCount(); if (p > 0 && p < pageCount) { this.first = this.rows * p; const state = { page: p, first: this.first, rows: this.rows, pageCount: pageCount }; this.updatePageLinks(); this.onPageChange.emit(state); } if (event) { event.preventDefault(); } }
//第一页 changePageToFirst(event){ this.changePage(0,event); } //上一页 changePageToPrev(event){ this.changePage(this.getPage() - 1,event); } //下一页 changePageToNext(event){ this.changePage(this.getPage() + 1,event); } //最后一页 changePageToLast(event){ this.changePage(this.getPageCount() - 1,event); } //通过下拉菜单更改每页显示数量 onRppChange(event){ this.rows = this.rowsPerPageOptions[event.target.selectedIndex]; this.changePageToFirst(event); } 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持61阅读。
二 : QQ空间主页模块制作
三 : QQ空间主页8月18日将下线微博模块你知道吗
今天打开QQ空间无意间发现一个消息：由于业务调整，QQ空间主页“微博模块”于2014年8月18日下线。点击查看详情可以看到：感谢您对我司业务的关注，由于业务调整，QQ空间主页“微博模块”于2014年8月18日下线，为此给您带来的不便敬请谅解。若您需使用腾讯微博业务，可前往：http://t.qq.com/，谢谢!
前不久传出腾讯对微博这一块的业务已经不重视了，腾讯内部人士透露，腾讯微博事业部已被撤销。据悉，腾讯微博不再做新功能，只维持基本的运营。而多个消息人士则表示，腾讯微博早已被战略性放弃，只是现在才正式宣布。对此互联网各界人士纷纷发表自己的看法评论，也有朋友写文章发表看法，腾讯不注重微博这一块，慌的应该是新浪微博了。
对于腾讯公司的业务调整我们并不能过分的去讨论，不过QQ空间主页8月18将下线微博模块却将成事实。前不久也有消息指出，QQ空间认证也暂时关闭了。
种种迹象表明，腾讯对这一块的市场已经做了相应调整。对于QQ这一块的相关业务慢慢在转型。可能是因为专注攻微信这一块吧，也可能是QQ业务方面想自我突破吧，这方面作为旁观者我们也只是旁观。不过对于想通过QQ空间做自媒体的朋友来说，是不是也是一个障碍呢?
打开腾讯QQ的应用管理器，发现腾讯软件达到51个，这么庞大的业务群，有些调整也是理所当然。相信以后我们看到的只会是更好的产品。
本文由守护袁昆撰写，来源于http://1029079293.qzone.qq.com，微信：yuankun0105。
四 : PS教程——教你制作空间主页动态皮肤模块-QQ空间
[№动画々] PS教程——教你制作空间主页动态皮肤模块61阅读| 精彩专题| 最新文章| 热门文章| 苏ICP备13036349号-1