Question

我正在使用媒体查询创建响应式网页设计。对于移动版本，我使用jquery mobile下拉菜单。

我已经包含了到CDN的必需链接，包括jquery-mobile.css。问题是这个CSS会自动应用于整个网站的所有标签。

菜单栏位于母版页中，因此.js和.css源文件链接也在该页面中。

我希望jquery mobile css仅应用于菜单栏，而不是整个网站

我做了很多研究，但没有运气。过去三天我一直被困在这里。有人可以帮助我吗？

修改

    <head id="Head1" runat="server">


          <meta http-equiv="Pragma" content="no-cache" />
        <meta http-equiv="Expires" content="-1" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,user-scalable=no,width=device-width,height=device-height" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
                <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script type="text/javascript">
    $(document).bind('mobileinit',function(){
            $.mobile.page.prototype.options.keepNative = "select, input, a, div, p";
    });    
</script>
<script src="../Scripts/jquery.mobile-1.2.0.js"></script>
        <link rel="stylesheet" href="../Styles/WebStyles.css" type="text/css" />

        <title>Management Software, Space Rental process for Antique Malls, POS Software</title>
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
</head>

这是Gajotres建议之后头标记中的内容。

Answer 1

这可能是个问题，因为你找不到防弹解决方案。

告诉jQuery Mobile不要将样式应用于所选元素：

$(document).bind('mobileinit',function(){
        $.mobile.page.prototype.options.keepNative = "select, a, input";
});

示例：http://jsfiddle.net/Gajotres/jjETe/

注意：必须在jQuery Mobile库初始化之前在HEAD中初始化 mobileinit ，如下所示：

<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script>
    $(document).bind('mobileinit',function(){
            $.mobile.page.prototype.options.keepNative = "select, input";
    });    
</script>    
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

另一种解决方案是对要保留原生元素的所有元素使用data-role =“none”属性。您可以在此处找到有关此解决方案的更多信息：http://jquerymobile.com/demos/1.2.0/docs/forms/docs-forms.html
还有第三种解决方案，但我从未设法使其发挥作用。自定义jQuery Mobile框架并仅使用您要使用的小部件：http://jquerymobile.com/download-builder/。只需选择你想要的东西。

所以最好的解决方案是使用组合点1.和2.防止所有非下拉元素的样式，并在看起来应该是原生的下拉元素上使用data-role =“none”。

Answer 2

在我的情况下，经过大量的研究，我发现我的问题的最佳解决方案是找出使用firebug影响哪个元素然后在jQuery-mobile.css文件中删除它的样式（你必须下载它而不是访问托管文件）。我花了一段时间来做这件事。

同样IMHP最好使用单一框架来执行所有花哨的jQuery工作，而不是很多，因为找到冲突的来源是非常耗时和累人的。

我正在将我的所有jquery插件转换为jQuery mobile，并且到目前为止事情进展顺利。虽然这需要时间，但jQuery mobile非常棒且值得转换。用户界面非常适合我目前正在开发的网站。

最后，吸取了教训。未雨绸缪。

使jQuery mobile仅适用于菜单而不是整个网站

2 个答案: