❶ jQuery向上向下翻頁，應用於觸屏時，向上向下翻頁
//聲明一個為0的變數做記錄值
doucument.body.addEvenetListener('touchstart',function(e){
//記錄下按下時的e.touches[0].clientY或者e.touches[0].pageY;
});
document.body.addEventListener('touchmove',function(e){
//獲取當前e.touches[0].clientY或者e.touches[0].pageY 並且與之前記錄的值比較 當前值大於之前值的話就可以判斷當前動作是在向上滑動 然後做翻頁的操作即可
});
如果用現成的js框架做的話 有一個叫quo.js的框架非常不錯
❷ 如何使用Bootstrap實現分頁及翻頁Bootstrap實現分頁的類有哪些
分頁（Pagination）
下表列出了 Bootstrap 提供的處理分頁的 class。
下面的實例演示了上表中所討論的 class .pagination 的用法：默認的分頁
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實例 - 默認的分頁</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</body>
</html>
結果如下所示：
分頁的狀態
下面的實例演示了上表中所討論的 class .disabled、.active 的用法：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實例 - 分頁的狀態</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="pagination">
<li><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li class="disabled"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</body>
</html>
結果如下所示：
分頁的大小
下面的實例演示了上表中所討論的 class .pagination-* 的用法：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實例 - 分頁的大小</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="pagination pagination-lg">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul><br>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul><br>
<ul class="pagination pagination-sm">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</body>
</html>
結果如下所示：
翻頁（Pager）
如果您想要創建一個簡單的分頁鏈接為用戶提供導航，可通過翻頁來實現。與分頁鏈接一樣，翻頁也是無序列表。默認情況下，鏈接是居中顯示。下表列出了 Bootstrap 處理翻頁的 class。
默認的翻頁
下面的實例演示了上表中所討論的 class .pager 的用法：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實例 - 默認的翻頁</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</body>
</html>
結果如下所示：
對齊的鏈接
下面的實例演示了上表中所討論的 class .previous、.next 的用法：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實例 - 翻頁中對齊的鏈接</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="pager">
<li class="previous"><a href="#">← Older</a></li>
<li class="next"><a href="#">Newer →</a></li>
</ul>
</body>
</html>
結果如下所示：
翻頁的狀態
下面的實例演示了上表中所討論的 class .disabled 的用法：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 實例 - 翻頁的狀態</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<ul class="pager">
<li class="previous disabled"><a href="#">← Older</a></li>
<li class="next"><a href="#">Newer →</a></li>
</ul>
</body>
</html>
❸ 如何使用Bootstrap實現分頁及翻頁
最近做的asp.netMVC項目中需要對數據列表進行分類，這個本來就是基於bootstrap開發的後台，因此也就想著bootstrap是否有分頁插件呢，或者說是基於jquery支持的分頁功能，這樣整體的網站後台風格便能夠統一，又不用自己去寫一套分頁的功能。
首先便是要下載Bootstrap Paginator了，github上便有這個的開源項目提供下載：
https://github.com/lyonlai/bootstrap-paginator
首先視圖的上面應該需要引入js和css文件，主要有三個文件，分別是bootstrap的css，jquery以及Paginator的js文件。其中網上搜到，貌似jquery必須要1.8版本以上，這個我沒有親自去測試看過。於是視圖的文件引用便：
<link href="css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript" src="js/bootstrap-paginator.js"></script>
然後，分頁的功能當然是一個基於Ajax的局部刷新才能夠吸引我們，當然這個便需要jquery的支持。之前自己搞的都是EasyUI的分頁，這次也應該有點不同。
<script>
$(function () {
var carId = 1;
$.ajax({
url: "/OA/Setting/GetDate",
datatype: 'json',
type: "Post",
data: "id=" + carId,
success: function (data) {
if (data != null) {
$.each(eval("(" + data + ")").list, function (index, item) { //遍歷返回的json
$("#list").append('<table id="data_table" class="table table-striped">');
$("#list").append('<thead>');
$("#list").append('<tr>');
$("#list").append('<th>Id</th>');
$("#list").append('<th>部門名稱</th>');
$("#list").append('<th>備注</th>');
$("#list").append('<th> </th>');
$("#list").append('</tr>');
$("#list").append('</thead>');
$("#list").append('<tbody>');
$("#list").append('<tr>');
$("#list").append('<td>' + item.Id + '</td>');
$("#list").append('<td>' + item.Name + '</td>');
$("#list").append('<td>備注</td>');
$("#list").append('<td>');
$("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' );">修改</button>');
$("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' );">刪除</button>');
$("#list").append('</td>');
$("#list").append('</tr>');
$("#list").append('</tbody>');
$("#list").append('<tr>');
$("#list").append('<td>內容</td>');
$("#list").append('<td>' + item.Message + '</td>');
$("#list").append('</tr>');
$("#list").append('</table>');
});
var pageCount = eval("(" + data + ")").pageCount; //取到pageCount的值(把返回數據轉成object類型)
var currentPage = eval("(" + data + ")").CurrentPage; //得到urrentPage
var options = {
bootstrapMajorVersion: 2, //版本
currentPage: currentPage, //當前頁數
totalPages: pageCount, //總頁數
itemTexts: function (type, page, current) {
switch (type) {
case "first":
return "首頁";
case "prev":
return "上一頁";
case "next":
return "下一頁";
case "last":
return "末頁";
case "page":
return page;
}
},//點擊事件，用於通過Ajax來刷新整個list列表
onPageClicked: function (event, originalEvent, type, page) {
$.ajax({
url: "/OA/Setting/GetDate?id=" + page,
type: "Post",
data: "page=" + page,
success: function (data1) {
if (data1 != null) {
$.each(eval("(" + data + ")").list, function (index, item) { //遍歷返回的json
$("#list").append('<table id="data_table" class="table table-striped">');
$("#list").append('<thead>');
$("#list").append('<tr>');
$("#list").append('<th>Id</th>');
$("#list").append('<th>部門名稱</th>');
$("#list").append('<th>備注</th>');
$("#list").append('<th> </th>');
$("#list").append('</tr>');
$("#list").append('</thead>');
$("#list").append('<tbody>');
$("#list").append('<tr>');
$("#list").append('<td>' + item.Id + '</td>');
$("#list").append('<td>' + item.Name + '</td>');
$("#list").append('<td>備注</td>');
$("#list").append('<td>');
$("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' );">修改</button>');
$("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' );">刪除</button>');
$("#list").append('</td>');
$("#list").append('</tr>');
$("#list").append('</tbody>');
$("#list").append('<tr>');
$("#list").append('<td>內容</td>');
$("#list").append('<td>' + item.Message + '</td>');
$("#list").append('</tr>');
$("#list").append('</table>');
});
}
}
});
}
};
$('#example').bootstrapPaginator(options);
}
}
});
})
</script>
而在視圖的主體部分便有兩個div，一個用來呈現數據列表，一個用來放置選擇頁面的導航。
<div class="span9">
<label>部門列表</label>
<hr />
<div id="list"></div>
<div id="example"></div>
</div>
而後台這個GetDate的方法就像下面這樣：
public ActionResult GetDate(int id, int? page)
{
int pageIndex = page ?? 1;//當前頁
const int pageSize = 2;//這里用來設置每頁要展示的數據數量，建議把這個寫到web.config中來全局控制
//獲取需要展示的部門數據
IEnumerable<MODEL.qgoa_department> list = OperateContext.Current.BLLSession.Iqgoa_departmentBLL.GetPagedList(pageIndex, pageSize, x => x.Id!=null, x=>x.Id);
//得到數據的條數
int rowCount = list.Count();
//通過計算，得到分頁應該需要分幾頁，其中不滿一頁的數據按一頁計算
if(rowCount%pageSize!=0)
{
rowCount = rowCount / pageSize + 1;
}
else
{
rowCount = rowCount / pageSize;
}
//轉成Json格式
var strResult = "{\"pageCount\":"+rowCount+",\"CurrentPage\":"+pageIndex+",\"list\":" + JsonConvert.SerializeObject(list) + "}";
return Json(strResult, JsonRequestBehavior.AllowGet);
}
這個方法還是有點缺陷的，可以寫的更加完美，就好像上面那個pageSize這個可以通過讀取配置文件web.config來全局修改，這樣管理起來也方便，另外對於頁面這種屬性：頁碼，當前頁，數據數量等等的信息，可以做一個類來存儲，如果網站的項目比較大的話，這樣更加方便我們去更改自己的代碼。
❹ 怎麼用jquery做上下翻頁
jquery上下翻頁插件實現（js文件引用需要修改）
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>用jQuery插件實現的滾屏效果,帶上下翻頁控制按鈕CsrCode.Cn</title>
<styletype="text/css">
ul,li{margin:0;padding:0}
#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc1pxsolid;overflow:hidden}
#scrollDivli{height:25px;padding-left:10px;}
</style>
<scripttype="text/javascript"src="/js/jquery1.3.2.js"></script>
<scripttype="text/javascript">
(function($){
$.fn.extend({
Scroll:function(opt,callback){
//參數初始化
if(!opt)varopt={};
var_btnUp=$("#"+opt.up);//Shawphy:向上按鈕
var_btnDown=$("#"+opt.down);//Shawphy:向下按鈕
vartimerID;
var_this=this.eq(0).find("ul:first");
varlineH=_this.find("li:first").height(),//獲取行高
line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10),//每次滾動的行數，默認為一屏，即父容器高度
speed=opt.speed?parseInt(opt.speed,10):500;//卷動速度，數值越大，速度越慢（毫秒）
timer=opt.timer//?parseInt(opt.timer,10):3000;//滾動的時間間隔（毫秒）
if(line==0)line=1;
varupHeight=0-line*lineH;
//滾動函數
varscrollUp=function(){
_btnUp.unbind("click",scrollUp);//Shawphy:取消向上按鈕的函數綁定
_this.animate({
marginTop:upHeight
},speed,function(){
for(i=1;i<=line;i++){_this.find("li:first").appendTo(_this);
}
_this.css({marginTop:0});
_btnUp.bind("click",scrollUp);//Shawphy:綁定向上按鈕的點擊事件
});
}
//Shawphy:向下翻頁函數
varscrollDown=function(){
_btnDown.unbind("click",scrollDown);
for(i=1;i<=line;i++){
_this.find("li:last").show().prependTo(_this);
}
_this.css({marginTop:upHeight});
_this.animate({
marginTop:0
},speed,function(){
_btnDown.bind("click",scrollDown);
});
}
//Shawphy:自動播放
varautoPlay=function(){
if(timer)timerID=window.setInterval(scrollUp,timer);
};
varautoStop=function(){
if(timer)window.clearInterval(timerID);
};
//滑鼠事件綁定
_this.hover(autoStop,autoPlay).mouseout();
_btnUp.css("cursor","pointer").click(scrollUp).hover(autoStop,autoPlay);//Shawphy:向上向下滑鼠事件綁定
_btnDown.css("cursor","pointer").click(scrollDown).hover(autoStop,autoPlay);
}
})
})(jQuery);
$(document).ready(function(){
$("#scrollDiv").Scroll({line:4,speed:500,timer:3000,up:"btn1",down:"btn2"});
});
</script>
</head>
<body>
<p>多行滾動演示：</p>
<divid="scrollDiv">
<ul>
<li>
<atarget="_blank"href="#">
好漂亮十多個</a></li>
<li>
<atitle="CSS製作斜角上有背景圖片的Div層"target="_blank"href="#">
CSS製作斜角上有背景圖片的Div層</a></li>
<li>
<atitle="Js實現的層展開、層折疊效果，默認時候層是折疊的"target="_blank"href="#">
Js實現的層展開、層折疊效果，默認折疊</a></li>
<li>
<atitle="DIV始終固定在網頁右下角位置的CSS實現方法"target="_blank"href="#">
DIV固定在右下角位置的CSS實現方法</a></li>
<li>
<atitle="JavaScript未知高度元素的垂直居中的方法"target="_blank"href="#">
JavaScript未知高度元素的垂直居中的方法</a></li>
<li>
<atitle="漸變彩色的文字"target="_blank"href="#">
漸變彩色的文字</a></li>
<li>
<atitle="指定文字逐條顯示"target="_blank"href="#">
指定文字逐條顯示</a></li>
<li>
<atitle="滾動的標題欄"target="_blank"href="#">
滾動的標題欄</a></li>
<li>
<atitle="JS4屏平滑滾動幻燈片特效"target="_blank"href="#">
JS4屏平滑滾動幻燈片特效</a></li>
<li>
<atitle="圖片的無縫滾動（縱向、橫向）"target="_blank"href="#">
圖片的無縫滾動（縱向、橫向）</a></li>
<li>
<atitle="滑鼠觸及帶邊框的菜單"target="_blank"href="#">
滑鼠觸及帶邊框的菜單</a></li>
<li>
<atitle="比較實用的CSS控制鏈接顏色效果"target="_blank"href="#">
比較實用的CSS控制鏈接顏色效果</a></li>
<li>
<atitle="滑鼠接觸或者離開圖片時，圖片大小會相應變化"target="_blank"href="#">
滑鼠接觸或者離開圖片時，圖片大小會相應變化</a></li>
<li>
<atitle="特殊的滑鼠懸停提示"target="_blank"href="#">
特殊的滑鼠懸停提示</a></li>
</ul>
</div>
<spanid="btn2">向上翻頁</span>
<spanid="btn1">向下翻頁</span>
</body>
</html>