gpt4 book ai didi

jquery - 交换 div 内容时无法使用 jQuery Mobile 保留 CSS 主题

转载 作者:行者123 更新时间:2023-11-28 13:23:16 25 4
gpt4 key购买 nike

我认为标题是不言自明的,但我们开始吧:我是 jQuery 和移动开发的新手。在使用 jQuery Mobile 标准 .css 文件(我实际上在这里找到的解释:http://www.adobe.com/devnet/dreamweaver/articles/theme-control-jquery-mobile.html)时,我试图通过 JS 函数将一个 div 内容动态交换到另一个,但 css 主题不会继续存在。这是我的代码的简化版本:

<!DOCTYPE html> 
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
function callNext () {
$('#div_auth').html($('#div_functions').html());
}
</script>
</head>
<body>

<div data-role="page" id="div_main">

<div data-role="header">
<h1>Phonegap Test</h1>
</div>

<div data-role="content" id="div_auth">
<form name="fields" action="">
Name: <input type="text" id="login" name="login"/><br>
<button type="button" onclick="callNext();">Send</button>
</form>
</div>

</div>

<div data-role="content" id="div_functions">
<form name="functions" action="">
<button type="button">Client List</button> <br>
<button type="button">Price List</button>
</form>
</div>

</body>
</html>

因此,当加载 div_auth 内容时,它会默认加载 data-theme="a"(我想这在 div_main 而不是 div_auth 中暗示,但无论如何)。但是,当我单击按钮时,即使我为 div_functions 指定了数据主题,按钮也会呈现为标准的“无 css”html 按钮。

请注意,在任何人开始怀疑之前,我需要通过 JS 函数调用 div 交换,因为这只是我开始开发的 Phonegap/Cordova 应用程序的简化,并且此调用模拟了它的实际工作方式。但是,我测试了上面的代码,它的(错误)行为是一样的

编辑:

为了让斯科特的回答更有意义,我做了一些尝试:

<div data-role="content" id="div_auth" data-theme="b">  
<form name="fields" action="">
Name: <input type="text" id="login" name="login"/><br>
<button data-theme="a" type="button" onclick="callNext();">Send</button>
</form>
</div>

正如你们所看到的,我明确地将 data-theme="b"添加到 div_auth 并将 data-theme="a"添加到包装按钮。令我惊讶的是,它确实有效,其中 div_auth 呈现蓝色主题,而按钮呈现为黑色。然而,在第二个 div (div_functions) 中使用相同的方法,即使使用完全相同的主题也会导致按钮没有附加 css 样式:

<button data-theme="a" type="button">Price List</button>

仍然呈现一个“过时的按钮”。

最佳答案

匹配#div_functions的css样式也必须匹配#div_auth。您的 javascript 行不复制任何样式,只复制内容。当该内容附加到 #div_auth 时,它会采用与该元素匹配的任何 CSS 样式,在本例中似乎什么都不是。最简单的做法是为 button 创建 CSS 样式,无论它们在 DOM 中的什么位置,它都会匹配您的按钮标签。

关于jquery - 交换 div 内容时无法使用 jQuery Mobile 保留 CSS 主题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14445650/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com