Jquery ui手风琴 - 如何在右侧添加图标？

  • Z时代
  • 2024-01-10
  • 分类：问答

什么是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的图标出现在右边？

回答：

我想我已经想通了。通过添加这个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; 
}

让我知道是否有任何问题与此发现。

回答：

float:right对于ui-icon应该做的伎俩。最终，请将float:left添加到span.title以避免任何IE问题。

回答：

试试这个：

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

回答：

这个怎么样？ （一定要更改 “雷蒙德” 的主题，以适应你的主题）

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

回答：

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

希望这可以节省某人一些时间让它工作！

干杯。

回答：

这工作：

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

正如前面在这篇文章中所提到的，设置绝对定位为 '右：X;'没有做这项工作（莫名其妙）。所以我给了它一个非常大的'左'价值。感觉一点点哈克，但这样吧。

回答：

为什么你解决得太辛苦。易于解决图标和关闭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>

以上是 Jquery ui手风琴 - 如何在右侧添加图标？ 的全部内容， 来源链接： utcz.com/qa/266946.html

回到顶部