PHPBB BBcode - 代码标签：选择、展开/折叠功能

Question

我正在为 phpbb 创建一个自定义 bbcode，其中我需要一个“全选”和一个“展开/折叠”功能。当滚动处于活动状态时，展开/折叠选项应该具有特定的样式。

选择和展开/折叠工作正常，但我遇到的问题是在寻找滚动是否处于活动状态时。

首先滚动和寻找它工作正常，但 bbcode 不是唯一的（仅适用于发布的第一个） 其次，展开/折叠链接的 getElementByTagName('testlink') 不起作用。

这么快就知道我想让脚本做什么，以及目前为止的工作。

• 当 div 类准备好运行功能 - 工作
• 为链接类 (testlink) 设置 var - 不起作用
• 为内容 div 类设置 var - 工作
• 为滚动设置 var - 工作
• 尝试滚动内容 - 工作
• 如果滚动正常，则向上滚动 - 正常工作
• 如果滚动工作将 (testlink) 的可见性设置为可见 - 不工作
• 如果没有滚动 (else) 将 (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 以供其他人使用..

/超人

Answer 1

好吧，我让我自己工作，所以在这里承诺我的工作代码。希望这对其他人有帮助。并随时在您自己的 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]