[Plone-IT] Creare uno spoiler

redocram redocram a gmail.com
Mer 20 Lug 2011 09:39:03 UTC


Allora, sono andato nella pagina
portal_skins/plone_ecmascript/collapsiblesections.js ed eccone il contenuto:


/*
 * This is the code for the collapsibles. It uses the following markup:
 *
 * <dl class="collapsible">
 *   <dt class="collapsibleHeader">
 *     A Title
 *   </dt>
 *   <dd class="collapsibleContent">
 *     
 *   </dd>
 * </dl>
 *
 * When the collapsible is toggled, then the dl will get an additional class
 * which switches between 'collapsedBlockCollapsible' and
 * 'expandedBlockCollapsible'. You can use this to style it accordingly, for
 * example:
 *
 * .expandedBlockCollapsible .collapsibleContent {
 *   display: block;
 * }
 *
 * .collapsedBlockCollapsible .collapsibleContent {
 *   display: none;
 * }
 *
 * If you add the 'collapsedOnLoad' class to the dl, then it will get
 * collapsed on page load, this is done, so the content is accessible even
when
 * javascript is disabled.
 *
 * If you add the 'inline' class to the dl, then it will toggle between
 * 'collapsedInlineCollapsible' and 'expandedInlineCollapsible' instead of
 * 'collapsedBlockCollapsible' and 'expandedBlockCollapsible'.
 *
 */

function activateCollapsibles() {
   
jq('dl.collapsible:not([class$=Collapsible])').find('dt.collapsibleHeader:first').click(function()
{
        var $container = jq(this).parents('dl.collapsible:first');
        if (!$container) return true;

        var $type = $container.hasClass('inline') ? 'Inline' :'Block';
        // toggle between collapsed and expanded classes
        $container.toggleClass('collapsed' + $type + 'Collapsible')
                  .toggleClass('expanded' + $type + 'Collapsible');
    }).end().each(function() {
        var $state = jq(this).hasClass('collapsedOnLoad') ?
                     'collapsed' : 'expanded';
        var $type = jq(this).hasClass('inline') ? 'Inline' :'Block';
        jq(this).removeClass('collapsedOnLoad')
               .addClass($state + $type + 'Collapsible');
    });
};
jq(activateCollapsibles);


Ho quindi provato a utilizzare il codice che la stessa pagina mi suggerisce,
cioè:

<dl class="collapsible">
 *   <dt class="collapsibleHeader">
 *     A Title
 *   </dt>
 *   <dd class="collapsibleContent">
 *     
 *   </dd>
 * </dl>

Ma senza alcun risultato. Allora ho aggiunto alla riga <dl
class="collapsible"> collapsedBlockCollapsible in modo da farla diventare
<dl class="collapsible collapsedBlockCollapsible"> e ho fatto la stessa cosa
con expandedBlockCollapsible.

Ovviamente ho fatto un procedimento alla volta e ho così ottenuto il "prima"
e il "dopo" dello spoiler. Peccato che mi manca il "durante". Coè se clicco
sopra lo spoiler non passa da un formato all'altro.


Allora ho provato a inserire le due nuove classi nel
/portal_skins/custom/ploneCustom.css ma niente.
Sento di essere vicino alla soluzione!
Cosa potrebbe mancare?

--
View this message in context: http://plone-regional-forums.221720.n2.nabble.com/Creare-uno-spoiler-tp6578171p6601981.html
Sent from the Plone - Italy mailing list archive at Nabble.com.


Maggiori informazioni sulla lista Plone-IT