1

次のように、セクションのタイトルとセクションごとのページ数を含む文字列があります。

    string = "section1;section2;section3;section4|2 3 1 4"

セクションインデックスを作成し、タイトルをドキュメント全体の適切なページへのリンクとして使用できるようにしたいと思います。

助言がありますか？私の最初の考えは、文字列をセクションヘッダーとページ数に分割し、次にこれらを分割して、タイトルを順序付けられていないリストに追加することでしたか？これでセクションのタイトルは処理されますが、ページ数はどうでしょうか。

    var options = string.split('|');

    var sections = options[0];

    var section_titles = sections.split(';');

    for (a=0;a<section_titles.length;a++){
    $('ul').append('<li><div class="title">'+sections[a]+'</div></li>');
    };

    var counts = options[1];

    var section_counts = counts.split(' ');

    ???????

あなたの提案を送ってください。

4

2 に答える 2

0

アプリケーションがWebアプリケーションであり、PDFドキュメントにインデックスを作成しようとしていない場合は、これが役立ちます。

最も簡単な方法は、アンカーとリンクを利用することです。

これらを読んでください： リンク アンカー

次に、以下の完全なコード例を参照してください。すべてをtest.htmlファイルにコピーしてから、ブラウザーで開いて、どのように動作するかを確認できます。

<body>

<script type="text/javascript">
document.write("\<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'>\<\/script>");
</script>
<style>
section{font-size:100px;}
</style>


First things first, your data setup seems odd. If you can change that string's setup, try going the JSON way. For example:
<script>
var jsonString = '{ "section1":2, "section2":3, "section3":1, "section4":4 }';

var objectFromJson = jQuery.parseJSON(jsonString);
var ul = $('<ul>'); 
for (var prop in objectFromJson)
{
    var li = $("<li>");
    var divTitle = $("<div>");
    divTitle.addClass("title");
    var titleLink = $("<a>");
    titleLink.text(prop);
    titleLink.attr("href","#" + prop + "/" + objectFromJson[prop])
    divTitle.append(titleLink)
    li.append(divTitle);
    ul.append(li);
    }
$("body").append(ul);
</script>

If that is not possible, let's continue on what you have
<script>
var str = "section1;section2;section3;section4|2 3 1 4"
var options = str.split('|');

var sections = options[0];
var numbers = options[1];

var section_titles = sections.split(';');
var numbersArr = numbers.split(' ');

var ul = $('<ul>'); 
for (var a=0; a < section_titles.length; a++)
{
    if(numbersArr.length > a)
    {
        var li = $("<li>");
        var divTitle = $("<div>");
        var titleLink = $("<a>");
        titleLink.text(section_titles[a]);
        titleLink.attr("href","#" + section_titles[a] + "/" + numbersArr[a])

        divTitle.addClass("title");
        divTitle.append(titleLink)
        li.append(divTitle);
        ul.append(li);
    }
    }
$("body").append(ul);
</script>


<section>
<a name="section1/2">section1</a><br/><br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at tristique est. Curabitur rhoncus consequat sagittis. Proin pharetra elit nec turpis rutrum a lobortis nisi ornare. Nulla nec nisl diam, vel semper orci. Phasellus iaculis nibh a velit pulvinar sagittis eu ut massa. Cras vestibulum, urna sed ultrices consequat, purus leo venenatis lorem, a bibendum nibh eros ut leo. Curabitur viverra urna id ante mattis ultrices. Nulla et velit enim, vel condimentum magna. Vestibulum ullamcorper consectetur porta. Maecenas eget dui nec turpis condimentum aliquet in in risus.
</section>

<section>
<a name="section2/3">section2</a><br/><br/>
Ut ac blandit nisi. Phasellus fringilla, est vel hendrerit mollis, dui sem sagittis justo, eget fermentum odio ipsum at sem. Sed tempor, nibh eu vulputate vehicula, lectus neque eleifend erat, at tincidunt orci dui a tellus. Vestibulum viverra urna in tellus vestibulum semper. Etiam volutpat sodales rutrum. Morbi elementum, lacus ut fermentum malesuada, ipsum sem viverra arcu, ut consequat libero dui et arcu. Cras ut libero nulla, nec rhoncus erat. Integer id enim id nulla sagittis congue. Integer mollis tempor viverra. Ut non nisi sem, et semper lacus. Vivamus turpis mi, hendrerit non pellentesque a, iaculis id nibh. Pellentesque nec arcu magna, at posuere eros. Duis eu quam at nulla porttitor aliquet. Vestibulum cursus mattis purus, a sodales mi rhoncus vitae. Phasellus quis urna nec orci rhoncus consequat.
</section>

<section>
<a name="section3/1">section3</a><br/><br/>
Donec pellentesque congue sollicitudin. Fusce aliquam, velit et cursus iaculis, nisl massa vulputate magna, vitae imperdiet felis tortor sit amet purus. Vivamus aliquet laoreet ligula quis aliquet. Vivamus fringilla purus ut lorem faucibus viverra. Sed accumsan tincidunt tempus. Donec id velit in dolor luctus gravida. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean sit amet nulla augue. Proin vel tincidunt est. Curabitur imperdiet elementum suscipit. Praesent dignissim magna eget sapien pretium vestibulum id at arcu. Integer egestas purus non.
</section>

<section>
<a name="section4/4">section4</a><br/><br/>
Donec pellentesque congue sollicitudin. Fusce aliquam, velit et cursus iaculis, nisl massa vulputate magna, vitae imperdiet felis tortor sit amet purus. Vivamus aliquet laoreet ligula quis aliquet. Vivamus fringilla purus ut lorem faucibus viverra. Sed accumsan tincidunt tempus. Donec id velit in dolor luctus gravida. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean sit amet nulla augue. Proin vel tincidunt est. Curabitur imperdiet elementum suscipit. Praesent dignissim magna eget sapien pretium vestibulum id at arcu. Integer egestas purus non.
</section>


</body>
于 2012-10-15T05:42:59.523 に答える
0

これが私のために働いた結果です...

  • 文字列を変更して、|で区切られた「title;count」を含めました。
  • これを順不同リストとして出力しています
var str = "section1;2|section2;3|section3;1|section4:4"
var d = 0;
var ul = $('<ul>');
var sec = toc.split('|');
var a = 0;
  for (a = 0; a < sec.length; a++) {
var secArr = sec[a].split(';');
  var sectiontitle = secArr[0];
  var sectioncount = secArr[1] * 1;
var jump = d;
d = d + sectioncount;
  if (sectiontitle == ''){
  } else {
  $('#sections').find('ul').append('<li><div class="toc"><div     class="title">'+sectiontitle+'</div></div><span class="jumper"
style="display:none;">'+jump+'</span></li>');
  }
  }
于 2012-10-17T15:42:50.663 に答える