如何在按钮单击时在“ui-body-a”和“ui-body-b”之间切换[重复]

Posted 2023-05-08

技术标签:

【中文标题】如何在按钮单击时在“ui-body-a”和“ui-body-b”之间切换[重复]【英文标题】：How to toggle between 'ui-body-a' & 'ui-body-b' on button click [duplicate] 【发布时间】：2018-07-15 21:35:56 【问题描述】：

试图让 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");

【问题讨论】：

感谢Omar！您需要将 Omar 的 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>

更新：

需要添加此修复：https://***.com/a/16136992/4845566 用于页面小部件中的错误（感谢Omar）。

【讨论】：

以上是关于如何在按钮单击时在“ui-body-a”和“ui-body-b”之间切换[重复]的主要内容，如果未能解决你的问题，请参考以下文章

如何在按钮单击时在一个视图控制器中正确启用和禁用约束

如何在单击按钮时在一个视图控制器中正确启用和禁用约束

如何在单击按钮时在 extjs 中敲击特定行

如何在按钮单击时在 SwiftUI 中为 TextField 设置文本

如何在单击按钮时在android中从3G切换到2G

如何在单击 CF7 提交按钮时在弹出窗口中显示 grecaptcha？