Riduci/Ingrandisci div con jQuery

Fondamentalmente voglio ridurre al minimo alcuni div. Invece di usare "-" e "+", voglio usare alcuni simboli (da font-awesome) per minimizzare e massimizzare i div.Riduci/Ingrandisci div con jQuery

La mia domanda riguardo a questo; come posso inserire le classi delle icone in questo pezzo di codice? Ho provato sostituendo la parte .html con .attr, ma non ha funzionato.

<script> 
    $(".btn-minimize").click(function(){ 
    if($(this).html() == "-"){ 
     $(this).html("+"); 
    } 
    else{ 
     $(this).html("-"); 
    } 
    $(".widget-content").slideToggle(); 
    }); 
</script>

Grazie mille.

Aggiornamento:

Grazie mille per il vostro aiuto finora. Ma la parte di pari livello non mi va molto bene perché .widget-content non è uno dei pulsanti.

Quindi per riassumere; quando voglio minimizzare un widget e premere per pulsante, tutti i widget con la classe .widget-content minimizzano.

questo è un pezzo del mio HTML

<!--widget-1-2--> 
    <section class="widget span3"> 
     <!--front--> 
     <div id="front" class="widget-1-2 flip"> 
     <div class="widget-header"> 
      <h2>Monthly Statistics</h2> 
      <div class="btn-group pull-right"> 
       <button id="btn-front" class="btn"><i class="icon-cogs icon-white" alt="settings"></i></button> 
       <button class="btn btn-minimize"><i class="icon-chevron-up icon-white" alt="minimize"></i></button> 
       <button class="btn btn-close"><i class="icon-remove icon-white" alt="close"></i></button> 
      </div> 
     </div> 
     <div class="widget-content"><p>Dit is de voorkant.</p></div> 
    </div><!--/front--> 
</section>

E la parte JavaScript:

<script> 
    $(".icon-chevron-up").click(function(){ 
     $(this).toggleClass("icon-chevron-down"); 
     $(".widget-content").slideToggle(); 
    }); 
</script>

fonte

2013-04-23 Anonymous

Dire si dà .btn-minimize il segno meno in CSS. Dare anche .btn-minimize.btn-plus l'icona più. Javascript può quindi simile a questa:

$(".btn-minimize").click(function(){ 
    $(this).toggleClass('btn-plus'); 
    $(".widget-content").slideToggle(); 
});

Ecco un esempio su JSFiddle: http://jsfiddle.net/uzmjq/

fonte

2013-04-23 08:41:36

Grazie ragazzi. Ha funzionato bene! –

Ho usato i tuoi pezzi di codice e mi sta aiutando molto. Ma ora ho avuto problemi con il seguente problema. Ho creato una pagina in cui mostro diversi widget (grafici ad esempio). Per quei widget ho usato più o meno gli stessi div e le stesse classi di base. Ho usato la classe .widget-content più volte nelle diverse div. Quindi, quando minimizzo uno specifico div, tutti i div in cui ho usato la classe .widget-content minimizzano. Come posso risolvere questo? –

Supponi di aver messo il pulsante e il widget-content'-div nello stesso div wrapping. In quel div non risiede nient'altro. È quindi possibile modificare la terza riga del mio javascript fornito come segue: '$ (this) .siblings ('. Widget-content'). SlideToggle();' –

È possibile utilizzare i CSS per applicare i simboli/icone come immagini di sfondo, quindi hanno solo una classe CSS separato che contiene il altre icone che e quindi basta attivare questa classe nell'elemento.

CSS

.btn-minimize { 
    background-image: url("/path/to/icon"); 
} 

.maximize { 
    background-image: url("/path/to/another/icon"); 
}

jQuery

$(".btn-minimize").click(function() { 
    $(this).toggleClass("maximize"); 
    $(".widget-content").slideToggle(); 
});

fonte

2013-04-23 08:43:40

Riduci/Ingrandisci div con jQuery

risposta

Problemi correlati