Highslide - весь заголовок перетаскиваемый, с несколькими расширителями

Question

Я задал ранее вопрос о перетаскиваемых заголовках в HighSlide, и я получил ответ от RoadRash. (Большое спасибо!)

Однако решение, похоже, не позволяет использовать contentId, который, я думаю, мне понадобится для нескольких расширителей.

Код ниже содержит две ссылки. Они оба «работают». Первая из них примерно соответствует моей первоначальной проблеме, но она представляет новую. Во-вторых, это больше похоже на тот подход, который я изначально использовал, и они примерно похожи.

То, что мне нужно, должно иметь преимущества обоих подходов. Мне нужен заголовок, где больше, чем текст можно перетаскивать, я не хочу изменять размер большого пальца, и мне нужна возможность ссылаться на несколько div для разных расширителей html на одной странице. Я считаю, что для этого нужно 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> 

Answer 1

Вы можете добиться того, что вы хотите с решением я дал вам here (с highslide-maincontent дел).

У нас есть готовые wrapperClassName для удаления колонтитула со значком изменения размеров, которые вы можете добавить в существующий код, как это: wrapperClassName: 'draggable-header no-footer'

Вы можете использовать столько Highslide-MainContent всплывающие окна, как вы хотите, в то же стр. Просто убедитесь, что highslide-maincontent ДИВ помещается непосредственно после закрытия тега привязки </a>

Живая демо: http://jsfiddle.net/roadrash/mXmLN/1/