我正在添加一个小提琴,实际上这是由angularjs制作的,但我想在jquery中创建它。我有几个p标签。那些将像那种方式(分页)一样工作,但只能在jquery中工作。
我的代码是
columns
请检查以下小提琴。我想对上面的代码做同样的事情
答案 0 :(得分:0)
<div class="parent" id="parent" style="border: 2px solid blue; visibility: hidden;">
<p>text1</p>
<p>text2</p>
<p>text3</p>
<p>text4</p>
<p>text5</p>
<p>text6</p>
<p>text7</p>
<p>text8</p>
<p>text9</p>
<p>text10</p>
</div>
<div id="heightTest" style=" border: 2px solid blue;">
</div>
<script>
$(function() {
var $heightTest = $('#heightTest');
var noOfParas = $("#parent").find("p").length;
var docHeight = $(document).height();
var currentPage = 0;
var pageSize = docHeight / 200; //approx para height
if(pageSize < 3) {
pageSize = 3; // displays atleast 3 paras at a time
}
var noOfPages = Math.round(noOfParas / pageSize);
var $p = $("#parent").find("p");
var textChunk = new Array();
var k =0;
for(i=0; i<noOfPages; i++) {
textChunk[i] = "";
for(j=0; j<pageSize; j++) {
if(k<noOfParas) {
textChunk[i] += "<P>" + $('#parent > p:eq('+ k +')').html() + "</P>";
}
k++;
}
}
displayPage(currentPage);
function displayPage(page) {
$("#heightTest").empty();
$("#heightTest").html(textChunk[page]);
//append pagination buttons
var thisPage = page+1;
var btnText = "<div style='text-align: center;'>";
if(page !== 0) {
btnText = "<button id='previous'>Previous</button> ";
}
else {
btnText = "<button id='previous' disabled >Previous</button> ";
}
btnText += thisPage + " / " + noOfPages;
if( page!== noOfPages-1 ) {
btnText += " <button id='next'>Next</button>";
}
else {
btnText += " <button id='next' disabled >Next</button>";
}
btnText += "</div>";
$("#heightTest").append(btnText);
currentPage = page;
}
$("#heightTest").on('click','#previous', function() {
if(currentPage !== 0){
var newPage = currentPage - 1;
displayPage(newPage);
}
});
$("#heightTest").on('click','#next', function() {
if(currentPage !== noOfPages+1){
var newPage = currentPage + 1;
displayPage(newPage);
}
});
});
</script>