Jquery ui手风琴-如何在右侧添加图标
Jquery ui accordion - how to add an icon to the right?
在accordation小部件的标题右侧添加一个jquery ui图标的css/added 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>
我可以添加css使jqueryui图标出现在右边吗？
我想我已经明白了。通过添加这个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;
}
如果发现任何问题，请告诉我。
这个怎么样？（一定要更改"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>
这是有效的：
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
/*right: 0.75em !important;*/
left: 585px;
}
正如本文前面提到的，将绝对定位设置为"right：x；"做不到这份工作（莫名其妙）。所以我只是给它一个很大的"左"值。感觉有点生气，但就这样吧。
float:right对ui-icon应该可以做到这一点。最后，将float:left添加到span.title以避免任何IE问题。
试试这个：
#accordion h3 a {width:100%}
#accordion h3 a .ui-icon {float:right}
谢谢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>
希望这能为人们节省一点时间，让它发挥作用！
干杯。
为什么解决得太难。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>相关文章：
- 单击更改图标并通过javascript添加一个css类
- 在标记mapbox.js上添加自定义图标
- DataTables:在按钮中的文本旁边添加图标
- 如何在jquery移动中添加图标
- 如何在Phonegap项目中添加图标和启动画面
- Chrome 扩展程序，用于通过在匹配的链接旁边添加图标来操作网页
- 如何通过添加图标来提高jQuery的性能
- 在选项卡材质设计精简版中添加图标按钮
- 如何在angular js>中的选项卡中添加图标;
- 在基于URL的导航上添加图标类
- 如何在vis.js中添加图标到节点
- 如何在社交菜单栏添加图标
- 添加图标到角材质输入
- 为jquery FullCalendar的标题添加图标
- 为Sir Trevor方块添加图标
- 在Cordova配置中添加图标后，Tabris.JS构建失败
- 不能在jQuery UI日期选择器中添加图标
- Jquery ui手风琴-如何在右侧添加图标
- 在行按钮单击并添加图标时生成事件?如何
- 我正在锚标签的前面添加一个图标，但是，我想阻止它添加图标多次
