jQuery UI Accordéon CSS

Question

Je prévois d'utiliser l'interface utilisateur jQuery accordéon et aussi le thème par défaut fourni

Je vois que l'interface utilisateur jQuery accordéon utilise de cette URL les classes suivantes link text

<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> 

je ne veut pas utiliser le CSS entier du fichier de thème, seulement ceux requis pour l'UI Accordion. Cependant je ne suis pas capable de créer le même effet. Quelqu'un peut-il aider?

Answer 1

DEMO:http://so.devilmaycode.it/jquery-ui-accordion-css/

mis à jour à la dernière version jQuery 10

vous n'avez pas besoin d'avoir tout ce code! vous avez copié l'exemple jquery qui explique comment jquery crée le widget accordéon complet!

vous avez juste besoin d'avoir comme ceci:

HTML

<div id="accordion"> 
    <h3><a href="#">caption 1</a></h3> 
    <div>some text here  
    </div><h3><a href="#">caption 2</a></h3> 
    <div>some text here  
    </div><h3><a href="#">caption 3</a></h3> 
    <div>some text here  
    </div><h3><a href="#">caption 4</a></h3> 
    <div>some text here  
    </div> 
</div> 

jQuery/JS

$(function() { 
    $("#accordion").accordion(); 
}); 

CSS

.ui-accordion .ui-accordion-header { 
    cursor: pointer; 
    position: relative; 
    margin-top: 1px; 
    zoom: 1; 
} 
.ui-accordion .ui-accordion-li-fix { 
    display: inline; 
} 
.ui-accordion .ui-accordion-header-active { 
    border-bottom: 0 !important; 
} 
.ui-accordion .ui-accordion-header a { 
    display: block; 
    font-size: 1em; 
    padding: .5em .5em .5em .7em; 
} 
/* IE7-/Win - Fix extra vertical space in lists */ 
.ui-accordion a { 
    zoom: 1; 
} 
.ui-accordion-icons .ui-accordion-header a { 
    padding-left: 2.2em; 
} 
.ui-accordion .ui-accordion-header .ui-icon { 
    position: absolute; 
    left: .5em; 
    top: 50%; 
    margin-top: -8px; 
} 
.ui-accordion .ui-accordion-content { 
    padding: 1em 2.2em; 
    border-top: 0; 
    margin-top: -2px; 
    position: relative; 
    top: 1px; 
    margin-bottom: 2px; 
    overflow: auto; 
    display: none; 
    zoom: 1; 
} 
.ui-accordion .ui-accordion-content-active { 
    display: block; 
} 

NOTE: ce minimum css exigent également le .ui-widget CSS voir la démo!

Answer 2

Dans le jQuery UI Download page, vous pouvez sélectionner les parties du javascript et css dont vous avez besoin. Si vous désélectionnez tout, puis sélectionnez le widget Accordéon, vous obtiendrez uniquement le JavaScript et CSS pour l'accordéon dans votre téléchargement.

Answer 3

Pour l'effet de mise en valeur et tout utiliser ce css

.ui-state-hover, 
.ui-widget-content .ui-state-hover, 
.ui-widget-header .ui-state-hover, 
.ui-state-focus, 
.ui-widget-content .ui-state-focus, 
.ui-widget-header .ui-state-focus { 
border: 1px solid #999999/*{borderColorHover}*/; 
background: #dadada/*{bgColorHover}*/ url(images/ui-bg_glass_75_dadada_1x400.png)/*{bgImgUrlHover}*/ 50%/*{bgHoverXPos}*/ 50%/*{bgHoverYPos}*/ repeat-x/*{bgHoverRepeat}*/; 
font-weight: normal/*{fwDefault}*/; 
color: #212121/*{fcHover}*/; 
} 
.ui-state-hover a, 
.ui-state-hover a:hover, 
.ui-state-hover a:link, 
.ui-state-hover a:visited { 
color: #212121/*{fcHover}*/; 
text-decoration: none; 
} 
.ui-state-active, 
.ui-widget-content .ui-state-active, 
.ui-widget-header .ui-state-active { 
border: 1px solid #aaaaaa/*{borderColorActive}*/; 
background: #ffffff/*{bgColorActive}*/ url(images/ui-bg_glass_65_ffffff_1x400.png)/*{bgImgUrlActive}*/ 50%/*{bgActiveXPos}*/ 50%/*{bgActiveYPos}*/ repeat-x/*{bgActiveRepeat}*/; 
font-weight: normal/*{fwDefault}*/; 
color: #212121/*{fcActive}*/; 
} 
.ui-state-active a, 
.ui-state-active a:link, 
.ui-state-active a:visited { 
color: #212121/*{fcActive}*/; 
text-decoration: none; 
} 

.ui-accordion .ui-accordion-header { 
display: block; 
cursor: pointer; 
position: relative; 
margin-top: 2px; 
padding: .5em .5em .5em .7em; 
min-height: 0; /* support: IE7 */ 
border-top: 1px solid #cccccc; 
border-bottom: 1px solid #cccccc; 
} 


.ui-accordion .ui-accordion-header :hover{background-color:#f7f7f7;} 


.ui-accordion .ui-accordion-icons { 
padding-left: 2.2em; 
} 
.ui-accordion .ui-accordion-noicons { 
padding-left: .7em; 
} 
.ui-accordion .ui-accordion-icons .ui-accordion-icons { 
padding-left: 2.2em; 
} 
.ui-accordion .ui-accordion-header .ui-accordion-header-icon { 
position: absolute; 
left: .5em; 
top: 50%; 
margin-top: -8px; 
} 
.ui-accordion .ui-accordion-content { 
padding: 2em 1.2em; 
border-top: 0; 
overflow: auto; 
}