如何用jQuery / javascript分页文本?

时间:2012-11-06 11:08:57

标签: javascript jquery wordpress pagination paginate

这是简短的......

我需要使用jQuery或javascript对很长的文本进行分页。 现在我已经考虑过进行角色计数等问题,但问题是我没有使用等宽文本,所以它不起作用。

相反,我使用动态输入的文字(直接来自我最好的朋友wordpress)。

以下是设置:


my setup


我已将文本放在名为 bodytext 的div中,其溢出设置为auto。这是它的造型:

.bodytext {
width: 465px;
height: 454px;
display: block;
position: absolute;
display: block;
margin: 136px 25px;
font-family: 'Gentium Basic', serif;
color: #141414;
line-height: 1.5;
line-height: 1.5;
font-size: 17px;
overflow: hidden;
}

无论如何......文字溢出。

我想要做的是创建一系列div(使用 bodytext 类),彼此相邻,我可以将我的按钮挂钩以在其间切换。

我已经找到了这方面的一些信息:我需要每18行创建一个新的div。

我不知道如何解决这个问题。

我还需要它能够处理大量文本...一次最多可达1000个单词...结果说10页...


任何帮助都会很可爱! 谢谢你的阅读!

2 个答案:

答案 0 :(得分:1)

这个概念验证可以使用(也可以使用css3列),但要注意,有一个CPU成本;它是DOM密集型的,需要jQuery。

这需要将文本划分为更短的段落(或任何其他标记),但如果文本太大,则应该可以在客户端进行。

伪标记:

ARTICLE
  header, intro etc
  SECTION
    paragraphs, divs, spans etc with (text) content

代码:

function paginate() {
  var screen_height = $(window).height();
  var max_page_height = screen_height * 0.8;

  var articles = $('article').toArray().map(function(node) {
    node = $(node);
    var sections = node.find('section');

    return {
      node: node,
      sections: sections,
      sectionChildren: sections.children(),
    };
  });

  function appendNewSection(article) {
    var section = $('<section class="columns page">')
    article.append(section);
    return section;
  }

  function re_paginate(article) {
    article.sections.detach(); // Important magic
    var section = appendNewSection(article.node);

    // Clone `sectionChildren` and append to DOM
    article.sectionChildren.clone().each(function(_, child) {
      child = $(child);

      if (section.height() > max_page_height) {
        section = appendNewSection(article.node);
      }

      if (child.is('ul') || child.is('ol')) {
        // Split list into shorter lists
        // NOTE! This approach can also be used to split long paragraphs...
        var list_children = child.children();
        list_children.detach(); // Important magic
        var blueprint = child.clone(); // Empty list blueprint
        var list = child;

        section.append(list);

        list_children.each(function(_, list_child) {
          if (section.height() > max_page_height) {
            // Append a new section with a new list and continue appending `list_children` therein
            section = appendNewSection(article.node);
            list = blueprint.clone();
            section.append(list);
          }
          list.append(list_child);
        });
      }
      else {
        section.append(child);
      }
    });
  }

  // Re-paginate articles
  confirm('Paginate articles to screen height?') && articles.filter(re_paginate);
}

答案 1 :(得分:0)

CSS3假设您的目标浏览器支持它,可以执行多列布局:http://caniuse.com/#feat=multicolumn

你需要外部div来裁剪文本,内部div用固定宽度和高度的列和按钮来修改内部div左边缘。

许多功能仅部分支持(根据我的经验,Opera表现最佳),但对于许多情况来说应该足够了。请参阅http://www.w3.org/TR/css3-multicol/,您可以在其中找到许多好的示例(特别是示例XXIII,“多元素元素之外的分页和溢出”)。