Jquery ui accordion - jak dodać ikonę w prawo?

co to jest css/dodany html, aby dodać jedną z ikon jquery ui po prawej stronie nagłówków widgetu harmonii?Jquery ui accordion - jak dodać ikonę w prawo?

na przykład, jeśli mam 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>

mogę dodać css, aby jquery ui ikona pojawi się na prawo?

Źródło

2011-06-25 Jai

Chyba wymyśliłem to. Dodanie tego css wydaje się działać dobrze.

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

Daj mi znać, jeśli pojawią się jakiekolwiek problemy.

Źródło

2011-06-25 10:28:33 Jai

float:right dla ui-icon powinien załatwić sprawę. Ewentualnie dodaj float:left do span.title, aby uniknąć problemów związanych z IE.

Źródło

2011-06-25 09:57:15

nie wydaje się robić nic – Jai

rozpiętości ui-ikona jest pozycjonowany bezwzględnie czyni to bezużyteczne. Zamiast tego zmień po lewej: .5em w deklaracji ikony-u w prawo: .5em –

spróbuj tego:

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

Źródło

2011-06-25 11:23:02 thecodeparadox

@Jai cześć, przyjacielu- mam nadzieję, że to zadziała – thecodeparadox

Jak na ten temat? (Należy zmienić "Redmond" temat, aby dopasować swój temat)

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

Źródło

2011-11-25 06:10:46 sevmusic

Działa doskonale. –

Dzięki Sevmusic. Jest to kontynuacja twojego wpisu dla tych, którzy chcą mieć zagnieżdżone akordeony i nadal mają grupę ikon nad każdym z nich.

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

Mam nadzieję, że zaoszczędziłoby to trochę czasu, aby to zadziałało!

Pozdrawiam.

Źródło

2012-05-31 10:40:20 Kwex

to działa:

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

Jak wspomniano wcześniej w tym poście, ustawianie pozycjonowanie bezwzględne do 'prawej: X'; nie wykonuje pracy (w niewytłumaczalny sposób). Więc właśnie dałem mu bardzo dużą "lewą" wartość. Czuje się trochę hacky, ale niech tak będzie.

Źródło

2013-10-29 15:12:10 redplanet

Upewnij się, że masz "position: absolute;" zestaw: '.ui-akordeon .ui-akordeon-header .ui-akordeon-nagłówek-ikona { \t \t pozycja: absolutna; \t \t prawe: 0,5em; \t \t do góry: 0,5em; \t} ' – jasonk

Użyłem tego, aby ustawić akordeon w górę/dół w stronę r-h: ' .ui-accordion .ui-accordion-header.ui-accordion-header-icon { \t pozycja: absolutna; \t left: 95%; \t do góry: 53%; } ' – redplanet

Dlaczego rozwiązujesz zbyt mocno. Proste rozwiązanie dla ikon i wyłączenie dopełniania tytułu w tagu H3. Ustaw to na twoje css załadowane po stylach jquery.

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

Źródło

2016-06-01 13:19:27

Jquery ui accordion - jak dodać ikonę w prawo?

Odpowiedz

Powiązane problemy