Highslide - 整个标题可拖动,带有多个扩展器

时间:2013-03-22 21:04:28

标签: highslide

之前我在HighSlide中提到了一个相关问题关于可拖动标题的问题,我从RoadRash得到了答案。 (非常感谢!)

但是,该解决方案似乎不允许使用contentId,我认为我需要多个扩展器。

以下代码有两个链接。他们都“工作”。第一个问题大致是我原来问题的解决方案,但它提出了一个新问题。第二种更像是我最初使用的方法,它们大致相似。

我需要的是两种方法的优点。我需要一个标题,其中不仅可以拖动文本,我不需要调整大小拇指,我需要能够在同一页面上为不同的html扩展器引用多个div。我相信contentId对此是必要的,但我可能是错的。

(要明白我的意思,请将代码粘贴到任何实现HighSlide的页面中,然后点击每个单击我。)

任何帮助非常感谢。当答案有效时,我总是检查绿色检查,并且我总是提供知识渊博的帮助。

<!-- THIS WORKS, BUT DOES NOT ALLOW ME TO SPECIFY CONTENT FOR EACH LINK.  -->

<a href="javascript:;" onclick="
    hs.headingText = 'First header - entire top is draggable!';
    return hs.htmlExpand(this, {wrapperClassName: 'draggable-header', width: 550})" 
        title="Popup Title" 
        class="highslide">
    Click Me First!
</a>
<div class="highslide-maincontent">
    <h3>First Example</h3>
    This one can be dragged by the entire header area. (Good for me.)<br>
    However, it supplies a resizing thumb in the lower-right corner. (Bad for me.)<br>
    It does NOT use contentId. (Which is necessary for me because I have
    many expanders on the page.)                
</div>

<br>
<br>

<!-- THIS WORKS ALSO, BUT ONLY THE TEXT IS DRAGGABLE.  -->

<a href="javascript:;" onclick="
    hs.headingText = 'Second header - only text is draggable!';
    return hs.htmlExpand(this, {wrapperClassName: 'draggable-header', contentId: 'myContent', width: 550})" 
        title="Popup Title" 
        class="highslide">
    Click Me Second!
</a>
<div class="highslide-html-content" id="myContent">
        <div class="highslide-header">
        <ul>
            <li class="highslide-close">
                <a href="#" onclick="return hs.close(this)"></a>
            </li>
        </ul>
    </div>
    <div class="highslide-body">
    <h3>Second Example</h3>
    This one can ONLY be dragged by the text in the header area. (Bad for me.)<br>
    It does not supply a resizing thumb in the lower-right corner. (Good for me.)<br>
    It DOES use contentId.  (Necessary for me because I have
    many expanders on the page.)            
    </div>
</div>

1 个答案:

答案 0 :(得分:1)

您可以使用我提供的解决方案here(使用highslide-maincontent div)实现您想要的效果。

我们预先制作wrapperClassName用于删除页脚,其中包含您可以添加到现有代码的调整大小图标,如下所示:wrapperClassName: 'draggable-header no-footer'

您可以在同一页面中使用任意数量的highslide-maincontent弹出窗口。只需确保highslide-maincontent div直接放在结束锚标记</a>

之后

现场演示:http://jsfiddle.net/roadrash/mXmLN/1/