Google MDL - 在jquery中创建卡片仅显示文本 - 没有背景或边框 [英] Google MDL - Creating card in jquery shows only text - no background or border
本文介绍了Google MDL - 在jquery中创建卡片仅显示文本 - 没有背景或边框的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有以下代码可以动态创建MDL卡
I have the following code which creates an MDL Card on the fly
var resultsHolder = $('#resultsHolder');
var gridHolder = $('<div>',{ 'class' : 'mdl-grid' });
var card = $('<div>',{ 'class' : 'mdl-card.mdl-shadow--2dp data-display' });
var title = $('<div>',{'class' : 'mdl-card__title'});
var h4 = $('<h4>');
var supportingText = $('<div>',{'class' : 'mdl-card__supporting-text'});
var supportingPara = $('<div>',{'class' : 'projectDesc'});
h4.append($('#projectName').val());
title.append(h4);
supportingPara.append($('#projectDesc').val());
supportingText.append(supportingPara);
card.css('width','100%');
card.append(title);
card.append(supportingText);
gridHolder.append(card);
resultsHolder.prepend(gridHolder);
componentHandler.upgradeElement(resultsHolder);
同时显示新卡的内容。没有出现边框或背景。
While the contents of the new card appears. None of the border or background appears.
我看到以下链接
但使用以下任何一项;
but using any of the following;
- componentHandler.upgradeDom();
- componentHandler.upgradeElement();
通过持卡人的等级 - $( '#resultsHolder')
pass the class of the card holder - $('#resultsHolder')
似乎没有什么区别。
那么如何制作我的全卡出现。
So how can I make my full card appear.
推荐答案
最终使用JQuery管理它,但使用原始JavaScript来创建元素。因此,创建卡片,标题,支持文本和操作的修订版本如下;
Eventually managed it not with JQuery but using raw JavaScript to create the elements. So a revised version which creates a card, title, supporting text and actions is as follows;
var resultsHolder = document.getElementById('resultsHolder');
var gridHolder = document.createElement('div');
var card = document.createElement('div');
var title = document.createElement('div');
var h4 = document.createElement('h4');
var supportingText = document.createElement('div');
var supportingPara = document.createElement('p');
var cardActions = document.createElement('div');
var detailButton = document.createElement('button');
try {
// assign classes
gridHolder.className = 'mdl-grid';
card.className = "mdl-card mdl-shadow--2dp data-display";
title.className = 'mdl-card__title';
supportingText.className = 'mdl-card__supporting-text';
supportingPara.className = 'projectDesc';
cardActions.className = 'mdl-card__actions mdl-card--border mdl-typography--text-right';
detailButton.className = 'mdl-button mdl-js-button mdl-js-ripple-effect';
// add special styles
card.style.width = '100%';
// card.style.opacity = '0';
// add text
h4.innerHTML = $('#projectName').val();
supportingPara.innerHTML = $('#projectDesc').val();
detailButton.innerHTML = 'Details';
// build the title
title.appendChild(h4);
// build the supporting text
supportingText.appendChild(supportingPara);
// build the actions
cardActions.appendChild(detailButton);
// build the card
card.appendChild(title);
card.appendChild(supportingText);
card.appendChild(cardActions);
gridHolder.appendChild(card);
resultsHolder.insertBefore(gridHolder,resultsHolder.firstChild);
// now upgrade components so they are handled correctly by mdl
componentHandler.upgradeDom(gridHolder);
}
catch(e) {
alert( e );
}
这篇关于Google MDL - 在jquery中创建卡片仅显示文本 - 没有背景或边框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文