如何清除jQuery Mobile样式？ [英] How to remove jQuery Mobile styling?

问题描述

我选择了其他框架的jQuery Mobile的动画功能和动态页面支持。

但是，我遇到了麻烦的样式。我想保留基本的页面样式，以便执行页面转换。但是我还需要完全自定义标题，列表视图，按钮，搜索框的外观。只处理颜色是不够的。我需要处理尺寸，位置，边距，paddings等等。

因此，我努力与额外的div和jQuery Mobile添加的类，以覆盖它们与CSS 。但是它是如此耗时，从头重写css更快的方式...

有没有办法加载一个最小的jQuery Mobile css文件？

或者我应该着眼于其他移动框架吗？我需要处理页面转换，ajax调用，Cordova兼容性，当然一个完全可定制的html / css ...

解决方案

预防标记增强方法：

这可以通过几种方式完成，有时您需要将它们组合以实现所需的结果。

• 方法1：

  
  
  

  可以通过添加此属性来实现：

    data-enhancement =false
    

  
  $ b

  
  
  

  这还需要在应用加载阶段打开：

    $（document）.on（mobileinit，function（）{
   $ .mobile.ignoreContentEnabled = true; 
  }）; 
    

  初始化jquery-mobile.js之前进行初始化

  
  
  

  有关详情，请参阅这里：

  
  
  

  a href =http://jquerymobile.com/test/docs/pages/page-scripting.html> http://jquerymobile.com/test/docs/pages/page-scripting.html p>
  
  

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

  
  
  

  要重新创建页面，请使用：

    $ #index'）。live（'pagebeforeshow'，function（event）{
   $ .mobile.ignoreContentEnabled = false; 
   $（this）.attr（'data-enhancement'，'true'）; 
   $（this）.trigger（pagecreate）
  }）;方法2：
   
   
   
   
   
  第二个选项是使用此行手动执行：
    data-role =none
    
  示例： http://jsfiddle.net/ Gajotres / LqDke /  
   




• 方法3：

  
  
  

  从标记增强：

    $（document）.bind（'mobileinit'，function（）{
   $ .mobile .keepNative =select，input; / * jQuery Mobile 1.4和更高版本* / 
   //$.mobile.page.prototype.options.keepNative =select，input / 
  }）; 
    

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

  
  
  

  在jquery-mobile.js初始化之前再次初始化它

在我的其他教程中阅读更多内容： jQuery Mobile：动态添加内容的标记增强功能

I chose jQuery Mobile over other frameworks for its animation capabilities and dynamic pages support.

However, I'm running into troubles with styling. I'd like to keep the basic page style in order to perform page transitions. But I also need to fully customize the look'n feel of headers, listviews, buttons, searchboxes... Dealing with colors only is not enough. I need to handle dimensions, positions, margins, paddings, and so on.

Therefore I struggle with extra divs and classes added by jQuery Mobile in order to override them with CSS. But it is so time-consuming, and it would be way faster to rewrite css from scratch...

Is there a way to load a minimal jQuery Mobile css file ?

Or should I look towards an other mobile framework ? I need to handle page transitions, ajax calls, Cordova compatibility, and of course a fully customizable html/css...

解决方案

Methods of markup enhancement prevention:

This can be done in few ways, sometimes you will need to combine them to achieve a desired result.

• Method 1:

  It can do it by adding this attribute:

  data-enhance="false"
  

  to the header, content, footer container.

  This also needs to be turned in the app loading phase:

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

  Initialize it before jquery-mobile.js is initialized (look at the example below).

  More about this can be found here:

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

  Example: http://jsfiddle.net/Gajotres/UZwpj/

  To recreate a page again use this:

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

• Method 2:

  Second option is to do it manually with this line:

  data-role="none"
  

  Example: http://jsfiddle.net/Gajotres/LqDke/

• Method 3:

  Certain HTML elements can be prevented from markup enhancement:

   $(document).bind('mobileinit',function(){
        $.mobile.keepNative = "select,input"; /* jQuery Mobile 1.4 and higher */
        //$.mobile.page.prototype.options.keepNative = "select, input"; /* jQuery Mobile 1.4 and lower */
   });    
  

  Example: http://jsfiddle.net/Gajotres/gAGtS/

  Again initialize it before jquery-mobile.js is initialized (look at the example below).

Read more about it in my other tutorial: jQuery Mobile: Markup Enhancement of dynamically added content

这篇关于如何清除jQuery Mobile样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！