Javascript Jquery ui 手风琴 - 如何在右侧添加图标？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6477062/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-23 21:56:17 来源:igfitidea点击:
Jquery ui accordion - how to add an icon to the right?
提问by Jai
whats the css/added html to add one of the jquery ui icons to the right side of the accordation widget's headers?
将 jquery ui 图标之一添加到协调小部件标题的右侧的 css/添加的 html 是什么？
for example, if i have the html:
例如，如果我有 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>
can i add css to make the jquery ui icon appear on the right?
我可以添加 css 使 jquery ui 图标出现在右侧吗？
回答by Jai
I think i've figured this out. By adding this css it seems to work fine.
我想我已经弄清楚了。通过添加这个 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;
}
Let me know if any issues are found with this.
如果发现任何问题，请告诉我。
回答by sevmusic
How about this? (be sure to change "redmond" theme to fit your theme)
这个怎么样？（一定要更改“redmond”主题以适合您的主题）
<!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>
回答by redplanet
This works:
这有效：
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
/*right: 0.75em !important;*/
left: 585px;
}
As mentioned earlier in this post, setting the absolute positioning to 'right: x;' doesn't do the job (inexplicably). So I just gave it a very large 'left' value. Feels a wee bit hacky but so be it.
正如本文前面提到的，将绝对定位设置为 'right: x;' 不做这项工作（莫名其妙）。所以我只是给了它一个非常大的“左”值。感觉有点hacky，但就这样吧。
回答by Michael Gordon
Why you solve too hard. Easy solution for icons and switch off padding of title in H3 tag. Set this to your css loaded after jquery styles.
为什么你解决的太难了。图标的简单解决方案并关闭 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>回答by Kwex
Thanks Sevmusic. This is a follow-up on your post for those who want to have nested accordions and still have an icon-group above each one of them.
感谢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>
Hopefully, this would save someone a bit of time getting this to work!
希望这可以为某人节省一些时间来使其工作！
Cheers.
干杯。
回答by Ionu? Staicu
float:rightfor ui-iconshould do the trick. Eventually, add float:leftto span.titleto avoid any IE issues.
float:right因为ui-icon应该可以解决问题。最后，添加float:left到span.title以避免任何 IE 问题。
回答by thecodeparadox
try this:
尝试这个：
#accordion h3 a {width:100%}
#accordion h3 a .ui-icon {float:right}
