gpt4 book ai didi

material-design - 处理动态添加的元素 Material Design Lite

转载 作者:行者123 更新时间:2023-12-04 22:44:50 27 4
gpt4 key购买 nike

首先,代码:

$(document).ready(function() {
$('#member_pattern').hide();
$('.add-member').click(function() {
var clone = $('#member_pattern').clone(), cont = $('.members-cont');
$(cont).append(clone);
$(cont).find('#member_pattern').show(200, function() {
$(this).attr('id', '');
componentHandler.upgradeAllRegistered();
});
});
});
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.blue-indigo.min.css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<div class="members-cont">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="first_name_<?php echo $member->id; ?>" value="<?php echo $member['first_name']; ?>"/>
<label class="mdl-textfield__label" for="first_name_<?php echo $member->id; ?>">Имя</label>
</div>
</div>

<button class="add-member add-member-top mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">add</i>
</button>

<div id="member_pattern" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="[name]_[id]" value=""/>
<label class="mdl-textfield__label" for="[name]_[id]">Имя</label>
</div>


客观的:
通过按页面上的按钮动态插入另一个字段[.mdl-textfield],你想在谷歌上应用“ Material 设计”

一切都很好,但方法
componentHandler.upgradeAllRegistered();
或者
componentHandler.upgradeDom();
在任何不想更新、重新出现的页面上的元素。

最佳答案

我在克隆元素并使其正常工作时也遇到了问题。我所做的是从 div 中删除 MDL 特定类并将其更改为我可以选择的通用类名。

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">

变成了
<div class="upgradeTextField">

然后在 javascript 中,在克隆元素后,我选择了克隆元素中的那些 div,并向它们添加了 MDL 特定类。之后,运行 componentHandler.upgradeDom() 似乎工作。
var textFieldUpgrades = cloned.querySelectorAll('.upgradeTextField');

if(textFieldUpgrades) {

for(var i=0;i<textFieldUpgrades.length;++i) {
textFieldUpgrades[i].className = 'mdl-textfield mdl-js-textfield mdl-textfield--floating-label';
}

}
componentHandler.upgradeDom();

这个我没有验证过,但是好像当你在 dom 中克隆一个之前已经被 MDL 升级过的现有元素时,当你将克隆的对象添加到 DOM 时它不会升级它。所以这就是为什么我简单地删除了 MDL 类,这样它就不会事先升级。

或者,如果您需要事先升级它并且仍然想要克隆它。然后,您可以做的是在克隆元素后从元素中删除属性 'data-upgraded' 和类 'is-upgraded'。然后当你运行 componentHandler.upgradeDom() 时它应该升级它。因此,您不必像上面的代码片段那样只设置类名,而只需删除升级信息:
textFieldUpgrades[i].setAttribute('data-upgraded','');
textFieldUpgrades[i].className = textFieldUpgrades[i].className.replace(/is-upgraded/g,'');

这似乎对我有用。

关于material-design - 处理动态添加的元素 Material Design Lite,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32013816/

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