下面是详细讲解jQuery Mobile页面叠加主题选项的完整攻略：
简介
jQuery Mobile 是一个基于 jQuery 的移动设备 UI 框架，可以用于快速创建具有响应式布局的移动应用程序。它提供了一系列 UI 组件，如按钮、表单、导航栏等，还可以轻松地自定义主题。
在 jQuery Mobile 中，主题是非常重要的概念。主题以 CSS 类的形式应用于 HTML 元素上，从而改变其外观和样式。可以使用 jQuery Mobile 自带的主题，也可以从网上下载其他主题或自定义主题。
而在特定情况下，我们可能需要在同一个页面上使用多个主题，这就需要使用 jQuery Mobile 的页面叠加主题选项了。
步骤
使用页面叠加主题选项，需要按照以下步骤进行：
- 在页面中引入所需要的主题 CSS 文件，可以选择使用 jQuery Mobile 自带的主题，或者下载其他主题。
示例：
<link rel="stylesheet" href="path/to/jquery.mobile.theme.css">
<link rel="stylesheet" href="path/to/new/theme.css">
- 在页面中定义包含主题类的 HTML 元素，这样这些元素就会使用对应的主题。
示例：
<button class="ui-btn ui-btn-b">按钮</button>
<div class="ui-bar-b">这是一个带有蓝色背景的 div 元素</div>
在上面的示例中，ui-btn-b 和 ui-bar-b 类分别表示 jQuery Mobile 自带的蓝色主题的按钮和 div 元素样式。
- 如果你希望在页面上设置多个主题，可以为每个主题定义一个不同的 data 属性，并在需要的元素上使用它。
示例：
<button data-theme="a" class="ui-btn ui-btn-a">蓝色按钮</button>
<div data-theme="b" class="ui-bar-b">带有红色背景的 div 元素</div>
在上面的示例中，data-theme 属性用于指定主题类型，而 ui-btn-a 类和 ui-bar-b 类则分别表示对应主题的样式。
- 如果你需要动态地切换页面主题，可以使用
$.mobile.changeGlobalTheme()方法来更改所有页面元素的主题，或者使用$.mobile.changePageTheme()方法来更改特定页面元素的主题。
示例：
// 更改全局主题
$.mobile.changeGlobalTheme("b");
// 更改某个页面内的特定元素的主题
$(document).on('pagebeforeshow', '#myPage', function(){
$("#myButton").buttonMarkup({theme: "a"});
});
在上面的示例中，$.mobile.changeGlobalTheme() 方法用于更改全局主题，而 $.mobile.changePageTheme() 方法则用于更改特定页面元素的主题。
总结
通过以上步骤，在 jQuery Mobile 中使用页面叠加主题选项，可以很容易地实现多主题的页面效果。需要注意的是，要正确设置主题类、data 属性和调用主题更改方法，才能有效地使用页面叠加主题选项。