как сделать spry гармошку похожей на дерево - PullRequest
Новая
       13

как сделать spry гармошку похожей на дерево

0 голосов
/ 07 июня 2011

Вот мой аккордеон, как мне применить к нему некоторую таблицу стилей, чтобы она выглядела как дерево.

например, : +, когда вкладка аккордеона закрыта, и -, когдааккордеон открыт 

<div class="Accordion" id="systemAccordion" tabindex="1">
                <div class="AccordionPanel">
                    <div class="AccordionPanelTab">&nbsp;&nbsp;&nbsp;&nbsp;<a onClick="showSystemSpan();">System</a></div>
                    <div class="AccordionPanelContent">
                        <a onClick="showPatchesSpan();">Patches</a><br/>
                        <a onClick="showNetworkSpan();">Network</a><br/>
                    </div>
                </div>
                <div class="AccordionPanel">
                    <div class="AccordionPanelTab" >&nbsp;&nbsp;&nbsp;&nbsp;<a onClick="showNone();">User Environment</a></div>
                    <div class="AccordionPanelContent">
                        <a onClick="showEnvironmentVariableSpan();">Environment Variables</a><br/>
                    </div>
                </div>
                <div class="AccordionPanel">
                    <div class="AccordionPanelTab">&nbsp;&nbsp;&nbsp;&nbsp;<a onClick="showSystemSpan();">{mainData::@product}</a></div>
                    <div class="AccordionPanelContent">
                        <a onClick="showOdbcSpan();">ODBC</a><br/>
                        <a onClick="showBitmodeSpan();">Bitmode</a><br/>
                    </div>
                </div>
                <script type="text/javascript">
                    var sysAcc = new Spry.Widget.Accordion("systemAccordion",  {defaultPanel: -1, useFixedPanelHeights: false });
                </script>
            </div>

Ответы [ 2 ]

1 голос
/ 07 июня 2011

Если вы посмотрите в таблицу стилей SpryAccordion.css, вы найдете 

.AccordionPanelTab {}

.AccordionPanelOpen .AccordionPanelTab {}

Вы можете установить любое понравившееся фоновое изображение для этих двух элементов, чтобы получить желаемый эффект .AccordionPanelTab повлияет на нормальное состояние, а .AccordionPanelOpen .AccordionPanelTab повлияет на открытое состояние. В таблице стилей также есть комментарии, рассказывающие о том, что делают разные классы.

0 голосов
/ 07 июня 2011

использовать свойства фонового изображения CSS и применять его к соответствующему классу CSS, когда он открыт и закрыт.

...