同步頁面切換按鈕組的實現

2021-07-31 18:14:26 字數 1580 閱讀 3543

本文採用偽**的方式實現,理解思路即可。

在本文中,每頁最大能顯示5個按鈕,當前頁置高亮。

先來看看實現的效果,當前頁為3時,如下圖所示:

當前頁為5時,如下所示:

每頁顯示的按鈕數量為pagesinglecount;每頁起始位置的按鈕標號為initialbtn;每頁結束位置的按鈕標號為maxbtninsinglepage;當前頁的的標示為currentpage

在這裡,pagesinglecount = 5;

maxbtninsinglepage = initialbtn + pagesinglecount;

模板的偽**如下

ul.boxofbtns//按鈕組的盒子

//for迴圈中迴圈條件為

//initialbtn,(當前頁面)按鈕組的第乙個按鈕號碼

//maxbtninsinglepage,(當前頁面)按鈕組的最後乙個按鈕

-for (initialbtn; initialbtn < maxbtninsinglepage; initialbtn++) //當前頁的按鈕新增高亮樣式.active

-}-else") #

-}-}

後台**如下:

var length = msgs.length;							//總資訊數,其中msgs是從資料庫中查詢到的資料集合

var infosinglecount = 10; //每頁的資訊數

var totalpage = math.ceil(length/infosinglecount); //一共有多少頁

var pagesingelcount = 5; //人為設定的每頁按鈕數量

var halfbtns = math.floor(pagesingelcount/2); //每頁總按鈕數量的一半

var currentpage = parseint(req.query.p,10)||0; //currentpage由查詢字串獲取,為當前頁碼

var initialbtn = currentpage-halfbtns; //每頁的按鈕起始號碼

if (initialbtn<=0)

var maxbtninsinglepage = initialbtn+pagesingelcount;//每頁最大的按鈕號碼

if (maxbtninsinglepage>=totalpage)

var index = currentpage*infosinglecount;//獲取每頁的資訊起始標號

var singleshowinfos = msgs.slice(index,index+infosinglecount);//從總資訊中把要顯示的資訊擷取出來

//渲染

res.render('jade_template',);

C PDF Page操作 設定頁面切換按鈕

在以下示例中,將介紹在pdf文件頁面設定頁面切換按鈕的方法。示例中將頁面切換按鈕的新增分為了兩種情況,一種是設定按鈕跳轉到首頁 下頁 上頁或者最後一頁,另一種是設定按鈕跳轉到指定頁面。兩種方法適應不同的程式設計需要,可自行選擇合適的新增方法。這裡的 示例需要使用類庫spire.pdf for net...

QToolButton按鈕的切換

bool togglebutton 這個屬性儲存的是工具按鈕是否是切換按鈕。切換按鈕像檢查框一樣也有開 關狀態。預設情況下,工具按鈕不是切換按鈕。void qtoolbutton settogglebutton bool enable 設定工具按鈕是否是切換按鈕。void qtoolbutton t...

web頁面之切換輸入域組

web開發頁面中,可能會有一種情況,根據不同的型別,顯示不同的輸入域,如果輸入域過多,靠乙個個的隱藏或顯示輸入域 量很多,且不容易維護。我們可以給輸入域的樣式class進行設定,對其進行控制,顯示隱藏,就可以比較容易達到效果,且 量比較少。待補充。1.引入js庫,css樣式 oms css oms....