📄 navigationbarlib.js
字号:
/*--------------------------------------------------|
| 翻页导航栏 V1.0 |
|---------------------------------------------------|
| 作者： Roger.Que |
| 创建日期： |
|---------------------------------------------------|
| 修改者： Roger.Que |修改完成日期：2008年10月19日 |
| 修改者： Roger.Que |修改完成日期：2008年10月24日 |
| 修改者： Roger.Que |修改完成日期：2008年10月27日 |
| |
|--------------------------------------------------*/
/*************************全局变量区（开始）********************************/
var __gArrParam = new Array(); //用于保存回调方法的参数
var __gNavigationBarObj = null; //用于保存翻页导航栏对象的副本
var __gDivNavigationBar = null; //用于显示翻页导航栏的div标识
var __gNavigationBarForPreviewObj = null; //用于预览的翻页导航栏对象
var __gDivNavigationBarForPreview = null; //用于预览显示的翻页导航栏的div标识
var __gCurrentPageNo = 1; //暂时保存列表当前的页号
var __gTotalRecCount = 0; //暂时保存列表的总记录数
var __gTotalRecCountForPreview = 10000; //预览时假设的记录总数
var __gArrOrder = [1, 2, 3]; //翻页导航栏3部分的排列顺序
/*************************全局变量区（结束）********************************/
/**
* @param callbackfunc: 跳转到第几页的回调方法
* @param imgPath: 图片虚拟路径
* @param recNumPerPage: 每页显示的记录数
* @param numOfDigitalsToShow: 分页导航条上最多有几个数字
*/
function NavigationBar(callbackfunc, imgPath, recNumPerPage, numOfDigitalsToShow) {
this.currentPageNo = 1; //当前页号
this.recNumPerPage = (recNumPerPage == undefined ? 20 : recNumPerPage); //每页显示几条记录
this.numOfDigitalsToShow = (numOfDigitalsToShow == undefined ? 10 : numOfDigitalsToShow); //分页导航条上最多有几个数字
this.virtualPath = ""; //应用系统的虚拟路径
this.totalRecCount = 0; //总记录条数
this.imgPath = (imgPath == undefined ? "" : imgPath); //图片虚拟路径
this.callbackfunc = (callbackfunc == undefined ? null : callbackfunc); //跳转到第几页的回调方法
this.icon = {
llicon : (this.imgPath == "" ? "images/icon_rri.gif" : this.imgPath + "/icon_rri.gif"), //分页导航条上左左图片
lmicon : (this.imgPath == "" ? "images/icon_rr.gif" : this.imgPath + "/icon_rr.gif"), //分页导航条上左中图片
lricon : (this.imgPath == "" ? "images/icon_r.gif" : this.imgPath + "/icon_r.gif"), //分页导航条上左右图片
rlicon : (this.imgPath == "" ? "images/icon_l.gif" : this.imgPath + "/icon_l.gif"), //分页导航条上右左图片
rmicon : (this.imgPath == "" ? "images/icon_ll.gif" : this.imgPath + "/icon_ll.gif"), //分页导航条上右中图片
rricon : (this.imgPath == "" ? "images/icon_lli.gif" : this.imgPath + "/icon_lli.gif") //分页导航条上右右图片
}
this.arrParam = new Array(); //封装回调方法中的参数
this.statusIdentities = ['[C]', '[M]', '[T]', '[TR]']; //保存状态信息模板中有效的标识符。[C]表示当前页号，[M]表示每页最多记录数量，[T]表示总页数，[TR]表示总记录条数。
this.statusPattern = " 当前为第 [C] 页， 共 [TR] 条， 共 [T] 页"; //保存状态信息的模板
this.statusIdentityAndValue = new Array(); //保存状态信息模板中的标识符和对应的值。每个元素的格式如'[C],30'
this.htmlPart1 = ""; //翻页导航栏的第一部分
this.htmlPart2 = ""; //翻页导航栏的第二部分
this.htmlPart3 = ""; //翻页导航栏的第三部分
this.arrPartForShowing = [1, 2, 3]; //保存将显示哪些部分。1对应htmlPart1，2对应htmlPart2，3对应htmlPart3。
this.arrOrder = [1, 2, 3]; //翻页导航栏3部分的排列顺序
}
NavigationBar.prototype.setCallbackfunc = function(callbackfunc) {
this.callbackfunc = callbackfunc;
//将用户传进来的额外的参数保存到数组中
for (var i = 1; i < arguments.length; i++) {
this.arrParam[i - 1] = arguments[i];
}
__gArrParam = this.arrParam;
}
NavigationBar.prototype.getCallbackfunc = function() {
return this.callbackfunc;
}
NavigationBar.prototype.setImgPath = function(imgPath) {
this.imgPath = imgPath;
this.icon = {
llicon : (this.imgPath == "" ? "images/icon_rri.gif" : this.imgPath + "/icon_rri.gif"), //分页导航条上左左图片
lmicon : (this.imgPath == "" ? "images/icon_rr.gif" : this.imgPath + "/icon_rr.gif"), //分页导航条上左中图片
lricon : (this.imgPath == "" ? "images/icon_r.gif" : this.imgPath + "/icon_r.gif"), //分页导航条上左右图片
rlicon : (this.imgPath == "" ? "images/icon_l.gif" : this.imgPath + "/icon_l.gif"), //分页导航条上右左图片
rmicon : (this.imgPath == "" ? "images/icon_ll.gif" : this.imgPath + "/icon_ll.gif"), //分页导航条上右中图片
rricon : (this.imgPath == "" ? "images/icon_lli.gif" : this.imgPath + "/icon_lli.gif") //分页导航条上右右图片
}
}
NavigationBar.prototype.getImgPath = function() {
return this.imgPath;
}
NavigationBar.prototype.setCurrentPageNo = function(num) {
this.currentPageNo = num;
}
NavigationBar.prototype.getCurrentPageNo = function() {
return this.currentPageNo;
}
NavigationBar.prototype.setRecNumPerPage = function(num) {
this.recNumPerPage = num;
}
NavigationBar.prototype.getRecNumPerPage = function() {
return this.recNumPerPage;
}
NavigationBar.prototype.setNumOfDigitalsToShow = function(num) {
this.numOfDigitalsToShow = num;
}
NavigationBar.prototype.getNumOfDigitalsToShow = function() {
return this.numOfDigitalsToShow;
}
NavigationBar.prototype.setVirtualPath = function(str) {
this.virtualPath = str;
}
NavigationBar.prototype.getVirtualPath = function() {
return this.virtualPath;
}
NavigationBar.prototype.setTotalRecCount = function(num) {
this.totalRecCount = num;
}
NavigationBar.prototype.getTotalRecCount = function() {
return this.totalRecCount;
}
NavigationBar.prototype.setStatusPattern = function(strPattern) {
this.statusPattern = strPattern;
}
NavigationBar.prototype.getStatusPattern = function() {
return this.statusPattern;
}
/*
* 根据各属性的状态生成翻页导航栏
*/
NavigationBar.prototype.genNavigationBar = function(navigationBarObj, divNavigationBar) {
var strHTML = "";
var totalPageNum = Math.ceil(this.totalRecCount / this.recNumPerPage);
var endPageNo = Math.ceil(this.currentPageNo / this.numOfDigitalsToShow) * this.numOfDigitalsToShow;
var startPageNo = endPageNo - this.numOfDigitalsToShow + 1;
if (endPageNo > totalPageNum)
{
endPageNo = totalPageNum;
}
this.statusIdentityAndValue.removeAll();
this.statusIdentityAndValue.push('[C],' + this.currentPageNo); //存放当前页号的标识符和值
this.statusIdentityAndValue.push('[TR],' + this.totalRecCount); //存放总记录数的标识符和值
this.statusIdentityAndValue.push('[T],' + totalPageNum); //存放总页数的标识符和值
this.statusIdentityAndValue.push('[M],' + this.recNumPerPage); //存放每页记录数量的标识符和值
strHTML += "<table style='font-size:14'>";
strHTML += "<tr>";
this.htmlPart1 = " <td>";
if (this.currentPageNo == 1 && totalPageNum > 0)
{
this.htmlPart1 += "<img src='" + this.icon.llicon + "' alt='第1页' width=9 height=9> ";
this.htmlPart1 += "<img src='" + this.icon.lmicon + "' alt='前一代开始页' width=13 height=9> ";
this.htmlPart1 += "<img src='" + this.icon.lricon + "' alt='前1页' width=6 height=9> ";
} else if (this.currentPageNo > 1 && this.currentPageNo <= this.numOfDigitalsToShow)
{
this.htmlPart1 += "<img src='" + this.icon.llicon + "' alt='第1页' width=9 height=9 style='cursor:hand' onClick='javascript:callFunc(" + this.callbackfunc + ", 1);'> ";
this.htmlPart1 += "<img src='" + this.icon.lmicon + "' alt='前一代开始页' width=13 height=9> ";
this.htmlPart1 += "<img src='" + this.icon.lricon + "' alt='前1页' width=6 height=9 style='cursor:hand' onClick='javascript:callFunc(" + this.callbackfunc + "," + (parseInt(this.currentPageNo)-1) + ");'> ";
} else if (this.currentPageNo > this.numOfDigitalsToShow)
{
var pageNoWouldBe = (Math.ceil(this.currentPageNo / this.numOfDigitalsToShow) - 1) * this.numOfDigitalsToShow + 1 - this.numOfDigitalsToShow;
this.htmlPart1 += "<img src='" + this.icon.llicon + "' alt='第1页' width=9 height=9 style='cursor:hand' onClick='javascript:callFunc(" + this.callbackfunc + ", 1);'> ";
this.htmlPart1 += "<img src='" + this.icon.lmicon + "' alt='前一代开始页' width=13 height=9 style='cursor:hand' onClick='javascript:callFunc(" + this.callbackfunc + "," + pageNoWouldBe + ");'> ";
this.htmlPart1 += "<img src='" + this.icon.lricon + "' alt='前1页' width=6 height=9 style='cursor:hand' onClick='javascript:callFunc(" + this.callbackfunc + "," + (parseInt(this.currentPageNo)-1) + ");'> ";
}
this.htmlPart1 += " ";
for (var i=startPageNo; i<=endPageNo; i++)
{
if (i == this.currentPageNo)
{
this.htmlPart1 += "<a href='javascript:callFunc(" + this.callbackfunc + "," + i + ");'><font color=red><strong>" + i + "</strong></font></a> ";
} else {
this.htmlPart1 += "<a href='javascript:callFunc(" + this.callbackfunc + "," + i + ");'>" + i + "</a> ";
}
}
this.htmlPart1 += " ";
if (this.currentPageNo == totalPageNum)
{
this.htmlPart1 += "<img src='" + this.icon.rlicon + "' alt='后1页' width=5 height=9> ";
this.htmlPart1 += "<img src='" + this.icon.rmicon + "' alt='后一代开始页' width=13 height=9> ";
this.htmlPart1 += "<img src='" + this.icon.rricon + "' alt='后1页' width=9 height=9> ";
} else if (this.currentPageNo < totalPageNum && this.currentPageNo >= startPageNo && endPageNo == totalPageNum)
{
this.htmlPart1 += "<img src='" + this.icon.rlicon + "' alt='后1页' width=5 height=9 style='cursor:hand' onClick='javascript:callFunc(" + this.callbackfunc + "," + (parseInt(this.currentPageNo)+1) + ");'> ";
this.htmlPart1 += "<img src='" + this.icon.rmicon + "' alt='后一代开始页' width=13 height=9 > ";
this.htmlPart1 += "<img src='" + this.icon.rricon + "' alt='后1页' width=9 height=9 style='cursor:hand' onClick='javascript:callFunc(" + this.callbackfunc + "," + totalPageNum + ");'> ";
} else if (endPageNo < totalPageNum)
{
this.htmlPart1 += "<img src='" + this.icon.rlicon + "' alt='后1页' width=5 height=9 style='cursor:hand' onClick='javascript:callFunc(" + this.callbackfunc + "," + (parseInt(this.currentPageNo)+1) + ");'> ";
this.htmlPart1 += "<img src='" + this.icon.rmicon + "' alt='后一代开始页' width=13 height=9 style='cursor:hand' onClick='javascript:callFunc(" + this.callbackfunc + "," + (parseInt(endPageNo)+1) + ");'> ";
this.htmlPart1 += "<img src='" + this.icon.rricon + "' alt='后1页' width=9 height=9 style='cursor:hand' onClick='javascript:callFunc(" + this.callbackfunc + "," + totalPageNum + ");'> ";
}
this.htmlPart1 += " </td>";
this.htmlPart2 = " <td>";
this.htmlPart2 += " <input id='__txtGoToPageNum' type=text size=2 onmouseOver='this.focus();' onKeyUp='validateIt(this, " + totalPageNum + ", document.all.__btnGo);' onBlur='validateIt(this, " + totalPageNum + ", document.all.__btnGo);'><input id='__btnGo' type=button value='go' onClick='callFunc(" + this.callbackfunc + ", document.all.__txtGoToPageNum.value);' disabled>";
this.htmlPart2 += " </td>";
this.htmlPart3 = " <td>";
this.htmlPart3 += genStatusContent(this.statusPattern, this.statusIdentityAndValue);
this.htmlPart3 += " </td>";
for (var i = 0; i < this.arrPartForShowing.length; i++) {
if (this.arrPartForShowing[i] == 1) {
strHTML += this.htmlPart1;
} else if (this.arrPartForShowing[i] == 2) {
strHTML += this.htmlPart2;
} else if (this.arrPartForShowing[i] == 3) {
strHTML += this.htmlPart3;
}
}
strHTML += " <td width=60 align=right>";
strHTML += " <input id='__btnSetting' type=button value='设 置' onClick='setOutlooking();adjustPos(__divSetting);' onMouseOver='opacifyIt(this, 100);' onMouseOut='opacifyIt(this, 8);' style='filter: Alpha(Opacity=8);opacity:0.08;'>";
strHTML += " </td>";
strHTML += "</tr>";
strHTML += "</table>";
strHTML += getSettingHTML(); //追加设置的界面
if (navigationBarObj == undefined || divNavigationBar == undefined) {
alert("您错误地调用了genNavigationBar方法，翻页导航栏将失效并引发js错误！");
}
__gNavigationBarObj = navigationBarObj;
__gDivNavigationBar = divNavigationBar;
__gCurrentPageNo = this.currentPageNo;
__gTotalRecCount = this.totalRecCount;
return strHTML;
}
/*
* 根据各属性的状态生成预览用的翻页导航栏
*/
NavigationBar.prototype.genNavigationBarForPreview = function(navigationBarObj, divNavigationBar) {
var strHTML = "";
var totalPageNum = Math.ceil(this.totalRecCount / this.recNumPerPage);
var endPageNo = Math.ceil(this.currentPageNo / this.numOfDigitalsToShow) * this.numOfDigitalsToShow;
var startPageNo = endPageNo - this.numOfDigitalsToShow + 1;
if (endPageNo > totalPageNum)
{
endPageNo = totalPageNum;
}
this.statusIdentityAndValue.removeAll();
this.statusIdentityAndValue.push('[C],' + this.currentPageNo); //存放当前页号的标识符和值
this.statusIdentityAndValue.push('[TR],' + this.totalRecCount); //存放总记录数的标识符和值
this.statusIdentityAndValue.push('[T],' + totalPageNum); //存放总页数的标识符和值
this.statusIdentityAndValue.push('[M],' + this.recNumPerPage); //存放每页记录数量的标识符和值
strHTML += "<table style='font-size:14'>";
strHTML += "<tr>";
this.htmlPart1 = " <td>";
if (this.currentPageNo == 1 && totalPageNum > 0)
{
this.htmlPart1 += "<img src='" + this.icon.llicon + "' alt='第1页' width=9 height=9> ";
this.htmlPart1 += "<img src='" + this.icon.lmicon + "' alt='前一代开始页' width=13 height=9> ";
this.htmlPart1 += "<img src='" + this.icon.lricon + "' alt='前1页' width=6 height=9> ";
} else if (this.currentPageNo > 1 && this.currentPageNo <= this.numOfDigitalsToShow)
{
this.htmlPart1 += "<img src='" + this.icon.llicon + "' alt='第1页' width=9 height=9 style='cursor:hand' onClick='javascript:callFunc(" + this.callbackfunc + ", 1, true);'> ";
this.htmlPart1 += "<img src='" + this.icon.lmicon + "' alt='前一代开始页' width=13 height=9> ";
this.htmlPart1 += "<img src='" + this.icon.lricon + "' alt='前1页' width=6 height=9 style='cursor:hand' onClick='javascript:callFunc(" + this.callbackfunc + "," + (parseInt(this.currentPageNo)-1) + ", true);'> ";
} else if (this.currentPageNo > this.numOfDigitalsToShow)
{
var pageNoWouldBe = (Math.ceil(this.currentPageNo / this.numOfDigitalsToShow) - 1) * this.numOfDigitalsToShow + 1 - this.numOfDigitalsToShow;
this.htmlPart1 += "<img src='" + this.icon.llicon + "' alt='第1页' width=9 height=9 style='cursor:hand' onClick='javascript:callFunc(" + this.callbackfunc + ", 1, true);'> ";
this.htmlPart1 += "<img src='" + this.icon.lmicon + "' alt='前一代开始页' width=13 height=9 style='cursor:hand' onClick='javascript:callFunc(" + this.callbackfunc + "," + pageNoWouldBe + ", true);'> ";
this.htmlPart1 += "<img src='" + this.icon.lricon + "' alt='前1页' width=6 height=9 style='cursor:hand' onClick='javascript:callFunc(" + this.callbackfunc + "," + (parseInt(this.currentPageNo)-1) + ", true);'> ";
}
this.htmlPart1 += " ";
for (var i=startPageNo; i<=endPageNo; i++)
{
if (i == this.currentPageNo)
{
this.htmlPart1 += "<a href='javascript:callFunc(" + this.callbackfunc + "," + i + ", true);'><font color=red><strong>" + i + "</strong></font></a> ";
} else {
this.htmlPart1 += "<a href='javascript:callFunc(" + this.callbackfunc + "," + i + ", true);'>" + i + "</a> ";
}
}
this.htmlPart1 += " ";
if (this.currentPageNo == totalPageNum)
{
this.htmlPart1 += "<img src='" + this.icon.rlicon + "' alt='后1页' width=5 height=9> ";
this.htmlPart1 += "<img src='" + this.icon.rmicon + "' alt='后一代开始页' width=13 height=9> ";
this.htmlPart1 += "<img src='" + this.icon.rricon + "' alt='后1页' width=9 height=9> ";
} else if (this.currentPageNo < totalPageNum && this.currentPageNo >= startPageNo && endPageNo == totalPageNum)
{
this.htmlPart1 += "<img src='" + this.icon.rlicon + "' alt='后1页' width=5 height=9 style='cursor:hand' onClick='javascript:callFunc(" + this.callbackfunc + "," + (parseInt(this.currentPageNo)+1) + ", true);'> ";
this.htmlPart1 += "<img src='" + this.icon.rmicon + "' alt='后一代开始页' width=13 height=9 > ";
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -