jQuery Mobile Pagecontainer themeOption

jQuery Mobile是一个开源的基于HTML5和CSS3技术的移动应用框架。Pagecontainer widget是jQuery Mobile提供的一种机制，允许动态加载不同的页面。pagecontainer 提供了一系列的options来自定义这些动态加载的页面的表现形式。其中有一个themeOption，是用来设置页面主题颜色的。

基本使用

在使用pagecontainer时，可以通过调用change()方法来切换不同的页面。同时，可以通过pagecontainer()方法来设置全局的options。其中最常用的options之一就是themeOption。

themeOption接受的是一个字符串，表示更改页面的主题颜色。通过传递颜色名称来设置，如"a"、"b"、"c"、"d"等。例如：

$(document).on("pagecontainerbeforechange", function(event, data) {
  if (typeof data.toPage === "string") {
    var newPage = data.toPage,
        options = data.options;

    options.theme = "b";
    $.mobile.pageContainer.pagecontainer("change", newPage, options);
  }
});

以上代码将在页面切换时设置全局options，将页面主题颜色改为"b"。这样，当新页面被加载时，整个页面的主题颜色就变成了"b"。如下：

// 外部JS文件
$(document).on("pageinit", function() {
  console.log("document ready");
  $(document).on("pagecontainerbeforechange", function(event, data) {
    if (typeof data.toPage === "string") {
      var newPage = data.toPage,
          options = data.options;

      options.theme = "c";
      $.mobile.pageContainer.pagecontainer("change", newPage, options);

      event.preventDefault();
    }
  });
});

以上代码将在初始加载时，将所有新页面的主题颜色设置为"c"。

示例1：更改特定元素的主题颜色

可以通过enhanceWithin选项和theme参数来为特定元素设置主题颜色。例如：

$("#mypanel").enhanceWithin().panel({theme: "b"});

以上代码将为id为mypanel的页面元素设置主题颜色为"b"。

示例2：设置全局主题颜色

可以通过$.mobile对象上的defaultPageTransition选项来设置全局的主题颜色。例如：

$.mobile.defaultPageTransition = "slide";
$.mobile.page.prototype.options.theme = "a";

以上代码将默认的页面过渡动画设置为"slide"，并将全局主题颜色设置为"a"。