2011-06-25 154 views
6

什麼是css /添加html來添加一個jquery ui圖標到accordation小部件頭部的右側?Jquery ui手風琴 - 如何在右側添加圖標?

例如,如果我有HTML:

<!-- Accordion --> 
    <div id="accordion"> 
     <div> 
      <h3><a href="#"><span class="title">Content</span><span class="ui-icon ui-icon-newwin"></span></a></h3> 
      <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> 
     </div> 
     <div> 
      <h3><a href="#">Second</a></h3> 
      <div>Phasellus mattis tincidunt nibh.</div> 
     </div> 
     <div> 
      <h3><a href="#">Third</a></h3> 
      <div>Nam dui erat, auctor a, dignissim quis.</div> 
     </div> 
    </div> 

我可以添加CSS使jQuery UI的圖標出現在右邊?

回答

9

我想我已經想通了。通過添加這個CSS它似乎工作正常。

#accordion a span.title { 
    float: left; 
    display: block; 
    margin-right: 10px; 
    margin-top: 5px; 
} 

#accordion a span.ui-icon { 
    position: static; 
    height: 20px; 
    margin-top: 0px; 
    margin-top: 3px; 
} 

讓我知道是否有任何問題與此發現。

0

float:right對於ui-icon應該做的伎倆。最終,請將float:left添加到span.title以避免任何IE問題。

+0

它似乎並沒有做任何事情 – Jai

+0

的UI圖標跨度絕對定位使這個沒用。相反,將ui-icon聲明中的左側:.5em更改爲右側:.5em –

0

試試這個:

#accordion h3 a {width:100%} 
#accordion h3 a .ui-icon {float:right} 
+0

@Jai您好,朋友 - 我希望這會起作用 – thecodeparadox

2

這個怎麼樣? (一定要更改 「雷蒙德」 的主題,以適應你的主題)

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>jQuery UI Example Page</title> 
<link type="text/css" href="css/redmond/jquery-ui-1.8.16.custom.css" rel="stylesheet" /> 
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> 
<script type="text/javascript"> 
    $(function(){ 
     $("#accordion").accordion({ header: "h3" });  
    }); 
</script> 
<style type="text/css"> 
    body { font: 62.5% "Trebuchet MS", sans-serif; margin: 50px; } 
    ul.icons { margin: 0; padding: 0;} 
    ul.icons li { margin: 2px; position: relative; padding: 2px 0; cursor: pointer; float: left; list-style: none;} 
    ul.icons span.ui-icon { float: left; margin: 0 4px;} 
    .acc-content { position:relative; } 
    .icon-group { position:absolute; top:0px; right:2px; z-index:9999; cursor:pointer;} 
</style> 
</head> 
<body> 
<div id="accordion"> 
    <div class="acc-content"> 
     <h3><a href="#">First</a></h3> 
     <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> 
     <ul class="icons icon-group ui-widget ui-helper-clearfix"> 
      <li title="Complete"><span class="ui-icon ui-icon-check"></span></li> 
      <li title="Help" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-help"></span></li> 
     </ul> 
    </div> 
    <div class="acc-content"> 
     <h3><a href="#">Second</a></h3> 
     <div>Phasellus mattis tincidunt nibh.</div> 
    </div> 
    <div class="acc-content"> 
     <h3><a href="#">Third</a></h3> 
     <div>Nam dui erat, auctor a, dignissim quis.</div> 
    </div> 
</div> 
</body> 
</html> 
+0

完美工作。 –

0

感謝Sevmusic。對於那些想要嵌套手風琴並且在每個手風琴上面仍然有一個圖標組的人,這是您的帖子的後續內容。

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

     $(".xy").accordion({ 
      header: "h4", 
      collapsible: true, 
      active: false, 
      autoHeight: false 
     }); 
    }); 
</script> 
<style type="text/css"> 
    ul.icons 
    { 
     margin: 0; 
     padding: 0; 
    } 
    ul.icons li 
    { 
     margin: 2px; 
     position: relative; 
     padding: 2px 0; 
     cursor: pointer; 
     float: left; 
     list-style: none; 
    } 
    ul.icons span.ui-icon 
    { 
     float: left; 
     margin: 0 4px; 
    } 
    .accordionContent 
    { 
     position: relative; 
    } 
    .icon-group 
    { 
     position: absolute; 
     top: 0px; 
     right: 2px; 
     z-index: 9999; 
     cursor: pointer; 
    } 
</style> 
<div class="x"> 
    <div class="accordionContent"> 
     <h3> 
      <a href="#">First Outer</a></h3> 
     <div> 
      <div class="xy" style="position: relative;"> 
       <h4> 
        <a href="#">Second Inner</a></h4> 
       <div> 
        Phasellus mattis tincidunt nibh.</div> 
       <ul class="icons icon-group ui-widget ui-helper-clearfix"> 
        <li title="Complete"><span class="ui-icon ui-icon-pencil"></span></li> 
        <li title="Help" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-help"> 
        </span></li> 
       </ul> 
      </div> 
     </div> 
     <ul class="icons icon-group ui-widget ui-helper-clearfix"> 
      <li title="Complete"><span class="ui-icon ui-icon-check"></span></li> 
      <li title="Help" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-help"> 
      </span></li> 
     </ul> 
    </div> 
</div> 

希望這可以節省某人一些時間讓它工作!

乾杯。

1

這工作:

