-2

WebサイトのjQueryページ付けを構成しようとしています。<p>タグのカウントに基づくページ付けを構成しました。ただし、要件はカスタムページ付けすることです。いくつかの<!--pagebreak-->タグなどを使用するようなものです。<!--pagebreak-->jQueryとカスタムタグを使用してカスタムページ付けを行うにはどうすればよいですか。<!--pagebreak-->jQueryとカスタムタグを使用してページネーションスクリプトを提案してください

<div class="storybody">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lacinia ante sit amet porta. Vivamus ut interdum massa. Etiam feugiat commodo accumsan. Suspendisse vulputate faucibus erat, non eleifend arcu iaculis et. Nulla at eros eu velit gravida ullamcorper nec id erat. In in velit mauris, vitae pretium purus. Ut scelerisque pellentesque fermentum. Curabitur nec mauris eu diam pulvinar cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu ipsum augue. Vivamus id elementum sem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lacinia ante sit amet porta. Vivamus ut interdum massa. Etiam feugiat commodo accumsan. Suspendisse vulputate faucibus erat, non eleifend arcu iaculis et. Nulla at eros eu velit gravida ullamcorper nec id erat. In in velit mauris, vitae pretium purus. Ut scelerisque pellentesque fermentum. Curabitur nec mauris eu diam pulvinar cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu ipsum augue. Vivamus id elementum sem.</p>
    <!--pagebreak-->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lacinia ante sit amet porta. Vivamus ut interdum massa. Etiam feugiat commodo accumsan. Suspendisse vulputate faucibus erat, non eleifend arcu iaculis et. Nulla at eros eu velit gravida ullamcorper nec id erat. In in velit mauris, vitae pretium purus. Ut scelerisque pellentesque fermentum. Curabitur nec mauris eu diam pulvinar cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu ipsum augue. Vivamus id elementum sem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lacinia ante sit amet porta. Vivamus ut interdum massa. Etiam feugiat commodo accumsan. Suspendisse vulputate faucibus erat, non eleifend arcu iaculis et. Nulla at eros eu velit gravida ullamcorper nec id erat. In in velit mauris, vitae pretium purus. Ut scelerisque pellentesque fermentum. Curabitur nec mauris eu diam pulvinar cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu ipsum augue. Vivamus id elementum sem.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lacinia ante sit amet porta. Vivamus ut interdum massa. Etiam feugiat commodo accumsan. Suspendisse vulputate faucibus erat, non eleifend arcu iaculis et. Nulla at eros eu velit gravida ullamcorper nec id erat. In in velit mauris, vitae pretium purus. Ut scelerisque pellentesque fermentum. Curabitur nec mauris eu diam pulvinar cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu ipsum augue. Vivamus id elementum sem.</p>
    <!--pagebreak-->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lacinia ante sit amet porta. Vivamus ut interdum massa. Etiam feugiat commodo accumsan. Suspendisse vulputate faucibus erat, non eleifend arcu iaculis et. Nulla at eros eu velit gravida ullamcorper nec id erat. In in velit mauris, vitae pretium purus. Ut scelerisque pellentesque fermentum. Curabitur nec mauris eu diam pulvinar cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu ipsum augue. Vivamus id elementum sem.</p>
</div>
4

2 に答える 2

0

ちょうど例：

コメントタグはnodeType == 8、次のように読み取ることができる入力に基づいています。

var el = []; //[2,3,1]

var sum = 0;

$(".storybody").contents().filter(function(){
    if($(this).is("p")) sum++; //how many p before a comment
    if(this.nodeType === 8){
        el.push(sum);
        sum = 0;
    }
});

たとえば、el配列に基づくと、これはnextおよびprev関数である可能性がありますが、より良い方法で実行できますが、これは単なる例です;-)

//Next and Prev function
var curr = 0;
var k = 0;

$("#next").on("click", function(){
    if(curr < el.length){
        $(".storybody p").hide();
        var e = range(k, el[curr], ".storybody p", "next");
        $(e).each(function(){$(this).show()});                
        k += el[curr];                    
        curr++;
    }else{
        console.log("last page!");         
    }                  
});

$("#prev").on("click", function(){
    if(curr > 0){
        $(".storybody p").hide();
        var e = range(k, el[curr-1], ".storybody p", "prev");
        $(e).each(function(){$(this).show()});
        k -= el[curr-1];                    
        curr--;
    }else{
        console.log("first page!");         
    }
});


