Question

在我的网络应用程序中，我有一个页面，我使用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的其他页面没有问题。他们显示数据图标很好。

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

Answer 1

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

Answer 2

尝试按照以下顺序链接您的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>

Answer 3

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

Jquerymobile和jquery ui数据图标冲突

3 个答案: