个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-01 02:27:25 25 4
gpt4 key购买 nike

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

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

  1. 如果颜色较浅，请将其更改为 ui-body-b (显示深色)，然后将按钮文本更改为“浅色”
  2. 如果颜色较深，请将其更改为 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");
    }
}

最佳答案

这取决于您的页面标记。 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://stackoverflow.com/a/16136992/4845566页面小部件中的错误(感谢 Omar )。

关于javascript - 如何在单击按钮时在 'ui-body-a' 和 'ui-body-b' 之间切换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48632578/

25 4 0
文章推荐： python - Scipy、odeint 以及 odeint 输入函数的输入设置
文章推荐： php - 在 WooCommerce Checkout 自定义文本字段中启用日期选择器
文章推荐： ios - 声音不在 iOS 设备上播放，但在 iOS 模拟器中工作
文章推荐： python - 设置字符串格式以方便阅读和打印
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com