Question

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

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

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

如此快速地激发我希望脚本做什么，以及到目前为止工作的内容。

当div类准备好运行功能 - 工作
为链接类（testlink）设置var - 无法正常工作
为内容div类设置var - 工作
set var for scrolling - working
尝试滚动内容 - 工作
如果滚动工作向上滚动 - 工作
如果滚动工作将（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供其他人使用..

/洛克人

Answer 1

好吧，我让我自己工作，所以我在这里承诺我的工作代码。希望这会有助于他人。并随意在自己的phpbb论坛上使用它。

/洛克人

PS。我已经为IE禁用了展开/折叠按钮，因为使用了scrollTop。

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]

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

1 个答案: