JQuery Mobile 中的分页符？
Posted
技术标签:
【中文标题】JQuery Mobile 中的分页符？【英文标题】：Page-Breaks in JQuery Mobile? 【发布时间】：2016-04-14 22:01:36 【问题描述】：是否可以在打印时对 JQuery Mobile 应用分页符？
出现的问题是在尝试打印时，动态生成的段落<p> 在新页面的结尾和开头之间拆分，并且该部分不会作为 A4 中的一个部分移动。我也尝试过使用page-break-after: always; 和其他css，但是，这似乎不起作用。
以下JSFiddle 将文本从<textarea> 转换为相等的段落<p>
附上JSFiddle，以便更好地理解问题。
谢谢！
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel=
"stylesheet">
<script src="https://code.jquery.com/jquery-1.11.3.min.js">
</script>
<script src=
"https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
</script>
<title></title>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div class="ui-content" data-role="main">
<a data-transition="slide" href="#pagetwo">Go to Generated Paragraphs</a>
<div>
<h3>Paste text in the field below to divide text into
paragraphs..</h3>
<textarea id="textarea1" placeholder=
"Type text here, then press the button below." rows="5">
</textarea> <button id="go">Divide Text into Paragraphs</button>
</div>
</div>
<div data-role="footer">
<h1>Page 1 Footer</h1>
</div>
</div>
<div data-role="page" id="pagetwo">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div class="ui-content" data-role="main">
<button onclick="myFunction()">Print this page</button>
<script>
function myFunction()
window.print();
</script>
<h5>Click on the link to go back. <b>Note</b>: fade is
default.</h5><a href="#pageone">Go to Page One</a>
<div id="content"></div>
</div>
<div data-role="footer">
<h1>Page 2 Footer</h1>
</div>
</div>
<script>
var btn = document.getElementById('go'),
textarea = document.getElementById('textarea1'),
content = document.getElementById('content'),
chunkSize = 100;
btn.addEventListener('click', initialDistribute);
content.addEventListener('keyup', handleKey);
content.addEventListener('paste', handlePaste);
function initialDistribute()
var text = textarea.value;
while (content.hasChildNodes())
content.removeChild(content.lastChild);
rearrange(text);
function rearrange(text)
var chunks = splitText(text, false);
chunks.forEach(function(str, idx)
para = document.createElement('P');
para.setAttribute('contenteditable', true);
para.textContent = str;
content.appendChild(para);
);
function handleKey(e)
var para = e.target, position,
key, fragment, overflow, remainingText;
key = e.which || e.keyCode || 0;
if (para.tagName != 'P') return;
if (key != 13 && key != 8) redistributeAuto(para); return;
position = window.getSelection().getRangeAt(0).startOffset;
if (key == 13)
fragment = para.lastChild;
overflow = fragment.textContent;
fragment.parentNode.removeChild(fragment);
remainingText = overflow + removeSiblings(para, false);
rearrange(remainingText);
if (key == 8 && para.previousElementSibling && position == 0)
fragment = para.previousElementSibling;
remainingText = removeSiblings(fragment, true);
rearrange(remainingText);
function handlePaste(e)
if (e.target.tagName != 'P') return;
overflow = e.target.textContent + removeSiblings(fragment, true);
rearrange(remainingText);
function redistributeAuto(para)
var text = para.textContent, fullText;
if (text.length > chunkSize)
fullText = removeSiblings(para, true);
rearrange(fullText);
function removeSiblings(elem, includeCurrent)
var text = '', next;
if (includeCurrent && !elem.previousElementSibling)
parent = elem.parentNode;
text = parent.textContent;
while (parent.hasChildNodes())
parent.removeChild(parent.lastChild);
else
elem = includeCurrent ? elem.previousElementSibling : elem;
while (next = elem.nextSibling)
text += next.textContent;
elem.parentNode.removeChild(next);
return text;
function splitText(text, useRegex)
var chunks = [], i, textSize, boundary = 0;
if (useRegex)
var regex = new RegExp('.1,' + chunkSize + '\\b', 'g');
chunks = text.match(regex) || [];
else
for (i = 0, textSize = text.length; i < textSize; i = boundary)
boundary = i + chunkSize;
if (boundary <= textSize && text.charAt(boundary) == ' ')
chunks.push(text.substring(i, boundary));
else
while (boundary <= textSize && text.charAt(boundary) != ' ') boundary++;
chunks.push(text.substring(i, boundary));
return chunks;
</script>
<style>
p padding: 1.2em 0.5em; margin: 1.4em 0; border: 1px dashed #aaa;
</style>
<style>
p
page-break-before: always;
page-break-after: always;
p page-break-inside: avoid;
</style>
</body>
</html>
【问题讨论】：
【参考方案1】：JQM 使用绝对定位的页面，page-break-afterdoes not allow。要解决此问题，请添加以下内容：
@media print
.ui-page
position: relative !important;
我希望这对某人有帮助！
【讨论】：
以上是关于JQuery Mobile 中的分页符？的主要内容，如果未能解决你的问题，请参考以下文章