5

Tenho uma tabela. No Plano 1, eu usei o plugin jQuery HeapBox, porém como eu não sou bom com JavaScript, eu não soube configurar, gostaria que o select heapbox no Plano 1, tenha o mesmo efeito que o select normal, com o script que o membro Sergio me ajudou a desenvolver.

Segue a tabela:

<!--end:theme-option-->
<div class="flx-wrapper">
    <div class="wrapper clearfix">
        <br>
        <br>
        <section class="table-3col clearfix">
                    <div class="pricing-column">
                <div class="pricing-header">
                    <div class="pricing-title pt-azul1">Plano 1</div>
                    <div class="price azul1"><div class="trans"><sup>R$</sup><span>9,99</span>/mês</div></div>
                </div>
                <!--end:pricing-header -->
                <ul class="features ">
                    <li>
                        <p class="p-icone-tabela">
                      Exemplo com <a href="http://www.bartos.me/heapbox/#examples" target="_blank">HeapBox</a>
                      <div class="clear"></div>
                            <select class="basic-example select-ciclos" name="select">
    <option value="<sup>R$</sup><span>9,99</span>/mês" selected="selected">Mensal</option>
    <option value="<sup>R$</sup><span>28,77</span>">Trimestral -4%</option>  
    <option value="<sup>R$</sup><span>54,14</span>">Semestral -8%</option>
    <option value="<sup>R$</sup><span>99,99</span>/ano">Anual -16%</option>
</select>

                      </p>
</li>
                            <li>
                              <p class="p-icone-tabela"><i class="icon-hdd"></i>5GB de espaço</p></li>
                            <li><p class="p-icone-tabela"><i class="icon-exchange"></i>Tráfego ilimitado</p></li>
                            <li>
                              <p class="p-icone-tabela "><i class="icon-envelope-alt"></i>E-mails ilimitados</p></li>
                            <li>
                              <p class="p-icone-tabela"><i class="icon-globe"></i>1 domínio</p></li>
                        </ul><!--end:features-->                        
                        <div class="pricing-footer">
                            <a class="flx-blue-button flx-button" href="#">Assinar</a>
                        </div><!--end:pricing-footer-->         
                    </div><!--end:pricing-column-->
                    <div class="pricing-column">
                        <div class="pricing-header">
                            <div class="pricing-title pt-azul1">Plano 2</div>
                            <div class="price azul1"><div class="trans"><sup>R$</sup><span>16,99</span>/mês</div></div>
                        </div><!--end:pricing-header -->
                        <ul class="features">
                            <li>
                            <p class="p-icone-tabela">
                            Normal com meu script
                            <div class="clear"></div>
                            <select class="select-ciclos" name="select">
                                <option value="<sup>R$</sup><span>16,99</span>/mês" selected="selected">Mensal</option>
    <option value="<sup>R$</sup><span>48,93</span>">Trimestral -4%</option>  
    <option value="<sup>R$</sup><span>93,78</span>">Semestral -8%</option>
    <option value="<sup>R$</sup><span>169,99</span>/ano">Anual -16%</option> 
                            </select></p></li>
                            <li>
                              <p class="p-icone-tabela"><i class="icon-hdd"></i>6GB de espaço</p></li>
                            <li><p class="p-icone-tabela"><i class="icon-exchange"></i>Tráfego ilimitado</p></li>
                            <li>
                              <p class="p-icone-tabela "><i class="icon-envelope-alt"></i>E-mails ilimitados</p></li>
                            <li>
                              <p class="p-icone-tabela"><i class="icon-globe"></i>2 domínios</p></li>
                        </ul><!--end:features-->
                        <div class="pricing-footer">
                            <a class="flx-blue-button flx-button" href="#">Assinar</a>
                        </div><!--end:pricing-footer-->         
                    </div><!--end:pricing-column-->
                    <div class="pricing-column">
                        <div class="pricing-header">
                            <div class="pricing-title pt-azul1">Plano 3</div>
                            <div class="price azul1"><div class="trans"><sup>R$</sup><span>24,99</span>/mês</div></div>
                        </div><!--end:pricing-header -->
                        <ul class="features ft-ultimo">
                            <li><p class="p-icone-tabela">
                            Normal com meu script
                            <div class="clear"></div>
                            <select class="select-ciclos" name="select">
                                <option value="<sup>R$</sup><span>24,99</span>/mês" selected="selected">Mensal</option>
    <option value="<sup>R$</sup><span>71,97</span>">Trimestral -4%</option>  
    <option value="<sup>R$</sup><span>137,94</span>">Semestral -8%</option>
    <option value="<sup>R$</sup><span>249,99</span>/ano">Anual -16%</option>
                            </select></p></li> 
                            <li>
                              <p class="p-icone-tabela"><i class="icon-hdd"></i>7GB de espaço</p></li>
                            <li><p class="p-icone-tabela"><i class="icon-exchange"></i>Tráfego ilimitado</p></li>
                            <li>
                              <p class="p-icone-tabela "><i class="icon-envelope-alt"></i>E-mails ilimitados</p></li>
                            <li>
                              <p class="p-icone-tabela"><i class="icon-globe"></i>3 domínios</p></li>
                        </ul><!--end:features-->
                        <div class="pricing-footer pf-ultimo">
                            <a class="flx-blue-button flx-button" href="#">Assinar</a>
                        </div><!--end:pricing-footer-->         
                    </div><!--end:pricing-column-->                
                </section><!--end:table-3col-->
        <br>
        <br>

