2011-02-03 37 views
21

有谁知道如何设置一个默认数据主题的jQuery移动?jQuery Mobile的默认数据主题

看起来有必要为每个组件设置数据主题。

即使你设置数据主题为它不会被加载列表和其他部件尊重的页面数据的作用。

我是否缺少手册的某些页面?

回答

1

至于我见过你必须设置为页面的div一个主题,它会在里面继承。

+0

naugtur,从来就试过了,但在某些情况下,如嵌套列表,主题配置的不尊重。 – 2011-02-04 19:43:40

+0

尝试JQM alpha3 - 今天发布 – naugtur 2011-02-04 20:33:28

7

主题的a,b,c,d和e为所有在CSS文件中,如果你想有一个自定义主题,您可以使用F-Z,复制并将其更改为你的主题字母。添加数据主题=“Z”你的元素

<body> 
<div data-role="page" id="apply" data-theme="z"> 
... 
</div> 
</body> 
9

对于嵌套列表视图,来控制你需要重写被嵌套头主题设置为蓝色的默认选项报头的主题。

要做到这一点,你只需添加以下jQuery中加载和jquery.mobile.js负载之间。

例如:

因为mobileinit事件在执行时立即触发, 你需要加载jQuery Mobile的前事件处理程序绑定。 因此,我们建议链接到你的JavaScript文件在以下 顺序:

<script src="jquery.js"></script> 
<script src="custom-scripting.js"></script> 
<script src="jquery-mobile.js"></script> 

因此,在 “自定义scripting.js” 把下面的...

$(document).bind("mobileinit", function() { 
    $.mobile.listview.prototype.options.headerTheme = "a"; 
}); 

其中“a “是你想要应用到嵌套的标题主题..

或者你可以在jquery移动源中覆盖它,搜索”headerTheme“它将围绕线5020

30

像乔尔说的,你必须覆盖默认值。目前似乎没有其他办法。

取乔尔的示例代码:

<script src="jquery.js"></script> 
<script src="custom-scripting.js"></script> 
<script src="jquery-mobile.js"></script> 

自定义您的自定义scripting.js

这是几个选项的示例代码,您可以配置:

$(document).bind("mobileinit", function() { 

    // Navigation 
    $.mobile.page.prototype.options.backBtnText = "Go back"; 
    $.mobile.page.prototype.options.addBackBtn  = true; 
    $.mobile.page.prototype.options.backBtnTheme = "d"; 

    // Page 
    $.mobile.page.prototype.options.headerTheme = "a"; // Page header only 
    $.mobile.page.prototype.options.contentTheme = "c"; 
    $.mobile.page.prototype.options.footerTheme = "a"; 

    // Listviews 
    $.mobile.listview.prototype.options.headerTheme = "a"; // Header for nested lists 
    $.mobile.listview.prototype.options.theme   = "c"; // List items/content 
    $.mobile.listview.prototype.options.dividerTheme = "d"; // List divider 

    $.mobile.listview.prototype.options.splitTheme = "c"; 
    $.mobile.listview.prototype.options.countTheme = "c"; 
    $.mobile.listview.prototype.options.filterTheme = "c"; 
    $.mobile.listview.prototype.options.filterPlaceholder = "Filter data..."; 
}); 

应该也可以选择其他的喜欢:

$.mobile.dialog.prototype.options.theme 
$.mobile.selectmenu.prototype.options.menuPageTheme 
$.mobile.selectmenu.prototype.options.overlayTheme 

你也许可以在这里找到更多的设置: http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.js

相关问题