做任何形式的HTML/DOM解析都会让你走上困境,我想,这意味着你正在开始开发自己的HTML布局引擎。
使用CSS3列函数是一个更好的主意。基本上,让您的内容在固定的宽度和高度栏内呈现。这成为你的页面。然后将您的内容位置左移以在页面之间移动,并将其包装在隐藏溢出元素的容器中。
我们的HTML将主要是:
CONTENT GOES HERE
Previous
Page N of M
Next
我们基本的CSS是:
#container {
width: 240px;
overflow: hidden;
background-color: yellow;
}
#content {
position: relative;
height: 30em;
-moz-column-width: 240px;
-webkit-column-width: 240px;
column-width: 240px;
-moz-column-gap: 10px;
-webkit-column-gap: 10px;
column-gap: 10px;
}
现在,我们将设置left CSS属性为#内容,页面之间切换的倍数 - 250像素。
我们只需要计算出我们的内容需要多少列,并且我们已经分页。 How to get css3 multi-column count in Javascript给出了一个提示:我们将从#endMarker的左边位置找到它。
这是一个工作示例http://lateral.co.za/pages.html,第一章是Moby Dick。它适用于Chrome和Android,但不适用于Firefox - 我认为是因为CSS列实现的差异。由于我们对Android感兴趣,因此代码很好。
最重要的部分是:
的CSS设置如上。
加入的含量(但#content DIV内)后
加入#previous和#next按钮和#page跨度,所有的#container外部。
这个JavaScript的jQuery加载后: var _column = 0;
var _columnCount = 0;
var _columnWidth = 240;
var _columnGap = 10;
$(function() {
_columnCount = Math.floor($('#endMarker').position().left/(_columnWidth + _columnGap));
setColumn = function(i) {
_column = i;
document.getElementById('content').style.left = -1 * _column * (_columnWidth + _columnGap);
$('#page').html('Page ' + (_column+1) + ' of ' + (_columnCount+1));
}
$('#next').click(function() {
if (_column==_columnCount) return;
setColumn(_column+1);
});
$('#previous').click(function() {
if (0==_column) return;
setColumn(_column-1);
});
setColumn(0);
});
就是这样。
有工作的空间。有人可能想要考虑计算列数,我把它从引用的SO帖子中吸取出来,但实际上并没有想到它......容器的宽度似乎影响了内容的列宽,这对我来说并不完全有意义。
但至少在一切似乎工作,而不必做任何HTML解析和自己的布局,至少在Chrome和Android。