Jquery CSS and JS to limited elements [closed]

Depending on jQuery Mobile version you’re using.

Solution 1:

Modify Global Settings on mobileinit, by setting ignoreContentEnabled to true. However, this affects app performance negatively, as it slows down processing/initializing widgets/elements.

<head>
  <script src="https://stackoverflow.com/questions/21184234/jQuery.js"></script>
  <script>
    $(document).on("mobileinit", function () {
      $.mobile.ignoreContentEnabled = true;
    });
  </script>
  <script src="jQuery-Mobile.js"></script>
<head>

Add data-enhance="false" to elements or div you want to keep untouched by jQM.

<div data-role="content" data-enhance="false">
  <!-- elements -->
</div>

<input type="text" data-enhance="false">

Solution 2:

Modify page widget defaults on mobileinit, by setting a .selector for keepNative. The .selector could be a <tag>, an #id or a .class.

jQuery Mobile <= 1.3.x

<head>
  <script src="https://stackoverflow.com/questions/21184234/jQuery.js"></script>
  <script>
    $(document).on("mobileinit", function () {
      $.mobile.page.prototype.options.keepNative = $.mobile.page.prototype.options.keepNative + ", input, #foo, .native";
    });
  </script>
  <script src="jQuery-Mobile.js"></script>
<head>

jQuery Mobile >= 1.4.x

<head>
  <script src="https://stackoverflow.com/questions/21184234/jQuery.js"></script>
  <script>
    $(document).on("mobileinit", function () {
      $.mobile.keepNative = $.mobile.keepNative + ", input, #foo, .native";
    });
  </script>
  <script src="jQuery-Mobile.js"></script>
<head>

When page is being created, input, element with #foo ID and elements with native class, will be kept as is.

Demo

More Related Contents:

Leave a Comment Cancel reply