acordeón de Jquery ui: cómo agregar un ícono a la derecha?

¿Cuál es el css/html agregado para agregar uno de los iconos de jquery ui al lado derecho de los encabezados del widget de concordancia?acordeón de Jquery ui: cómo agregar un ícono a la derecha?

por ejemplo, si tengo el 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>

puedo añadir CSS para hacer que el icono de interfaz de usuario jQuery aparece a la derecha?

Fuente

2011-06-25 Jai

Creo que lo he descubierto. Al agregar este CSS parece funcionar bien.

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

Dejarme saber si algún problema se encuentra con esto.

Fuente

2011-06-25 10:28:33 Jai

float:right para ui-icon debería hacer el truco. Eventualmente, agregue float:left a span.title para evitar cualquier problema de IE.

Fuente

2011-06-25 09:57:15

no parece hacer nada – Jai

el lapso ui-icono está posicionado absolutamente hacer esta inútil. En su lugar, cambie a la izquierda: .5em en la declaración ui-icon a la derecha: .5em –

probar esto:

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

Fuente

2011-06-25 11:23:02 thecodeparadox

@Jai hola, amigo- Espero que esto funcione – thecodeparadox

¿Qué tal esto? (Asegúrese de cambiar el tema "Redmond" para adaptarse a su tema)

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

Fuente

2011-11-25 06:10:46 sevmusic

Funcionó perfectamente. –

Gracias Sevmusic. Este es un seguimiento de su publicación para aquellos que desean tener acordeones anidados y aún tener un grupo de iconos sobre cada uno de ellos.

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

Con suerte, esto ahorraría a alguien un poco de tiempo para conseguir que esto funcione!

Saludos.

Fuente

2012-05-31 10:40:20 Kwex

Esto funciona:

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

Como se mencionó anteriormente en este post, estableciendo el posicionamiento absoluto a 'derecha: x;' no hace el trabajo (inexplicablemente). Así que le di un gran valor de 'izquierda'. Se siente un poco hacky pero que así sea.

Fuente

2013-10-29 15:12:10 redplanet

Asegúrate de tener "posición: absoluta;" conjunto: '.ui-acordeón .ui-acordeón-encabezado .ui-acordeón-encabezado-icono { \t \t posición: absoluta; \t \t derecha: 0.5em; \t \t parte superior: 0.5em; \t} ' – jasonk

Lo he usado para hacer que los acordeones arriba/abajo giren hacia el lado de r-h: ' .ui-acorordion .ui-acordeón-encabezado.ui-accordion-header-icon { \t position: absolute; \t izquierda: 95%; \t parte superior: 53%; } ' – redplanet

Por qué resuelves demasiado difícil. Solución fácil para iconos y desactivar el relleno del título en la etiqueta H3. Establezca esto en su css cargado después de los estilos de 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>

Fuente

2016-06-01 13:19:27

acordeón de Jquery ui: cómo agregar un ícono a la derecha?

Respuesta

Cuestiones relacionadas