`

flex 编写分页导航条(demo) 以及 label link事件学习

阅读更多
label对象:id txt,如果想将触发link事件的话:需要将selectable="true"
txt.htmlText = "<a href='event:click'>con</a>“;
txt.addEventListener(TextEvent.LINK,linkhandle);

function linkhandle(textEvt:TextEvent):void{
    trace(textEvt.type);   //link

    trace(textEvt.text);   //click

    trace(textEvt.target.text) ;   //con
}


=============

分页组件:

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="30" xmlns:local="*" creationComplete="init()" contentBackgroundColor="#86BC92" fontWeight="bold"
>
<fx:Metadata>
[Event(name="navPagerEvent",type="list.comp.events.NavPagerEvent")]
</fx:Metadata>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import list.comp.events.NavPagerEvent;

import mx.events.FlexEvent;

[Bindable] public var pageIndex:int = 1;//当前页
[Bindable] public var pageSize:int = 10;//每页大小
[Bindable] public var pageCount:int = 0;//总共页数
[Bindable] public var totalCount:int = 0;//总共记录数
[Bindable] public var start:int = 1;//显示开始记录号
[Bindable] public var end:int = 1;//显示结束记录号
[Bindable] public var range:int = 3;//范围


protected function init():void{
onChangeHandler();
rangLabel.addEventListener(TextEvent.LINK,text1_linkHandler);

}
protected function btn_clickHandler(event:MouseEvent,pageIndex:int):void
{
if(pageIndex>0){
this.pageIndex = pageIndex;
var ev:NavPagerEvent  = new NavPagerEvent('navPagerEvent',this.pageIndex,this.pageSize);
onChangeHandler();
this.dispatchEvent(ev);
}
}
[Bindable]
protected function isFirstEnabled():Boolean{
if(this.totalCount >0){
return true;
}
return false;
}
[Bindable]
internal function isLastEnabled():Boolean{
if(this.totalCount >0){
return true;
}
return false;
}
[Bindable]
private function isBeforeEnabled():Boolean{
if(this.totalCount >0){
if(this.pageIndex>1){
return true;
}else{
return false;
}
}
return false;
}
[Bindable]
internal function isNextEnabled():Boolean{
if(this.totalCount >0){
if(this.pageIndex* this.pageSize < this.totalCount){
return true;
}else{
return false;
}
}
return false;
}

protected function onChangeHandler():void
{
if(this.pageIndex<1){
this.pageIndex = 1;
}
if(this.totalCount<0){
this.totalCount = 0;
}
if(this.pageSize<1){
this.pageSize = 10;
}
if(this.totalCount >0){
this.pageCount = (this.totalCount +this.pageSize -1)/this.pageSize;
}else{
this.pageCount = 0;
}
this.start = (this.pageIndex -1) * this.pageSize;
this.end = start + this.pageSize -1;
if(this.end >= this.totalCount){
this.end = this.totalCount -1;
}
initRangeInfo();
}

internal function initRangeInfo():void{
var front:int = this.pageIndex - this.range;
var back:int  = this.pageIndex + this.range;
var buf:String = "<p>";
// 如果当前页是5,前面一截就是234,后面一截就是678      
if (this.pageCount > 1) {      
var tempBack:int = this.pageCount;      
var tempFront:int = 1;      
if (back < this.pageCount){      
tempBack = back;  
}
if (front > 1){      
tempFront = front;      
}
if(tempFront > 1){
buf += "...&nbsp;";
}
for (var i:int = tempFront; i <= tempBack; i++) {      
if (this.pageIndex == i) {      
buf += "<font color = '#ff0000'>" + i + "</font>&nbsp;";      
} else {      
buf +="<a href='event:" + i + "' >" + i +"</a>&nbsp;";
}      
}
if(tempBack < this.pageCount){
buf += "...&nbsp;";
}
}
buf += "</p>"
rangLabel.htmlText = buf;
}


protected function text1_linkHandler(event:TextEvent):void
{
var text:String = event.text;
var tmp:int = parseInt(text);
btn_clickHandler(null,tmp);
}

]]>
</fx:Script>
<s:layout>
<s:HorizontalLayout />
</s:layout>
<s:Group width="50%" height="30"  >
<s:layout>
<s:HorizontalLayout  horizontalAlign="left" verticalAlign="middle" />
</s:layout>
<mx:Text text="{'  第'+ pageIndex +'页/'+ pageCount +'页'+'  显示'+ start +'到' + end +'条   共'+ totalCount + '条记录'}" fontSize="12"/>
</s:Group>
<s:Group width="50%" height="30" >
<s:layout>
<s:HorizontalLayout  verticalAlign="middle" horizontalAlign="right"/>
</s:layout>
<mx:LinkButton id="lbtnFirst" label="首页"  click="btn_clickHandler(event,1)" enabled="{isFirstEnabled()}" fontSize="12"/>
<mx:LinkButton id="lbtnPrevious" label="上一页" click="btn_clickHandler(event,pageIndex - 1)" enabled="{isBeforeEnabled()}" fontSize="12"/>
<mx:Label  selectable="true" enabled="true" htmlText=""  letterSpacing="3" id="rangLabel"   fontSize="12"/>
<mx:LinkButton id="lbtnNext" label="下一页" click="btn_clickHandler(event,pageIndex + 1)" enabled="{isNextEnabled()}" fontSize="12"/>
<mx:LinkButton id="lbtnLast" label="尾页" click="btn_clickHandler(event,pageCount)" enabled="{isLastEnabled()}" fontSize="12"/>
</s:Group>

</s:Group>
分享到:
评论

相关推荐

    Flex编写的导航条组件

    其实也就是一个小小的小组件而已,希望贡献出来对加大有所帮助。 数据采用XML来组装,可以根据自己给定的数据内容,来动态显示导航条。

    flex分页 很好很强大

    Flex分页是一种在Web开发中实现页面数据分块显示的技术,尤其在大数据量展示时,它能有效地提高用户体验,减少页面加载时间,并提供流畅的滚动交互。标题“flex分页 很好很强大”和描述“简单引用 很方便”暗示了...

    flex datagrid 前台 分页

    通过分析和学习这些内容,开发者可以更好地理解和实现Flex DataGrid的前台分页功能。 总的来说,前台分页是一种提高用户体验的策略,但同时也需要谨慎处理以避免内存和性能问题。正确实现前台分页,可以使Flex ...

    flex 分页

    在这个场景下,我们将深入探讨Flex中的分页实现以及相关知识点。 首先,我们要理解Flex分页的基本概念。在Flex中,分页通常涉及到用户界面组件(UI Components)如Datagrid或List,它们用于显示大量数据。为了优化...

    flex通用分页控件

    Flex通用分页控件是基于Adobe Flex框架开发的一种组件,用于在Web应用程序中实现数据的分页显示。Flex是一个开放源代码的、基于XML的编程语言,主要用于构建富互联网应用程序(Rich Internet Applications,RIA)。...

    Flex DataGrid 分页

    通过阅读博客文章,我们可以深入了解Flex DataGrid分页的实现细节,学习如何利用PagerBar.mxml或其他工具来优化我们的Flex应用。同时,也可以从中获取灵感,为自己的项目设计更高效、更易用的分页解决方案。

    Flex分页技术

    在Flex开发中,数据展示通常会涉及到大量的数据处理,如分页、排序、过滤和关键字搜索等。在Flex中,我们可以使用DataGrid组件来实现这些功能,提高用户体验并优化性能。 1. **Flex DataGrid 分页技术**: Flex ...

    FLEX DATA GRID 分页

    一般会创建一个分页栏(Pager)组件,包含“上一页”、“下一页”按钮以及页码选择器,根据用户的操作更新DataGrid的数据源。 4. **数据提供者与分页**: 数据提供者需支持分页操作,例如可以使用`ICollectionView...

    Flex +BlazeDS+java后台分页的实现

    Flex + BlazeDS + Java 后台分页的实现是一个关键的技术环节,特别是在开发大型Web应用程序时,为了提高用户体验和系统性能,数据通常需要通过分页的方式进行加载。本方案主要探讨了如何在Flex前端和BlazeDS中间件与...

    flex 画流程图 简单demo

    这个简单的Flex流程图Demo是一个很好的起点,适合初学者学习如何在Flex环境中创建图形化的用户界面,并理解Flex组件、事件处理和图形绘制的概念。通过研究源代码和实践,可以深入了解Flex编程并提升开发技能。

    Flex 分页组件,flex自定义组件

    Flex分页组件是一种在Flex应用程序中用于展示大量数据并分批加载的重要工具。它通过将大量数据分成小块,每次只加载一部分,提高了用户界面的响应速度和用户体验。本组件适用于那些需要显示大量数据,如表格、列表...

    flex分页工具条组件

    Flex分页工具条组件是一种在Flex应用程序中实现数据分页显示的重要组件。它允许用户在大量数据中分块浏览,提高用户体验,降低一次性加载过多数据对系统资源的需求。Flex是Adobe开发的一种基于ActionScript和MXML的...

    Flex分页显示实例

    本实例将聚焦于“Flex分页显示”,这是一种使用Adobe Flex框架实现的数据分页方法。Flex是基于ActionScript 3.0的开源框架,用于构建富互联网应用程序(RIA)。它提供了丰富的组件库和强大的数据绑定机制,使得开发...

    flex分页控件的使用

    在Flex开发中,分页控件是用于展示大量数据时必不可少的一个组件,它允许用户以较小的数据块(每页)浏览整个数据集,从而提高用户体验并减轻服务器负载。本篇文章将详细讲解如何在Flex中创建和使用分页控件。 首先...

    flex4组建以及DEMO实例.安装序列号

    Demo实例是学习Flex4的关键途径,它们展示了如何使用Flex4的各种组件和技术。例如,登录Demo可以教你如何处理用户输入和验证;样式布局Demo则展示如何自定义组件外观和组织界面元素;报表Demo则帮助理解如何展示和...

    flex 分页控件

    综上所述,创建一个自定义的Flex分页控件涉及到组件设计、事件处理、数据绑定、皮肤化等多个方面。通过深入理解和实践这些知识点,开发者可以构建出功能强大、易于使用的分页工具,提升应用的用户体验。提供的文件...

    flex 分页学习例子

    在本学习例子中,"flex 分页学习例子"着重于如何在Flex应用中实现分页功能,这对于处理大量数据的展示和用户体验优化至关重要。 首先,我们要理解Flex中的分页概念。分页是将大量数据分割成多个部分,每次只显示一...

    flex分页代码

    综上所述,Flex分页代码涉及了数据模型、数据提供器、分页组件的选择与定制,以及数据虚拟化等技术。通过学习和实践,我们可以创建高效且用户友好的分页界面。同时,查阅相关博客和示例代码能进一步提升我们的理解。

    flex air 类似iphone的导航条

    在Flex Air开发中,创建一个类似iPhone的导航条可以为应用程序提供更加直观和用户友好的界面体验。这个项目可能是从网络上获取的源代码,并经过了个人的调整和优化,以适应特定的需求或改进功能。Flex Air是Adobe的...

    flex自定义组件事件DEMO

    4. 示例学习:在"flex自定义组件事件DEMO"中,你可以看到如何在自定义组件中创建并派发自定义事件,以及如何在其他地方监听和响应这些事件。通过分析代码,可以了解事件生命周期、事件冒泡和捕获的概念,以及如何在...

Global site tag (gtag.js) - Google Analytics