使 jQuery 移动仅适用于菜单而不是整个网站答案

【问题标题】：Making jQuery mobile work for only menu rather than the entire website使 jQuery 移动仅适用于菜单而不是整个网站
【发布时间】：2013-01-24 03:51:17
【问题描述】：

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

【问题讨论】：

标签： jquery css jquery-mobile master-pages media-queries

【解决方案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>

另一种解决方案是在您希望保持原生状态的所有元素上使用 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"。

【讨论】：

我尝试了你的第一个建议。但我无法让它工作。我会将内容粘贴到问题的 head 标签内，以便您进一步帮助我。
keepNative 只会影响 INPUT、SELECT 和 TEXTAREA 元素。因为它们是 html 原生的。必须使用 data-role="none" 强制执行其他所有操作。
我有大约 10 个内容页面和许多具有这些样式的 a、div 和 p 标签。我应该为所有这些添加 data-role="none" 属性吗？
您选择仅在菜单栏上应用 jQuery Mobile 样式。该框架从未打算用作部分解决方案。
是的，我同意。我知道我在那里犯了一个错误。我会说糟糕的计划:) 谢谢你的想法。

【解决方案2】：

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

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

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

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

【讨论】：