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

翻页导航栏V1.0 使用说明 编写人 Roger.Que 日期 2008年10 月 28 日  简介 在网页中，只要是碰到有列表显示的页面，多数都会有翻页导航栏帮助用户导航到其他的页号看列表内容。例如google搜寻出来的结果列表下面就有翻页导航栏，这就不用多作解释了，人人都会用。 因项目要求，本人用js写了一个翻页导航栏工具，自认为有实用价值，想拿出来共产一把。同时也欢迎大家多提意见。 此控件的开发原则是： 翻页功能和业务坚决脱离：前台js部分只管接收后台传回的记录数量，不管后台是从哪来的数据以及如何计算出的结果。前台得到的记录总数是动态显示翻页导航栏的基础。 调用简洁方便：让开发人员以尽可能方便的方式调用。 灵活度高：回调方法名称、传入的参数个数和类型不限制。用户能自定义翻页导航栏的状态信息、显示数字个数、每页最多记录数等。 使用范围广：不仅能在当前的Ajax模式下使用，还能在非Ajax模式下用。 翻页导航栏在工程中的部署 在Dynamic Web Project中，开发人员可以自己定义一个专门存放公用的js文件的路径和一个公用的存放图片的路径。将arrayOper.js、stringOper.js、navigationBarLib.js放到公用的js文件的路径下，将文件名以icon_打头的几个图片文件放到公用的存放图片的路径下。部署就这样完成了。如图显示（见工程名为navigationbar的dynamic web project的文件结构，仅作参考）： 运行时外观 运行时的样子如下图所示： 以上只显示翻页导航栏，列表内容省略了。本人认为它本身就不应该和列表紧密绑定，列表如何显示应该由开发人员随意处理。 调用方式和步骤 开发人员调用步骤如下： 在页面中引入js文件。如下显示： 在页面的某个区域指定翻页导航栏的显示位置。如下显示： 传送工程虚拟路径给js。如下显示： 在自己的js中调用，有两种方式可用，开发人员可任选1种或者二者结合。 用直接设置属性值的方式调用。 请参见具体例子Navigationbar_test1.js，其中有详细的注释。 用向构造方法中传参数的方式调用。 请参见具体例子。Navigationbar_test.js，其中有详细的注释。 参考资料及附表 源代码请参见工程navigationbar。 接口方法一览表： 方法名称 描述 setCallbackfunc(callbackfunc) 设置回调方法。其中的callbackfunc是回调方法的名称，不需要用引号或双引号括起来。这个回调方法在翻页的时候被启动。开发人员还可以在这个方法中传入更多的参数，以便在回调方法中得到这些参数内容然后作进一步的处理。 setImgPath(imgPath) 设置存放图片的路径，以便能正确显示翻页导航栏中的那些箭头图片。 getImgPath() 获取存放图片路径。通常情况下用不到。 setCurrentPageNo(pageNo) 设置当前页号。 getCurrentPageNo() 获取当前页号。 setRecNumPerPage(size) 设置每页最多记录数。 getRecNumPerPage() 获取每页最多记录数。 setNumOfDigitalsToShow(digNum) 设置翻页导航栏上的最多的显示页号个数。 getNumOfDigitalsToShow() 获取翻页导航栏上的最多的显示页号个数。通常用不到。 setTotalRecCount(count) 设置总记录数量。 getTotalRecCount() 获取总记录数量。 genNavigationBar(navigationBarObj, divNavigationBar) 生成翻页导航栏的HTML。参数navigationBarObj表示翻页导航栏的实例；参数divNavigationBar表示显示翻页导航栏的div。这两个参数在生成翻页导航栏的过程中不起实质作用，它们的作用仅仅是将这两个对象保存起来，以便后面在必要的时候恢复对象，这些工作都会在组件内部自动实现。 FAQ 为什么在点击数字、箭头、’go’按钮进行翻页的时候会报javascript错误：缺少‘；’或缺少‘}’？ 答：目前在回调方法中尽可能避免用//符号。如果想要对某些内容进行注释，可考虑采用/*…*/符合。这看上去似乎不应该，这也是我们今后要改正的地方，也望大家帮忙能提出解决方案。 一个页面中能具有多个翻页导航栏吗？ 答：不行。这会使页面出现多个同样的控件和标识符，引发控制方面的混乱。如果一屏幕上必须出现多个翻页导航栏，建议每个翻页导航栏和列表都单独放在一个页面中，然后以iframe的方式显示在页面中。同样也希望大家能提出更好