JS

$('select.select-ciclos').on('change', function () {
    var mostrador = $(this).closest('.pricing-column').find('.trans');
    var val = this.value;
    mostrador.animate({
        opacity: 0
    }, 100, function () {
        mostrador.html(val);
        mostrador.animate({
            opacity: 1
        }, 100)
    })
});

$(document).ready(function() {
    $(".basic-example").heapbox();
});

JSFiddle.

2
  • Você quer manter a funcionalidade que os selects normais tem usando a estilo do headbox, correto?
    – Laerte
    Commented 2/05/2014 às 0:11
  • Sim, isso mesmo! obrigado. Commented 2/05/2014 às 0:39

1 Resposta 1

3

Como você passou a usar o HeapBox o evento onChange não estava disparando como acontece no select nativo. O HeapBox manipula o evento de uma forma diferente, portanto a lógica para alterar o valor na coluna deve ser inserida dentro do evento do HeapBox como está na documentação do mesmo:

 $(".select-ciclos").heapbox({
'onChange':function(value,src){

    var mostrador = $(src).closest('.pricing-column').find('.trans');
    var val = value;
    mostrador.animate({
        opacity: 0
    }, 100, function () {
        mostrador.html(val);
        mostrador.animate({
            opacity: 1
        }, 100)
    })
    }
});  

$(document).ready(function() {
   $(".select-ciclos").heapbox();
 });
4
  • Cara, muito, muito obrigado, você me ajudou muito, me desculpe se foi groseiro é que fico nervoso quando estou ansioso rsrs, não foi minha intensão! Muito obrigado, de coração! você salvou meu dia! Obrigado! Obrigado! Obrigado! Obrigado! Obrigado! Obrigado! Obrigado! Obrigado! Obrigado! Obrigado! Obrigado! Obrigado! Obrigado! Obrigado! Commented 2/05/2014 às 2:49
  • 1
    tranquilo, que bom que deu certo, mas aconselho vc a se aprofundar um pouco em javascript se for precisar usar mais vezes, utilizar plugins jquery é uma boa pratica quando temos dominio, porém quando não conhecemos pode complicar e muito nossa vida, mas que bom que te ajudei, tenha uma boa noite Commented 2/05/2014 às 2:53
  • Você pode me indicar alguns lugares onde posso aprender mais javascript? eu sou um "noob" quando a questão é javascript. Commented 2/05/2014 às 2:55
  • 1
    @AlexandreLopes Não há nada errado em agradecer alguém por uma resposta, mas lembre-se de que a melhor forma de fazer isso é votando e aceitando a resposta como correta (como você fez). 1, 2 ou 10 comentários de obrigado têm muito pouco valor depois disso, servindo mais para poluir o site.
    – Gabe
    Commented 2/05/2014 às 15:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .