如何删除jQuery Mobile样式？

Question

我为其动画功能和动态页面支持选择了jQuery Mobile而不是其他框架.

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

因此,我努力使用jQuery Mobile添加的额外div和类,以便用CSS覆盖它们.但它非常耗时,从头开始重写css会更快......

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

或者我应该考虑其他移动框架？我需要处理页面转换,ajax调用,Cordova兼容性,当然还有完全可自定义的html/css ...

Answer 1

增强标记的方法:

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

• 方法1:

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

  data-enhance="false"
  

  标题,内容,页脚容器.

  这也需要在app加载阶段进行调整:

  $(document).on("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.keepNative = "select,input"; /* jQuery Mobile 1.4 and higher */
        //$.mobile.page.prototype.options.keepNative = "select, input"; /* jQuery Mobile 1.4 and lower */
   });    
  

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

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

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

Answer 2

...或者只使用专门构建的官方无主题版本的CSS,以便在保持所有jQuery Mobile功能的同时设计自定义主题.

你不必一直与hacks和overrides战斗,你得到一个更轻的CSS.

双赢.

编辑:这里也回答了