堆栈内存溢出
  繁体   English   中英

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

[英]Jquery ui accordion - how to add an icon to the right?

 原文  2011-06-25 09:53:24  5   7    javascript/ jquery/ html/ css/ accordion

问题描述

什么是css /添加html将一个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图标出现在右侧吗？

7 个解决方案

解决方案1
 9 已采纳  2011-06-25 10:28:33

我想我已经弄明白了。 通过添加此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;
}

如果发现任何问题，请告诉我。

解决方案2
 2  2011-11-25 06:10:46

这个怎么样？ （务必更改“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>

解决方案3
 1  2013-10-29 15:12:10

这有效： 

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

如本文前面所述，将绝对定位设置为'right：x;' 没有工作（莫名其妙）。 所以我给了它一个非常大的“左”值。 感觉有点hacky但是就这样吧。

解决方案4
 0  2012-05-31 10:40:20

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

希望这可以节省一些时间让这个工作！

干杯。

解决方案5
 0  2016-06-01 13:19:27

为什么你解决太多问题。 简单的图标解决方案和关闭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>

解决方案6
 0  2011-06-25 09:57:15

float:right ui-icon float:right应该可以解决问题。 最后，将float:left添加到span.title以避免任何IE问题。

解决方案7
 0  2011-06-25 11:23:02

尝试这个： 

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 带有右侧删除图标的jQuery手风琴 JQuery UI添加到手风琴 如何将元素添加到jQuery UI手风琴头？ JQuery UI：如何从特定的Accordion组中删除Icon？ 重新定位Jquery ui手风琴的标题图标 如何将图标添加到手风琴菜单 在可拖动的jQuery UI上添加图标 Jquery Ui手风琴在标题后创建图标标签 Jquery手风琴上的图标更改 jQuery UI手风琴。 触发事件时如何关闭手风琴？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM