0

phpbbのカスタムbbcodeを作成しています。このコードでは、「すべて選択」機能と「展開/折りたたみ」機能が必要です。スクロールがアクティブな場合、展開/折りたたみオプションは特定のスタイルにする必要があります。

選択と展開/折りたたみは正常に機能しますが、問題があるのは、スクロールがアクティブかどうかを探すときです。

まず、スクロールと検索は正常に機能しますが、bbcodeは一意ではありません（最初に投稿されたものでのみ機能します）。次に、展開/折りたたみリンクのgetElementByTagName（'testlink'）は機能しません。

スクリプトに実行させたいことと、これまでに機能していることをすばやく説明します。

  • divクラスの準備ができたら関数を実行します-動作中
  • リンククラス（testlink）の変数を設定します-機能しません
  • コンテンツdivクラスの変数を設定します-動作中
  • スクロール用にvarを設定-動作中
  • コンテンツをスクロールしてみてください-動作中
  • スクロールが機能する場合は上にスクロールします-機能します
  • スクロールが機能する場合は、（testlink）の可視性を可視に設定します-機能しません
  • スクロールしない場合（それ以外の場合）、（testlink）の可視性を非表示に設定します-機能しません

Javascript：

$(document.getElementsByTagName('pre_header')[0]).ready(
    function () {
    var expandlink = this.getElementsByTagName('testlink')[0];  
    var eee = this.getElementsByTagName('dd')[0];   
    var old = eee.scrollTop;
    eee.scrollTop += 220;


    if (eee.scrollTop > old) {
        eee.scrollTop -= 220;
        expandlink.style.visibility = "visible";
    } 
    else {
        expandlink.style.visibility = "hidden";
        };  
    }
);

HTML：

<div class="pre">
    <dt class="pre_header">
        <b>Code: </b>
        <a class="testlink" href="#">expand</a>
    </dt>
    <dd style="overflow:auto;">
        content here
    </dd>
</div>

助けを求めて、それがすべて終わったら、他の人が使用できるようにBBcode全体を追加します。

/ロックマン

4

1 に答える 1

0

さて、ここで私の作業コードを約束したように、私は自分で作業するようになりました。これが他の人に役立つことを願っています。自分のphpbbフォーラムで自由に使用してください。

/ロックマン

ps。scrollTopに問題があるため、IEで無効にした展開/折りたたみボタン。

BBCodeの使用法：

[pre]{TEXT}[/pre]

HTMLの置換

<script type="text/javascript">
// select all function
function selectCode(a)
{
    // Get ID of code block
    var e = a.parentNode.parentNode.getElementsByTagName('CODE')[0];
    // Not IE and IE9+
    if (window.getSelection)
    {
        var s = window.getSelection();
        // Safari
        if (s.setBaseAndExtent)
        {
            s.setBaseAndExtent(e, 0, e, e.innerText.length - 1);
        }
        // Firefox and Opera
        else
        {
            // workaround for bug # 42885
            if (window.opera && e.innerHTML.substring(e.innerHTML.length - 4) == '<BR>')
            {
                e.innerHTML = e.innerHTML + '&nbsp;';
            }

            var r = document.createRange();
            r.selectNodeContents(e);
            s.removeAllRanges();
            s.addRange(r);
        }
    }
    // Some older browsers
    else if (document.getSelection)
    {
        var s = document.getSelection();
        var r = document.createRange();
        r.selectNodeContents(e);
        s.removeAllRanges();
        s.addRange(r);
    }
    // IE
    else if (document.selection)
    {
        var r = document.body.createTextRange();
        r.moveToElementText(e);
        r.select();
    }
}

//expand - collapse settings
function expandcollapse(a) {
    var ee = a.parentNode.parentNode.getElementsByTagName('dd')[0];
    if (ee.style.maxHeight == '200px') 
        { 
        ee.style.maxHeight = '2000px'; 
        a.innerHTML = 'collapse';
        } 
        else { 
            ee.style.maxHeight = '200px';
            a.innerHTML = 'expand';
            };
}

</script>
<![if !IE]>
<script type="text/javascript">
    function scrolltest(k) {
        var eee = k.getElementsByTagName('dd')[0];
        var old = eee.scrollTop;
        eee.scrollTop += 1;

        if (eee.scrollTop > old) {
            eee.scrollTop -= 1;
            k.getElementsByTagName('a')[1].style.visibility = "visible";
        } 
    }
</script>
<![endif]>

<div class="pre" onmouseover="scrolltest(this); return false;">
    <dt class="pre_header">
        <b>Code: </b>
        <a href="#" onclick="selectCode(this); return false;">Select all</a>
        <a style="float:right; visibility:hidden;" href="#" onclick="expandcollapse(this); return false;">expand</a>
    </dt>
    <dd style="max-height:200px; overflow:auto;">
        <code>
            {TEXT}
        </code>
    </dd>
</div>

ヘルプライン

Code: [pre]Add content here[/pre]
于 2013-01-25T09:26:35.333 に答える