翻页导航栏的使用方法-read.doc

使用说明
编写人

日期
2008年10 月 28 日
简介
在网页中,只要是碰到有列表显示的页面,多数都会有翻页导航栏帮助用户导航到其他的页号看列表内容。例如google搜寻出来的结果列表下面就有翻页导航栏,这就不用多作解释了,人人都会用。
因项目要求,本人用js写了一个翻页导航栏工具,自认为有实用价值,想拿出来共产一把。同时也欢迎大家多提意见。
此控件的开发原则是:
翻页功能和业务坚决脱离:前台js部分只管接收后台传回的记录数量,不管后台是从哪来的数据以及如何计算出的结果。前台得到的记录总数是动态显示翻页导航栏的基础。
调用简洁方便:让开发人员以尽可能方便的方式调用。
灵活度高:回调方法名称、传入的参数个数和类型不限制。用户能自定义翻页导航栏的状态信息、显示数字个数、每页最多记录数等。
使用范围广:不仅能在当前的Ajax模式下使用,还能在非Ajax模式下用。
翻页导航栏在工程中的部署
在Dynamic Web Project中,开发人员可以自己定义一个专门存放公用的js文件的路径和一个公用的存放图片的路径。、、,将文件名以icon_打头的几个图片文件放到公用的存放图片的路径下。部署就这样完成了。如图显示(见工程名为navigationbar的dynamic web project的文件结构,仅作参考):
运行时外观
运行时的样子如下图所示:
以上只显示翻页导航栏,列表内容省略了。本人认为它本身就不应该和列表紧密绑定,列表如何显示应该由开发人员随意处理。
调用方式和步骤
开发人员调用步骤如下:
在页面中引入js文件。如下显示:
添加这3句话
在页面的某个区域指定翻页导航栏的显示位置。如下显示:
添加这1句话。Div的id可以自己定义。以后会用innerHTML的方式显示翻页导航栏。
传送工程虚拟路径给js。如下显示:
页面载入到浏览器完毕后将虚拟路径传给js,以便在js中能组装图片的存放路径。
在自己的js中调用,有两种方式可用,开发人员可任选1种或者二者结合。
用直接设置属性值的方式调用。
,其中有详细的注释。
用向构造方法中传参数的方式调用。
请参见具体例子。,其中有详细的注释。
参考资料及附表
源代码请参见工程navigationbar。
接口方法一览表:
方法名称
描述
setCallbackfunc(callbackfunc)
设置回调方法。其中的callbackfunc是回调方法的名称,不需要用引号或双引号括起来。这个回调方法在翻页的时候被启动。开发人员还可以在这个方法中传入更多的参数,以便在回调方法中得到这些参数内容然后作进一步的处理。
setImgPath(imgPath)
设置存放图片的路径,以便能正确显示翻页导航栏中的那些箭头图片。
getImgPath()
获取存放图片路径。通常情况下用不到。
setCurrentPageNo(pageNo)
设置当前页号。
getCurrentPageN