jquery移动导航栏图标出现在圈子里

时间:2012-05-31 07:14:40

标签: jquery-mobile

我正在使用自定义图标,但它们出现在一个圆圈中。这是一个我需要关闭以阻止它的课程吗?

<div data-theme="a" data-role="footer" data-position="fixed">
                <div data-role="navbar" data-iconpos="top">
                    <ul>
                        <li>
                            <a href="#" id="test1" data-theme="e" data-icon="custom" data-corners="false" data-iconshow="true" data-wrapperels="span" class="ui-btn-active">
                                <span class="foot_font">test1</span>
                            </a>
                        </li>
                        <li>
                            <a href="page40.html" id="test2" data-theme="e" data-icon="custom" data-corners="false" data-iconshow="true" data-wrapperels="span">
                                <span class="foot_font">test2</span>
                            </a>
                        </li>
                        <li>
                            <a href="page44.html" id="test3" data-theme="e" data-icon="custom" data-corners="false" data-iconshow="true" data-wrapperels="span">
                                <span class="foot_font">test3</span>
                            </a>
                        </li>
                        <li>
                            <a href="page22.html" id="test4" data-theme="e" data-icon="custom" data-corners="false" data-iconshow="true" data-wrapperels="span">
                                <span class="foot_font">test4</span>
                            </a>
                        </li>
                        <li>
                            <a href="page47.html" id="test5" data-theme="e" data-icon="custom" data-corners="false" data-iconshow="true" data-wrapperels="span">
                                <span class="foot_font">test5</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

enter image description here

2 个答案:

答案 0 :(得分:1)

您可以通过添加

来覆盖此css行为
.ui-icon
{
    border-radius:0px!important;
    -moz-border-radius:0px!important;
    -webkit-border-radius:0px!important;
    -ms-border-radius:0px!important;
    -o-border-radius:0px!important;
}

答案 1 :(得分:1)

要删除背后的圆圈灰色背景,只需添加

即可
ui-nodisc-icon

类到链接/按钮

例如,您的代码可以更改为

<a href="#" id="test1" data-theme="e" data-icon="custom" data-corners="false" data-iconshow="true" data-wrapperels="span" class="ui-btn-active ui-nodisc-icon">
    <span class="foot_font">test1</span>
</a>