2010-05-03 237 views
3

我打算使用jQuery UI的手風琴,也默認主題提供jQuery UI的手風琴CSS

我看到了jQuery UI手風琴使用下面的類都是從這個網址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> 

我做不想使用主題文件中的整個CSS,只需使用UI手風琴所需的CSS。但是我無法創造相同的效果。任何人都可以幫忙

+0

看到更新! ;-) – 2010-05-03 10:12:04

回答

8

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

更新到最新版本的jQuery 10

你不需要把所有的代碼!你已經複製了jquery示例,它解釋了jquery如何創建完整的手風琴小部件!

你只需要擁有這樣的:

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

注意:這個最小的css也需要.ui-widget CSS才能看到演示!

+0

是的,但你沒有得到這種效果 - 就像th頭沒有突出顯示等等 – ScG 2010-05-03 08:41:41

+0

是的,當然你會得到所有的效果! – 2010-05-03 08:42:33

+0

嗨,我有這樣的實現,但這是一個缺少箭頭圖標。我可以如何添加icone? – codebot 2014-03-05 09:02:43

6

jQuery UI Download page中,您可以選擇您需要的javascript和css部分。如果您取消選擇全部,然後選擇Accordion小部件,則只會在下載中獲得手風琴的JavaScript和CSS。

1

對於高亮效果,一切都用這個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; 
}