Jquery ui Accordion - 如何在右侧添加图标?

发布于 2024-11-17 09:27:33 字数 907 浏览 2 评论 0原文

将 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 以使 jquery ui 图标出现在右侧吗?

whats the css/added html to add one of the jquery ui icons to the right side of the accordation widget's headers?

for example, if i have the 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?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(7

云淡月浅 2024-11-24 09:27: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;
}

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

I think i've figured this out. By adding this css it seems to work fine.

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

┾廆蒐ゝ 2024-11-24 09:27:33

这个怎么样? (请务必更改“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>

How about this? (be sure to change "redmond" theme to fit your theme)

<!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>
终陌 2024-11-24 09:27:33

这有效:

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

正如本文前面提到的,将绝对定位设置为“right: x;”没有完成这项工作(莫名其妙地)。所以我只是给了它一个非常大的“左”值。感觉有点老套,但就这样吧。

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.

甜心小果奶 2024-11-24 09:27:33

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

float:right for ui-icon should do the trick. Eventually, add float:left to span.title to avoid any IE issues.

久而酒知 2024-11-24 09:27:33

试试这个:

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

try this:

#accordion h3 a {width:100%}
#accordion h3 a .ui-icon {float:right}
浊酒尽余欢 2024-11-24 09:27:33

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

希望这会节省一些人的时间来让它工作!

干杯。

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.

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

千秋岁 2024-11-24 09:27:33

为什么你解决得太难了。简单的图标解决方案并关闭 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>

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.

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文