[wordpress插件] Accordion Shortcode手风琴简码

96

96

To make the accordions appear the way you want you need to add your own styling to them

要使手风琴以您希望的方式显示，您需要为其添加自己的样式

Lets you add accordion to your post and pages.

让您在您的帖子和页面中添加手风琴。

By using the following shortcodes

通过使用以下简码

[accordions]
  [手风琴]
[accordion title="title1"] tab content [/accordion]
[accordion title =“ title1”]标签内容[/ accordion]
[accordion title="title2"] another content tab [/accordion]
[accordion title =“ title2”]另一个内容标签[/ accordion]
[/accordions]
[/手风琴]
 
will generate the following html.
将生成以下html。
            
  
            
title1
            
  title1              
 
 
Some Text
            
一些文字
            
            
            
title2
            
  title2              
 
 
Some Text
            
一些文字
            
 
Additional attributes that you could pass into the shortcode
    
您可以传递给简码的其他属性
    
[accordions autoHeight=’true’  disabled=’false’ active=0  clearStyle=false collapsible=false fillSpace=false ]
    
[手风琴autoHeight ='true'已禁用='false'active = 0 clearStyle = false collapsible = false fillSpace = false] 
    
[accordion title=’title1′ class=’new-class’]
     
[accordion title ='title1'class ='new-class'] 
     
Some Text
    
一些文字
    
[/accordion]
    
[/手风琴] 
    
[accordion title=’title2′ class=’new-class’]
     
[accordion title ='title2'class ='new-class'] 
     
Some Text
    
一些文字
    
[/accordion]
    
[/手风琴] 
    
[/accordions]
[/手风琴] 
Sample CSS
示例CSS 
Here is some sample css to get you started.
以下是一些示例CSS，可以帮助您入门。
Another place to look for it would be the http://jqueryui.com/themeroller/, The shortcode used the jQuery UI to generate the accordion.
寻找它的另一个地方是http://jqueryui.com/themeroller/，该短代码使用jQuery UI生成了手风琴。
.ui-accordion-header{    
  .ui-accordion-header {    
margin:5px 0 0;
边距：5px 0 0;
}
}
.ui-accordion-header a{    
.ui手风琴标题a {    
padding:5px 12px;    
padding：5px 12px;    
background: #CCC;    
背景：#CCC；    
color:#FFF;    
颜色：#FFF;    
display:block;
显示：块;
}
}
.ui-accordion-header.ui-state-active a,
.ui-accordion-header.ui-state-active a，
.ui-accordion-header a:hover{    
.ui-accordion-header a：hover {    
background-color: #DDD;
背景颜色：#DDD；
}
}
.ui-accordion-content{    
.ui手风琴内容{    
padding-top:10px;
padding-top：10px;
}
}