如何在单击按钮时在 'ui-body-a' 和 'ui-body-b' 之间切换

Question

试图让 jQuery 移动按钮的行为像一个切换按钮，但它不能完全工作。尝试在 ui-body-a 和 ui-body-b 之间切换。当我单击该按钮时，页面的颜色变为深色。然而，当我再次点击按钮时，页面并没有变回浅色，而是停留在深色上。

每当单击按钮时，我希望发生以下情况：

如果颜色较浅，将它们更改为 ui-body-b（以显示深色），然后将按钮文本更改为 'Light colours'
否则，如果颜色较暗，将它们更改为 ui-body-a（以显示浅色），然后将按钮文本更改为 'Dark colours'

HTML

<div data-role="header">
    <h1>Hello World</h1>
    <a href="index.html" id="btn-left" class="ui-btn-left" onclick="changeColour()">Dark colours</a>
</div>

JavaScript

function changeColour() {
    if ($("#page").attr("data-theme", "a")) {
        $("#page").attr("data-theme", "a");
        $("#page").removeClass("ui-body-a").addClass("ui-body-b");

        $("#btn-right").text("Light colours");
    } else if ($("#page").attr("data-theme", "b")) {
        $("#page").attr("data-theme", "b");
        $("#page").removeClass("ui-body-b").addClass("ui-body-a");

        $("#btn-right").text("Dark colours");
    }
}

Answer 1

这取决于您的页面标记。 TBH，我不明白你是想创建一个完整的主题切换器还是只需要更改页面背景。不管怎样，JQM 已经对默认主题 "a" 进行了整体硬编码，但是提供了很多可能性来仅自定义页面的部分，或者通过应用所需的甚至更多的单个元素data-theme 属性只是其中之一。

此外，请想一想如果您动态创建一些元素会怎样？您应该使用 -inherit 属性来保持相同的页面主题，或者明确设置它（例如，弹出窗口）。

同样，如果您导航到外部页面怎么办？应该设计还是不要......？所以，这实际上取决于您的标记方式，以及您想要实现的外观和感觉。

这里是一个例子，如何改变一些页面部分的主题，你只需要保留功能 toggleTheme():

function toggleTheme() {
  var themes = {"a":"Light","b":"Dark"},
  oldTheme = $(":mobile-page").page("option", "overlayTheme"),
  newTheme = oldTheme == "a" ? "b" : "a";

  $("div[data-role='page']").each(function(index) {
    $(this).removeClass("ui-page-theme-"+oldTheme).addClass("ui-page-theme-"+newTheme);
  });
  $(".ui-bar-"+oldTheme).each(function(index) {
    $(this).removeClass("ui-bar-"+oldTheme).addClass("ui-bar-"+newTheme);
  });
  $(".ui-body-"+oldTheme).each(function(index) {
    $(this).removeClass("ui-body-"+oldTheme).addClass("ui-body-"+newTheme);
  });

  $(":mobile-page").page("option", "overlayTheme", newTheme);
  $(":mobile-page").page("option", "theme", newTheme);
  $(":mobile-page").page("option", "contentTheme", newTheme);
 
  $("#btn-theme").text(themes[oldTheme]);
}

var all = [], current = {};

var listTemplate = [
  '<li class="ui-first-child ui-last-child">',
  '<a href="#page-card" data-id="{id}" class="ui-btn ui-btn-icon-right ui-icon-carat-r">',
  '<h2>{name}</h2>',
  '<p><strong>{address.city}</strong></p>',
  '<p>{email}</p>',
  '<p class="ui-li-aside">id: <strong>{id}</strong></p>',
  '</a>',
  '</li>'
].join("");

var cardTemplate = [
  '<h3 class="ui-bar ui-bar-inherit ui-corner-all">{name}</h3>',
  '<div class="ui-body ui-body-inherit ui-corner-all">',
  '<p>{email}</p>',
  '<p>{website}</p>',
  '<p>{phone}</p>',
  '<p>{address.street}</p>',
  '<p>{address.city}</p>',
  '</div>'
].join("");

function nano(template, data) {
  return template.replace(/\{([\w\.]*)\}/g, function(str, key) {
    var keys = key.split("."), v = data[keys.shift()];
    for (i = 0, l = keys.length; i < l; i++) { v = v[keys[i]]; }
    return (typeof v !== "undefined" && v !== null) ? v : "";
  });
}

$(document).on("vclick", "#page-list li>a", function() {
  var id = $(this).data("id");
  current = $.grep(all, function(item) {
    return item.id == id;
  })[0];
});

$(document).on("pagecreate", "#page-list", function() {
  var $ul = $(this).find("ul");
  $.ajax({
    url: "https://jsonplaceholder.typicode.com/users",
    method: 'GET',
    crossDomain: true,
    dataType: "jsonp",
    complete: function() {
      $ul.listview().listview("refresh");
    },
    success: function(result) {
      all = result;
      $.each(all, function(i, item) {
        $ul.append(nano(listTemplate, item))
      });
    }
  });
});

$(document).on("pagebeforeshow", "#page-card", function() {
  $(this).find("[data-role=content]").empty().append(nano(cardTemplate, current)).trigger("updatelayout");
});

$(document).on("vclick", "#btn-theme", function() {
 toggleTheme();
});

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
  <div data-role="page" id="page-list">
    <div data-theme="a" data-role="header" data-position="fixed">
      <a href="#" id="btn-theme" class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-eye">Dark</a>
      <h3>Users</h3>
    </div>
    <div data-role="content">
      <ul data-role="listview" data-inset="true" data-filter="true">
      </ul>
    </div>
  </div>
  <div data-role="page" id="page-card">
    <div data-theme="a" data-role="header" data-position="fixed">
      <h3>Details</h3>
      <a href="#" data-rel="back" class="ui-btn-left">Back</a>
    </div>
    <div data-role="content">
    </div>
  </div>
</body>

</html>

更新：

需要添加此修复程序： for a bug in the page widget (thanks to Omar)。

如何在单击按钮时在 'ui-body-a' 和 'ui-body-b' 之间切换

How to toggle between 'ui-body-a' & 'ui-body-b' on button click

html

javascript

jquery

jquery-ui

jquery-mobile