1

我正在使用媒体查询创建响应式网页设计。对于移动版本，我使用 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 建议后 head 标签中的内容。

4

2 回答 2

1

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

  1. 告诉 jQuery Mobile 不要对选定元素应用样式：

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

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

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

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

  2. 另一种解决方案是在您希望保持原生状态的所有元素上使用 data-role="none" 属性。在这里您可以找到有关此解决方案的更多信息：http: //jquerymobile.com/demos/1.2.0/docs/forms/docs-forms.html

  3. 还有第三种解决方案，但我从未设法使其工作。自定义 jQuery Mobile 框架并仅使用您想要使用的小部件：http: //jquerymobile.com/download-builder/。只需选择您想要的。

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

于 2013-01-23T13:50:22.053 回答
0

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

此外，IMHP 最好使用单个框架来执行所有花哨的 jQuery 工作，而不是使用多个框架，因为找到冲突的根源非常耗时且累人。

我正在将我所有的 jquery 插件转换为在 jQuery mobile 上工作，到目前为止一切顺利。虽然这需要时间，但 jQuery mobile 很棒，我觉得值得转换。UI 非常适合我目前正在开发的网站。

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

于 2013-01-23T19:51:17.830 回答