.ui-accordion .ui-accordion-header .ui-accordion-header-icon { 
    /*right: 0.75em !important;*/ 
    left: 585px; 
} 

正如前面在這篇文章中所提到的,設置絕對定位爲 '右:X;'沒有做這項工作(莫名其妙)。所以我給了它一個非常大的'左'價值。感覺一點點哈克,但這樣吧。

+0

確保您有「位置:絕對;」設置: '.ui-accordion .ui-accordion-header .ui-accordion-header-icon { \t \t position:absolute; \t \t right:0.5em; \t \t top:0.5em; \t}' – jasonk

+0

我已經用它來獲得手風琴上/下V形邊緣到r-h側: '.ui-accordion .ui-accordion-header。ui-accordion-header-icon { \t position:absolute; \t left:95%; \t top:53%; }' – redplanet

0

爲什麼你解決得太辛苦。易於解決圖標和關閉H3標籤中的標題填充。將此設置爲jQuery樣式後加載的CSS。

$ = jQuery.noConflict(); 
 
$(function() { 
 
     var icons = { 
 
      header: "ui-icon-circle-arrow-e", 
 
      activeHeader: "ui-icon-circle-arrow-s" 
 
     }; 
 
     $("#accordion").accordion({ 
 
      icons: icons, 
 
      heightStyle: "content", 
 
      collapsible: true 
 
     }); 
 
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<div style="width: 90%; margin: 3% auto 5% auto;"> 
 
    <div id="accordion" style="border: 0;"> 
 
     <h3> 
 
      <span class="width-fix"># 1</span><span>Test 00</span> 
 
     </h3> 
 
     <div> 
 
      <p> 
 
       Nam malesuada egestas magna, et suscipit magna auctor quis. Donec rhoncus elementum sapien, vel euismod ex aliquam ultrices. Maecenas aliquet at ligula consectetur lobortis. Ut eget turpis sem. Etiam blandit, tortor vel congue vulputate, elit velit volutpat ipsum, sit amet elementum dui augue vel ante. Donec vel placerat risus, nec dapibus dolor. Curabitur molestie justo quis est rhoncus tincidunt. Integer posuere mauris et eros efficitur, sed finibus nunc blandit. In convallis arcu ac mi ornare viverra. 
 
      </p> 
 
     </div> 
 
     <h3> 
 
      <span class="black width-fix"># 2</span><span>Test 01</span> 
 
     </h3> 
 
     <div> 
 
      <p> 
 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sollicitudin, erat a ultricies molestie, orci lectus faucibus metus, a luctus est ipsum non odio. Duis cursus fermentum nunc, et pellentesque lorem tristique et. Donec bibendum lacus in mi feugiat ornare. Etiam a scelerisque est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam in enim at erat ornare posuere a id eros. Donec id tempus turpis. Integer scelerisque turpis ut finibus fermentum. In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent molestie elit lacus, a pellentesque nisi pulvinar eget. Nulla cursus aliquet eros a dapibus. Aliquam vitae purus sed mi accumsan molestie pretium vel arcu. Integer tempor ut magna in porttitor. Nulla facilisi. 
 
      </p> 
 
     </div> 
 
     <h3> 
 
      <span class="black width-fix"># 3</span><span class="orange">Test 02</span> 
 
     </h3> 
 
     <div> 
 
      <p> 
 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sollicitudin, erat a ultricies molestie, orci lectus faucibus metus, a luctus est ipsum non odio. Duis cursus fermentum nunc, et pellentesque lorem tristique et. Donec bibendum lacus in mi feugiat ornare. Etiam a scelerisque est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam in enim at erat ornare posuere a id eros. Donec id tempus turpis. Integer scelerisque turpis ut finibus fermentum. In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent molestie elit lacus, a pellentesque nisi pulvinar eget. Nulla cursus aliquet eros a dapibus. Aliquam vitae purus sed mi accumsan molestie pretium vel arcu. Integer tempor ut magna in porttitor. Nulla facilisi. 
 
      </p> 
 
     </div> 
 
     <h3> 
 
      <span class="black width-fix"># 4</span><span class="orange">Test 03</span> 
 
     </h3> 
 
     <div> 
 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sollicitudin, erat a ultricies molestie, orci lectus faucibus metus, a luctus est ipsum non odio. Duis cursus fermentum nunc, et pellentesque lorem tristique et. Donec bibendum lacus in mi feugiat ornare. Etiam a scelerisque est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam in enim at erat ornare posuere a id eros. Donec id tempus turpis. Integer scelerisque turpis ut finibus fermentum. In hac habitasse platea dictumst. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent molestie elit lacus, a pellentesque nisi pulvinar eget. Nulla cursus aliquet eros a dapibus. Aliquam vitae purus sed mi accumsan molestie pretium vel arcu. Integer tempor ut magna in porttitor. Nulla facilisi. 
 
     </div> 
 
    </div> 
 
</div> 
 
<style> 
 
    .ui-accordion .ui-accordion-icons { 
 
    padding-left: 2.2em; 
 
} 
 
.ui-accordion .ui-accordion-header .ui-accordion-header-icon { 
 
    position: absolute; 
 
    left: unset; 
 
    top: 50%; 
 
    right: .5em; 
 
} 
 
.width-fix { 
 
    width: 50px; 
 
    display: block; 
 
    float: left; 
 
} 
 

 
    </style>