2

テキストが非常に長いので、Webページに本として表示したいと思います。ユーザーは、本のページをめくるのと同じように、矢印キーを使用して前後に移動します。

ページの遷移を別にして、jQueryを使用してこれをどのように達成できますか？

私が思ったのは、1ページのスペースを占めるテキストの量を計算し、テキスト全体をそのようなページに分割して表示することでした。しかし、フォントを修正しても、占有されるスペースがプラットフォームに依存することは悪い考えのようです。

スペース計算方法を使用しているときに直面したもう1つの問題は、cssで正当化されたテキストの表示が原因でした。

誰かが以前にウェブページのためにそのようなことをしたことがありますか？

4

1 に答える 1

1

美しい本のページ形式で長い文字列をレイアウトする。正確な文字列部分を取得する必要があります。この機能を使用できます。

function get_page($text, $page_index, $line_length=76, $page_length=40){
    $lines = explode("\n", wordwrap($texxt, $line_length, "\n"));
    $page_lines = array_slice($lines, $page_index*$page_length, $page_length);
    return implode("\n", $page_lines);
}

$line_length = 70;
$lines_per_page=50;
$page = 3;
$longtext= "...";

$page_text = get_page($longtext, $page-1, $line_length, $page_length);

デモンストレーションを参照してください。

例

PHP

$longtext = "..."; // it can be retrieved from sql as well.
$index=is_int($_GET['page'])? intval($_GET['page']): 1;
$line_length = 70;
$lines_per_page=50;
$longtext= "...";

$page_text = get_page($longtext, $index-1, $line_length, $page_length);
echo json_encode(array('text'=>$page_text));

JQuery

var nextPage=2;
$.get("getpage.php", { page: nextPage }, function(data){
   alert("text is "+data.text;
   // show the text data.text
});
于 2013-01-05T07:43:54.943 に答える