function range(s,e,sel,ac){

    if(ac == "next"){
        var elms = [];
        for(var i = s; i < (e+s); i++){
            elms.push($(sel).eq(i));
        }
    }else if(ac == "prev"){
        var elms = [];
        for(var i = (s-e); i < s; i++){
            elms.push($(sel).eq(i));
        }
    }
    return elms;
}

<!--pagebreak-->PS： pタグの最後（前）にanoherを追加したと仮定します

于 2012-09-04T08:12:02.550 に答える
0

私は自分で何かをしました。Jsfiddleでコードを確認できます。Jquery1.3.2を使用しました。および jquery.pajinate.js。

HTML：

<div id="paging_container8" class="container">
                
                <div class="page_navigation"></div>
                <div class="storybody">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lacinia ante sit amet porta. Vivamus ut interdum massa. Etiam feugiat commodo accumsan. Suspendisse vulputate faucibus erat, non eleifend arcu iaculis et. Nulla at eros eu velit gravida ullamcorper nec id erat. In in velit mauris, vitae pretium purus. Ut scelerisque pellentesque fermentum. Curabitur nec mauris eu diam pulvinar cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu ipsum augue. Vivamus id elementum sem.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lacinia ante sit amet porta. Vivamus ut interdum massa. Etiam feugiat commodo accumsan. Suspendisse vulputate faucibus erat, non eleifend arcu iaculis et. Nulla at eros eu velit gravida ullamcorper nec id erat. In in velit mauris, vitae pretium purus. Ut scelerisque pellentesque fermentum. Curabitur nec mauris eu diam pulvinar cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu ipsum augue. Vivamus id elementum sem.</p>
                    <!--pagebreak-->
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lacinia ante sit amet porta. Vivamus ut interdum massa. Etiam feugiat commodo accumsan. Suspendisse vulputate faucibus erat, non eleifend arcu iaculis et. Nulla at eros eu velit gravida ullamcorper nec id erat. In in velit mauris, vitae pretium purus. Ut scelerisque pellentesque fermentum. Curabitur nec mauris eu diam pulvinar cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu ipsum augue. Vivamus id elementum sem.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lacinia ante sit amet porta. Vivamus ut interdum massa. Etiam feugiat commodo accumsan. Suspendisse vulputate faucibus erat, non eleifend arcu iaculis et. Nulla at eros eu velit gravida ullamcorper nec id erat. In in velit mauris, vitae pretium purus. Ut scelerisque pellentesque fermentum. Curabitur nec mauris eu diam pulvinar cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu ipsum augue. Vivamus id elementum sem.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lacinia ante sit amet porta. Vivamus ut interdum massa. Etiam feugiat commodo accumsan. Suspendisse vulputate faucibus erat, non eleifend arcu iaculis et. Nulla at eros eu velit gravida ullamcorper nec id erat. In in velit mauris, vitae pretium purus. Ut scelerisque pellentesque fermentum. Curabitur nec mauris eu diam pulvinar cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu ipsum augue. Vivamus id elementum sem.</p>
                    <!--pagebreak-->
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lobortis lacinia ante sit amet porta. Vivamus ut interdum massa. Etiam feugiat commodo accumsan. Suspendisse vulputate faucibus erat, non eleifend arcu iaculis et. Nulla at eros eu velit gravida ullamcorper nec id erat. In in velit mauris, vitae pretium purus. Ut scelerisque pellentesque fermentum. Curabitur nec mauris eu diam pulvinar cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse eu ipsum augue. Vivamus id elementum sem.</p>
                    </div>
                
                
            </div> ​

JavaScript

<script>
var str= $(".storybody").html();
var substr=str.split( "<!--pagebreak-->" );
var txt="<ul class='storycontent'><li>";
var x=0;
for (x in substr)
  {
    if(x==0){
        txt=txt+substr[x];
    }
    else{
          txt=txt+"</li><li>"+substr[x];
    }
  }
var paginated=txt+"</li></ul>";
$('div.storybody').replaceWith(paginated);

$(document).ready(function(){
                $('#paging_container8').pajinate({
                    num_page_links_to_display : 2,
                    items_per_page : 1 ,
                    item_container_id : '.storycontent'
                });
            });
​&lt;/script>
于 2012-09-04T16:38:51.807 に答える