Jquerymobile和jquery ui数据图标冲突

时间:2012-02-06 19:07:30

标签: jquery-mobile

在我的网络应用程序中,我有一个页面,我使用jQuery UI中的自动完成小部件。 我从这个页面链接到jQuery Mobile和jQuery UI CSS。

link rel="stylesheet" href="Styles/jquery.mobile-1.0.1.min.css"
type="text/css"  link rel="stylesheet" type="text/css"
href="Styles/ui-lightness/jquery-ui-1.8.16.custom.css"

当我这样做时,我的jQuery Mobile数据图标根本不显示。我只看到一个黑洞。我只提到jQuery Mobile的其他页面没有问题。他们显示数据图标很好。

有什么想法我可能做错了吗?

3 个答案:

答案 0 :(得分:5)

在jQuery mobile css之前放置jQuery UI css链接并且应该可以工作。

答案 1 :(得分:0)

尝试按照以下顺序链接您的Javascripts:

<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>

如果这没有帮助,请尝试在代码:jqmData()中使用自定义选择器,因为它在使用时会自动将命名空间数据属性合并到查找中。例如,您应该使用$("div[data-role='page']")而不是调用$("div:jqmData(role='page')"),而$("div[data-"+ $.mobile.ns +"role='page']")内部映射到data-icons,而不会强制您专门为您的{{1}} <手动将命名空间连接到您的选择器中/ p>

答案 2 :(得分:0)

jQuery mobile通过背景图像和位置CSS声明显示图标,很可能你有CSS覆盖这些样式。

要找到您的问题,请使用您的调试器,Chrome的调试器特别有用,在 Computed Style 下查找 background-image / position 样式和冲突中的CSS类。然后你可以看到哪个类获胜和实际值,如果你看到一个黑盒子你很可能只是对图像有一个坏网址 - 你可以在这里通过CSS样式的图像链接识别并看到如果那个图像确实存在。

此外,我没有看到你的&lt;和&gt;你的CSS声明周围的括号,如果我错了,请更正我,但我认为你应该用一个单独的标签链接到每个css文件:

<link rel="stylesheet" href="Styles/jquery.mobile-1.0.1.min.css" type="text/css">
<link rel="stylesheet" type="text/css" href="Styles/ui-lightness/jquery-ui-1.8.16.custom.css">