我选择jQuery Mobile而不是其他框架来获得动画效果和动态页面支持。
但是,我在样式方面遇到麻烦。我想保留基本的页面样式以便执行页面转换。但是我还需要完全自定义标题,列表视图,按钮,搜索框的外观……仅处理颜色是不够的。我需要处理尺寸,位置,边距,填充等。
因此,为了用CSS覆盖它们,我在jQuery Mobile中添加了额外的div和类而感到困惑。但这非常耗时,从头重写CSS会更快。
有没有办法加载最小的jQuery Mobile CSS文件?
还是应该考虑使用其他移动框架?我需要处理页面转换,ajax调用,Cordova兼容性,当然还有完全可定制的html / css …
可以通过几种方法来完成此操作,有时您需要将它们结合起来以达到期望的结果。
它可以通过添加以下属性来实现:
data-enhance="false"
到页眉,内容,页脚容器。
这也需要在应用加载阶段启用:
$(document).on("mobileinit", function () { $.mobile.ignoreContentEnabled=true; });
在初始化jquery-mobile.js之前对其进行初始化(请看下面的示例)。
要重新创建页面,请使用以下命令:
$('#index').live('pagebeforeshow', function (event) { $.mobile.ignoreContentEnabled = false; $(this).attr('data-enhance','true'); $(this).trigger("pagecreate") });
第二种选择是使用此行手动执行此操作:
data-role="none"
可以阻止某些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 */ });
在初始化jquery-mobile.js之前,再次对其进行初始化(请看下面的示例)。