2012-03-06 41 views
2

我遇到了一个奇怪的问题,导航栏&列表视图项目,有时标记jqm创建添加UI角落顶部& ui-corner-bottom类。这是没有记录,我不知道为什么会发生这种情况,我没有任何自定义功能,我使用的是Chrome Mac 17jQuery的移动导航栏和列表视图项有时会得到圆角

我的html(更新和删除data-role =“button” ):

<div data-role="navbar" data-iconpos="right"> 
    <ul> 
     <li><a href="#" class="help_button" data-icon="info" data-iconpos="notext">Help</a></li> 
     <li><a href="#" id="save_button" data-icon="check">Save</a></li> 
    </ul> 
    </div> 

这里的HTML jQuery的创建(数据角色= “按钮” 删除,但仍在与圆角的增强):

<div data-role="navbar" data-iconpos="right" class="ui-navbar" role="navigation"> 
    <ul class="ui-grid-a"> 
    <li class="ui-block-a"><a href="#" class="help_button ui-btn ui-btn-up-a ui-btn-icon-right ui-btn-up-undefined" data-icon="info" data-iconpos="right" data-corners="false" data-shadow="false" data-iconshadow="true" data-inline="false" data-wrapperels="span"><span class="ui-btn-inner ui-corner-top ui-corner-bottom"><span class="ui-btn-text">Help</span></span></a></li> 
    <li class="ui-block-b"><a href="#" id="save_button" data-icon="check" data-corners="false" data-shadow="false" data-iconshadow="true" data-inline="false" data-wrapperels="span" data-iconpos="right" class="ui-btn ui-btn-up-a ui-btn-icon-right" name="save_button"><span class="ui-btn-inner ui-corner-top ui-corner-bottom"><span class="ui-btn-text">Save</span></span></a></li> 
    </ul> 
</div> 

如何看起来:

Rounded corners on navbar

同样是发生在页脚导航栏

Rounded corners on footer navbar

它也开始做给列表视图项

JQM的HTML:

<li data-corners="false" data-shadow="false" data-iconshadow="true" data-inline="false" data-wrapperels="div" data-icon="arrow-r" data-iconpos="right" data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-li-has-icon ui-corner-bottom ui-btn-up-a"> 
    <div class="ui-btn-inner ui-li ui-corner-top ui-corner-bottom"> 
    <div class="ui-btn-text"> 
     <a href="#settings" class="ui-link-inherit"> 
     <img src="editor/images/icons/settings.png" class="ui-li-icon ui-li-thumb" alt=""> 
     Site settings 
     </a> 
    </div> 
    <span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span> 
    </div> 
</li> 

rounded inset listview

发生在一些1.1.0 RC1演示过:

http://jquerymobile.com/demos/1.1.0-rc.1/docs/toolbars/bars-fixed-options.html

+0

昨天我想知道同样的事情。你应该将此作为问题发布到https://github.com/jquery/jquery-mobile/issues – frequent 2012-03-07 10:45:34

回答

0

这是与jquery移动可折叠INFACT一个错误,角类被施加到所有的.ui-BTN-内部元件,而不仅仅是那些在一个可折叠的范围。

它已被固定在jQuery Mobile的最新源,以下拉请求细节的修补程序:https://github.com/jquery/jquery-mobile/pull/3661

我与此修复程序测试的最新的源代码,并彻底解决了这个问题。

+0

您使用的是collapsibles吗?你没有在你的代码中显示任何... – Jasper 2012-03-07 17:28:29

+0

是的,但在无关的内容。 – Rob 2012-03-08 12:42:42

1

在导航栏取下链接标签data-role="button"。它们被初始化为button小部件和navbar链接小部件,这会导致有趣的按钮。

这里是一个演示:在DOM http://jsfiddle.net/jasper/qXr79/

+0

嗨,感谢您的帮助,我已经删除了data-role =“button”它仍然在发生,请参阅原始q更新html – Rob 2012-03-07 09:06:32

+0

再次更新原件,它开始在listview项目上执行它,有些事情真的很奇怪。 – Rob 2012-03-07 09:18:56

+0

这也发生在1.1.0 RC1演示页面上。 – Rob 2012-03-07 10:02:31