jquery - 将另一个 CSS 文件应用到特定的 <div> block .net

Question

我在母版页中使用 bootstrap.css 来生成标题内容。然后，我使用该母版页创建了一个网页(我需要使用与 bootstrap.css 文件相同的 header 内容)。我想在同一页面中创建另一个内容(正文内容)，但该内容将使用 jquery-mobile.css 文件。但是当我在同一页面中使用这个css文件时，标题内容会根据jquery-mobile.css样式发生变化(我不希望它被更改)。有没有办法将 jquery-mobile.css 文件应用到特定 block ？

Answer 1

要了解更多信息，请阅读我的其他文章/答案: jQuery Mobile: Markup Enhancement of dynamically added content

解决方案

这可以通过多种方式完成，有时您需要将它们结合起来才能达到预期的结果。

• 方法一:

  可以通过添加此属性来做到这一点:

  data-enhance="false"
  

  到页眉、内容、页脚容器。

  这也需要在应用加载阶段打开:

  $(document).one("mobileinit", function () {
      $.mobile.ignoreContentEnabled=true;
  });
  

  在 jquery-mobile.js 初始化之前对其进行初始化(请看下面的示例)。

  有关此内容的更多信息可以在此处找到:

  http://jquerymobile.com/test/docs/pages/page-scripting.html

  示例:http://jsfiddle.net/Gajotres/UZwpj/

  要再次重新创建页面，请使用以下命令:

  $('#index').live('pagebeforeshow', function (event) {
      $.mobile.ignoreContentEnabled = false;
      $(this).attr('data-enhance','true');
      $(this).trigger("pagecreate")
  });
  

• 方法2:

  第二个选项是使用此行手动执行此操作:

  data-role="none"
  

  示例:http://jsfiddle.net/Gajotres/LqDke/

• 方法3:

  可以阻止某些 HTML 元素进行标记增强:

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

  示例:http://jsfiddle.net/Gajotres/gAGtS/

  在初始化 jquery-mobile.js 之前再次初始化它(请看下面的示例)。

结论

根据您的情况，请使用解决方案 1。它将阻止 jQuery Mobile 增强您的 header 。