Question

尝试让jQuery Mobile按钮表现得像切换，但它不能完全正常工作。试图在ui-body-a和ui-body-b之间切换。当我单击按钮时，页面的颜色变为黑暗。但是，当我再次单击该按钮时，页面不会变回浅色并且卡在深色上。

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

如果颜色较浅，请将其更改为ui-body-b（以显示深色），然后将按钮文本更改为“浅色”
否则，如果颜色较暗，请将其更改为ui-body-a（以显示浅色），然后将按钮文本更改为“深色”

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”进行了硬编码，但提供了很多可能性，只通过应用所需的my_print_defaults: Can't read dir of '/usr/local/etc/my.cnf.d' (Errcode: 2 - No such file or directory) my_print_defaults: [ERROR] Fatal error in defaults handling. Program aborted! Starting MySQL .my_print_defaults: Can't read dir of '/usr/local/etc/my.cnf.d' (Errcode: 2 - No such file or directory) my_print_defaults: [ERROR] Fatal error in defaults handling. Program aborted! my_print_defaults: Can't read dir of '/usr/local/etc/my.cnf.d' (Errcode: 2 - No such file or directory) my_print_defaults: [ERROR] Fatal error in defaults handling. Program aborted! ERROR! The server quit without updating PID file (/usr/local/var/mysql/John.local.pid).来自定义页面的各个部分，甚至更多单个元素归因于其中一个。

此外，如果您动态创建一些元素，请考虑一下会是什么？您应该使用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();
});

更新：

需要添加此修补程序：https://stackoverflow.com/a/16136992/4845566针对页面窗口小部件中的错误（感谢Omar）。

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

1 个答案: