2012-04-01 3 views
0

Я хочу поставить границы уместности аккордеона плагина на «NONE», но я не найти код, который отвечает делать это.Удалить границу на аккордеон UI

Спасибо :)

есть скриншот: My example

Я хочу, чтобы установить желтую рамку на "границе: нет". И у меня есть еще одна проблема, которая заключается в том, что при выборе одной из переключателей я не могу изменить свой выбор и выбрать другой, например, если другие отключены. У вас есть идея? Thks :)

<script type="text/javascript"> 
     $(function(){ 
     // Accordion 
     $("#accordion").accordion({ 
      autoHeight: false, 
      navigation: true, 
      header: "h3" }); 
     }); 
    </script> 


    <form id="accordion" action="commande_chequier_succes.html" method="post"> 


     <div class="prelevement_auto"> 
     <h3 class="prelevement_auto_p"> 
      <input type="radio" name="paiement" /><strong>Prélèvement automatique</strong> 
     </h3> 
     <div class="target1"> 
      <p class="xx">J'autorise le prélèvement sur mon compte bancaire :<br/><strong>XXXXXXX XXXXXXX XXXX XX</strong></p> 
      <p> 
      <input class="target_submit" name="prelevement_auto_submit" type="submit" value="COMMANDER" /> 
      </p> 
     </div> 
     </div> 


     <div class="cesu"> 
     <h3 class="cesu_p"> 
      <input type="radio" name="paiement" /><strong>CESU</strong> 
     </h3> 
     <div class="target3"> 
      <p> 
      <strong>Frais de traitement 3.90 euros</strong><br/>Pour des raisons de sécurité, nous vous demandons de nous retourner vos CESU uniquement 
       par Lettre Recommandée Avec Accusé de Réception (LRAR) à l'adresse suivante :<br/><br/> 
       France Ménage 128 rue de la Boétie 75008 Paris<br/><br/> 
       N'oubliez pas de cocher la case assurance R3 dans votre LRAR qui vous permettra de vous faire rembourser vos CESU à hauteur de 458 euros maximum. 
      </p> 
      <input class="target_submit" type="submit" name="cesu_submit" value="COMMANDER" /> 
     </div> 
     </div> 


    </form> 

ответ

2

Добавьте следующий код на свою страницу, и граница не появится.

<style> 
h3 { 
    outline:none; 
} 
</style> 

Чтобы устранить проблему радиокнопки, добавьте event: "mouseup" в свой аккордеон JavaScript функции.

См. Working jsfiddle demo

+0

Thks много! Оно работает !! : D – Copernic

+0

Пожалуйста, как насчет переключателей, которые отключены, когда один из них выбран? – Copernic

+0

Добавьте «событие:« mouseup »к функции аккордеона, чтобы устранить проблему с переключателем. См. Мой отредактированный ответ и демон jsFiddle. – neo108

0

Взгляните на код, сгенерированный с помощью плагина. С http://jqueryui.com/demos/accordion/ вкладки тематизации:

Sample разметка с JQuery UI CSS Framework классами

<div class="ui-accordion ui-widget ui-helper-reset"> 
    <h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top"> 
    <span class="ui-icon ui-icon-triangle-1-s"/> 
    <a href="#">Section 1</a> 
    </h3> 
    <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active"> 
     Section 1 content 
    </div> 
    <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all"> 
    <span class="ui-icon ui-icon-triangle-1-e"/> 
    <a href="#">Section 2</a> 
    </h3> 
    <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom"> 
    Section 2 content 
    </div> 
    <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all"> 
    <span class="ui-icon ui-icon-triangle-1-e"/> 
    <a href="#">Section 3</a> 
    </h3> 
    <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom"> 
    Section 3 content 
    </div> 
</div> 

Это даст вам классы для элементов, которые вы хотите стиль.

+0

Thks !! Я собираюсь попробовать это прямо сейчас. – Copernic

+0

граница не меняется ... – Copernic

+0

Будет легче выяснить, что происходит, если вы можете опубликовать свой код соответствующих разделов. Благодарю. – neo108

0

Попробуйте поставить это в нижней части файла CSS:

h3.prelevement_auto_p {border:0px;} 

или

h3.ui-accordion-header {border:0px;} 

Если это не сработает, попробуйте встроенный стиль:

<form id="accordion" ....> 
    <h3 class="prelevement_auto_p" style="border:0px;">...</h3> 

Я не думаю, что вы должны использовать радиокнопки в заголовке - заголовок должен использоваться только для показа названия и для открытия и закрытия элементов аккордеона при нажатии.

Смежные вопросы