Highslide - entire header draggable, with multiple expanders

问题

I asked a related question earlier about draggable headers in HighSlide, and I got an answer from RoadRash. (Many thanks!)

However, the solution doesn't seem to allow use of contentId, which I think I will need for multiple expanders.

The code below has two links. They both "work". The first one is roughly the solution to my original problem, but it presents a new one. The second is more like the approach I was originally using and they're roughly similar.

What I need should have the advantages of both approaches. I need a header where more than the text can be dragged, I don't want a resizing thumb, and I need the ability to reference multiple divs for different html expanders on the same page. I believe contentId is necessary for this but I could be wrong.

(To see what I mean, please paste code into any page implementing HighSlide and click each Click me.)

Any help much appreciated. I always check the green check when an answer works and I always upvote knowledgeable attempts to help.

<!-- 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:

You can achieve what you want with the solution I gave you here (with the highslide-maincontent div).

We have a pre-made wrapperClassName for removing the footer with the resize icon that you can add to your existing code like this: wrapperClassName: 'draggable-header no-footer'

You can use as many highslide-maincontent popups as you want in the same page. Just make sure that the highslide-maincontent div is placed directly after the closing anchor tag </a>

Live demo: http://jsfiddle.net/roadrash/mXmLN/1/

来源：https://stackoverflow.com/questions/15579811/highslide-entire-header-draggable-with-multiple-expanders

标签

highslide