javascsript: добавление значка плюс / минус к spry раскладной панели в Dreamweaver - PullRequest
Новая
       22

javascsript: добавление значка плюс / минус к spry раскладной панели в Dreamweaver

1 голос
/ 10 января 2011

Я работаю над модификацией веб-сайта, на котором есть таблица часто задаваемых вопросов, на которой есть ссылка на вопрос.
Если щелкнуть ссылку на вопрос, ответ раскрывается в раскрывающемся списке.

Моя цель - поменять изображение со знаком плюс со значком минус рядом со связанным текстом для раскрывающегося действия раскрытия.

Часто задаваемые вопросы используют Spry Collapsible Panel (sprycollapsiblepanel.js) для управления показом / скрытием от ссылки.прежде чем я приступлю к изменению кода в исходном коде javascript, мне было интересно, есть ли более простой способ сделать это с помощью Dreamweaver, о котором кто-то может знать.

спасибо заранее.

ОБНОВЛЕНИЕ: html, вызывающий действия показа / открытия: 

                        <div class="CollapsiblePanel">
                          <div id="CollapsiblePanel1" class="CollapsiblePanel">
                            <div class="CollapsiblePanelTab" tabindex="1">Fax to E-Mail</div>
                            <div class="CollapsiblePanelContent">Here is the text content as it relates to Fax to E-Mail</div>
                          </div>
                        </div>

Конструкция действий для выпадающего списка, Spry требует следующего в нижней части страницы: 

<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen:false});
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3", {contentIsOpen:false});
</script>

Ответы [ 5 ]

1 голос
/ 10 января 2011

В SpryCollapsiblePanel.css измените следующие правила стиля: 

.CollapsiblePanelTab {
    font: bold 0.7em sans-serif;
    background-color: #DDD;
    border-bottom: solid 1px #CCC;
    margin: 0px;
    padding: 2px 2px 2px 25px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
}

Это увеличивает отступ слева, чтобы освободить место для изображения.

Затем добавьте изображения к следующим правилам: 

.CollapsiblePanelOpen .CollapsiblePanelTab {
    background-color: #EEE;
    background-image: url(images/plus.gif);
    background-position:left top;
    background-repeat: no-repeat;
}

.CollapsiblePanelClosed .CollapsiblePanelTab {
    background-image: url(images/minus.jpg);
    background-position:left top;
    background-repeat: no-repeat;
    /* background-color: #EFEFEF */
}
0 голосов
/ 07 февраля 2011

Легко исправить с помощью простого JavaScript.

Добавьте следующий скрипт: 

<script type="text/javascript">
<!--
   function name ()
{
    var img = document.getElementById("imgid");

    if (img.src == "plus.png") {
        img.src = "minus.png";
    }
    else {
        img.src = "plus.png";
    }
}
//-->
</script>

Когда это будет сделано, посмотрите на div, определяющий складную панель. Это выглядит примерно так: 

<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Name <img src="url.com/minus.png" id="imgid"></div>
  <div class="CollapsiblePanelContent">content</div>

Все, что вам нужно для этого, - это добавить onclick = "name ();" к синтаксису: 

<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0" onclick="name();">Name <img src="url.com/minus.png" id="imgid"></div>
  <div class="CollapsiblePanelContent">content</div>
0 голосов
/ 10 января 2011

кликните на изображение, затем кликните на что-нибудь еще, переключитесь обратно на + знак

.
0 голосов
/ 10 января 2011

Если это изображение, и вы не хотите изменять исходный код и хотите использовать javascript, вам нужно изменить свойство src изображения. 

// Grab the img object from the DOM
var img = document.getElementById("theImageId");

// If it's the plus pic, switch for minus, and vice versa.
if(img.src == "plus.png") {
  img.src = "minus.png";
}
else {
  img.src = "plus.png";
}

Вы можете разместить этот код там, где вам нужно (в onclick или в функции или в любом другом месте). Кроме того, URL-адреса для изображений, очевидно, необходимо обновить.

0 голосов
/ 10 января 2011

Плагины добавляют класс к каждому заголовку панели, когда он открыт, а когда закрыт, это "CollapsiblePanelOpen" и "CollapsiblePanelClosed" соответственно. При этом вы можете использовать CSS для добавления + - эффекта к фоновому изображению, возможно.

...