2014-11-05 13 views
6

Sto lavorando su un flusso in cui utilizziamo la fisarmonica in stile Bootstrap (NON la fisarmonica con interfaccia utente jQuery). L'esigenza è di chiamare un servizio quando l'utente espande la fisarmonica. Ecco il codice HTML:Chiama un evento nel pannello Bootstrap espandi

<div class="accordion-dashboard"> 
    <div class="panel-group" id="accordion"> 
     <div class="panel panel-default"> 
      <div class="panel-heading row-white" data-toggle="collapse" data-parent="#accordion" href="#runtimeValue">     
       <table> 
        <tr> 
         <td><span class="badge blue">A</span></td> 
         <td><strong>Aenean ultricies est lorem,id feugiat velit euismod ut.Nullam inia.Prasent vel nu Sed ante mauris, eu lacus..</strong></td> 
         <td><i class="icon8 icon-paperclip"></i></td> 
         <td><span class="time">5 mins</span></td> 
        </tr>      
       </table>       
      </div> 
      <div id="runtimeValue" class="panel-collapse collapse "> 
       <div class="panel-body"> 

        <div class="row"> 
         <div class="col-lg-9 col-lg-offset-1"> 
          <table> 
           <tr> 
            <td class="text-muted">By</td> 
            <td><img width="24px" src="images/company-logo.png"> Company Admin</td> 
           </tr> 
           <tr> 
            <td class="text-muted">On</td> 
            <td class="text-muted">Friday- 7 Aug 2014, 9.00PM</td> 
           </tr> 
           <tr> 
            <td><i class="icon8 icon-paperclip"></i></td> 
            <td>dummyfile.pdf</td> 
           </tr> 
           <tr> 
            <td colspan="2"> 
             <h5>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.</h5> 
             <p>Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p> 
            </td> 
           </tr> 
          </table> 
         </div> 
         <div class="col-lg-1 pull-right"> 
          <span data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="btn-close icon8"></span> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div>  
</div> 

HREF attributi e le correspoding id attributi saranno decisi in fase di esecuzione e sono consapevole del modello di loro. Un approccio potrebbe essere vincolante per un evento al clic della fisarmonica, ma voglio averlo come ultima risorsa.

C'è un altro modo in cui posso chiamare un servizio quando l'utente fa clic e espande la fisarmonica?

+0

Quale versione di Bootstrap stai usando? – GregL

+0

Sto usando Bootstrap v3.0.1 –

risposta

7

In base allo Bootstrap source (ammesso per la versione più recente, 3.3.0), dovrebbe esserci un evento shown.bs.collapse emesso una volta completata la transizione. Puoi collegarti a quello.

18

È possibile utilizzare: -

$('#accordion').on('show.bs.collapse', function() { 
     //call a service here 
}); 
+1

questo evento viene attivato dopo il clic e non quando la transizione è finita. dovrebbe essere usato l'evento 'shown.bs.collapse' per sparare al termine dell'animazione. –

Problemi correlati